/* ---------------------------------------------------------------------------
   Tech on the Radar — base stylesheet
   Plain CSS, no build step. Edit the custom properties below to re-theme.
--------------------------------------------------------------------------- */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  /* The site uses exactly three web fonts:
       Sora     — hero title
       Manrope  — hero subtitle
       Work Sans — everything else (body, headings, nav, buttons, UI) */
  --font-base: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-title: "Sora", var(--font-base);
  --font-subtitle: "Manrope", var(--font-base);
  --font-mono: "SF Mono", "Consolas", "Menlo", monospace;

  /* Back-compat aliases: older rules reference these names */
  --font-sans: var(--font-base);
  --font-serif: var(--font-base);

  /* Backgrounds */
  --color-bg: #F7F2E9;          /* main page background */
  --color-bg-alt: #EDE3D0;      /* cards, code blocks, dividers */

  /* Blue — primary / brand */
  --color-navy: #1C2B4A;        /* nav bar, headers, body text */
  --color-blue: #3B6EA5;        /* links, secondary buttons, icons */

  /* Fuchsia — accent (keyed to the hero cube's magenta) */
  --color-orange: #E12FB0;      /* CTAs, hover states, tags */
  --color-orange-soft: #F26FCB; /* hover backgrounds, badges */

  /* Neutrals */
  --color-text: #2A2A28;        /* body copy */
  --color-text-muted: #8A8172;  /* captions, metadata */
  --color-white: #FFFFFF;

  /* Semantic aliases used throughout this stylesheet */
  --color-muted: var(--color-text-muted);
  --color-accent: var(--color-blue);
  --color-border: var(--color-bg-alt);
  --color-code-bg: var(--color-bg-alt);

  --content-width: 42rem;
  --space: 1.5rem;
  --banner-height: clamp(340px, 42vw, 560px);
}

/* Web fonts (Sora, Manrope, Work Sans) are loaded via <link> in index.html <head>. */

/* 2. Reset ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img,
picture,
video {
  max-width: 100%;
  display: block;
}

/* 3. Base typography ------------------------------------------------------- */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-navy);
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-orange);
  text-decoration: none;
}

::selection {
  background: var(--color-orange);
  color: var(--color-white);
}

:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-code-bg);
  padding: 0.15em 0.35em;
  border-radius: 0;
}

pre {
  font-family: var(--font-mono);
  background: var(--color-code-bg);
  padding: var(--space);
  border-radius: 0;
  overflow-x: auto;
  font-size: 0.95rem;
  line-height: 1.5;
}

pre code {
  background: none;
  padding: 0;
}

blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space);
  color: var(--color-muted);
  font-style: italic;
  margin: var(--space) 0;
}

/* 4. Layout ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space);
}

main.container {
  padding-block: calc(var(--space) * 2.5);
}

/* 5. Header / nav ------------------------------------------------------- */
/* Nav bar */
.site-header {
  position: relative;
  z-index: 5; /* keep the overhanging logo above the section below */
  background: var(--color-bg);
  border-bottom: 3px solid var(--color-navy);
}

/* Hero: full-width photo band sitting flush under the nav bar,
   with the title text laid over it. */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  padding-inline: clamp(1.5rem, 6vw, 4rem);
  background-color: var(--color-bg);
  border-bottom: 3px solid var(--color-navy);
}

.hero-inner {
  flex: 1 1 320px;
  padding-block: calc(var(--space) * 3);
  padding-left: clamp(1rem, 10vw, 8rem);
  text-align: left;
}

.hero-visual {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  perspective: 900px;
  margin-right: clamp(1rem, 6vw, 4rem);
}

.hero-cube {
  width: 220px;
  height: 220px;
  position: relative;
  transform-style: preserve-3d;
}

.hero-cube-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 220px;
  box-sizing: border-box;
  border: 4px solid var(--color-navy);
}

@media (max-width: 56rem) {
  .hero-visual {
    display: none;
  }
}

.hero-btn {
  --btn-color: var(--color-orange);
  display: inline-block;
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--btn-color);
  background: transparent;
  border: 3px solid var(--btn-color);
  padding: 0.95rem 2.2rem;
  border-radius: 0;
}

.hero-btn:hover,
.hero-btn:focus-visible {
  color: var(--color-white);
}

.hero-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 5vw, 3.5rem);
  line-height: 1.15;
  text-wrap: balance;
}

.hero-title-lead {
  display: block;
  font-size: 1.6em; /* relative to .hero-title, so it scales with the clamp */
  line-height: 1;
  margin-left: 0;
  color: var(--color-orange);
}

.ai-letter {
  display: inline-block;
  will-change: transform, translate;
}

/* The entrance uses `transform` and the bob uses the separate `translate`
   property, so the two never fight over the same value (that hand-off was
   what made the loop look bumpy). The bob starts immediately, phase-shifted
   per letter with negative delays, and eases back and forth (alternate). */
@media (prefers-reduced-motion: no-preference) {
  .ai-letter {
    animation:
      ai-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both,
      ai-bob 1.1s ease-in-out infinite alternate;
  }
  .ai-letter:nth-child(2) { animation-delay: 0.12s, -0.35s; }
  .ai-letter:nth-child(3) { animation-delay: 0.24s, -0.7s; }

  @keyframes ai-pop {
    0%   { opacity: 0; transform: translateY(0.6em) scale(0.5) rotate(-8deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  }
  @keyframes ai-bob {
    from { translate: 0 0; }
    to   { translate: 0 -0.07em; }
  }
}

/* Sits on its own line, left edge flush under "Conversations" */
.hero-title-rest {
  display: block;
  margin-top: 0;
}

.hero-subtitle {
  margin: 1.25rem 0 0;
  font-family: var(--font-subtitle);
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-weight: 500;
  color: var(--color-text-muted);
}


.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem clamp(1.5rem, 6vw, 6rem);
  font-family: var(--font-base);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo {
  height: 68px;
  width: auto;
  display: block;
  margin-block: 0;
}

.logo-sweep {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .logo-sweep {
    animation: logo-sweep-spin 3s linear infinite;
  }
  @keyframes logo-sweep-spin {
    to { transform: rotate(360deg); }
  }
}

/* Link list */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nav-links a {
  color: var(--color-navy);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover {
  border-bottom-color: var(--color-orange);
}

.nav-links a:hover {
  color: var(--color-orange);
}

/* Right side: desktop Subscribe button + mobile toggle */
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.btn-subscribe {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: 0;
  background: var(--color-navy);
  border: 2px solid var(--color-navy);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-subscribe:hover,
.btn-subscribe:focus-visible {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-navy);
}

/* The Subscribe link that lives inside the collapsed menu — hidden on desktop */
.mobile-subscribe {
  display: none;
}

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 24px;
  margin: 0 auto;
  background: var(--color-navy);
  border-radius: 0;
}

/* ---- Mobile / narrow layout ---- */
@media (max-width: 60rem) {
  .navbar {
    flex-wrap: wrap;
    padding: 0.9rem var(--space);
  }

  .nav-toggle {
    display: flex;
  }

  .nav-right .btn-subscribe {
    display: none; /* moves into the dropdown */
  }

  .nav-links {
    flex-basis: 100%;
    order: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-top: 0;

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .nav-links.open {
    max-height: 32rem;
    margin-top: 0.75rem;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    padding: 0.6rem 0;
  }

  .mobile-subscribe {
    display: none;
  }
}

/* 5a. Moving ticker banner ------------------------------------------------- */
.ticker {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  background: var(--color-navy);
  color: var(--color-bg);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-block: 0.7rem;
  border-block: 3px solid var(--color-navy);
}

.ticker-track {
  display: inline-flex;
  animation: ticker-scroll 28s linear infinite;
}

.ticker:hover {
  background: var(--color-orange);
  color: var(--color-navy);
}

.ticker:hover .ticker-item {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ticker:hover .ticker-track {
  animation-play-state: paused;
}

.ticker-item {
  padding-inline: 1rem;
}

.ticker-dot {
  display: inline-block;
  height: 2.5em;
  width: auto;
  margin-inline: 1rem;
  vertical-align: -0.9em;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none;
    /* show a static, centered message instead of a frozen scroll */
    justify-content: center;
    width: 100%;
  }
  .ticker-item:not(:first-child) {
    display: none;
  }
}

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

/* 5c. Latest stories list -------------------------------------------------- */
.stories {
  max-width: min(95vw, 52rem);
  margin-inline: clamp(1.5rem, 6vw, 6rem) auto; /* left-aligned, not centered */
  padding-block: calc(var(--space) * 2.5);
}

@media (max-width: 48rem) {
  .stories {
    padding-bottom: calc(var(--space) * 1);
  }
}

.story-list {
  list-style: none;
  margin: 0 0 var(--space);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.story-card {
  display: flex;
  gap: var(--space);
  align-items: stretch;
  background: transparent;
  padding-bottom: var(--space);
  border-bottom: 1px solid var(--color-border);
}

.story-list .story-card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Small image on the left. Its width is fixed; its height is whatever the
   text column ends up being (driven by the ~200-char excerpt). */
.story-media {
  flex: 0 0 clamp(6rem, 22%, 11rem);
  display: block;
  border-radius: 0;
  overflow: hidden;
}

.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-body {
  flex: 1;
  min-width: 0;
  padding-block: calc(var(--space) * 0.25);
}

.story-category {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
}

.story-category a {
  color: var(--color-orange);
  text-decoration: none;
}

.story-category a:hover {
  color: var(--color-navy);
}

.story-title {
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0 0 0.35rem;
}

.story-title a {
  color: var(--color-navy);
  text-decoration: none;
}

.story-title a:hover {
  color: var(--color-orange);
}

.story-meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}

.story-excerpt {
  font-size: 20px;          /* as specified */
  line-height: 1.45;
  margin: 0;

  /* ~200 characters; clamp as a safety net so card heights stay tidy */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.btn-read-more {
  --btn-color: var(--color-navy);
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border-radius: 0;
  background: transparent;
  border: 2px solid var(--btn-color);
  color: var(--btn-color);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.btn-read-more:hover,
.btn-read-more:focus-visible {
  color: var(--color-white);
}

@media (max-width: 40rem) {
  .story-media {
    flex-basis: 6.5rem;
  }
  .story-body {
    padding: var(--space) var(--space) var(--space) 0;
  }
  .story-excerpt {
    font-size: 1rem;
  }
}

/* 5d. Newsletter block ---------------------------------------------------- */
.newsletter {
  width: 100%;
  padding: calc(var(--space) * 3) clamp(1.5rem, 6vw, 6rem);
  background: var(--color-white);
  border-block: 3px solid var(--color-navy);
  color: var(--color-text);
}

.newsletter-inner {
  max-width: 58rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
}

.newsletter-icon {
  flex: 0 0 auto;
  width: clamp(3.5rem, 9vw, 5.5rem);
  height: auto;
  display: block;
}

/* Icon sits parked off-screen left, then flies in once the panel scrolls
   into view (JS adds .is-visible). */
@media (prefers-reduced-motion: no-preference) {
  .newsletter-icon {
    opacity: 0;
    transform: translateX(-120vw);
  }

  .newsletter-icon.is-visible {
    animation: newsletter-icon-in 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes newsletter-icon-in {
    from {
      opacity: 0;
      transform: translateX(-120vw);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

.newsletter-content {
  flex: 1;
  min-width: 0;
}

@media (max-width: 40rem) {
  .newsletter-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space);
  }
}

.newsletter-title {
  color: var(--color-navy);
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

.newsletter-subtitle {
  font-family: var(--font-base);
  margin: 0 0 calc(var(--space) * 1.25);
  color: var(--color-text-muted);
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 48rem) {
  .newsletter-btn {
    margin-top: 1.25rem;
  }
}

.newsletter-input {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.85rem 1.1rem;
  border: 2px solid var(--color-navy);
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 1rem;
}

.newsletter-input::placeholder {
  color: var(--color-text-muted);
}

.newsletter-input:focus {
  outline: 2px solid var(--color-orange);
  outline-offset: 1px;
  background: var(--color-white);
}

.newsletter-btn {
  flex: 0 0 auto;
  padding: 0.85rem 1.8rem;
  border: 2px solid var(--color-blue);
  border-radius: 0;
  background: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.newsletter-btn:hover,
.newsletter-btn:focus-visible {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

/* 5b. Featured section ------------------------------------------------------ */
.featured {
  max-width: min(95vw, 78rem);
  margin-inline: auto; /* centered */
  padding-block: calc(var(--space) * 3);
}

.section-heading {
  font-family: var(--font-base);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: var(--space);
}

/* Image column width — the two numbers must sum to 100% */
.featured-card {
  --img-col: 36%;

  position: relative;
  background: var(--color-white);
  border: 3px solid var(--color-navy);
  border-radius: 0;
  overflow: hidden;
}

/* The image sits in normal flow on the right; ITS aspect-ratio sets the
   card's height. Displayed width = --img-col of the card. */
.featured-media {
  margin-left: calc(100% - var(--img-col));
  width: var(--img-col);
  aspect-ratio: 4 / 5;      /* the height knob: 4/5 portrait */
}

.featured-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text overlays the remaining left area, clipped to the card height */
.featured-body {
  position: absolute;
  inset: 0;
  right: var(--img-col);
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
}

@media (max-width: 48rem) {
  .featured-media {
    margin-left: 0;
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  .featured-body {
    position: static;
    inset: auto;
    right: auto;
  }
}

.featured-kicker {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 0.5rem;
}

.featured-title {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

.featured-title a {
  color: var(--color-navy);
  text-decoration: none;
}

.featured-title a:hover {
  color: var(--color-orange);
}

.featured-meta {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.9rem;
}

.featured-excerpt {
  margin-bottom: var(--space);
  max-width: 42rem;

  /* Fill the leftover column height; clip any overflow with a soft fade
     so a long (up to ~200-word) excerpt always ends at the same place. */
  flex: 1;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

.btn-read-now {
  --btn-color: var(--color-orange);
  display: inline-block;
  align-self: flex-start;
  margin-top: auto; /* pinned to the bottom of the fixed-height column */
  padding: 0.75rem 1.7rem;
  border-radius: 0;
  background: transparent;
  border: 2px solid var(--btn-color);
  color: var(--btn-color);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.btn-read-now:hover,
.btn-read-now:focus-visible {
  color: var(--color-white);
}

/* 6. Post list ------------------------------------------------------------- */
.post-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 2);
}

.post-card + .post-card {
  border-top: 1px solid var(--color-border);
  padding-top: calc(var(--space) * 2);
}

.post-card-title {
  font-size: 1.6rem;
  margin: 0.25rem 0 0.5rem;
}

.post-card-title a {
  color: var(--color-navy);
  text-decoration: none;
}

.post-card-title a:hover {
  color: var(--color-orange);
}

.post-meta {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-muted);
  letter-spacing: 0.01em;
}

.post-excerpt {
  margin: 0.5rem 0 0.75rem;
}

.read-more {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--color-orange);
}

.read-more:hover {
  text-decoration: underline;
}

/* 7. Single post ------------------------------------------------------------- */
.post-title {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}

.post > * + * {
  margin-top: var(--space);
}

.post h2 {
  font-size: 1.5rem;
  margin-top: calc(var(--space) * 1.5);
}

.post h3 {
  font-size: 1.2rem;
  margin-top: var(--space);
}

/* 8. Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--color-bg);
  border-top: 2px solid var(--color-navy);
  color: var(--color-text-muted);
  font-family: var(--font-base);
  font-size: 0.9rem;
}

/* The newsletter band already has a bottom border; avoid doubling it up
   right where the two sections touch (home page only). */
.newsletter + .site-footer {
  border-top: 0;
}

.footer-inner {
  max-width: 72rem;
  margin-inline: auto;
  padding: calc(var(--space) * 2.5) clamp(1.5rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: var(--space) calc(var(--space) * 2);
  align-items: start;
}

.footer-logo img {
  height: 110px;
  width: auto;
  margin-block: -19px; /* same trick as the nav logo: overhang without
                          growing the footer row */
}

.footer-tagline {
  margin: 0.9rem 0 0;
  max-width: 22rem;
  line-height: 1.5;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.footer-nav a,
.footer-bottom a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--color-navy);
}

.footer-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.75rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--color-navy);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.footer-social a:hover {
  background: var(--color-orange);
  color: var(--color-white);
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding: var(--space) clamp(1.5rem, 6vw, 6rem);
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.footer-bottom p {
  margin: 0;
}

@media (max-width: 48rem) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: calc(var(--space) * 1.5);
  }
}

/* 8b. Button fill-reveal animation --------------------------------------- */
/* Buttons are outline-only at rest; on hover/focus their colour wipes in
   from the left to fill the pill (text flips to white via the rules above). */
.hero-btn,
.btn-read-now,
.btn-read-more{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-btn::after,
.btn-read-now::after,
.btn-read-more::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0;
  background: var(--btn-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.hero-btn:hover::after,
.hero-btn:focus-visible::after,
.btn-read-now:hover::after,
.btn-read-now:focus-visible::after,
.btn-read-more:hover::after,
.btn-read-more:focus-visible::after{
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-btn::after,
  .btn-read-now::after,
  .btn-read-more::after{
    transition: opacity 0.15s ease;
    transform: scaleX(1);
    opacity: 0;
  }
  .hero-btn:hover::after,
  .hero-btn:focus-visible::after,
  .btn-read-now:hover::after,
  .btn-read-now:focus-visible::after,
  .btn-read-more:hover::after,
  .btn-read-more:focus-visible::after{
    opacity: 1;
  }
}

/* 8e. Story / article page ---------------------------------------------- */
.article-layout {
  max-width: min(95vw, 72rem);
  margin-inline: auto;
  padding: calc(var(--space) * 2.5) clamp(1.5rem, 6vw, 4rem) calc(var(--space) * 4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.article-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.article-eyebrow a {
  color: var(--color-orange);
  text-decoration: none;
}

.article-title {
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.article-meta {
  font-family: var(--font-base);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space);
}

.article-author {
  color: var(--color-navy);
  font-weight: 600;
}

/* Image on top */
.article-lead {
  margin: 0 0 calc(var(--space) * 1.5);
}

.article-lead img {
  width: 100%;
  height: auto;
  border-radius: 0;
  display: block;
}

.article-lead figcaption {
  font-family: var(--font-base);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}

/* Text below */
.article-body {
  font-size: 1.15rem;
  line-height: 1.75;
}

.article-body > * + * {
  margin-top: 1.1em;
}

.article-body h2 {
  font-family: var(--font-title);
  font-size: 1.5rem;
  line-height: 1.25;
  margin-top: 2rem;
}

.article-body blockquote {
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--color-orange);
  font-style: italic;
  color: var(--color-navy);
}

.article-back {
  margin-top: calc(var(--space) * 2);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.article-back a {
  color: var(--color-blue);
  text-decoration: none;
}

/* Right-hand vertical list of other articles */
.article-aside {
  border-left: 2px solid var(--color-navy);
  padding-left: var(--space);
}

.aside-heading {
  font-family: var(--font-base);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin: 0 0 var(--space);
}

.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.related-item + .related-item {
  border-top: 1px solid var(--color-border);
}

.related-item a {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 0;
  text-decoration: none;
}

.related-thumb {
  flex: 0 0 3.25rem;
  width: 3.25rem;
  height: 3.25rem;
  object-fit: cover;
  border-radius: 0;
}

.related-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.related-cat {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.related-title {
  font-family: var(--font-base);
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--color-navy);
}

.related-item a:hover .related-title {
  color: var(--color-orange);
}

@media (max-width: 56rem) {
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-aside {
    border-left: 0;
    border-top: 2px solid var(--color-navy);
    padding-left: 0;
    padding-top: var(--space);
  }
}

/* 8f. Page copy (Services / About) ------------------------------------- */
.page {
  max-width: min(95vw, 52rem);
  margin-inline: auto;
  padding: calc(var(--space) * 2.5) clamp(1.5rem, 6vw, 4rem) calc(var(--space) * 4);
}

.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin: 0 0 0.6rem;
}

.page-title {
  font-family: var(--font-title);
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.12;
  margin: 0 0 0.9rem;
}

.page-intro {
  font-family: var(--font-subtitle);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 42rem;
  margin: 0 0 calc(var(--space) * 1.5);
}

.page-body {
  font-size: 1.1rem;
  line-height: 1.75;
}

.page-body > * + * {
  margin-top: 1.1em;
}

.page-body h2 {
  font-family: var(--font-title);
  font-size: 1.5rem;
  line-height: 1.25;
  margin-top: 2rem;
}

.page-body a {
  color: var(--color-blue);
}

/* About — alternating text/image rows (top: text left, image right;
   bottom: image left, text right; achieved by swapping DOM order per row,
   which also gives a sensible stacking order on mobile). */
/* Full-bleed section: breaks out of the centred .page column to span the
   full viewport width, regardless of the parent's max-width/padding. */
.page-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding-block: calc(var(--space) * 2.5) calc(var(--space) * 2.5);
  border-bottom: 3px solid var(--color-navy);
}

.page-hero-inner {
  max-width: min(95vw, 56rem);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 6vw, 4rem);
  text-align: left;
}

.about-row {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding-block: calc(var(--space) * 2.5);
}

.about-row-alt {
  background: var(--color-bg-alt);
}

.about-row-inner {
  max-width: min(95vw, 78rem);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 6vw, 4rem);
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3rem);
}

.about-row-text {
  flex: 1 1 55%;
  min-width: 0;
}

.about-row-text > h2:first-child {
  margin-top: 0;
}

.about-row-media {
  flex: 1 1 40%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  border: 3px solid var(--color-navy);
  border-radius: 0;
  padding: calc(var(--space) * 1.5);
}

.about-row-alt .about-row-media {
  background: var(--color-white);
}

.about-row-media img {
  width: 100%;
  max-width: 15rem;
  height: auto;
}

@media (max-width: 42rem) {
  .about-row-inner {
    flex-direction: column;
  }

  .about-row-media {
    width: 100%;
  }
}

/* Services — the three numbered blocks */
/* Full-bleed wrapper for the five detailed step blocks (same trick as
   .page-hero / .about-row: breaks out of the centred .page column). */
.service-list-full {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding-block: calc(var(--space) * 3) 0;
}

.service-list-inner {
  max-width: min(95vw, 78rem);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 6vw, 4rem);
}

.service-list-blocks {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each step: a heading column (number + title) and a text column,
   swapping sides on alternate steps so the list reads left-right-left-right. */
.service-block {
  display: grid;
  grid-template-columns: minmax(11rem, 30%) 1fr;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
  padding: calc(var(--space) * 2) 0;
  border-top: 2px solid var(--color-navy);
}

.service-block:nth-of-type(even) {
  /* flip the track sizes too, not just which child sits where, so the
     heading's column stays narrow and the text's column stays wide */
  grid-template-columns: 1fr minmax(11rem, 30%);
}

.service-block:nth-of-type(even) .service-heading {
  grid-column: 2;
  grid-row: 1;
}

.service-block:nth-of-type(even) .service-text {
  grid-column: 1;
  grid-row: 1;
}

/* The number dominates the heading block; the title sits underneath it,
   much smaller, both filling the full height of the column. */
.service-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.25rem;
}

.service-num {
  font-family: var(--font-title);
  font-size: clamp(5.5rem, 13vw, 9rem);
  font-weight: 800;
  line-height: 0.85;
  color: var(--color-orange);
}

.service-heading h2 {
  font-family: var(--font-title);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: var(--color-navy);
}

.service-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-text p {
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0 0 0.9rem;
}

.service-points {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.service-points li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.5;
}

.service-points li::before {
  content: "\2192"; /* → */
  position: absolute;
  left: 0;
  color: var(--color-blue);
  font-weight: 700;
}

.service-who {
  margin-top: 0;
  padding-top: var(--space);
  border-top: 2px solid var(--color-navy);
}

.page-tight-top {
  padding-top: 0;
}

.page-tight-bottom {
  padding-bottom: 0;
}

.page.page-full-text {
  max-width: none;
}

.page-full-text .page-body {
  text-align: center;
}

.roadmap-intro {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  line-height: 1.4;
  color: var(--color-orange);
}

/* Roadmap visual: the five stages as a connected chain of steps.
   Supports the detailed .service-block copy that follows it. */
.roadmap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 0.5rem;
  margin: calc(var(--space) * 2) 0 0;
  padding: calc(var(--space) * 2) calc(var(--space) * 1.5) 0;
  border-radius: 0;
}

.roadmap-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 0;
  min-width: 8rem;
}

.roadmap-num {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
}

.roadmap-label {
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--color-navy);
  font-size: 1.2rem;
  margin-bottom: 0.35rem;
}

.roadmap-desc {
  font-family: var(--font-base);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.roadmap-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  margin-top: 1.9rem;
  color: var(--color-blue);
  font-weight: 700;
  font-size: 1.8rem;
}

.roadmap-note {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 0 !important;
}

/* Services — contact panel */
.contact-block {
  margin-top: calc(var(--space) * 3);
  padding: calc(var(--space) * 2);
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: 0;
}

.contact-block h2 {
  font-family: var(--font-title);
  color: var(--color-white);
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  margin: 0 0 0.75rem;
}

.contact-block p {
  line-height: 1.7;
  margin: 0 0 0.75rem;
}

.contact-links {
  font-family: var(--font-base);
  font-weight: 600;
  margin-top: var(--space) !important;
}

.contact-links a {
  margin-right: 0.4rem;
}

.contact-links span {
  margin-right: 0.4rem;
}

#about-contact .contact-links,
#contact .contact-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Newsletter signup popup (Brevo form). IDs used here on purpose: pages
   with decorative swirls (.has-swirls) force position:relative on every
   direct child of <body> with a more specific selector than a single
   class, which was silently breaking position:fixed on the overlay. */
#brevoModalOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28, 43, 74, 0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

#brevoModalOverlay.open {
  display: flex;
}

#brevoModalOverlay .entry__field,
#brevoModalOverlay .form__entry,
#brevoModalOverlay .form__label-row {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.brevo-modal-box {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
}

.brevo-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-navy);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-navy);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.brevo-modal-close:hover {
  background: var(--color-orange);
  color: var(--color-white);
  border-color: var(--color-orange);
}

body.no-scroll {
  overflow: hidden;
}

.contact-line {
  position: relative;
  padding-left: 1rem;
}

.contact-line::before {
  content: "\00B7";
  position: absolute;
  left: 0;
}

.contact-links a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.contact-links a:hover {
  color: var(--color-orange-soft);
}

/* Services — booking / calendar */
.booking {
  margin-top: calc(var(--space) * 3);
}

.booking-heading {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  margin: 0 0 0.4rem;
}

.booking-sub {
  font-family: var(--font-base);
  color: var(--color-text-muted);
  margin: 0 0 var(--space);
}

.calendly-inline-widget {
  border: 2px solid var(--color-navy);
  border-radius: 0;
  overflow: hidden;
  background: var(--color-white);
}

@media (max-width: 34rem) {
  .service-block,
  .service-block:nth-of-type(even) {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }

  .service-block:nth-of-type(even) .service-heading,
  .service-block:nth-of-type(even) .service-text {
    grid-column: 1;
    grid-row: auto;
  }
}

/* 8c. Blog / category listing page -------------------------------------- */
.blog {
  max-width: min(95vw, 56rem);
  margin-inline: auto;
  padding: calc(var(--space) * 2.5) clamp(1.5rem, 6vw, 4rem) calc(var(--space) * 4);
}

.blog-head {
  margin-bottom: calc(var(--space) * 2.5);
  padding-bottom: var(--space);
  border-bottom: 3px solid var(--color-navy);
}

.blog-title {
  font-family: var(--font-title);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
}

.blog-intro {
  font-family: var(--font-base);
  color: var(--color-text-muted);
  margin: 0.5rem 0 1.25rem;
}

.blog-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.blog-jump a {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-navy);
  padding: 0.35rem 0.9rem;
  border: 2px solid var(--color-navy);
  border-radius: 0;
}

.blog-jump a:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
}

.category-block {
  margin-bottom: calc(var(--space) * 3);
  scroll-margin-top: 2rem;
}

.category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: var(--space);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-navy);
}

.category-title {
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 4vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
}

.category-all {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-orange);
  white-space: nowrap;
}

.category-all:hover {
  color: var(--color-navy);
}

/* 8d. Category page (AI News / Featured / Opinion / Trending) ------------ */
.cat-hero {
  position: relative;
  background: transparent;
  border-bottom: 3px solid var(--color-navy);
}

/* Decorative image sits in the page background behind the top-right;
   the transparent nav bar and hero text render over it. */
.category-page {
  background-image: url("assets/cat-hero.png");
  background-repeat: no-repeat;
  background-position: right clamp(-6rem, -5vw, -1.5rem) top clamp(-2rem, -1.5vw, 0rem);
  background-size: clamp(18rem, 46vw, 46rem) auto;
  background-attachment: scroll;
}

.category-page .site-header,
.category-page .cat-hero,
.category-page .page-hero {
  background: transparent;
}

.cat-hero-inner {
  position: relative;
  z-index: 2;
  max-width: min(95vw, 56rem);
  margin-inline: auto;
  padding: calc(var(--space) * 3) clamp(1.5rem, 6vw, 4rem);
}

@media (max-width: 40rem) {
  .category-page {
    background-size: 16rem auto;
    background-position: right -3rem top 0;
  }
  .cat-hero-desc {
    max-width: 20rem;
  }
}

.cat-hero-kicker {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin: 0 0 0.5rem;
}

.cat-hero-title {
  font-family: var(--font-title);
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  line-height: 1.1;
  margin: 0;
}

.cat-hero-desc {
  font-family: var(--font-subtitle);
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  color: var(--color-text-muted);
  max-width: 40rem;
  margin: 0.75rem 0 0;
}

.cat-main {
  max-width: min(95vw, 56rem);
  margin-inline: auto;
  padding: calc(var(--space) * 2.5) clamp(1.5rem, 6vw, 4rem) calc(var(--space) * 4);
}

.cat-count {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space);
}

/* Pagination (5 stories per page) */
.story-card[hidden] {
  display: none;
}

.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: calc(var(--space) * 1.5);
}

.page-controls {
  display: flex;
  gap: 0.5rem;
}

.pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--color-blue);
  border-radius: 0;
  background: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pagination button:hover:not(:disabled),
.pagination button:focus-visible:not(:disabled) {
  background: var(--color-navy);
  border-color: var(--color-navy);
}

.pagination button:disabled {
  opacity: 0.35;
  cursor: default;
}

.page-status {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* 9. Small screens ------------------------------------------------------------- */
@media (max-width: 30rem) {
  body { font-size: 1.05rem; }
  .post-card-title { font-size: 1.35rem; }
  .post-title { font-size: 1.8rem; }
}

/* ===== Home: long scroll layout ================================== */

/* Vintage photo treatment: warm sepia, a soft fuchsia wash, and film grain */
.photo-vintage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.photo-vintage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.38) saturate(1.05) contrast(0.96) brightness(1.02);
}

.photo-vintage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(225, 47, 176, 0.22), rgba(237, 227, 208, 0.3));
  mix-blend-mode: multiply;
}

.photo-vintage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>");
}

.h-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-orange);
  margin: 0 0 1rem;
}

.h-eyebrow-light {
  color: var(--color-bg);
}

/* Scroll-reveal (only hidden when JS is running and motion is allowed) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .js .reveal.in {
    opacity: 1;
    transform: none;
  }
}

/* Statement: words light up as you scroll */
.h-statement {
  position: relative;
  height: 230vh;
  border-bottom: 3px solid var(--color-navy);
}

.h-statement-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: clamp(1.5rem, 8vw, 8rem);
}

.h-statement-text {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.6vw, 4rem);
  line-height: 1.2;
  max-width: 26em;
  color: var(--color-navy);
  margin: 0;
}

.h-word {
  transition: opacity 0.35s ease, color 0.35s ease;
}

.js .h-word {
  opacity: 0.18;
}

.js .h-word.on {
  opacity: 1;
}

.h-word.h-em.on {
  color: var(--color-orange);
}

/* Full-bleed parallax photo band */
.h-band {
  height: 78vh;
  min-height: 24rem;
  border-bottom: 3px solid var(--color-navy);
  display: grid;
  place-items: center;
}

.h-band img {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  transform: scale(1.18);
  will-change: transform;
}

.h-band::before {
  z-index: 1;
  background: linear-gradient(135deg, rgba(28, 43, 74, 0.55), rgba(225, 47, 176, 0.25));
}

.h-band-text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: 1.5rem;
}

.h-band-text h2 {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(2.4rem, 8vw, 6.5rem);
  line-height: 1.05;
  color: var(--color-bg);
  margin: 0;
}

@media (max-width: 48rem) {
  .h-band {
    height: 32vh;
    min-height: 14rem;
  }
  .h-band-text {
    margin-bottom: 0.5rem;
  }
}

/* Process: stacking sticky cards */
.h-process {
  padding: calc(var(--space) * 4) clamp(1.5rem, 6vw, 4rem) calc(var(--space) * 3);
}

@media (max-width: 48rem) {
  .h-process {
    padding-top: calc(var(--space) * 0.15);
  }
}

.h-process-head {
  max-width: 44rem;
  margin: 0 auto calc(var(--space) * 2.5);
  text-align: center;
}

.h-process-head h2 {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0;
}

.h-stack {
  max-width: 62rem;
  margin: 0 auto;
}

.h-card {
  position: sticky;
  top: calc(5.5rem + var(--i) * 1.1rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: min(30rem, 72vh);
  margin-bottom: 38vh;
  background: var(--color-bg-alt);
  border: 3px solid var(--color-navy);
  transform-origin: top center;
  will-change: transform;
}

.h-card:last-child {
  margin-bottom: 0;
}

.h-card-alt {
  background: var(--color-bg);
}

.h-card-text {
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.h-card-num {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 0.85;
  color: var(--color-orange);
}

.h-card-text h3 {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0.6rem 0 0.75rem;
}

.h-card-text p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.h-card-link {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 2px solid var(--color-orange);
  padding-bottom: 2px;
}

.h-card-photo {
  border-left: 3px solid var(--color-navy);
}

@media (max-width: 48rem) {
  .h-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 12rem;
    height: auto;
    min-height: 26rem;
    margin-bottom: 22vh;
  }
  .h-card-photo {
    border-left: 0;
    border-top: 3px solid var(--color-navy);
  }
}

/* Big marquee between sections */
.h-marquee {
  overflow: hidden;
  white-space: nowrap;
  border-block: 3px solid var(--color-navy);
  background: var(--color-bg);
  padding-block: 0.75rem;
}

.h-marquee-track {
  display: inline-flex;
  animation: h-marquee-scroll 32s linear infinite;
}

.h-marquee-track span {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-navy);
  padding-right: 1.5rem;
}

.h-marquee-track b {
  color: var(--color-orange);
  -webkit-text-stroke: 0;
}

@keyframes h-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .h-marquee-track {
    animation: none;
  }
}

/* Closing call to action over a photo */
.h-cta {
  min-height: 72vh;
  display: grid;
  place-items: center;
  text-align: center;
  border-block: 3px solid var(--color-navy);
}

.h-cta img {
  position: absolute;
  inset: 0;
}

.h-cta::before {
  z-index: 1;
  background: linear-gradient(180deg, rgba(28, 43, 74, 0.62), rgba(28, 43, 74, 0.78));
  mix-blend-mode: normal;
}

.h-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 40rem;
  padding: 2rem 1.5rem;
  color: var(--color-bg);
}

.h-cta-inner h2 {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1.08;
  color: var(--color-bg);
  margin: 0 0 1rem;
}

.h-cta-inner p {
  color: var(--color-bg);
}

.h-cta-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.95rem 2.2rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--color-navy);
  background: var(--color-orange);
  border: 3px solid var(--color-bg);
}

.h-cta-btn:hover,
.h-cta-btn:focus-visible {
  background: var(--color-bg);
  color: var(--color-navy);
}

/* ===== Featured story as a book page ============================= */
.h-book-section {
  position: relative;
  height: 240vh;
}

.h-book-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4.5rem clamp(1rem, 4vw, 3rem) 2rem;
}

.h-book-heading {
  width: min(64rem, 100%);
  margin: 0 auto 1.25rem;
}

.h-book {
  position: relative;
  width: min(64rem, 100%);
  height: min(32rem, 66vh);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  perspective: 2200px;
}

.h-book-right {
  grid-column: 2;
  min-height: 0;
  overflow: hidden;
  display: flex;
  padding: 1rem 0.9rem 1rem 0;
  background: var(--color-white);
  border: 3px solid var(--color-navy);
  border-radius: 0;
}

.h-book-excerpt {
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.h-book-excerpt p {
  margin: 0 0 0.9rem;
}

.h-book-leaf {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  transform-origin: right center;
  transform-style: preserve-3d;
  z-index: 3;
}

@media (prefers-reduced-motion: no-preference) {
  .js .h-book-leaf {
    transform: rotateY(180deg);
  }
}

.h-book-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 3px solid var(--color-navy);
  border-radius: 0;
}

.h-book-back {
  transform: rotateY(180deg);
  background: var(--color-orange);
  color: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0;
}

.h-book-back-mark {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.6rem);
  text-transform: uppercase;
}

.h-book-back-sub {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 48rem) {
  .h-book-section {
    height: auto;
    padding-block: 2rem;
  }
  .h-book-sticky {
    position: static;
    height: auto;
    padding: 0 1.25rem;
  }
  .h-book {
    height: 22rem;
    grid-template-columns: 1fr;
    grid-template-rows: 11rem minmax(0, 1fr);
    perspective: none;
  }
  .h-book-leaf {
    position: relative;
    width: 100%;
    height: 11rem;
    transform: none !important;
  }
  .h-book-back {
    display: none;
  }
  .h-book-face {
    border-radius: 0;
  }
  .h-book-right {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    border-radius: 0;
  }
}

/* ===== Newsletter band: beige like the rest of the site =========== */
.newsletter {
  background: var(--color-bg);
}

/* ===== Softer, rounder borders ==================================== */
:root {
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 999px;
}

.btn-subscribe,
.hero-btn,
.btn-read-now,
.btn-read-more,
.newsletter-btn,
.newsletter-input,
.h-cta-btn,
.blog-jump a,
.footer-social a,
.roadmap-num {
  border-radius: var(--r-pill);
}

.pagination button {
  border-radius: var(--r-md);
}

.story-media,
.story-media img,
.about-row-media,
.calendly-inline-widget,
.contact-block,
.article-lead img,
.service-heading {
  border-radius: var(--r-lg);
}

.related-thumb,
code,
pre {
  border-radius: var(--r-sm);
}

.h-card {
  border-radius: var(--r-lg);
  overflow: hidden;
}

.hero-cube-face {
  border-radius: 0;
}

/* Buttons: label centered both ways */
.btn-read-now,
.btn-read-more,
.hero-btn,
.h-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

.h-book-right .btn-read-now {
  margin-top: 0.5rem;
}

.contact-block .h-cta-btn {
  padding: 0.85rem 1.9rem;
  font-size: 0.92rem;
}

@media (prefers-reduced-motion: no-preference) {
  .contact-block .h-cta-btn {
    animation: contact-cta-pulse 2.2s ease-out infinite;
  }
  .contact-block .h-cta-btn:hover,
  .contact-block .h-cta-btn:focus-visible {
    animation-play-state: paused;
  }
  @keyframes contact-cta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(225, 47, 176, 0.55); transform: scale(1); }
    50%  { transform: scale(1.04); }
    70%  { box-shadow: 0 0 0 16px rgba(225, 47, 176, 0); }
    100% { box-shadow: 0 0 0 0 rgba(225, 47, 176, 0); transform: scale(1); }
  }
}

/* Book text: the scrollbar lives on the inner container so it sits inside
   the border, clear of the rounded corners. */
.h-book-scroll {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-orange) transparent;
  padding: 0.5rem clamp(1rem, 2.5vw, 1.75rem) 0.5rem clamp(1.25rem, 3.5vw, 2.5rem);
}

/* Newsletter: paper plane icon that flies a looping path (SMIL), and a
   pulsing Subscribe button. */
svg.newsletter-icon {
  width: clamp(10rem, 28vw, 17rem);
  height: auto;
  overflow: visible;
}

.plane-still {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .plane-fly {
    display: none;
  }
  .plane-still {
    display: inline;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .newsletter-btn {
    animation: newsletter-pulse 2.2s ease-out infinite;
  }
  .newsletter-btn:hover,
  .newsletter-btn:focus-visible {
    animation-play-state: paused;
  }
  @keyframes newsletter-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(225, 47, 176, 0.55); transform: scale(1); }
    50%  { transform: scale(1.04); }
    70%  { box-shadow: 0 0 0 16px rgba(225, 47, 176, 0); }
    100% { box-shadow: 0 0 0 0 rgba(225, 47, 176, 0); transform: scale(1); }
  }
}

/* Newsletter flight: a dotted line drawn from the left edge to the Subscribe
   button, with a paper plane that follows it and vanishes at the button. */
.newsletter {
  position: relative;
  overflow: hidden;
}

@media (max-width: 48rem) {
  svg.newsletter-icon,
  svg.newsletter-flight {
    display: none;
  }
  .newsletter-btn {
    animation: none;
  }
}

svg.newsletter-flight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}

.newsletter-btn.is-hit {
  animation: newsletter-hit 0.5s ease-out 1;
}

@keyframes newsletter-hit {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(225, 47, 176, 0.8); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1);    box-shadow: 0 0 0 22px rgba(225, 47, 176, 0); }
}

/* Clean, unfiltered photos for the stacked cards: bright and natural. */
.photo-clear {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.photo-clear img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The plane passes behind the Subscribe button and disappears there. */
.newsletter-btn {
  position: relative;
  z-index: 4;
}



/* ===== Stacked cards section: wide white ribbon swirls behind, the same
   flowing ribbon shape as the decorative image on the Featured page ===== */
.h-process {
  position: relative;
}

.process-swirls {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.process-swirls svg {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
}

.h-process-head,
.h-stack {
  position: relative;
  z-index: 1;
}

.process-swirls .rib-edge,
.process-swirls .rib-fill {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-swirls .rib-edge {
  stroke: var(--color-bg-alt);
  stroke-width: 150;
}

.process-swirls .rib-fill {
  stroke: #ffffff;
  stroke-width: 140;
}

.rib-sway-a,
.rib-sway-b {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .rib-sway-a { animation: rib-sway 16s ease-in-out infinite alternate; }
  .rib-sway-b { animation: rib-sway 20s ease-in-out infinite alternate-reverse; }

  @keyframes rib-sway {
    from { transform: translateY(-34px) rotate(-2deg); }
    to   { transform: translateY(34px) rotate(2deg); }
  }
}


/* ===== Buttons always keep a solid navy border, in every state ===== */
.btn-subscribe,
.hero-btn,
.btn-read-now,
.btn-read-more,
.newsletter-btn,
.blog-jump a,
.pagination button,
.footer-social a,
.btn-subscribe:hover,
.btn-subscribe:focus-visible,
.hero-btn:hover,
.hero-btn:focus-visible,
.btn-read-now:hover,
.btn-read-now:focus-visible,
.btn-read-more:hover,
.btn-read-more:focus-visible,
.newsletter-btn:hover,
.newsletter-btn:focus-visible,
.blog-jump a:hover,
.pagination button:hover:not(:disabled),
.pagination button:focus-visible:not(:disabled) {
  border: 3px solid var(--color-navy);
}

/* On the sunset photo the navy would disappear, so the CTA keeps a beige border */
.h-cta-btn,
.h-cta-btn:hover,
.h-cta-btn:focus-visible {
  border: 3px solid var(--color-bg);
}

/* ===== Buttons are filled at rest; hover wipes in the opposite colour ===== */
.hero-btn,
.btn-read-now {
  --btn-color: var(--color-orange);
  --btn-wipe: var(--color-navy);
  background: var(--btn-color);
  color: var(--color-white);
}

.btn-read-more,
.blog-jump a {
  --btn-color: var(--color-navy);
  --btn-wipe: var(--color-orange);
  background: var(--btn-color);
  color: var(--color-bg);
}

.hero-btn::after,
.btn-read-now::after,
.btn-read-more::after {
  background: var(--btn-wipe);
}

.hero-btn:hover,
.hero-btn:focus-visible,
.btn-read-now:hover,
.btn-read-now:focus-visible {
  color: var(--color-bg);
}

.btn-read-more:hover,
.btn-read-more:focus-visible {
  color: var(--color-white);
}

.blog-jump a:hover,
.blog-jump a:focus-visible {
  background: var(--color-orange);
  color: var(--color-white);
}

.footer-social a {
  background: var(--color-navy);
  color: var(--color-bg);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  background: var(--color-orange);
  color: var(--color-white);
}

/* The wipe overshoots the border box a little, and once it has finished the
   button itself takes the wipe colour, so no sliver can show at the pill ends. */
.hero-btn::after,
.btn-read-now::after,
.btn-read-more::after {
  inset: -3px;
  border-radius: inherit;
}

.hero-btn:hover,
.hero-btn:focus-visible,
.btn-read-now:hover,
.btn-read-now:focus-visible,
.btn-read-more:hover,
.btn-read-more:focus-visible {
  background: var(--btn-wipe);
  transition: background 0s linear 0.3s;
}

/* ===== Hero cube: a word (or the logo) on every face ===== */
.hero-cube-face {
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.hero-cube-face span {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: 0.02em;
  line-height: 1;
}

.hero-cube-face svg {
  width: 145px;
  height: 145px;
}

/* ===== Site name next to the logo, fades in from left to right ===== */
.nav-logo {
  gap: 0.85rem;
}

.site-name {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-navy);
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .site-name {
    animation: site-name-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
  }
  @keyframes site-name-in {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
  }
}

@media (max-width: 30rem) {
  .site-name {
    display: none;
  }
}

/* Site name set like the original logo: a large "Tech" over a small,
   widely spaced "on the radar", in a rounded, squarish grotesque. */
.site-name {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  font-family: "Rubik", var(--font-base);
  letter-spacing: normal;
  line-height: 1;
}

.site-name-main {
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: 0.14em;
  line-height: 0.9;
  margin-right: -0.14em;
}

.site-name-sub {
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  line-height: 1;
}

/* No underline on the logo link (the global link underline showed under the name) */
.nav-logo,
.nav-logo:hover,
.nav-logo:focus-visible {
  text-decoration: none;
}


/* Hero title: "AI solutions" over "that fit your business."
   Every letter pops in and bobs like the original "AI.", one after the other. */
.hero-title-lead {
  font-size: 1.4em;
}

.hero-word {
  display: inline-block;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-title-lead .ai-letter {
    animation-delay: calc(var(--n) * 0.07s), calc(var(--n) * -0.35s);
  }
}

/* "solutions" only pops in; the bob stays on "AI". */
@media (prefers-reduced-motion: no-preference) {
  .hero-title-lead .hero-word .ai-letter {
    animation: ai-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--n) * 0.07s) both;
  }
}

/* ===== Services: five stage cards that slide sideways as you scroll ===== */
.svc-track {
  position: relative;
  margin-top: calc(var(--space) * 3);
}

/* Default (mobile, reduced motion, no JS): a normal stacked list */
.svc-row {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-inline: clamp(1.5rem, 6vw, 4rem);
}

.svc-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  background: var(--color-bg-alt);
  border: 3px solid var(--color-navy);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.svc-card-alt {
  background: var(--color-bg);
}

.svc-text {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  min-width: 0;
  overflow: auto;
}

.svc-num {
  display: block;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(3.2rem, 7vw, 5.5rem);
  line-height: 0.85;
  color: var(--color-orange);
}

.svc-text h2 {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0.5rem 0 0.9rem;
}

.svc-text .service-text p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

.svc-text .service-points {
  margin-top: 0.75rem;
}

.svc-text .service-points li {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.svc-photo {
  border-left: 3px solid var(--color-navy);
  min-height: 12rem;
}

.svc-progress {
  display: none;
}

@media (max-width: 48rem) {
  .svc-card {
    grid-template-columns: 1fr;
  }
  .svc-photo {
    order: -1;
    border-left: 0;
    border-bottom: 3px solid var(--color-navy);
    height: 12rem;
  }
}

/* Pinned, horizontal mode (switched on by script) */
.svc-track.svc-h .svc-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  padding-top: 2rem;
  padding-bottom: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}

.svc-track.svc-h .svc-row {
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: row;
  align-items: stretch;
  gap: 2rem;
  width: max-content;
  padding-inline: 7vw;
  will-change: transform;
}

.svc-track.svc-h .svc-card {
  flex: 0 0 min(70rem, 86vw);
  max-height: 100%;
}

.svc-track.svc-h .svc-text {
  scrollbar-width: thin;
}

.svc-track.svc-h .svc-text .service-text p {
  font-size: clamp(0.82rem, 1.75vh, 1rem);
  line-height: 1.5;
}

.svc-track.svc-h .svc-text .service-points li {
  font-size: clamp(0.8rem, 1.65vh, 0.95rem);
}

.svc-track.svc-h .svc-photo {
  min-height: 0;
}

.svc-track.svc-h .svc-progress {
  display: block;
  flex: 0 0 auto;
  height: 0.75rem;
  margin-inline: 7vw;
  border: 3px solid var(--color-navy);
  background: var(--color-bg);
}

.svc-progress span {
  display: block;
  height: 100%;
  background: var(--color-orange);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

/* Services cards: brutalist bullet points (navy outline, white inside) and larger text */
.svc-text .service-text p {
  font-size: 1.15rem;
  line-height: 1.6;
}

.svc-text .service-points {
  margin-top: 1rem;
}

.svc-text .service-points li {
  padding: 0.7rem 0.9rem 0.7rem 2.4rem;
  margin-bottom: 0.6rem;
  background: var(--color-white);
  border: 3px solid var(--color-navy);
  border-radius: 0;
  font-size: 1.05rem;
  line-height: 1.45;
}

.svc-text .service-points li::before {
  left: 0.8rem;
  top: 0.68rem;
  color: var(--color-orange);
}

.svc-track.svc-h .svc-text .service-text p {
  font-size: clamp(0.95rem, 2.1vh, 1.15rem);
  line-height: 1.5;
}

.svc-track.svc-h .svc-text .service-points li {
  font-size: clamp(0.9rem, 1.95vh, 1.05rem);
  padding-block: 0.55rem;
}

/* Services bullets: only the marker is a brutalist square (navy outline, white
   inside); the text itself has no box. */
.svc-text .service-points li,
.svc-track.svc-h .svc-text .service-points li {
  background: transparent;
  border: 0;
  padding: 0 0 0 1.9rem;
  margin-bottom: 0.7rem;
}

.svc-text .service-points li::before {
  content: "";
  left: 0;
  top: 0.32em;
  width: 0.9rem;
  height: 0.9rem;
  box-sizing: border-box;
  background: var(--color-white);
  border: 3px solid var(--color-navy);
}

/* Services bullets as blocky arrows: navy outline, white inside */
.svc-text .service-points li::before {
  content: "";
  left: 0;
  top: 0.22em;
  width: 1.15rem;
  height: 1.15rem;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpolygon points='2,8 12,8 12,3 20,11 12,19 12,14 2,14' fill='%23ffffff' stroke='%231C2B4A' stroke-width='2.2' stroke-linejoin='miter'/%3E%3C/svg%3E") no-repeat center / contain;
}

.svc-text .service-points li,
.svc-track.svc-h .svc-text .service-points li {
  padding-left: 2rem;
}

/* Services cards: text a touch smaller so each stage fits without scrolling */
.svc-text .service-text p {
  font-size: 1.02rem;
  line-height: 1.5;
  margin-bottom: 0.6rem;
}

.svc-text .service-points li,
.svc-track.svc-h .svc-text .service-points li {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.svc-track.svc-h .svc-text .service-text p {
  font-size: clamp(0.82rem, 1.8vh, 1rem);
  line-height: 1.45;
}

.svc-track.svc-h .svc-text .service-points li {
  font-size: clamp(0.8rem, 1.7vh, 0.92rem);
}

.svc-track.svc-h .svc-text {
  padding: clamp(1.25rem, 2.4vw, 2rem);
}

.svc-track.svc-h .svc-num {
  font-size: clamp(2.6rem, 5.5vh, 4rem);
}

.svc-track.svc-h .svc-text h2 {
  margin: 0.35rem 0 0.6rem;
}

/* Services cards: bigger numbers and titles */
.svc-text .svc-num,
.svc-track.svc-h .svc-num {
  font-size: clamp(4rem, 9.5vh, 6.5rem);
}

.svc-text h2,
.svc-track.svc-h .svc-text h2 {
  font-size: clamp(2rem, 4.6vh, 3rem);
  line-height: 1.05;
  margin: 0.4rem 0 0.7rem;
}

/* Services cards: numbers at 8rem, body text a little bigger */
.svc-text .svc-num,
.svc-track.svc-h .svc-num {
  font-size: 8rem;
  line-height: 0.8;
}

.svc-text .service-text p {
  font-size: 1.1rem;
}

.svc-text .service-points li,
.svc-track.svc-h .svc-text .service-points li {
  font-size: 1rem;
}

.svc-track.svc-h .svc-text .service-text p {
  font-size: clamp(0.9rem, 1.95vh, 1.1rem);
}

.svc-track.svc-h .svc-text .service-points li {
  font-size: clamp(0.85rem, 1.85vh, 1rem);
}

/* ===== Animated ribbon swirls as the background of every page except Home ===== */
.page-swirls {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.page-swirls svg {
  display: block;
  width: 100%;
  height: 100%;
}

.page-swirls .rib-edge,
.page-swirls .rib-fill {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-swirls .rib-edge {
  stroke: var(--color-bg-alt);
  stroke-width: 150;
}

.page-swirls .rib-fill {
  stroke: #ffffff;
  stroke-width: 140;
}

/* Everything else sits above the swirls */
.has-swirls > :not(.page-swirls):not(.site-header):not(script) {
  position: relative;
  z-index: 1;
}

.has-swirls .site-header {
  background: transparent;
}

/* The static decorative image on the category pages is replaced by the swirls */
.category-page {
  background-image: none;
}

/* Softer swirls so the text on top stays easy to read */
.page-swirls svg {
  opacity: 0.4;
}

/* Navy border around the page swirls */
.page-swirls .rib-edge {
  stroke: var(--color-navy);
  stroke-width: 156;
}

/* Beige border around the page swirls again */
.page-swirls .rib-edge {
  stroke: var(--color-bg-alt);
  stroke-width: 150;
}

/* Services roadmap chips: navy outline, white inside, fuchsia number,
   bobbing gently from left to right (each one a beat behind the last). */
.roadmap-num {
  background: var(--color-white);
  color: var(--color-orange);
  border: 3px solid var(--color-navy);
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  .roadmap-num {
    animation: chip-bob 1.6s ease-in-out infinite alternate;
  }
  .roadmap-step:nth-child(1) .roadmap-num { animation-delay: 0s; }
  .roadmap-step:nth-child(3) .roadmap-num { animation-delay: -0.3s; }
  .roadmap-step:nth-child(5) .roadmap-num { animation-delay: -0.6s; }
  .roadmap-step:nth-child(7) .roadmap-num { animation-delay: -0.9s; }
  .roadmap-step:nth-child(9) .roadmap-num { animation-delay: -1.2s; }

  @keyframes chip-bob {
    from { translate: -0.5rem 0; }
    to   { translate: 0.5rem 0; }
  }
}

/* Roadmap chips stay still */
.roadmap-num {
  animation: none;
}

/* Roadmap chips pop in once, left to right, when they scroll into view */
@media (prefers-reduced-motion: no-preference) {
  .roadmap.roadmap-wait .roadmap-num {
    opacity: 0;
  }

  .roadmap.is-in .roadmap-num {
    animation: chip-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .roadmap.is-in .roadmap-step:nth-child(1) .roadmap-num { animation-delay: 0s; }
  .roadmap.is-in .roadmap-step:nth-child(3) .roadmap-num { animation-delay: 0.15s; }
  .roadmap.is-in .roadmap-step:nth-child(5) .roadmap-num { animation-delay: 0.3s; }
  .roadmap.is-in .roadmap-step:nth-child(7) .roadmap-num { animation-delay: 0.45s; }
  .roadmap.is-in .roadmap-step:nth-child(9) .roadmap-num { animation-delay: 0.6s; }

  @keyframes chip-pop {
    0%   { opacity: 0; transform: scale(0.4) translateY(0.6rem); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }
}

/* Roadmap text under the chips: solid navy so it stands out */
.roadmap-label,
.roadmap-desc {
  color: var(--color-navy);
}

.roadmap-desc {
  font-size: 1rem;
  font-weight: 500;
}

/* No rule above "Who this is for" */
.service-who {
  border-top: 0;
}

/* Home header: borderless, with the nav links centred in the bar */
.home .site-header {
  border-bottom: 0;
}

.home .navbar {
  position: relative;
}

.home .nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 56rem) {
  .home .nav-links {
    position: static;
    transform: none;
  }
}

/* Home header: no border across the bar; instead a pill border sized to
   the nav links themselves. */
.home .nav-links {
  border: 3px solid var(--color-navy);
  border-radius: var(--r-pill);
  padding: 0.55rem 1.75rem;
  width: max-content;
}

@media (max-width: 56rem) {
  .home .nav-links {
    border: 0;
    padding: 0;
    width: auto;
  }
}

/* Nav pill: thinner border */
.home .nav-links {
  border-width: 2px;
}

/* Home header: sticks to the top while scrolling; the nav pill becomes a
   soft square instead of a full pill. */
.home .site-header {
  position: sticky;
  top: 0;
}

.home .nav-links {
  border-radius: var(--r-md);
}

/* Home header: logo, links and Subscribe all sit together inside one
   soft-square navy border, centred in the bar. */
.home .navbar {
  justify-content: center;
}

.home .home-nav-group {
  display: flex;
  align-items: center;
  gap: 2rem;
  border: 2px solid var(--color-navy);
  border-radius: var(--r-md);
  padding: 0.55rem 1.75rem;
}

.home .nav-links {
  border: 0;
  border-radius: 0;
  padding: 0;
  width: auto;
}

@media (max-width: 60rem) {
  .home .navbar {
    justify-content: space-between;
  }
  .home .home-nav-group {
    display: contents;
  }
}

/* Back to logo left, links centred with their own border, Subscribe right;
   everything pulled in close together. */
.home .navbar {
  justify-content: space-between;
  gap: 0.75rem;
}

.home .home-nav-group {
  display: contents;
}

.home .nav-links {
  border: 2px solid var(--color-navy);
  border-radius: var(--r-md);
  padding: 0.4rem 1rem;
  width: max-content;
}

@media (max-width: 60rem) {
  .home .nav-links {
    border: 0;
    border-radius: 0;
    padding: 0;
    width: auto;
  }
}

/* Home header styled like wisprflow.ai's menu: a floating rounded bar,
   inset from the edges, with the logo left, links, and a filled pill
   Subscribe button on the right. No border under the header itself. */
.home .site-header {
  background: transparent;
  padding: 1rem clamp(1rem, 4vw, 2rem) 0;
}

.home .navbar {
  max-width: 64rem;
  margin-inline: auto;
  background: var(--color-bg);
  border: 2px solid var(--color-navy);
  border-radius: var(--r-pill);
  padding: 0.65rem 0.6rem 0.65rem 1.5rem;
  gap: 1rem;
}

.home .nav-links {
  border: 0;
  border-radius: 0;
  padding: 0;
  width: auto;
  gap: 1.75rem;
}

.home .btn-subscribe {
  border-radius: var(--r-pill);
}

@media (max-width: 60rem) {
  .home .navbar {
    border-radius: var(--r-md);
    padding: 0.65rem 1rem;
  }
}

/* Soft square corners on the floating bar, and its contents pulled in
   from the outer edges toward the middle. */
.home .navbar {
  border-radius: var(--r-lg);
  padding-inline: 2.5rem;
}

.home .btn-subscribe {
  border-radius: 0;
}

@media (max-width: 60rem) {
  .home .navbar {
    border-radius: var(--r-md);
    padding-inline: 1rem;
    padding-block: 0.25rem;
    align-content: center;
    row-gap: 0;
  }
}

/* Soften the Subscribe button's corners in the home header */
.home .btn-subscribe {
  border-radius: var(--r-sm);
}

/* Hero: push the text down a bit more, and drop the border under the banner */
.hero {
  border-bottom: 0;
}

.hero-inner {
  padding-top: calc(var(--space) * 4.5);
}

@media (max-width: 48rem) {
  .hero-inner {
    padding-top: calc(var(--space) * 2);
    padding-bottom: calc(var(--space) * 2);
  }
}

/* ===== Hero visual: five lines of code, no border, with a fuchsia
   highlight sweeping in from the left on each line in turn. ===== */
.hero-visual {
  min-width: 0;
}

.hero-code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  background: transparent;
  border: 0;
  padding: 0;
}

.hero-code-ln {
  position: relative;
  display: flex;
  gap: 1rem;
  padding: 0.2rem 0;
  min-height: 1.7em;
  color: var(--color-navy);
  white-space: pre;
}

.hero-code-no {
  color: var(--color-text-muted);
  width: 1.2rem;
  flex-shrink: 0;
  text-align: right;
}

.hc-kw { color: var(--color-blue); }
.hc-fn { color: var(--color-orange); }
.hc-str { color: #639922; }

.hc-cursor {
  display: inline-block;
  width: 0.5ch;
  margin-left: 1px;
  background: var(--color-orange);
}

@media (prefers-reduced-motion: no-preference) {
  .hc-cursor {
    animation: hc-blink 0.9s steps(1) infinite;
  }
  @keyframes hc-blink {
    50% { opacity: 0; }
  }
}

@media (max-width: 56rem) {
  .hero-visual {
    display: none;
  }
}

/* Hero code animation: bigger block */
.hero-code {
  font-size: 1.15rem;
  line-height: 1.9;
}

/* Hero headline bigger; "Read more" centred below the subtitle */
.hero-title {
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
}

.hero-btn {
  align-self: center;
  margin-inline: auto;
}

.hero-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title-lead {
  text-align: center;
}

/* Correction: keep the headline and subtitle left-aligned as before;
   only the "Read more" button moves to the centre, as its own block. */
.hero-inner {
  text-align: left;
  display: block;
}

.hero-title-lead {
  text-align: left;
}

.hero-btn {
  display: block;
  width: fit-content;
  margin: 1.75rem auto 0;
}

/* Read more button back to its original left position under the subtitle */
.hero-btn {
  display: inline-block;
  width: auto;
  margin: 1.75rem 0 0;
}

/* ===== Divider between the hero and the statement section: a thin
   horizontal ribbon swirl, full width, swaying gently side to side. ===== */
.h-divider-swirl {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  line-height: 0;
  overflow: hidden;
}

.h-divider-swirl svg {
  display: block;
  width: 100%;
  height: clamp(3.5rem, 9vw, 6.5rem);
}

.h-divider-swirl .hd-edge,
.h-divider-swirl .hd-fill {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.h-divider-swirl .hd-edge {
  stroke: var(--color-bg-alt);
  stroke-width: 46;
}

.h-divider-swirl .hd-fill {
  stroke: #ffffff;
  stroke-width: 38;
}

@media (prefers-reduced-motion: no-preference) {
  .h-divider-swirl svg {
    animation: hd-sway 14s ease-in-out infinite alternate;
  }
  @keyframes hd-sway {
    from { transform: translateX(-2%); }
    to   { transform: translateX(2%); }
  }
}

/* Divider swirl a bit thicker */
.h-divider-swirl .hd-edge {
  stroke-width: 62;
}

.h-divider-swirl .hd-fill {
  stroke-width: 52;
}

.h-divider-swirl svg {
  height: clamp(4.5rem, 11vw, 8rem);
}

/* ===== Statement section: a blob-shaped photo beside the quote, with a
   fuchsia ring pulsing outward, like it's being spoken. ===== */
.h-statement-sticky {
  flex-direction: row;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.blob {
  --shape: 61% 39% 44% 56% / 55% 42% 58% 45%;
}

.h-statement-photo {
  position: relative;
  flex: 0 0 auto;
  width: clamp(8rem, 14vw, 12rem);
  height: clamp(8rem, 14vw, 12rem);
}

.h-statement-frame {
  position: absolute;
  inset: 0;
  border-radius: var(--shape);
  background: #ffffff;
  padding: 4px;
  box-sizing: border-box;
}

.h-statement-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--shape);
}

.h-statement-ring {
  position: absolute;
  inset: -10px;
  border: 3px solid var(--color-orange);
  border-radius: var(--shape);
  opacity: 0;
  pointer-events: none;
}

.h-statement-copy {
  min-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .h-statement-ring {
    animation: h-statement-pulse 1.8s ease-out infinite;
  }
  .h-statement-ring-2 {
    animation-delay: 0.9s;
  }
  @keyframes h-statement-pulse {
    0%   { opacity: 0.6; transform: scale(0.94); }
    100% { opacity: 0; transform: scale(1.16); }
  }
}

@media (max-width: 48rem) {
  .h-statement-sticky {
    flex-direction: column;
    text-align: center;
  }
  .h-statement-text {
    margin-inline: auto;
  }
}

/* Slower pulse; text now flows around the photo instead of sitting in its
   own column. */
.h-statement-ring {
  animation-duration: 3.4s;
}

.h-statement-sticky {
  display: block;
}

.h-statement-photo {
  float: left;
  shape-outside: circle(46% at 50% 50%);
  shape-margin: clamp(1rem, 2.5vw, 2rem);
  margin: 0.3em clamp(1.5rem, 3vw, 2.5rem) 0.5em 0;
}

.h-statement-copy {
  display: block;
}

@media (max-width: 48rem) {
  .h-statement-photo {
    float: none;
    shape-outside: none;
    margin: 0 auto 1.5rem;
  }
}

/* A little more breathing room above the photo and quote */
.h-statement-photo {
  margin-top: 1.2em;
}

/* Back to a side-by-side layout: text flows normally, photo sits on the
   right, with more top padding above the block. */
.h-statement-sticky {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding-top: calc(var(--space) * 3);
}

.h-statement-photo {
  float: none;
  shape-outside: none;
  margin: 0;
}

@media (max-width: 48rem) {
  .h-statement-sticky {
    flex-direction: column-reverse;
  }
  .h-statement-photo {
    margin: 0 auto 1.5rem;
  }
}

/* Statement section: top padding trimmed to match the bottom */
.h-statement-sticky {
  padding-top: calc(var(--space) * 1.5);
  padding-bottom: calc(var(--space) * 1.5);
}

@media (max-width: 48rem) {
  .h-statement {
    height: 100vh;
  }
  .h-statement-sticky {
    height: auto;
    top: 6rem;
    padding-top: calc(var(--space) * 0.15);
    padding-bottom: calc(var(--space) * 0.15);
  }
}

/* Cards-section swirl: full viewport width, not inset within the section's
   own side padding */
.process-swirls {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
}

/* Hero "Read more": outline style, centred under the headline and subtitle */
.hero-btn {
  background: transparent;
  color: var(--btn-color);
  display: block;
  width: fit-content;
  margin: 1.75rem auto 0;
}

.hero-btn:hover,
.hero-btn:focus-visible {
  color: var(--color-bg);
}

/* "Read more" stays at the bottom of the hero text, but its horizontal
   position is centred under the "AI solutions" line specifically (set by
   script, since that line's width varies by screen size and font load). */
.hero-btn {
  margin: 1.75rem 0 0;
}

/* "Read more" back to left-aligned under the subtitle; a little more left
   padding on the hero text. */
.hero-btn {
  margin: 1.75rem 0 0;
}

.hero-inner {
  padding-left: clamp(1.25rem, 12vw, 9.5rem);
}

/* Hero "Read more": fuchsia fill with a navy border at rest, fills navy on hover */
.hero-btn {
  --btn-color: var(--color-navy);
  background: var(--color-orange);
  border-color: var(--color-navy);
  color: var(--color-navy);
}

.hero-btn:hover,
.hero-btn:focus-visible {
  color: var(--color-bg);
}

/* The code block was resizing as each line typed longer, which shifted the
   whole hero layout sideways. Give it a fixed width so it stays put. */
.hero-code {
  width: min(30rem, 90vw);
}

.hero-code-ln {
  width: 100%;
}

/* A little less space on the right of the hero code block */
.hero-visual {
  margin-right: clamp(0.5rem, 4vw, 2.5rem);
}

/* Divider swirl: make sure it's a true full-bleed layer, left end clearly
   off-screen */
.h-divider-swirl {
  width: 100vw;
  position: relative;
  left: 50%;
  right: auto;
  margin-left: -50vw;
  margin-right: 0;
}

/* Drop the sepia/vintage filter from the "From plan to practice" photo;
   keep it on the other vintage-treated photos. */
.h-band.photo-vintage img {
  filter: none;
}

/* ===== Divider ribbon reworked: a thick swirling ribbon, like the ones
   behind the process cards, running the full width from edge to edge.
   Confined strictly to its own band, never over the sections it divides. ===== */
.h-divider-swirl {
  height: clamp(5.5rem, 12vw, 9rem);
}

.h-divider-swirl svg {
  height: 100%;
}

.h-divider-swirl .hd-edge {
  stroke: var(--color-bg-alt);
  stroke-width: 112;
}

.h-divider-swirl .hd-fill {
  stroke: #ffffff;
  stroke-width: 96;
}

@media (prefers-reduced-motion: no-preference) {
  .h-divider-swirl svg {
    animation: none;
  }
  .hd-sway {
    transform-box: fill-box;
    transform-origin: center;
    animation: hd-ribbon-sway 9s ease-in-out infinite alternate;
  }
  @keyframes hd-ribbon-sway {
    from { transform: translateY(-3%) rotate(-0.6deg); }
    to   { transform: translateY(3%) rotate(0.6deg); }
  }
}

/* Nudge the Analyse/Propose/Develop/Implement/Embed ticker band down a bit */
.h-marquee {
  margin-top: calc(var(--space) * 1.5);
}

/* Ticker band now sits inside the cards section, over the swirl background */
.h-marquee {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Ticker band flush against the cards above, no gap; scroll direction
   reversed so the words move left to right. */
.h-marquee {
  margin-top: 0;
}

@keyframes h-marquee-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Ticker band: back to sitting a bit below the cards, movement direction kept */
.h-marquee {
  margin-top: calc(var(--space) * 1.5);
}

/* Ticker back to its own bar between the cards and Featured, solid again */
.h-marquee {
  background: var(--color-bg);
  margin-top: 0;
}

/* Cards section: no top/bottom padding, so the swirl reaches the section's
   own top and bottom edges with nothing showing past it */
.h-process {
  padding-block: 0;
}

.h-process-head {
  padding-top: calc(var(--space) * 4);
}

.h-stack {
  padding-bottom: calc(var(--space) * 3);
}

/* Featured section: a bit less space at the top */
.h-book-sticky {
  padding-top: 3rem;
}

/* Cards section: a bit more space at the bottom */
.h-stack {
  padding-bottom: calc(var(--space) * 4);
}

/* Services header: filled solid so it pops, no border underneath, and the
   "5 stages" line now sits right under the intro, inside the header. */
.svc-hero {
  background: var(--color-navy) !important;
  border-bottom: 0;
}

.svc-hero .page-title,
.svc-hero .page-intro {
  color: var(--color-bg);
}

.svc-hero .page-eyebrow {
  color: var(--color-orange);
}

.svc-hero .roadmap-intro {
  color: var(--color-orange);
  margin-top: calc(var(--space) * 1.25);
}

/* Services header: back to transparent, no fill; subtitle removed, title
   kept. The "five stages" line now sits in its own soft-edged, filled box. */
.svc-hero {
  background: transparent !important;
}

.svc-hero .page-title {
  color: var(--color-navy);
}

.roadmap-intro-box {
  margin-top: calc(var(--space) * 1.5);
  padding: 1.1rem 1.4rem;
  background: var(--color-bg-alt);
  border: 2px solid var(--color-navy);
  border-radius: var(--r-lg);
  max-width: 42rem;
}

.svc-hero .roadmap-intro {
  color: var(--color-navy);
  margin: 0;
}

/* "Five stages" box: full viewport width */
.roadmap-intro-box {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  border-radius: 0;
  border-inline: 0;
  box-sizing: border-box;
  padding: 1.1rem clamp(1.5rem, 6vw, 4rem);
}

/* Five-stages box: inset from the viewport edges so its own border shows */
.roadmap-intro-box {
  width: auto;
  max-width: none;
  left: auto;
  margin-left: 0;
  margin-inline: clamp(1rem, 4vw, 3rem);
  border-inline: 2px solid var(--color-navy);
  border-radius: var(--r-lg);
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* A little less space above the numbered chips */
.roadmap {
  padding-top: calc(var(--space) * 1.1);
}

/* Five-stages box: moved below the header, full width again */
.roadmap-intro-box {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-inline: 0;
  border-inline: 0;
  border-radius: 0;
  padding: 1.1rem clamp(1.5rem, 6vw, 4rem);
}

/* Less space below the header; box text in white (background switched to
   navy so white stays readable); less space below the box itself. */
.svc-hero {
  padding-bottom: calc(var(--space) * 1);
}

.roadmap-intro-box {
  background: var(--color-navy);
  padding-bottom: 0.6rem;
}

.roadmap-intro-box .roadmap-intro,
.roadmap-intro {
  color: var(--color-bg);
}

/* Five-stages box: back inside the centred page column, left-aligned with
   the header text above it, no left padding. */
.roadmap-intro-box {
  width: 100%;
  max-width: min(95vw, 56rem);
  position: static;
  left: auto;
  margin-left: auto;
  margin-right: auto;
  margin-inline: auto;
  padding-left: 0;
  padding-right: clamp(1rem, 3vw, 2rem);
}

/* Five-stages box: full width again, with softly rounded corners */
.roadmap-intro-box {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  margin-right: 0;
  margin-left: -50vw;
  padding-inline: clamp(1.5rem, 6vw, 4rem);
  border-radius: var(--r-lg);
}

/* Five-stages box: a bit less left padding */
.roadmap-intro-box {
  padding-left: clamp(0.75rem, 3vw, 2rem);
}

/* Five-stages box: inset a little from the edges so the side borders show.
   (Using margin-inline here previously overwrote the -50vw centering
   margin-left from the full-bleed rule above, since it's a shorthand for
   both margin-left and margin-right — that's what pushed the box off the
   right edge. Recomputed as one rule instead of stacking overrides.) */
.roadmap-intro-box {
  --box-inset: clamp(0.75rem, 3vw, 2rem);
  width: calc(100vw - (var(--box-inset) * 2));
  left: 50%;
  margin-left: calc((var(--box-inset)) - 50vw);
  border-inline: 2px solid var(--color-navy);
}

/* A bit less space above the numbered chips */
.roadmap {
  padding-top: calc(var(--space) * 0.6);
}

/* Five-stages box: a little bigger, text more spacious inside */
.roadmap-intro-box {
  padding-block: 1.6rem;
}

.roadmap-intro {
  font-size: clamp(1.3rem, 2.9vw, 1.75rem);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* Roadmap chips: a bit less space above them still */
.roadmap {
  padding-top: calc(var(--space) * 0.2);
}

/* Five-stages box: beige fill with navy text, instead of navy fill with white text */
.roadmap-intro-box {
  background: var(--color-bg-alt);
}

.roadmap-intro {
  color: var(--color-navy);
}

/* Fix: an earlier, more specific selector was still forcing the text pale;
   match its specificity so navy actually wins. */
.roadmap-intro-box .roadmap-intro {
  color: var(--color-navy);
}

/* Roadmap chips now live inside the five-stages box */
.roadmap-intro-box .roadmap {
  margin-top: calc(var(--space) * 1);
}

/* Center the text and chips inside the five-stages box */
.roadmap-intro-box {
  text-align: center;
}

.roadmap-intro-box .roadmap {
  justify-content: center;
}

@media (max-width: 40rem) {
  .roadmap {
    flex-direction: column;
    align-items: stretch;
  }

  .roadmap-step {
    width: 100%;
    border: 2px solid var(--color-navy);
    border-radius: var(--r-md);
    padding: 1.25rem 1rem;
  }

  .roadmap-arrow {
    transform: rotate(90deg);
    margin-top: 0;
    margin-block: 0.25rem;
  }
}

/* About page: header slides in from the left, the "What we do" row from
   the right, both on scroll into view */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .js .reveal-left.in {
    opacity: 1;
    transform: none;
  }
  .js .reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .js .reveal-right.in {
    opacity: 1;
    transform: none;
  }
}

/* Services header title: bigger */
.svc-hero .page-title {
  font-size: clamp(2.5rem, 7vw, 4.2rem);
}

/* About page: both rows under the header get a solid fill, so they pop
   against the swirl background instead of it showing through */
.about-row {
  background: var(--color-bg);
  position: relative;
  z-index: 1;
}

/* About page: "What we do" now slides from the left, "A tool, not a goal"
   from the right. Instead of a full-width fill, each row's content sits in
   its own boxed card, so the swirl shows around it. */
.about-row {
  background: transparent;
}

.about-row-inner {
  background: var(--color-bg);
  border: 2px solid var(--color-navy);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 6vw, 4rem);
}

.about-row-alt .about-row-inner {
  background: var(--color-bg-alt);
}

/* About page header: no border underneath */
.page-hero {
  border-bottom: 0;
}

/* About page header: fixed in place (not sliding, not scrolling with the
   page), transparent so the swirl shows through. Scoped away from
   .svc-hero, since .page-hero is shared with the Services header. Offset
   below the nav bar (--nav-h, set by script) so the nav's higher z-index
   doesn't cover it. The row right after gets matching top padding
   (--nav-h + --hero-h) so it doesn't start underneath the now-fixed header. */
.page-hero:not(.svc-hero) {
  position: fixed;
  top: var(--nav-h, 0px);
  left: 0;
  margin-left: 0;
  width: 100%;
  z-index: 2;
  background: transparent;
}

.page-hero:not(.svc-hero) + .about-row {
  padding-top: calc(var(--nav-h, 0px) + var(--hero-h, 0px) + (var(--space) * 2.5));
}

/* "Plan free call" button in the home header */
.btn-plan-call {
  border: none;
  cursor: pointer;
  font: inherit;
}

/* About header: same style as the Services header — no subtitle, bigger title */
.page-hero:not(.svc-hero) .page-title {
  font-size: clamp(2.5rem, 7vw, 4.2rem);
}

/* Book intro call: nudge the widget inward so its scrollbar isn't hidden
   behind the box border */
.calendly-inline-widget {
  padding: 0 0.6rem 0 0;
  box-sizing: border-box;
}

/* Text above the roadmap chips: fuchsia */
.roadmap-intro-box .roadmap-intro {
  color: var(--color-orange);
}

/* Subtitle under the Featured/AI News header titles, matching the site's
   body-muted intro style */
.svc-hero .page-intro {
  color: var(--color-text-muted);
  margin-top: 0.6rem;
}

/* Pagination "Next" button: navy fill, fuchsia border, white text */
.page-next {
  background: var(--color-navy);
  border-color: var(--color-orange);
  color: var(--color-white);
}

.page-next:hover:not(:disabled),
.page-next:focus-visible:not(:disabled) {
  background: var(--color-orange);
  border-color: var(--color-navy);
}

/* Fix: .pagination button (class+element) was more specific than the
   plain .page-next selector, so that earlier override never actually won.
   Rewritten here with enough specificity to take effect, and the "Previous"
   button now gets the matching treatment: fuchsia fill, navy border. */
.pagination button.page-next {
  background: var(--color-navy);
  border-color: var(--color-orange);
  color: var(--color-white);
}

.pagination button.page-next:hover:not(:disabled),
.pagination button.page-next:focus-visible:not(:disabled) {
  background: var(--color-orange);
  border-color: var(--color-navy);
}

.pagination button.page-prev {
  background: var(--color-orange);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.pagination button.page-prev:hover:not(:disabled),
.pagination button.page-prev:focus-visible:not(:disabled) {
  background: var(--color-navy);
  border-color: var(--color-orange);
}

/* Text above the roadmap chips: not bold */
.roadmap-intro {
  font-weight: 400;
}

/* "Plan free call" button in the hero: radar-style pings expanding outward,
   in keeping with the site's own name. */
@media (prefers-reduced-motion: no-preference) {
  .hero-btn {
    animation: hero-btn-radar 1.8s ease-out infinite;
  }
  @keyframes hero-btn-radar {
    0%   { box-shadow: 0 0 0 0 rgba(28, 43, 74, 0.7); }
    100% { box-shadow: 0 0 0 6px rgba(28, 43, 74, 0); }
  }
}

/* Text above the roadmap chips: slides in from the right and fades in
   slowly, once, instead of typing out. */
@media (prefers-reduced-motion: no-preference) {
  .js #roadmapIntroType {
    display: inline-block;
    opacity: 0;
    transform: translateX(70px);
    transition: opacity 1.3s ease, transform 1.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .js #roadmapIntroType.in {
    opacity: 1;
    transform: none;
  }
}

/* Footer logo: same mark as the header, but static (no spinning sweep) */
.footer-logo .site-logo {
  height: 68px;
  width: auto;
  display: block;
}

.footer-logo .logo-sweep {
  animation: none !important;
}

/* Footer logo: name sits next to the mark, same as the header lockup */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.footer-logo .site-name {
  animation: none;
}

/* No underline on the footer logo link (same fix as the nav logo earlier) */
.footer-logo,
.footer-logo:hover,
.footer-logo:focus-visible {
  text-decoration: none;
}

/* Headshot photo on the About page: white outline, a bit bigger */
.headshot-media img {
  max-width: 18rem;
  border: 4px solid #ffffff;
  box-sizing: border-box;
}

/* Headshot: no white border */
.headshot-media img {
  border: 0;
}

/* Headshot media box: no bottom padding under the image */
.headshot-media {
  padding-bottom: 0;
}

/* Contact block on the About page: less space above the heading */
.contact-block {
  padding-top: calc(var(--space) * 1);
}

/* Contact block: back to its original top padding, but pulled up closer
   to the "A tool, not a goal" section above it */
.contact-block {
  padding-top: calc(var(--space) * 2);
  margin-top: calc(var(--space) * 1);
}

@media (max-width: 48rem) {
  .contact-block {
    margin-top: calc(var(--space) * 0.3);
    padding-top: calc(var(--space) * 1.4);
    padding-bottom: calc(var(--space) * 1.2);
    text-align: left;
  }

  .contact-links,
  .contact-block .h-cta-btn {
    text-align: left;
    margin-inline: 0;
  }
}

/* "A tool, not a goal" image: same box treatment as the CV headshot, so
   both image boxes on the page match. */
.tool-media {
  padding: 0;
}

.tool-media img {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
}

/* Contact block: plain email/phone line, no boxed fields that could read
   as a form, plus a "Plan free call" button that opens the Calendly popup */
.contact-plan-call {
  margin-top: 1rem;
  border: none;
  cursor: pointer;
  font: inherit;
}

/* Tool-not-a-goal image: keep it inside the box's own border instead of
   covering it */
.tool-media {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.tool-media img {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
}

/* "Plan free call" button under the contact info: beige border, pulsing */
.contact-plan-call {
  border: 3px solid var(--color-bg);
}

@media (prefers-reduced-motion: no-preference) {
  .contact-plan-call {
    animation: contact-plan-call-pulse 1.8s ease-out infinite;
  }
  @keyframes contact-plan-call-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(237, 227, 208, 0.7); }
    100% { box-shadow: 0 0 0 8px rgba(237, 227, 208, 0); }
  }
}

/* Decorative quote marks around the statement text, large and in fuchsia
   so they stand out clearly against the navy quote. Both dim until the
   scroll reaches them, then light up like the words do. */
.h-quote-mark {
  display: block;
  width: clamp(2.5rem, 5vw, 4rem);
  height: auto;
  opacity: 0.2;
  transition: opacity 0.4s ease;
}

.js .h-quote-mark.on {
  opacity: 1;
}

.h-quote-open {
  margin: 0 0 0.5rem;
}

.h-quote-close {
  display: inline-block;
  vertical-align: -0.3em;
  margin-left: 0.15em;
  width: clamp(1.6rem, 3.2vw, 2.4rem);
}

.h-statement-photo {
  opacity: 0.35;
  transition: opacity 0.4s ease;
}

.js .h-statement-photo.on {
  opacity: 1;
}

/* "Our work runs in five stages..." text: black outline around the letters */
.roadmap-intro-box .roadmap-intro {
  -webkit-text-stroke: 0;
  color: var(--color-orange);
}

/* Fuchsia card numbers on home and services: navy outline around the digits */
.h-card-num,
.svc-num {
  -webkit-text-stroke: 2.5px var(--color-navy);
  paint-order: stroke fill;
}



/* Fix: the mobile dropdown's Subscribe button was invisible, navy text on
   navy background. .nav-links a (for the plain Home/AI News/etc. links)
   was more specific than .btn-subscribe's own color and silently won. */
.nav-links .mobile-subscribe .btn-subscribe {
  background: var(--color-navy);
  border: 2px solid var(--color-orange);
  color: var(--color-white);
  border-radius: 999px;
  padding: 0.55rem 1.6rem;
}

.nav-links .mobile-subscribe .btn-subscribe:hover,
.nav-links .mobile-subscribe .btn-subscribe:focus-visible {
  color: var(--color-white);
  background: var(--color-navy);
  border-color: var(--color-orange);
}