/* ==========================================================================
   Slice theme – main stylesheet
   Source of truth for the look: design/claude-design-export (D-028).
   Mobile first: base styles are 375px; min-width queries at 768 and 1024.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* --------------------------------------------------------------------------
   Font: Work Sans variable, self-hosted (D-010)
   -------------------------------------------------------------------------- */
/* Latin (preloaded) */
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Latin Extended: Maltese letters (ċ ġ ħ ż); only downloaded when a page uses them */
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-Variable-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Tokens (style guide sections 01–09)
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Colour */
    --color-blue: #433efa;
    --color-lime: #95f119;
    --color-purple: #1a013a;
    --color-white: #fff;
    --color-ink: #181818;
    --color-paper: #f4f3ff;
    --color-blue-soft: #e3e2ff;
    --color-lime-soft: #eafbd2;
    --color-error: #b4123b; /* form validation only (design item 12) */

    /* Type */
    --font-sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --text-display: clamp(2.5rem, 1.46rem + 4.42vw, 5rem);   /* 40 → 80 */
    --text-h1: clamp(2.125rem, 1.555rem + 2.43vw, 3.5rem);   /* 34 → 56 */
    --text-h2: clamp(1.75rem, 1.439rem + 1.33vw, 2.5rem);    /* 28 → 40 */
    --text-h3: clamp(1.375rem, 1.22rem + 0.66vw, 1.75rem);   /* 22 → 28 */
    --text-lead: clamp(1.125rem, 1.021rem + 0.44vw, 1.375rem); /* 18 → 22 */
    --text-body: clamp(1rem, 0.948rem + 0.22vw, 1.125rem);   /* 16 → 18 */
    --text-small: clamp(0.875rem, 0.849rem + 0.11vw, 0.9375rem); /* 14 → 15 */
    --leading-tight: 1.05;
    --leading-body: 1.55;
    --tracking-tight: -0.02em;

    /* Space (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    /* Borders, radius, shadows */
    --border: 2px solid var(--color-purple);
    --border-lg: 3px solid var(--color-purple);
    --radius-tile: 16px;
    --radius-inner: 14px;
    --radius-sm: 8px;
    --radius-pill: 100px;
    --shadow-sm: 3px 3px 0 var(--color-purple);
    --shadow-md: 5px 5px 0 var(--color-purple);
    --shadow-lg: 8px 8px 0 var(--color-purple);

    /* Layout */
    --container: 1240px;
    --gutter: 16px;
    --gap: 12px;
    --header-h: 64px;
    --contact-bar-h: 64px;

    /* Motion */
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-snap: cubic-bezier(.4, 0, 1, 1);
    --dur-lift: 120ms;
    --dur-press: 80ms;
    --dur-tile: 150ms;
    --dur-ui: 200ms;
    --dur-reveal: 300ms;
  }

  @media (min-width: 768px) {
    :root { --gap: 16px; }
  }

  @media (min-width: 1024px) {
    :root { --gap: 24px; --header-h: 76px; }
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
@layer base {
  html { scroll-padding-top: calc(var(--header-h) + var(--space-4)); }

  body {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    padding-bottom: var(--contact-bar-h); /* room for the sticky contact bar */
  }

  @media (min-width: 768px) {
    body { padding-bottom: 0; }
  }

  h1, h2, h3, h4 {
    color: var(--color-purple);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }
  h1 { font-size: var(--text-h1); }
  h2 { font-size: var(--text-h2); }
  h3 { font-size: var(--text-h3); }

  a { color: var(--color-blue); }
  a:hover { color: var(--color-purple); }

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

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

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
@layer layout {
  .container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .bento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
  }
  .bento > * { grid-column: span 2; }
  .bento > .bento__half { grid-column: span 1; }

  @media (min-width: 768px) {
    .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bento > * { grid-column: span 4; }
    .bento > .bento__half { grid-column: span 2; }
  }

  @media (min-width: 1024px) {
    .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .bento > * { grid-column: span var(--span, 12); grid-row: span var(--rows, 1); }
    .bento > .bento__half { grid-column: span var(--span, 6); }
  }

  .section { padding-block: var(--space-8); }
  @media (min-width: 1024px) { .section { padding-block: var(--space-9); } }

  .site-main { min-height: 50vh; }
}

/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */
@layer components {
  /* ----- Skip link ----- */
  .skip-link {
    position: absolute;
    left: var(--gutter);
    top: -80px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--color-lime);
    color: var(--color-ink);
    border: var(--border);
    border-radius: var(--radius-pill);
    box-shadow: 4px 4px 0 var(--color-purple);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
  }
  .skip-link:focus { top: 12px; }

  /* ----- Buttons (brand pill) ----- */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 15px 30px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    color: var(--color-ink);
    background: var(--color-lime);
    border: var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out), background-color var(--dur-lift);
  }
  .button:hover { color: var(--color-ink); transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
  .button:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--color-purple); transition-duration: var(--dur-press); transition-timing-function: var(--ease-snap); }
  .button[aria-disabled="true"], .button:disabled { opacity: .5; pointer-events: none; box-shadow: none; }
  .button--secondary { background: var(--color-white); }
  .button--small { min-height: 44px; padding: 10px 22px; font-size: 16px; box-shadow: 4px 4px 0 var(--color-purple); }
  .button--small:hover { box-shadow: 6px 6px 0 var(--color-purple); }
  .button--small:active { box-shadow: 0 0 0 var(--color-purple); }
  .button--compact { min-height: 40px; padding: 8px 14px; font-size: 14px; box-shadow: var(--shadow-sm); }
  .button--compact:hover { box-shadow: var(--shadow-md); }

  /* On dark backgrounds the shadow turns white so it stays visible */
  .on-dark .button { box-shadow: 5px 5px 0 var(--color-white); }
  /* In heroes the lime button keeps its purple shadow; only the outline button's is white (design). */
  .hero .button:not(.button--secondary) { box-shadow: var(--shadow-md); }
  .hero .button:not(.button--secondary):hover { box-shadow: var(--shadow-lg); }
  .hero .button:not(.button--secondary):active { box-shadow: 0 0 0 var(--color-purple); }
  /* Long labels ("Get a free marketing audit") wrap on phones instead of overflowing. */
  @media (max-width: 479px) { .button { max-width: 100%; padding-inline: 22px; white-space: normal; text-align: center; } }
  .on-dark .button:hover { box-shadow: 8px 8px 0 var(--color-white); }
  .on-dark .button:active { box-shadow: 0 0 0 var(--color-white); }
  .on-dark .button--secondary { background: transparent; color: var(--color-white); border-color: var(--color-white); box-shadow: 5px 5px 0 var(--color-white); }
  .on-dark .button--secondary:hover { background: var(--color-white); color: var(--color-purple); }
  .on-dark :focus-visible { outline-color: var(--color-lime); }
  /* White cards inside a dark block: lime on white is 1.41:1, so these keep the blue ring. */
  .on-dark .form :focus-visible, .on-dark .search-field :focus-visible { outline-color: var(--color-blue); }

  .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    background: var(--color-white);
    color: var(--color-purple);
    border: var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out);
  }
  .icon-button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-purple); }
  .icon-button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--color-purple); }

  .icon { width: 1.25em; height: 1.25em; flex: none; }

  /* ----- Header (B1) ----- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--color-white);
    color: var(--color-purple);
    border-bottom: var(--border);
  }
  .site-header--blue { background: var(--color-blue); color: var(--color-white); }

  .site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: var(--header-h);
    transition: height var(--dur-ui) var(--ease-out);
  }
  @media (min-width: 1024px) {
    .site-header.is-scrolled .site-header__bar { height: 64px; }
  }

  .site-header__logo { display: flex; }
  .site-header__logo img { height: 30px; width: auto; }
  @media (min-width: 1024px) { .site-header__logo img { height: 36px; } }
  .site-header__logo .logo-on-blue { display: none; }
  .site-header--blue .site-header__logo .logo-on-light { display: none; }
  .site-header--blue .site-header__logo .logo-on-blue { display: block; }

  .site-header__actions { display: flex; align-items: center; gap: 10px; }

  .site-nav { display: none; }
  @media (min-width: 1024px) {
    .site-nav { display: flex; align-items: center; gap: var(--space-1); }
    .site-header__menu-button { display: none; }
  }
  .site-header__quote-desktop { display: none; }
  @media (min-width: 1024px) { .site-header__quote-desktop { display: inline-flex; } }

  .site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    color: inherit;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }
  .site-nav__link:hover { color: inherit; border-color: currentColor; }
  .site-nav__link[aria-current="page"],
  .site-nav__link[aria-expanded="true"] { background: var(--color-blue-soft); color: var(--color-purple); border-color: var(--color-purple); }
  .site-header--blue .site-nav__link[aria-current="page"],
  .site-header--blue .site-nav__link[aria-expanded="true"] { background: var(--color-white); }
  .site-header--blue :focus-visible { outline-color: var(--color-lime); }
  .site-header--blue .services-panel :focus-visible { outline-color: var(--color-blue); }
  .site-nav__link .icon { width: 16px; height: 16px; transition: transform var(--dur-ui) var(--ease-out); }
  .site-nav__link[aria-expanded="true"] .icon { transform: rotate(180deg); }

  /* ----- Services dropdown (B2) ----- */
  .services-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--color-paper);
    border-bottom: var(--border);
    color: var(--color-ink);
    padding-block: var(--space-5);
  }
  .services-panel[hidden] { display: none; }
  .services-panel.is-open { animation: slice-drop var(--dur-ui) var(--ease-out); }

  /* Nine services in a 3×3 block, the two actions stacked beside it (design item 17).
     A tenth service breaks this: the rule for ten is 5×2 with the actions below. */
  .services-panel__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
  .services-panel__list { grid-column: span 9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .services-panel__actions { grid-column: span 3; display: grid; grid-template-rows: 1fr 1fr; gap: var(--space-4); }
  .services-panel__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 96px;
    padding: var(--space-4);
    background: var(--color-white);
    color: inherit;
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out), background-color var(--dur-lift);
  }
  .services-panel__tile:hover { color: inherit; background: var(--color-blue-soft); transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
  .services-panel__tile strong { color: var(--color-purple); font-size: 16px; font-weight: 800; }
  .services-panel__tile span { font-size: 14px; line-height: 1.45; }
  .services-panel__tile--all { justify-content: flex-end; background: var(--color-blue); color: var(--color-white); }
  .services-panel__tile--all strong { color: var(--color-white); }
  .services-panel__tile--all:hover { background: var(--color-blue); color: var(--color-white); }
  .services-panel__tile--all span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
  .services-panel__tile--quiz { justify-content: flex-end; background: var(--color-lime); color: var(--color-purple); }
  .services-panel__tile--quiz:hover { background: var(--color-lime); }
  .services-panel__actions strong { font-size: 18px; }
  .site-header--blue .services-panel .services-panel__tile--all:focus-visible { outline-color: var(--color-lime); }
  .services-panel__sticker { position: absolute; top: -18px; right: 12px; width: 56px; height: auto; transform: rotate(8deg); pointer-events: none; }
  .services-panel__new, .mobile-menu__new { display: inline-flex; padding: 1px 8px; color: var(--color-ink); background: var(--color-lime); border: var(--border); border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; }
  .services-panel__tile .services-panel__new { position: absolute; top: 12px; right: 12px; font-size: 11px; line-height: 1.45; transform: rotate(6deg); }

  /* ----- Mobile menu (B3) ----- */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background: var(--color-purple);
    color: var(--color-white);
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu.is-open { animation: slice-drop var(--dur-ui) var(--ease-out); }
  .mobile-menu :focus-visible { outline-color: var(--color-lime); }

  .mobile-menu__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    flex: none;
    border-bottom: 2px solid var(--color-blue);
  }
  .mobile-menu__bar img { height: 30px; width: auto; }
  .mobile-menu__close { box-shadow: 3px 3px 0 var(--color-lime); }

  .mobile-menu__body {
    flex: 1;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-lime) var(--color-purple);
    padding-block: 20px calc(var(--contact-bar-h) + var(--space-5));
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .mobile-menu__link,
  .mobile-menu__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-white);
    text-decoration: none;
    text-align: left;
    background: transparent;
    border: 0;
    border-top: 2px solid var(--color-blue);
  }
  .mobile-menu__link:hover { color: var(--color-lime); }
  .mobile-menu__link:last-child { border-bottom: 2px solid var(--color-blue); }
  .mobile-menu__toggle { border-top: 0; color: var(--color-lime); width: 100%; font-family: inherit; }
  .mobile-menu__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border: 2px solid var(--color-lime);
    border-radius: var(--radius-pill);
  }
  .mobile-menu__toggle-icon .icon { width: 16px; height: 16px; transition: transform var(--dur-ui) var(--ease-out); }
  .mobile-menu__toggle[aria-expanded="true"] .mobile-menu__toggle-icon .icon { transform: rotate(45deg); }
  .mobile-menu__services { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 4px 0 12px; }
  .mobile-menu__action { margin-top: 10px; }
  .mobile-menu__services[hidden] { display: none; }
  .mobile-menu__service { grid-column: span 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 12px 4px; color: var(--color-white); border-bottom: 2px solid var(--color-blue); font-size: 16px; font-weight: 600; text-decoration: none; }
  .mobile-menu__action { display: flex; align-items: center; min-height: 56px; padding: 12px; border: var(--border); border-radius: 12px; font-size: 15px; font-weight: 800; line-height: 1.2; text-decoration: none; }
  .mobile-menu__action--all { color: var(--color-white); background: var(--color-blue); }
  .mobile-menu__action--quiz { color: var(--color-ink); background: var(--color-lime); }
  .mobile-menu__service:hover { color: var(--color-lime); }
  .mobile-menu__action:hover { color: inherit; }
  .mobile-menu__action--all:hover { color: var(--color-white); }

  .mobile-menu.is-open .mobile-menu__body > * { animation: slice-rise var(--dur-ui) var(--ease-out) both; }
  .mobile-menu.is-open .mobile-menu__body > :nth-child(2) { animation-delay: 40ms; }
  .mobile-menu.is-open .mobile-menu__body > :nth-child(3) { animation-delay: 80ms; }
  .mobile-menu.is-open .mobile-menu__body > :nth-child(4) { animation-delay: 120ms; }
  .mobile-menu.is-open .mobile-menu__body > :nth-child(5) { animation-delay: 160ms; }
  .mobile-menu.is-open .mobile-menu__body > :nth-child(6) { animation-delay: 200ms; }

  html.has-open-menu { overflow: hidden; }
  @media (min-width: 601px) { .admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0px); } }

  /* ----- Sticky contact bar (B4, mobile only) ----- */
  .contact-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: var(--contact-bar-h);
    background: var(--color-white);
    border-top: var(--border);
    transition: transform var(--dur-ui) var(--ease-out);
  }
  .contact-bar.is-hidden { transform: translateY(100%); }
  html.has-open-menu .contact-bar { transform: none; }
  @media (min-width: 768px) { .contact-bar { display: none; } }

  .contact-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    color: var(--color-purple);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border-right: var(--border);
  }
  .contact-bar__item:last-child { border-right: 0; }
  .contact-bar__item:hover { background: var(--color-blue-soft); color: var(--color-purple); }
  .contact-bar__item .icon { width: 22px; height: 22px; }
  .contact-bar__item--quote { background: var(--color-lime); color: var(--color-ink); }
  .contact-bar__item--quote:hover { background: var(--color-lime); color: var(--color-ink); }

  /* ----- Breadcrumb (B6) ----- */
  .breadcrumb { font-size: var(--text-small); }
  .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; }
  .breadcrumb li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
  .breadcrumb li + li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .6;
  }
  .breadcrumb a { color: var(--color-blue); font-weight: 600; text-decoration: none; }
  .breadcrumb a:hover { text-decoration: underline; }
  .breadcrumb [aria-current="page"] { color: var(--color-purple); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
  /* Lime links on dark, as in the design (lime on the brand blue measures 4.497:1). */
  .on-dark .breadcrumb a { color: var(--color-lime); }
  .on-dark .breadcrumb [aria-current="page"] { color: var(--color-white); }

  /* ----- Footer (B5) ----- */
  .site-footer { background: var(--color-purple); color: var(--color-white); padding: clamp(48px, 7vw, 80px) 0 32px; }
  .site-footer__inner { display: flex; flex-direction: column; gap: 48px; }
  .site-footer a { color: var(--color-white); text-decoration: none; }
  .site-footer a:hover { color: var(--color-white); text-decoration: underline; }

  .footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px; }
  .footer-column { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; }
  .footer-column__title { color: var(--color-lime); font-size: 16px; font-weight: 800; }
  .footer-column address { font-style: normal; }
  .footer-social { display: flex; flex-wrap: wrap; gap: 12px; }
  .site-footer .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--color-white); border: 2px solid var(--color-white); border-radius: var(--radius-pill); transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out); }
  .site-footer .footer-social a:hover { text-decoration: none; transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--color-lime); }
  .footer-social .icon { width: 22px; height: 22px; }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 2px solid var(--color-blue);
    font-size: 14px;
  }
  .footer-bottom img { height: 32px; width: auto; }
  .footer-bottom__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
  .footer-bottom__links button { padding: 0; background: transparent; border: 0; color: var(--color-white); font-size: 14px; }
  .footer-bottom__links button:hover { text-decoration: underline; }
  .footer-bottom__legal { opacity: .8; }
  .site-footer :focus-visible { outline-color: var(--color-lime); }

  /* ==========================================================
     Blocks (docs/blocks.md)
     ========================================================== */

  /* Page content: blocks stack with the design's section rhythm. Every section sits in the
     1240px container; heroes run full width (blue or purple band, bottom border) with their
     content kept in the container, as in every Claude Design template. */
  .container.page-content { max-width: none; padding-inline: 0; }
  .page-content {
    --section-gap: clamp(48px, 7vw, 96px);
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    padding-block: clamp(32px, 5vw, 48px) var(--section-gap);
  }
  /* .container.page-content (two classes) so a block's own "margin: 0" can't undo the centring. */
  .container.page-content > * { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .container.page-content > .hero,
  .container.page-content > .project-header,
  .container.page-content > .post-hero {
    width: 100%;
    padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  }
  .page-content:has(> :is(.hero, .project-header, .post-hero):first-child) { padding-top: 0; }
  /* The first section after a hero sits closer, as in the design (32-48px, not 48-96px). */
  .page-content > :is(.hero, .project-header, .post-hero):first-child + * { margin-top: calc(clamp(32px, 5vw, 48px) - var(--section-gap)); }
  .page-content > .section-heading + * { margin-top: calc(32px - var(--section-gap)); }
  /* Plain prose between blocks: a readable measure, aligned with the container's left edge. */
  .container.page-content > :is(p, ul, ol, h2, h3):not([class*="wp-block-slice"]) { max-width: 65ch; margin-inline: max(var(--gutter), (100% - var(--container)) / 2) auto; }

  /* Emphasised words: lime on dark backgrounds (heroes, CTA bands); plain on light ones,
     where the design's section headings are one colour. */
  .emphasis { font-style: normal; color: inherit; }
  .on-dark .emphasis { color: var(--color-lime); }

  .eyebrow {
    align-self: flex-start;
    display: inline-flex;
    padding: 3px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-purple);
    background: var(--color-blue-soft);
    border: var(--border);
    border-radius: var(--radius-pill);
  }
  .on-dark .eyebrow { background: transparent; color: var(--color-lime); border-color: var(--color-lime); }

  .text-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--color-blue);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
  .on-dark .text-link { color: var(--color-white); }
  .on-dark .text-link:hover { color: var(--color-lime); }
  .text-link .icon { transition: transform var(--dur-lift) var(--ease-out); }
  .text-link:hover .icon { transform: translateX(3px); }

  /* A1 Section heading */
  .section-heading { display: flex; flex-direction: column; gap: 12px; }
  .section-heading > * { max-width: 40em; }
  .section-heading__title { font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1; font-weight: 800; }
  .section-heading__lead { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; }
  .section-heading--dark {
    padding: var(--space-6);
    background: var(--color-purple);
    color: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-md);
  }
  .section-heading--dark .section-heading__title { color: var(--color-white); }

  /* A2 Bento backgrounds */
  .bento--paper, .bento--white { padding: var(--space-4); border: var(--border); border-radius: var(--radius-tile); }
  .bento--paper { background: var(--color-paper); }
  .bento--white { background: var(--color-white); }

  /* A3 Tiles: text pinned to the bottom, image or colour absorbs extra height */
  .tile {
    position: relative;
    display: flex;
    flex-direction: column;
    --tile-pad: clamp(20px, 2.5vw, 28px);
    gap: 12px;
    min-height: 150px;
    padding: var(--tile-pad);
    color: var(--color-ink);
    background: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-md);
    text-decoration: none;
  }
  .tile--big { min-height: 220px; border: var(--border-lg); box-shadow: var(--shadow-lg); }
  .tile--big.tile--link:hover { box-shadow: 11px 11px 0 var(--color-purple); }
  .tile__media { flex: 1; min-height: 0; margin: calc(-1 * var(--tile-pad)) calc(-1 * var(--tile-pad)) 0; overflow: hidden; border-radius: var(--radius-inner) var(--radius-inner) 0 0; }
  /* Icon tiles (e.g. "Based in Malta"): icon circle and text side by side. */
  .tile--icon { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; min-height: 0; padding: 24px; }
  .tile--icon .tile__body { margin-top: 0; gap: 2px; }
  .tile__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; color: var(--color-blue); border: var(--border); border-radius: var(--radius-pill); }
  .on-dark .tile__icon { color: var(--color-lime); border-color: var(--color-lime); }
  .tile__icon .icon { width: 24px; height: 24px; }
  .tile--icon .tile__title { font-size: 20px; }
  .tile--icon .tile__text { font-size: 15px; }
  .tile__image { width: 100%; height: 100%; object-fit: cover; }
  .tile__body { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
  .tile__eyebrow { font-size: 14px; font-weight: 600; }
  .tile__title { color: var(--color-purple); font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
  .tile--big .tile__title { font-size: clamp(22px, 2.5vw, 28px); line-height: 1.1; }
  /* Half tiles on phones are ~160px wide: long single words ("Competition") must not overflow. */
  @media (max-width: 1023px) { .bento__half .tile__title { font-size: var(--text-lead); overflow-wrap: anywhere; hyphens: auto; } }
  .tile__text { font-size: 15px; line-height: 1.5; }
  .tile--light .tile__eyebrow { color: var(--color-blue); }
  .tile__steps { margin-top: 4px; }
  .tile:has(.tile__steps, .tile__checks) .tile__body { margin-top: 0; gap: 16px; }
  .tile:has(.tile__checks) .tile__body { gap: 6px; }
  .tile--light .tile__link { color: var(--color-blue); }
  .tile__chat { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
  .tile__chat .chip-button { padding: 12px 20px; font-size: 16px; }
  .tile__checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 24px; margin-top: 8px; font-size: 16px; }
  .tile__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); font-weight: 600; }
  .tile__stat { color: var(--color-blue); font-size: clamp(44px, 5vw, 64px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
  .bento__half .tile__stat { font-size: clamp(32px, 9vw, 64px); }
  .tile__sticker { position: absolute; top: -22px; right: 20px; width: 80px; height: auto; transform: rotate(8deg); pointer-events: none; transition: transform var(--dur-tile) var(--ease-out); }

  .tile--blue { background: var(--color-blue); color: var(--color-white); }
  .tile--purple, .tile--callout { background: var(--color-purple); color: var(--color-white); }
  .tile--lime { background: var(--color-lime); color: var(--color-purple); }
  .tile--lavender { background: var(--color-blue-soft); }
  .tile--purple .tile__eyebrow { color: var(--color-lime); }
  /* Showcase tiles (design item 13): text at the top, so the row reads as three facts. */
  .single-project .bento > .tile .tile__body { margin-top: 0; }
  .single-project .bento > .tile--purple .tile__sticker { top: -22px; right: 18px; width: 64px; }
  .single-project .bento > .tile--purple .tile__text a { color: var(--color-lime); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .single-project .bento > .tile--purple .tile__text a:hover { color: var(--color-white); }
  .tile--lavender .tile__eyebrow { color: var(--color-blue); }
  .tile--blue .tile__title, .tile--callout .tile__title { color: var(--color-white); }
  .tile--purple .tile__title { color: var(--color-lime); }
  .tile--lime .tile__stat { color: var(--color-purple); }
  .tile--blue .tile__stat { color: var(--color-white); }
  .tile--purple .tile__stat { color: var(--color-lime); }
  .tile--blue .tile__stat + .tile__title, .tile--purple .tile__stat + .tile__title { color: var(--color-white); }
  .tile--stat .tile__title, .tile__stat + .tile__title { color: var(--color-purple); font-size: 15px; font-weight: 600; letter-spacing: 0; }
  .tile--image { padding: 0; overflow: hidden; min-height: 220px; }
  .tile--image .tile__media { margin: 0; border-radius: var(--radius-inner); }
  .tile--image .tile__body:not(:has(*)) { display: none; }
  /* Beside a text tile the row follows the text: a square image must not set the height. */
  @media (min-width: 1024px) { .tile--image:not(:has(.tile__body *)) .tile__media { position: absolute; inset: 0; } }
  .tile--cta { background: var(--color-lime); color: var(--color-purple); }
  .tile--cta .button { align-self: flex-start; margin-top: var(--space-3); background: var(--color-purple); color: var(--color-white); box-shadow: 5px 5px 0 var(--color-white); }
  .tile--callout .tile__title { font-size: var(--text-lead); font-weight: 600; line-height: 1.4; }
  .tile--callout .tile__title::before { content: "\201C"; color: var(--color-lime); }
  .tile--callout .tile__title::after { content: "\201D"; color: var(--color-lime); }

  .tile--link { transition: transform var(--dur-tile) var(--ease-out), box-shadow var(--dur-tile) var(--ease-out); }
  .tile--link:hover { color: inherit; transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
  .tile--blue.tile--link:hover, .tile--purple.tile--link:hover { color: var(--color-white); }
  .tile--link:hover .tile__sticker { transform: rotate(14deg); }
  .tile--link:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--color-purple); transition-duration: var(--dur-press); }

  /* CTA strip: one-line purple strip mid-page */
  .cta-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(24px, 3vw, 40px);
    background: var(--color-purple);
    color: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-md);
  }
  .cta-strip.cta-band--blue { background: var(--color-blue); }
  .cta-strip__copy { display: flex; flex-direction: column; gap: 6px; }
  .cta-strip__title { color: var(--color-lime); font-size: clamp(22px, 2.5vw, 28px); font-weight: 800; line-height: 1.15; }
  .cta-strip__text { font-size: 16px; }

  /* A4 CTA band */
  .cta-band {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 32px;
    align-items: center;
    padding: clamp(28px, 5vw, 64px) clamp(24px, 4vw, 56px);
    background: var(--color-purple);
    color: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-md);
  }
  .cta-band--blue { background: var(--color-blue); }
  .cta-band__copy { display: flex; flex-direction: column; gap: 12px; }
  .cta-band__title { color: var(--color-white); font-size: clamp(28px, 4vw, 48px); line-height: 1.05; font-weight: 900; }
  .cta-band__text { max-width: 30em; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; }
  .cta-band__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .cta-band__chat { display: flex; flex-wrap: wrap; gap: 12px; }
  .cta-band__sticker { position: absolute; top: -26px; left: 24px; width: 80px; height: auto; transform: rotate(-8deg); pointer-events: none; }

  .chat-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 12px 20px;
    background: var(--color-white);
    color: var(--color-purple);
    border: var(--border);
    border-radius: var(--radius-pill);
    box-shadow: 3px 3px 0 var(--color-lime);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out);
  }
  .chat-button:hover { color: var(--color-purple); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--color-lime); }

  /* C1 Heroes: full-width band (blue, or purple for legal / thank-you / 404) with a 2px
     bottom border; content in the container (Claude Design templates). */
  .hero { position: relative; color: var(--color-white); background: var(--color-blue); border-bottom: var(--border); }
  .hero--dark { background: var(--color-purple); }
  .hero__title { color: var(--color-white); font-size: clamp(34px, 4.5vw, 56px); line-height: 1.05; font-weight: 800; max-width: 14em; }
  .hero__title--display { font-size: clamp(40px, 6.5vw, 80px); line-height: 1; font-weight: 900; max-width: none; }
  .hero__lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; max-width: 30em; }
  .hero__lead--small { font-size: clamp(18px, 2vw, 22px); }
  .hero__buttons { display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .hero .button { padding: 15px 30px; font-size: 18px; }

  /* Home: 12-column bento. Headline 7 cols, image 5 cols x 2 rows, two stats + quiz below. */
  .hero--home {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 24px);
    padding-block: clamp(24px, 4vw, 56px);
  }
  .hero--home > * { grid-column: span 12; }
  .hero--home > .hero__stat { grid-column: span 6; }
  .hero__headline { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding-block: clamp(8px, 2vw, 24px); }
  .hero__sticker { width: 88px; height: auto; align-self: flex-start; transform: rotate(-6deg); animation: slice-wobble 4s ease-in-out infinite; }
  .hero__media {
    display: flex;
    align-items: center;
    min-height: 240px;
    overflow: hidden;
    background: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-md);
  }
  .hero__img { display: block; width: 100%; height: auto; }
  .hero__stat, .hero__quiz {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 120px;
    padding: 20px;
    color: var(--color-purple);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-md);
  }
  .hero__stat strong { margin-top: auto; font-size: clamp(32px, 4vw, 48px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
  .hero__stat span { font-size: 14px; font-weight: 600; color: var(--color-purple); }
  .hero__stat--lime { background: var(--color-lime); }
  .hero__stat--white { background: var(--color-white); color: var(--color-ink); }
  .hero__stat--white strong { color: var(--color-blue); }
  .hero__quiz {
    gap: 4px;
    background: var(--color-purple);
    color: var(--color-white);
    text-decoration: none;
    transition: transform var(--dur-tile) var(--ease-out), box-shadow var(--dur-tile) var(--ease-out);
  }
  .hero__quiz strong { margin-top: auto; color: var(--color-lime); font-size: 18px; font-weight: 800; }
  .hero__quiz span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
  .hero__quiz:hover { color: var(--color-white); transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }

  @media (min-width: 1024px) {
    .hero--home > .hero__headline { grid-column: span 7; }
    .hero--home > .hero__media { grid-column: span 5; grid-row: span 2; }
    .hero--home > .hero__stat { grid-column: span 2; }
    .hero--home > .hero__quiz { grid-column: span 3; }
  }

  /* Page: copy and a tilted lime image frame side by side; small: copy only. */
  .hero--page,
  .hero--small { padding-block: clamp(32px, 5vw, 72px); }
  .hero--page {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 32px;
    align-items: center;
  }
  .hero__copy,
  .hero--small { display: flex; flex-direction: column; gap: 16px; }
  .hero__copy .button { align-self: flex-start; }
  .hero__frame {
    justify-self: center;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-lime);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-md);
    transform: rotate(2deg);
  }
  .hero__frame .hero__img { width: 100%; height: 100%; object-fit: cover; }

  /* ----- Shared: check marks ----- */
  .checks { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .checks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
  .checks__mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    background: var(--color-lime);
    color: var(--color-ink);
    border: var(--border);
    border-radius: var(--radius-pill);
  }
  .checks__mark .icon { width: 14px; height: 14px; stroke-width: 3; }

  /* ----- Scroll reveal (only when JS is on and motion allowed) ----- */
  .reveal-group.is-reveal-ready > * { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
  .reveal-group.is-revealed > * { opacity: 1; transform: none; }

  /* ----- C2 Services grid ----- */
  .services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .services-grid > * { grid-column: span 2; }
  @media (min-width: 560px) { .services-grid > .service-tile:not(.service-tile--large) { grid-column: span 1; } }
  @media (min-width: 1024px) {
    .services-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .services-grid > .service-tile--large { grid-column: span 6; }
    .services-grid > .service-tile:not(.service-tile--large) { grid-column: span 4; }
    /* Nine services (option 9a, D-054): two large, a row of four, a row of three. */
    .services-grid > .service-tile:nth-child(n+3):nth-child(-n+6) { grid-column: span 3; }
    .services-grid > .service-tile:nth-child(n+3):nth-child(-n+6) .service-tile__name { font-size: 18px; }
  }
  /* Up to tablet the small tiles run in twos: the last takes the full row. */
  @media (min-width: 560px) and (max-width: 767px) { .services-grid > .service-tile:last-child:nth-child(odd) { grid-column: span 2; } }
  /* Tablet (design item 19): large 3-3, small 3-3 and 3-3, the last three 2-2-2, so no lone tile. */
  @media (min-width: 768px) and (max-width: 1023px) {
    .services-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .services-grid > .service-tile--large { grid-column: span 3; min-height: 200px; }
    .services-grid > .service-tile:not(.service-tile--large) { grid-column: span 3; min-height: 130px; }
    .services-grid > .service-tile:last-child:nth-child(odd) { grid-column: span 6; }
    .services-grid > .service-tile:nth-child(n+7):nth-last-child(-n+3) { grid-column: span 2; }
  }
  .service-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 170px;
    padding: var(--space-5);
    background: var(--color-white);
    color: var(--color-ink);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition: transform var(--dur-tile) var(--ease-out), box-shadow var(--dur-tile) var(--ease-out), background-color var(--dur-tile);
  }
  .service-tile:hover { color: var(--color-ink); background: var(--color-blue-soft); transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
  .service-tile__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-lime);
    color: var(--color-purple);
    border: var(--border);
    border-radius: 10px;
    font-weight: 900;
  }
  .service-tile__name { margin-top: auto; color: var(--color-purple); font-size: 20px; font-weight: 800; line-height: 1.15; }
  .service-tile__line { font-size: 15px; line-height: 1.45; }
  .service-tile__link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-blue); font-size: 15px; font-weight: 600; }
  .service-tile--new, .service-tile--new:hover { background: var(--color-lime); }
  .service-tile--new .service-tile__number { background: var(--color-white); }
  .service-tile--new .service-tile__link { color: var(--color-purple); }
  .service-tile__new { position: absolute; top: 14px; right: 14px; padding: 2px 10px; background: var(--color-white); color: var(--color-purple); border: var(--border); border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; transform: rotate(6deg); }
  .service-tile--large { justify-content: flex-end; min-height: 240px; padding: 28px; border: var(--border-lg); box-shadow: var(--shadow-lg); overflow: hidden; color: var(--color-white); }
  .service-tile--large .service-tile__name { font-size: clamp(24px, 2.5vw, 32px); color: var(--color-white); }
  .service-tile--large .service-tile__line { font-size: 16px; }
  .service-tile--large .service-tile__link { color: var(--color-white); font-size: 16px; }
  .service-tile--blue { background: var(--color-blue); }
  .service-tile--purple { background: var(--color-purple); }
  .service-tile--purple .service-tile__name, .service-tile--purple .service-tile__link { color: var(--color-lime); }
  .service-tile--large:hover { color: var(--color-white); box-shadow: 10px 10px 0 var(--color-purple); }
  .service-tile--blue:hover { background: var(--color-blue); }
  .service-tile--purple:hover { background: var(--color-purple); }
  .service-tile__sticker { position: absolute; top: 16px; right: 16px; width: 72px; height: auto; transform: rotate(8deg); transition: transform var(--dur-tile) var(--ease-out); }
  .service-tile:hover .service-tile__sticker { transform: rotate(14deg); }
  .services-grid--compact .service-tile { min-height: 130px; }

  /* ----- C3 Logo strip ----- */
  .logo-strip { display: flex; overflow: hidden; border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .logo-strip--dark { background: var(--color-purple); color: var(--color-white); }
  .logo-strip--light { background: var(--color-white); color: var(--color-purple); }
  /* The control has its own cell, so it never covers a logo (design item 11). */
  .logo-strip__control { display: flex; flex: none; align-items: center; justify-content: center; width: 64px; border-right: 2px solid var(--color-blue); }
  .logo-strip__control[hidden] { display: none; }
  @media (min-width: 768px) { .logo-strip__control { width: 84px; } }
  .logo-strip__viewport { display: flex; flex: 1; align-items: center; min-width: 0; overflow: hidden; padding-block: 18px; }
  @media (min-width: 768px) { .logo-strip__viewport { padding-block: 22px; } }
  .logo-strip__track { display: flex; width: max-content; animation: slice-marquee 30s linear infinite; }
  /* On the track, not the strip: pressing play over the button restarts it at once. */
  .logo-strip__track:hover, .logo-strip__track:focus-within, .logo-strip:has([aria-pressed="true"]) .logo-strip__track { animation-play-state: paused; }
  .logo-strip__row { display: flex; align-items: center; }
  .logo-strip__item { display: inline-flex; align-items: center; padding: 4px 20px; color: inherit; text-decoration: none; border-radius: 8px; }
  @media (min-width: 768px) { .logo-strip__item { padding-inline: 32px; } }
  a.logo-strip__item:hover { color: var(--color-lime); }
  .logo-strip--light a.logo-strip__item:hover { color: var(--color-blue); }
  .logo-strip__wordmark { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
  @media (min-width: 768px) { .logo-strip__wordmark { font-size: 22px; } }
  .logo-strip__logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; }
  .logo-strip--dark .logo-strip__logo { filter: brightness(0) invert(1); }
  .logo-strip--light .logo-strip__logo { filter: grayscale(1); }
  .logo-strip--dark a.logo-strip__item:hover .logo-strip__logo { filter: brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(35deg); }
  .logo-strip--dark a.logo-strip__item:focus-visible { outline: 3px solid var(--color-lime); outline-offset: -3px; }
  .logo-strip__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; cursor: pointer; color: var(--color-ink); background: var(--color-lime); border: var(--border); border-radius: var(--radius-pill); transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out); }
  .logo-strip__toggle:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--color-white); }
  .logo-strip--light .logo-strip__toggle:hover { box-shadow: 4px 4px 0 var(--color-purple); }
  .logo-strip__toggle:focus-visible { outline: 3px solid var(--color-white); outline-offset: 3px; }
  .logo-strip--light .logo-strip__toggle:focus-visible { outline-color: var(--color-blue); }
  .logo-strip__toggle[aria-pressed="true"] { color: var(--color-purple); background: var(--color-white); }
  .logo-strip__toggle[aria-pressed="true"] .logo-strip__icon-pause, .logo-strip__toggle[aria-pressed="false"] .logo-strip__icon-play { display: none; }
  /* Static layout: when the logos fit, and for reduced motion (at the end of this file). */
  .logo-strip--static .logo-strip__viewport { padding-inline: 16px; }
  .logo-strip--static .logo-strip__track { width: 100%; animation: none; }
  .logo-strip--static .logo-strip__row { flex-wrap: wrap; justify-content: center; gap: 8px 0; width: 100%; }
  .logo-strip--static .logo-strip__row[aria-hidden], .logo-strip--static .logo-strip__row [aria-hidden] { display: none; }

  /* ----- C4 Stats ----- */
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  @media (min-width: 1024px) { .stats--3 { grid-template-columns: repeat(3, 1fr); } .stats--4 { grid-template-columns: repeat(4, 1fr); } }
  .stats--3 > :first-child { grid-column: span 2; }
  @media (min-width: 1024px) { .stats--3 > :first-child { grid-column: auto; } }
  .stat {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 160px;
    padding: var(--space-5);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-md);
    color: var(--color-purple);
  }
  .stat__number { font-size: clamp(36px, 5vw, 64px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .stat__label { font-size: 15px; font-weight: 600; }
  .stat--white { background: var(--color-white); }
  .stat--white .stat__number { color: var(--color-blue); }
  .stat--lime { background: var(--color-lime); }
  .stat--blue { background: var(--color-blue); color: var(--color-white); }
  .stat--purple { background: var(--color-purple); color: var(--color-white); }
  .stat--purple .stat__number { color: var(--color-lime); }

  /* ----- C5 Process ----- */
  /* Process as cards (templates): auto-fit row of numbered tiles, the first one lime. */
  .process--cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: clamp(12px, 1.5vw, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .process-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 180px;
    padding: 20px;
    background: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-md);
  }
  .process-card--first { background: var(--color-lime); }
  .process-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-lime);
    color: var(--color-purple);
    border: var(--border);
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 900;
  }
  .process-card--first .process-card__num { background: var(--color-white); }
  .process-card__title { margin-top: auto; color: var(--color-purple); font-size: 18px; font-weight: 800; line-height: 1.15; }
  .process-card__text { font-size: 15px; line-height: 1.45; }

  .process__steps { display: none; }
  .process__panels { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
  .process__panel { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); }
  .process__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-lime);
    color: var(--color-purple);
    border: var(--border);
    border-radius: var(--radius-pill);
    font-weight: 900;
    position: relative;
  }
  .process__panel:not(:last-child) .process__dot::after { content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: 200px; margin-left: -1px; background: var(--color-purple); }
  .process__panel { position: relative; overflow: hidden; }
  .process__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--space-3);
    padding: 14px;
    background: var(--color-white);
    border: var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }
  .process__card .process__num { display: none; }
  .process__title { font-size: 16px; font-weight: 800; letter-spacing: 0; }
  .process__text { font-size: 14px; line-height: 1.45; }
  .process__image { display: none; }

  @media (min-width: 1024px) {
    .process.is-interactive .process__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: 20px; }
    .process__step {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      min-height: 110px;
      padding: var(--space-4);
      text-align: left;
      font-family: inherit;
      background: var(--color-white);
      color: var(--color-purple);
      border: var(--border);
      border-radius: var(--radius-tile);
      box-shadow: var(--shadow-sm);
      transition: transform var(--dur-lift) var(--ease-out);
    }
    .process__step:hover { transform: translate(-2px, -2px); }
    .process__step[aria-selected="true"] { background: var(--color-lime); color: var(--color-purple); box-shadow: var(--shadow-md); }
    .process__step .process__num { font-size: 14px; font-weight: 600; }
    .process__step strong { font-size: 17px; font-weight: 800; line-height: 1.15; }

    .process.is-interactive .process__panel { display: none; }
    .process.is-interactive .process__panel[data-active] { display: block; overflow: visible; }
    .process.is-interactive .process__dot { display: none; }
    .process.is-interactive .process__card {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: var(--space-5);
      align-items: center;
      margin: 0;
      padding: var(--space-6);
      border-radius: var(--radius-tile);
      box-shadow: var(--shadow-md);
      animation: slice-rise var(--dur-ui) var(--ease-out);
    }
    .process.is-interactive .process__copy { display: flex; flex-direction: column; gap: 10px; }
    .process.is-interactive .process__card .process__num { display: block; color: var(--color-blue); font-size: 14px; font-weight: 600; }
    .process.is-interactive .process__title { font-size: var(--text-h3); letter-spacing: -0.01em; }
    .process.is-interactive .process__text { font-size: 16px; line-height: 1.55; }
    .process.is-interactive .process__image {
      display: block;
      justify-self: center;
      width: 100%;
      max-width: 320px;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: var(--color-blue-soft);
      border: var(--border);
      border-radius: var(--radius-inner);
      box-shadow: var(--shadow-md);
      transform: rotate(-2deg);
    }
    .process__image img { width: 100%; height: 100%; object-fit: cover; }
  }

  /* ----- C6 Tabs (accordion on mobile) ----- */
  .tabs { display: flex; flex-direction: column; gap: 10px; }
  .tabs__item { background: var(--color-white); border: var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 0 var(--space-4); }
  .tabs__summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 48px; padding: 14px 0; cursor: pointer; list-style: none; color: var(--color-purple); font-weight: 800; }
  .tabs__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border: var(--border); border-radius: var(--radius-pill); background: var(--color-white); }
  .tabs__item[open] .tabs__icon { background: var(--color-lime); }
  .tabs__icon .icon { width: 14px; height: 14px; transition: transform var(--dur-ui) var(--ease-out); }
  .tabs__item[open] .tabs__icon .icon { transform: rotate(45deg); }
  .tabs__panel { display: grid; gap: var(--space-5); padding-bottom: var(--space-4); }
  .tabs__copy { display: flex; flex-direction: column; gap: 10px; }
  .tabs__title { font-size: var(--text-h3); letter-spacing: -0.01em; }

  .tabs.is-tabs { gap: 0; overflow: hidden; background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .tabs.is-tabs .tabs__list { display: flex; gap: var(--space-2); padding: var(--space-4); overflow-x: auto; background: var(--color-paper); border-bottom: var(--border); }
  .tabs__tab {
    flex: none;
    min-height: 40px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-purple);
    background: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    transition: transform var(--dur-lift) var(--ease-out);
  }
  .tabs__tab:hover { transform: translate(-1px, -1px); }
  .tabs__tab[aria-selected="true"] { background: var(--color-lime); }
  .tabs.is-tabs .tabs__item { border: 0; border-radius: 0; box-shadow: none; padding: 0; }
  .tabs.is-tabs .tabs__item:not([open]) { display: none; }
  .tabs.is-tabs .tabs__summary { display: none; }
  .tabs.is-tabs .tabs__panel { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding: clamp(20px, 3vw, 32px); }

  /* ----- C7 Checklist ----- */
  .checklist { display: flex; flex-direction: column; gap: var(--space-4); padding: clamp(20px, 3vw, 32px); background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .checklist__title { font-size: 20px; letter-spacing: 0; }
  @media (min-width: 768px) { .checklist--cols-2 .checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; } }

  /* ----- C8 Problem → solution ----- */
  .problem-solution { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
  .pair { display: flex; flex-direction: column; overflow: hidden; border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .pair__need, .pair__answer { display: flex; flex-direction: column; gap: 4px; padding: 20px var(--space-5); }
  .pair__need { background: var(--color-blue-soft); border-bottom: var(--border); }
  .pair__need span { color: var(--color-blue); font-size: 13px; font-weight: 600; }
  .pair__need strong { color: var(--color-purple); font-size: 20px; font-weight: 800; line-height: 1.2; }
  .pair__answer { flex: 1; background: var(--color-white); }
  .pair__answer p { font-size: 16px; line-height: 1.5; }
  .pair__answer span { color: var(--color-purple); font-size: 13px; font-weight: 600; }

  /* ----- C9 FAQ ----- */
  /* Design item 20: the left column is content-sized and sticky, so the lime card is never an
     empty field. Phones: heading, questions, card last. */
  .faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
  .faq__side { display: contents; }
  .faq__items { order: 1; }
  .faq__ask { order: 2; }
  @media (min-width: 768px) {
    .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .faq__side { position: sticky; top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px) + 24px); display: flex; flex-direction: column; gap: 24px; }
  }
  .faq__intro { display: flex; flex-direction: column; gap: 12px; }
  .faq__title { font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1; font-weight: 800; }
  .faq__lead { max-width: 40em; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; }
  .faq__lead a { font-weight: 600; }
  .faq__items { display: flex; flex-direction: column; gap: 12px; }
  /* "Didn't find your question?" card */
  .faq__ask {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    color: var(--color-purple);
    background: var(--color-lime);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-md);
  }
  .faq__ask-sticker { position: absolute; top: -22px; right: 16px; width: 68px; height: auto; transform: rotate(8deg); pointer-events: none; }
  .faq__ask-title { font-size: 20px; font-weight: 800; line-height: 1.15; }
  .faq__ask-text { font-size: 15px; line-height: 1.5; }
  .faq__ask-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
  .chip-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    color: var(--color-purple);
    background: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out);
  }
  .chip-button:hover { color: var(--color-purple); transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
  .faq__item { padding: 0 20px; background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-sm); }
  .faq__question { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 56px; padding: 18px 0; cursor: pointer; list-style: none; color: var(--color-purple); font-size: 17px; font-weight: 800; }
  .faq__question:focus-visible { outline-offset: -3px; border-radius: 12px; }
  .faq__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; background: var(--color-paper); border: var(--border); border-radius: var(--radius-pill); }
  .faq__icon .icon { width: 16px; height: 16px; transition: transform var(--dur-ui) var(--ease-out); }
  .faq__item[open] .faq__icon { background: var(--color-lime); }
  .faq__item[open] .faq__icon .icon { transform: rotate(45deg); }
  .faq__answer { max-width: 38em; padding-bottom: 20px; }
  .faq__item[open] .faq__answer { animation: slice-rise var(--dur-ui) var(--ease-out); }

  /* ----- C10 Team ----- */
  .team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
  .team--intro { grid-template-columns: 1fr; gap: clamp(12px, 1.5vw, 24px); }
  @media (min-width: 1024px) { .team--intro { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .team__tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 260px; padding: 28px; color: var(--color-purple); background: var(--color-lime); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .team__sticker { position: absolute; top: -24px; right: 20px; width: 76px; height: auto; transform: rotate(8deg); pointer-events: none; }
  .team__eyebrow { align-self: flex-start; padding: 3px 10px; background: var(--color-white); border: var(--border); border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; }
  .team__title { font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1; font-weight: 800; }
  .team__text { font-size: 16px; line-height: 1.55; }
  .team-card { display: flex; flex-direction: column; overflow: hidden; background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .team-card__photo { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: var(--border); }
  .team-card__photo-link { display: contents; }
  .team-card__photo--lime { background: var(--color-lime); }
  .team-card__photo--blue { background: var(--color-blue); }
  .team-card__photo--purple { background: var(--color-purple); }
  .team-card__photo--blue-soft { background: var(--color-blue-soft); }
  .team-card__sticker { position: absolute; top: 14px; width: 56px; height: auto; pointer-events: none; }
  .team-card__sticker--left { left: 14px; transform: rotate(-8deg); }
  .team-card__sticker--right { right: 14px; transform: rotate(8deg); }
  /* Arch window for portraits */
  .arch { display: flex; align-items: flex-end; justify-content: center; width: 62%; height: 90%; overflow: hidden; border: 3px solid var(--color-white); border-bottom: 0; border-radius: 999px 999px 0 0; box-shadow: 0 0 0 2px var(--color-purple); }
  .arch--lime { background: var(--color-lime); }
  .arch__img { display: block; width: 100%; max-width: none; height: auto; }
  .team-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 20px; }
  .team-card__name { font-size: 22px; letter-spacing: 0; }
  .team-card__name a { color: inherit; text-decoration: none; }
  .team-card__name a:hover { text-decoration: underline; }
  .team-card__role { color: var(--color-blue); font-size: 14px; font-weight: 600; }
  .team-card__line { font-size: 15px; line-height: 1.5; }
  .team-card__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
  .link-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; color: var(--color-purple); background: var(--color-white); font-size: 14px; font-weight: 600; text-decoration: none; border: var(--border); border-radius: var(--radius-pill); box-shadow: 2px 2px 0 var(--color-purple); }
  .link-chip .icon { width: 16px; height: 16px; }
  .link-chip:hover { background: var(--color-blue-soft); color: var(--color-purple); }
  .link-chip--soft { background: var(--color-blue-soft); }
  .link-chip--soft:hover { background: var(--color-lime); }

  /* ----- C11 Callouts ----- */
  .callout { display: flex; flex-direction: column; gap: var(--space-2); padding: 20px var(--space-5); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-sm); }
  .callout__label { display: inline-flex; align-items: center; gap: 6px; color: var(--color-purple); font-size: 13px; font-weight: 600; }
  .callout__label .icon { width: 16px; height: 16px; }
  .callout ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; }
  .callout--tip { background: var(--color-lime-soft); }
  .callout--warning { background: var(--color-white); border-left: 12px solid var(--color-purple); }
  .callout--warning .callout__label .icon { transform: rotate(45deg); }
  .callout--takeaways { background: var(--color-blue-soft); }
  .callout--takeaways .callout__label { color: var(--color-blue); }
  .callout--summary { background: var(--color-white); box-shadow: var(--shadow-md); padding: var(--space-5); }
  .callout--summary .callout__label { align-self: flex-start; padding: 3px 10px; background: var(--color-lime); color: var(--color-ink); border: var(--border); border-radius: var(--radius-pill); }
  .callout--quote { margin: 0; padding: var(--space-5); background: var(--color-purple); color: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-sm); }
  .callout__quote { margin: 0; }
  .callout__quote p { font-size: clamp(20px, 2vw, 24px); font-weight: 600; line-height: 1.3; }
  .callout__quote p::before { content: "\201C"; color: var(--color-lime); }
  .callout__quote p::after { content: "\201D"; color: var(--color-lime); }
  .callout__source { margin-top: 10px; font-size: 14px; }

  /* ----- C12 In-article CTA ----- */
  .inline-cta { position: relative; display: flex; flex-direction: column; gap: 14px; padding: var(--space-5); background: var(--color-blue); color: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .inline-cta__text { font-size: 20px; font-weight: 800; line-height: 1.2; max-width: 30em; }
  .inline-cta .button { align-self: flex-start; }
  .inline-cta__sticker { position: absolute; top: -18px; right: -10px; width: 64px; height: auto; transform: rotate(8deg); pointer-events: none; }

  /* ----- C13 Table of contents ----- */
  .toc { max-width: 320px; padding: 20px var(--space-5); background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-sm); }
  .toc__title { color: var(--color-blue); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
  .toc__list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
  .toc__list a { display: block; padding-left: 12px; color: var(--color-purple); font-size: 15px; text-decoration: none; border-left: 3px solid transparent; }
  .toc__list a:hover { border-left-color: var(--color-blue-soft); }
  .toc__list a[aria-current] { font-weight: 600; border-left-color: var(--color-lime); }

  /* ----- C14 Comparison ----- */
  .comparison { margin: 0; overflow: hidden; background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .comparison__scroll { overflow-x: auto; }
  .comparison table { width: 100%; border-collapse: collapse; font-size: 15px; }
  /* Three value columns need room; two fit a phone without side-scrolling. */
  .comparison table:has(thead th:nth-child(4)) { min-width: 480px; }
  @media (max-width: 479px) { .comparison table { font-size: 14px; } .comparison tbody th, .comparison td, .comparison thead th { padding: 10px; } .comparison thead th { font-size: 14px; } .comparison caption { padding: 12px 14px; } }
  .comparison caption { padding: 14px 20px; text-align: left; font-weight: 600; caption-side: top; }
  .comparison thead tr { background: var(--color-purple); color: var(--color-white); }
  .comparison thead th { padding: 14px 20px; text-align: left; color: var(--color-lime); font-weight: 800; }
  .comparison thead th:first-child { color: var(--color-white); font-size: 14px; font-weight: 600; }
  .comparison tbody tr { border-top: 2px solid var(--color-blue-soft); }
  .comparison tbody tr:nth-child(even) { background: var(--color-paper); }
  .comparison tbody th, .comparison td { padding: 14px 20px; text-align: left; vertical-align: top; }
  .comparison tbody th { position: sticky; left: 0; background: inherit; color: var(--color-purple); font-weight: 600; }
  .comparison tbody tr:nth-child(odd) th { background: var(--color-white); }
  .comparison__yes, .comparison__no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: var(--border); border-radius: var(--radius-pill); }
  .comparison__yes { background: var(--color-lime); }
  .comparison__no { background: var(--color-white); }
  .comparison__yes .icon, .comparison__no .icon { width: 14px; height: 14px; stroke-width: 3; }

  /* ----- C15 Author box ----- */
  .author-box { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; max-width: 760px; padding: 24px; background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .author-box__photo { display: flex; align-items: flex-end; justify-content: center; width: 88px; height: 88px; overflow: hidden; background: var(--color-blue); border: var(--border); border-radius: var(--radius-pill); }
  .author-box__photo img { display: block; width: 100%; height: auto; }
  .author-box__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .author-box__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .author-box__label { color: var(--color-blue); font-size: 13px; font-weight: 600; }
  .author-box__name { color: var(--color-purple); font-size: 20px; font-weight: 800; text-decoration: none; }
  .author-box__name:hover { text-decoration: underline; }
  .author-box__role { color: var(--color-blue); font-size: 14px; font-weight: 600; }
  .author-box__bio { font-size: 15px; line-height: 1.55; }
  .author-box__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px; }
  .author-box__links .text-link { font-size: 14px; }
  .post-hero__meta strong a { color: inherit; text-decoration: none; }
  .post-hero__meta strong a:hover { text-decoration: underline; }

  /* ----- Tags and chips ----- */
  .tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .tag { display: inline-flex; align-items: center; padding: 2px 10px; font-size: 13px; font-weight: 600; color: var(--color-purple); background: var(--color-blue-soft); border: var(--border); border-radius: var(--radius-pill); text-decoration: none; }
  .tag--lime { background: var(--color-lime); color: var(--color-ink); }
  .tag--more { background: var(--color-white); }
  .tag--link { padding: 4px 12px; font-size: 14px; background: var(--color-white); }
  .tag--link:hover { background: var(--color-lime); color: var(--color-purple); }
  .chips { display: flex; flex-wrap: wrap; gap: 10px; }
  @media (max-width: 767px) { .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--space-2); scrollbar-width: none; } .chip { flex: none; } }
  .chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-purple);
    background: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out);
  }
  .chip:hover { color: var(--color-purple); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-purple); }
  .chip[aria-current] { background: var(--color-lime); }

  /* ----- D1 Project cards + D2 grid ----- */
  .project-grid { display: flex; flex-direction: column; gap: var(--space-5); }
  .project-grid__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .project-grid__cards > * { grid-column: span 2; }
  @media (min-width: 560px) { .project-grid__cards > .project-card:not(.project-card--large) { grid-column: span 1; } }
  @media (min-width: 1024px) {
    .project-grid__cards { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .project-grid__cards > .project-card:not(.project-card--large) { grid-column: span 3; }
    .project-grid__cards > .project-card--large { grid-column: span 6; }
    .project-grid__cards > .project-card.project-card--w4 { grid-column: span 4; }
    .project-grid__cards > .project-card.project-card--wide { grid-column: span 6; }
  }
  @media (min-width: 560px) and (max-width: 1023px) { .project-grid__cards > .project-card.project-card--wide-tablet { grid-column: span 2; } }
  .project-card[hidden] { display: none; }
  .project-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: inherit;
    background: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition: transform var(--dur-tile) var(--ease-out), box-shadow var(--dur-tile) var(--ease-out);
  }
  .project-card:hover { color: inherit; transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
  .project-card__media { flex: 1; min-height: 0; aspect-ratio: 1; overflow: hidden; background: var(--color-blue); border-bottom: var(--border); }
  .project-card:nth-child(3n + 2) .project-card__media { background: var(--color-purple); }
  .project-card:nth-child(3n) .project-card__media { background: var(--color-lime); }
  .project-card--large .project-card__media { aspect-ratio: 16 / 10; }
  .project-card__img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .project-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
  /* Wide card (design item 15): collage left, so the square never crops. */
  @media (min-width: 560px) and (max-width: 1023px) {
    .project-card--wide-tablet { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .project-card--wide-tablet .project-card__media { border-bottom: 0; border-right: var(--border); }
  }
  @media (min-width: 1024px) {
    .project-card--wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .project-card--wide .project-card__media { border-bottom: 0; border-right: var(--border); }
    .project-card--wide .project-card__body { padding: 20px; }
  }
  /* Tags (design item 16): one row of N tags and "+N". Two rows' height from 560px, so the
     tags line up across a row of cards. */
  .project-card .tag { white-space: nowrap; }
  @media (min-width: 560px) { .project-card .tags { height: 64px; margin-top: auto; overflow: hidden; align-content: flex-start; } }
  /* N = 1: three-column cards on Home */
  @media (min-width: 1024px) {
    .project-card:not(.project-card--w4, .project-card--wide, .project-card--large) :is(.tag[data-n="2"], .tag[data-n="3"], .tag[data-n="4"], .tag--more:not([data-more="1"])) { display: none; }
  }
  /* N = 2: half-width cards on tablets */
  @media (min-width: 560px) and (max-width: 1023px) {
    .project-card:not(.project-card--wide-tablet, .project-card--large) :is(.tag[data-n="3"], .tag[data-n="4"], .tag--more:not([data-more="2"])) { display: none; }
  }
  /* N = 3: phones and four-column cards */
  @media (max-width: 559px) { .project-card :is(.tag[data-n="4"], .tag--more:not([data-more="3"])) { display: none; } }
  @media (min-width: 1024px) { .project-card--w4 :is(.tag[data-n="4"], .tag--more:not([data-more="3"])) { display: none; } }
  /* N = 4: wide and large cards */
  @media (min-width: 560px) { .project-card--large .tag--more:not([data-more="4"]) { display: none; } }
  @media (min-width: 560px) and (max-width: 1023px) { .project-card--wide-tablet .tag--more:not([data-more="4"]) { display: none; } }
  @media (min-width: 1024px) { .project-card--wide .tag--more:not([data-more="4"]) { display: none; } }
  /* Fills the row beside a lone wide card; not drawn for tablets. */
  .project-ask { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 200px; padding: 24px; color: var(--color-purple); background: var(--color-lime); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .project-ask[hidden] { display: none; }
  .project-ask__title { font-size: 22px; font-weight: 800; line-height: 1.15; }
  @media (min-width: 560px) and (max-width: 1023px) { .project-ask { display: none; } }
  @media (min-width: 1024px) { .project-grid__cards > .project-ask { grid-column: span 6; } }
  .project-card__name .icon { flex: none; width: 20px; height: 20px; color: var(--color-blue); }
  .project-card__name { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); color: var(--color-purple); font-size: 20px; font-weight: 800; }
  .project-grid__empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: 40px var(--space-5); text-align: center; background: var(--color-white); border: 2px dashed var(--color-purple); border-radius: var(--radius-tile); }
  .project-grid__empty[hidden] { display: none; }
  .project-grid__empty strong { color: var(--color-purple); font-size: 22px; font-weight: 800; }
  .project-grid__empty p { max-width: 28em; }
  .project-grid__empty-sticker { width: 72px; height: auto; transform: rotate(-6deg); }

  /* ----- D3 Project header ----- */
  .project-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 32px;
    align-items: end;
    padding-block: clamp(32px, 5vw, 72px);
    background: var(--color-blue);
    color: var(--color-white);
    border-bottom: var(--border);
  }
  .project-header__copy { display: flex; flex-direction: column; gap: 16px; }
  .project-header__logo { align-self: flex-start; display: inline-flex; padding: 10px 16px; background: var(--color-white); border: var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); }
  .project-header__logo img { height: 32px; width: auto; }
  .project-header__logo--text { color: var(--color-purple); font-size: 18px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
  .project-header__title { color: var(--color-white); font-size: clamp(34px, 4.5vw, 56px); line-height: 1.05; font-weight: 800; max-width: 14em; }
  .project-header__lead { max-width: 34em; }
  .project-header__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  @media (min-width: 768px) { .project-header__aside { justify-self: end; } }
  .project-header__year { font-size: 14px; font-weight: 600; }

  /* ----- D4 Gallery ----- */
  .gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
  .gallery__item { position: relative; grid-column: span 4; margin: 0; }
  .gallery__item--large { grid-column: span 8; }
  @media (max-width: 767px) {
    .gallery { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); scrollbar-width: none; }
    .gallery__item { display: flex; flex: 0 0 220px; flex-direction: column; gap: 8px; scroll-snap-align: start; }
    .gallery__item--browser { flex-basis: 300px; }
    .gallery__item--phone { flex-basis: 150px; }
  }
  .gallery__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-md);
    transition: transform var(--dur-tile) var(--ease-out), box-shadow var(--dur-tile) var(--ease-out);
  }
  .gallery__link:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
  .browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--color-paper); border-bottom: var(--border); }
  .browser-bar i { width: 10px; height: 10px; border: var(--border); border-radius: var(--radius-pill); background: var(--color-white); }
  .browser-bar i:nth-child(2) { background: var(--color-lime); }
  .browser-bar i:nth-child(3) { background: var(--color-blue); }
  .browser-bar span { flex: 1; margin-left: var(--space-2); padding: 0 8px; font-size: 11px; font-weight: 600; line-height: 14px; color: var(--color-purple); background: var(--color-white); border: var(--border); border-radius: var(--radius-pill); }
  .gallery__frame { display: block; flex: 1; }
  .gallery__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  /* Phone screen on a flat ground, at the row's height, never cropped (design item 14). */
  .gallery__item--phone .gallery__link { position: relative; min-height: 420px; }
  .gallery__item--on-lime .gallery__link { background: var(--color-lime); }
  .gallery__item--on-blue .gallery__link { background: var(--color-blue); }
  .gallery__item--phone .gallery__frame { position: absolute; top: 20px; bottom: 52px; left: 50%; aspect-ratio: 9 / 19.5; overflow: hidden; background: var(--color-white); border: var(--border); border-radius: 22px; box-shadow: 4px 4px 0 var(--color-purple); transform: translateX(-50%); }
  .gallery__item--collage .gallery__link { height: 100%; background: var(--color-lime); }
  .gallery__item--collage .gallery__frame { height: 100%; min-height: 0; }
  .gallery__dots { display: none; }
  @media (max-width: 767px) {
    .gallery__link { flex: none; height: 220px; }
    .gallery__item--phone .gallery__link { min-height: 0; }
    .gallery__item--phone .gallery__frame { top: 12px; bottom: 12px; border-radius: 14px; box-shadow: none; }
    .gallery__dots { display: flex; justify-content: center; gap: 6px; }
    .page-content > .gallery__dots { margin-top: calc(4px - var(--section-gap)); }
    .gallery__dots i { width: 8px; height: 8px; background: var(--color-white); border: var(--border); border-radius: var(--radius-pill); }
    .gallery__dots i.is-current { background: var(--color-lime); }
  }
  .gallery__caption { padding-left: 4px; color: var(--color-purple); font-size: 13px; font-weight: 600; }
  @media (min-width: 768px) {
    .gallery__caption { position: absolute; left: 14px; bottom: 14px; padding: 3px 12px; background: var(--color-white); border: var(--border); border-radius: var(--radius-pill); pointer-events: none; }
  }

  .lightbox { max-width: min(1200px, 94vw); max-height: 94vh; padding: var(--space-4); background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-lg); }
  .lightbox::backdrop { background: rgba(26, 1, 58, .8); }
  .lightbox[open] { animation: slice-rise var(--dur-ui) var(--ease-out); }
  .lightbox__figure { margin: 0; }
  .lightbox__img { max-height: 76vh; width: auto; margin-inline: auto; border-radius: var(--radius-sm); }
  .lightbox__caption { margin-top: var(--space-3); font-size: var(--text-small); text-align: center; }
  .lightbox__close { position: absolute; top: var(--space-3); right: var(--space-3); font-size: 22px; line-height: 1; z-index: 1; }
  .lightbox__nav { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }

  /* ----- D5 Before / after ----- */
  .before-after { margin: 0; overflow: hidden; border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); background: var(--color-white); }
  .before-after__stage { position: relative; }
  .before-after__stage img { width: 100%; height: auto; }
  .before-after__label { display: none; }
  .before-after__range { display: none; }
  .before-after__handle { display: none; }
  .before-after.is-interactive .before-after__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--position)) 0 0); }
  .before-after.is-interactive .before-after__before img { height: 100%; object-fit: cover; object-position: top; }
  .before-after.is-interactive .before-after__label { display: inline-flex; position: absolute; top: var(--space-3); padding: 3px 10px; font-size: 13px; font-weight: 600; background: var(--color-white); color: var(--color-purple); border: var(--border); border-radius: var(--radius-pill); pointer-events: none; }
  .before-after__label--before { left: var(--space-3); }
  .before-after__label--after { right: var(--space-3); background: var(--color-lime) !important; }
  .before-after.is-interactive .before-after__handle { display: block; position: absolute; top: 0; bottom: 0; left: var(--position); width: 4px; margin-left: -2px; background: var(--color-purple); pointer-events: none; }
  .before-after.is-interactive .before-after__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; background: var(--color-lime); border: var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
  .before-after.is-interactive .before-after__range { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
  .before-after.is-interactive .before-after__range:focus-visible ~ .before-after__handle::after,
  .before-after__range:focus-visible + .before-after__handle::after { outline: 3px solid var(--color-blue); outline-offset: 3px; }
  .before-after:focus-within .before-after__handle::after { outline: 3px solid var(--color-blue); outline-offset: 3px; }

  /* ----- D6 Next / previous project ----- */
  .project-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap); }
  .project-nav__tile { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: var(--space-5); color: var(--color-purple); background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); text-decoration: none; transition: transform var(--dur-tile) var(--ease-out), box-shadow var(--dur-tile) var(--ease-out); }
  .project-nav__tile:hover { color: var(--color-purple); transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
  .project-nav__tile:not(.project-nav__tile--next):hover { background: var(--color-blue-soft); }
  .project-nav__tile--next { grid-template-columns: 1fr auto; text-align: right; color: var(--color-white); background: var(--color-purple); }
  .project-nav__tile--next:hover { color: var(--color-white); }
  .project-nav__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .project-nav__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--color-purple); background: var(--color-white); border: var(--border); border-radius: 100px; }
  .project-nav__tile--next .project-nav__icon { color: var(--color-lime); background: transparent; border-color: var(--color-lime); }
  .project-nav__icon .icon { width: 22px; height: 22px; }
  .project-nav__label { font-size: 13px; font-weight: 600; color: var(--color-blue); }
  .project-nav__tile--next .project-nav__label { color: var(--color-lime); }
  .project-nav__tile strong { font-size: 20px; font-weight: 800; }
  /* Showcase tiles read from the top, and the Services tile sits on the same grid (template D3). */
  .single-project .bento .tile { min-height: 0; }
  .single-project .bento .tile__body { margin-top: 0; gap: 10px; }
  .single-project .bento .tile__text { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; }
  .project-services { min-height: 0; }
  .project-services__list { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .project-nav__services { font-size: 14px; }

  /* ----- F7 Map tile ----- */
  .map { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 24px); }
  .map > * { grid-column: span 12; }
  @media (min-width: 1024px) { .map__card { grid-column: span 5; } .map__info { grid-column: span 7; } }
  .map__card { display: flex; flex-direction: column; min-height: 280px; overflow: hidden; background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .map__media { position: relative; flex: 1; min-height: 160px; background: var(--color-blue-soft); }
  .map__media img { width: 100%; height: 100%; object-fit: cover; }
  .map__media--pattern { background: repeating-linear-gradient(135deg, var(--color-blue-soft) 0 10px, var(--color-paper) 10px 20px); }
  .map__pin { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; background: var(--color-lime); border: var(--border); border-radius: 100px 100px 100px 0; box-shadow: var(--shadow-sm); transform: translate(-50%, -100%) rotate(-45deg); }
  .map__caption { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-top: var(--border); font-size: 15px; line-height: 1.5; }
  .map__title { color: var(--color-purple); font-size: 17px; font-weight: 800; }
  .map__open { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
  .map__open .icon { width: 16px; height: 16px; }
  .map__info { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.5vw, 28px); font-size: 16px; line-height: 1.5; background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .map__info strong { color: var(--color-purple); font-weight: 800; }
  .map__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
  .map__buttons .chip-button { padding: 12px 20px; font-size: 16px; }
  .map__buttons .chip-button .icon { width: 18px; height: 18px; }

  /* ----- Post cards (latest / related posts, blog) ----- */
  /* Post cards (Blog index template): image on top, text below. Featured card takes half
     the width over two rows with the next two beside it, then rows of three. */
  .post-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 24px); }
  .post-grid > .post-card { grid-column: span 12; }
  @media (min-width: 768px) { .post-grid > .post-card { grid-column: span 6; } }
  @media (min-width: 1024px) {
    .post-grid > .post-card { grid-column: span 4; }
    .post-grid > .post-card--featured { grid-column: span 6; grid-row: span 2; }
    .post-grid > .post-card--featured ~ .post-card:nth-child(-n + 3) { grid-column: span 6; }
  }
  .post-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); transition: transform var(--dur-tile) var(--ease-out), box-shadow var(--dur-tile) var(--ease-out); }
  .post-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
  .post-card--featured { border: var(--border-lg); box-shadow: var(--shadow-lg); }
  .post-card--featured:hover { box-shadow: 11px 11px 0 var(--color-purple); }
  .post-card__media { flex: 1; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-blue); border-bottom: var(--border); }
  .post-card:nth-child(3n + 2) .post-card__media { background: var(--color-lime); }
  .post-card:nth-child(3n) .post-card__media { background: var(--color-purple); }
  .post-card__media picture { display: contents; }
  .post-card__img { width: 100%; height: 100%; object-fit: cover; }
  .post-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; }
  .post-card--featured .post-card__body { gap: 10px; padding: 24px; }
  .post-card__body .tag { align-self: flex-start; }
  .post-card:not(.post-card--featured) .tag--lime { background: var(--color-blue-soft); color: var(--color-purple); }
  .post-card__title { font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: 0; }
  .post-card--featured .post-card__title { font-size: clamp(22px, 2.5vw, 28px); line-height: 1.15; letter-spacing: -0.01em; }
  .post-card__title a { color: var(--color-purple); text-decoration: none; }
  .post-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card is clickable */
  .post-card__excerpt { font-size: 16px; line-height: 1.5; }
  .post-card__meta { font-size: 14px; color: var(--color-ink); }

  /* ----- Related services ----- */
  .related-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--gap); }

  /* ==========================================================
     Templates: blog, post, search, 404
     ========================================================== */
  .icon--flip { transform: scaleX(-1); }

  /* F4 Search field */
  .search-field { display: flex; align-items: center; width: 100%; max-width: 440px; overflow: hidden; background: var(--color-white); border: var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
  .on-dark .search-field { box-shadow: 3px 3px 0 var(--color-lime); }
  .search-field:focus-within { outline: 3px solid var(--color-blue); outline-offset: 3px; }
  .on-dark .search-field:focus-within { outline-color: var(--color-lime); }
  .search-field input[type="search"] { flex: 1; min-width: 0; min-height: 48px; padding: 0 20px; color: var(--color-ink); background: transparent; border: 0; outline: 0; font-size: 16px; }
  .search-field button { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 48px; flex: none; color: var(--color-ink); background: var(--color-lime); border: 0; border-left: var(--border); }
  .search-field button .icon { width: 20px; height: 20px; }

  /* Archives */
  .page-content > .archive { display: flex; flex-direction: column; gap: 32px; }
  .post-section { display: flex; flex-direction: column; gap: 32px; }
  .archive__service { min-height: 0; }
  .empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: 40px var(--space-5); text-align: center; background: var(--color-white); border: 2px dashed var(--color-purple); border-radius: var(--radius-tile); }
  .empty-state strong { color: var(--color-purple); font-size: 22px; font-weight: 800; }
  .empty-state__sticker { width: 72px; height: auto; transform: rotate(-6deg); }

  /* F3 Pagination: numbers from 768px, "Page 2 of 8" on mobile */
  .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); }
  .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; color: var(--color-purple); background: var(--color-white); border: var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); font-weight: 600; text-decoration: none; }
  .pagination .page-numbers.current { background: var(--color-lime); }
  .pagination .page-numbers.dots { border: 0; box-shadow: none; background: none; }
  .pagination a.page-numbers:hover { transform: translate(-1px, -1px); color: var(--color-purple); }
  .pagination__status { width: 100%; text-align: center; font-size: var(--text-small); font-weight: 600; }
  @media (max-width: 767px) { .pagination .page-numbers:not(.prev):not(.next) { display: none; } }
  @media (min-width: 768px) { .pagination__status { display: none; } }

  /* Blog hero */
  .hero--blog .search-field { margin-top: var(--space-2); }

  /* Post (template 11) */
  /* Post hero: white full-width band with a bottom border (Blog Post template). */
  .post-hero { display: flex; flex-direction: column; gap: 20px; padding-block: clamp(32px, 5vw, 64px); background: var(--color-white); border-bottom: var(--border); }
  .post-hero > * { max-width: 820px; }
  .post-hero .tag { align-self: flex-start; }
  .post-hero__title { font-size: clamp(34px, 4.5vw, 56px); line-height: 1.05; font-weight: 800; }
  .post-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; }
  .post-hero__meta strong { color: var(--color-purple); }
  .post-hero__avatar { display: inline-flex; width: 40px; height: 40px; overflow: hidden; background: var(--color-lime); border: var(--border); border-radius: var(--radius-pill); }
  .post-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
  .post-featured { margin: 0; overflow: hidden; aspect-ratio: 16 / 9; border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .post-featured img { width: 100%; height: 100%; object-fit: cover; }
  .page-content.post { --section-gap: clamp(32px, 5vw, 56px); }

  .post-layout { display: grid; gap: var(--space-6); }
  @media (min-width: 1024px) {
    .post-layout--toc { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
    .post-layout--toc .post-layout__toc { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + var(--space-5)); }
    .post-layout--toc .post-content { grid-column: 1; grid-row: 1; }
  }
  .post-layout__toc .toc { max-width: none; }
  /* Legal pages (template 12): TOC left in a sticky 280px column, text right (max 680px). */
  .legal-layout { display: grid; gap: 40px; align-items: start; }
  @media (min-width: 1024px) {
    .legal-layout { grid-template-columns: 280px minmax(0, 1fr); }
    .legal-layout__toc { position: sticky; top: calc(var(--header-h) + 12px); }
  }
  .legal-layout__toc .toc { max-width: none; padding: 20px 24px; }
  .legal-layout .legal-layout__body { gap: 18px; max-width: 680px; min-width: 0; font-size: 17px; }
  .legal-layout .legal-layout__body > h2 { margin-top: 20px; font-size: clamp(22px, 2.5vw, 28px); line-height: 1.2; letter-spacing: -0.01em; }

  .post-content { display: flex; flex-direction: column; gap: 22px; max-width: 680px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.65; }
  .post-content > h2 { margin-top: 24px; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
  .post-content > h3 { margin-top: var(--space-3); font-size: var(--text-h3); }
  .post-content > ul, .post-content > ol { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding-left: 1.2em; }
  .post-content > ul li::marker { color: var(--color-blue); }
  .post-content figure { margin: 0; }
  .post-content figure img { border: var(--border); border-radius: var(--radius-tile); }
  .post-content figcaption { margin-top: var(--space-2); font-size: var(--text-small); }
  .post-content .faq { grid-template-columns: 1fr; }
  .post-content .faq__side { position: static; display: contents; }
  .post-content .callout, .post-content .inline-cta, .post-content .comparison { font-size: 16px; line-height: 1.55; }
  .post-content a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .post-related { display: flex; flex-direction: column; gap: var(--space-5); }

  /* Legal pages: readable column */
  .page-template-default .page-content > p,
  .page-template-default .page-content > ul { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; }

  /* F2 404 */
  /* 404 hero (F2) */
  .hero--404 { padding-block: clamp(40px, 6vw, 72px) 0; overflow: hidden; }
  .hero__split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; width: 100%; }
  .hero__split > .hero__copy { display: flex; flex-direction: column; gap: 20px; padding-bottom: clamp(40px, 6vw, 72px); }
  .hero--author { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px; align-items: end; padding-top: clamp(32px, 5vw, 72px); }
  .hero--author .hero__copy { padding-bottom: clamp(32px, 5vw, 72px); }
  .hero__title--author { font-size: clamp(40px, 5.5vw, 72px); line-height: 1; font-weight: 900; }
  .hero__bio { max-width: 32em; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.5; }
  .hero__buttons--author { align-items: center; gap: 14px; }
  .hero__count { font-size: 15px; opacity: .9; }
  .hero__portrait { position: relative; display: flex; align-items: flex-end; justify-content: center; justify-self: center; width: 100%; max-width: 380px; aspect-ratio: 1; }
  .hero__portrait .arch { width: 74%; height: 92%; }
  .hero__portrait-sticker { position: absolute; top: 6%; left: 0; z-index: 1; width: 84px; height: auto; transform: rotate(-10deg); pointer-events: none; }
  .hero > .search-field, .hero__copy > .search-field { max-width: 440px; }
  .hero__code { color: var(--color-lime); font-size: 14px; font-weight: 600; }
  .hero--404 .hero__title--display { font-size: clamp(40px, 6vw, 72px); }
  .hero--404 .hero__lead { max-width: 28em; }
  .hero__lost { position: relative; display: flex; align-items: flex-end; justify-content: center; align-self: stretch; min-height: 300px; }
  .hero__lost-crop { display: block; width: clamp(220px, 24vw, 320px); max-width: 100%; margin-bottom: -6px; }
  .hero__lost-crop img { display: block; width: 100%; height: auto; }
  .hero__lost-sticker { position: absolute; top: 0; left: 8%; width: 88px; height: auto; transform: rotate(-10deg); pointer-events: none; }
  .hero__lost-sticker--search { top: 18%; right: 4%; left: auto; width: 72px; transform: rotate(12deg); }
  /* Phone: a head-and-shoulders crop, top right, so the search stays near the top. */
  @media (max-width: 767px) {
    .hero--404 { position: relative; padding-block: 28px 32px; }
    .hero__split { display: block; }
    .hero__split > .hero__copy { gap: 14px; padding-bottom: 0; }
    .hero--404 .hero__title--display { padding-right: 100px; font-size: 30px; }
    .hero__lost { position: static; display: block; min-height: 0; }
    .hero__lost-crop { position: absolute; top: 0; right: 12px; width: 108px; height: 104px; margin: 0; overflow: hidden; }
    .hero__lost-crop img { position: absolute; top: 0; left: -43px; width: 190px; max-width: none; }
    .hero__lost-sticker { top: 8px; right: 124px; left: auto; width: 44px; }
    .hero__lost-sticker--search { display: none; }
  }
  /* Small hero with a cut-out figure (thank-you): it stands on the band's bottom edge. */
  .hero__figure { width: min(240px, 70%); align-self: center; margin-bottom: calc(-1 * clamp(32px, 5vw, 72px)); }
  @media (min-width: 1100px) {
    .hero--figure { justify-content: center; min-height: 380px; }
    .hero--figure > .hero__figure { position: absolute; bottom: 0; right: max(var(--gutter), (100% - var(--container)) / 2); width: 360px; max-width: none; margin: 0; }
  }
  .service-tile--contact { background: var(--color-lime); }
  .service-tile--contact:hover { background: var(--color-lime); }

  /* ==========================================================
     Forms (E1–E6)
     ========================================================== */
  .form { display: flex; flex-direction: column; gap: var(--space-5); }
  .form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .form__head { display: flex; flex-direction: column; gap: var(--space-3); }
  .form__title { font-size: var(--text-h3); letter-spacing: -0.01em; }
  .form__progress { display: flex; flex-direction: column; gap: 6px; }
  .form__progress[hidden] { display: none; }
  .form__progress-label { font-size: 14px; font-weight: 600; color: var(--color-blue); }
  .form__progress-bar { display: block; height: 10px; background: var(--color-blue-soft); border: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
  .form__progress-bar span { display: block; height: 100%; background: var(--color-lime); border-right: var(--border); transition: width var(--dur-ui) var(--ease-out); }
  .form__step { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
  .form__step[hidden] { display: none; }
  .form__legend { display: flex; flex-direction: column; gap: 2px; padding: 0; margin-bottom: var(--space-2); color: var(--color-purple); font-size: 18px; font-weight: 800; }
  .form__legend span { font-size: 15px; font-weight: 400; color: var(--color-ink); }
  .form__legend b { font-weight: inherit; }
  .form__legend i { font-style: normal; }
  .form__group { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
  .form__group legend { margin-bottom: var(--space-2); padding: 0; color: var(--color-purple); font-size: 15px; font-weight: 600; }
  .form__fields { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
  @media (min-width: 768px) { .form__fields { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: span 2; } }
  .form__nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .form__nav [hidden] { display: none; }
  .form.is-stepped .form__nav [data-next], .form.is-stepped .form__nav [data-back] { display: inline-flex; }
  .form.is-stepped .form__nav [hidden] { display: none; }
  .form__alert { padding: 12px 16px; color: var(--color-purple); background: var(--color-blue-soft); border: var(--border); border-left-width: 8px; border-radius: var(--radius-sm); font-weight: 600; }
  .form__alert[hidden] { display: none; }
  .form__note { padding: 10px 14px; font-size: 14px; background: var(--color-lime-soft); border: var(--border); border-radius: var(--radius-sm); }
  .form__privacy { font-size: 13px; }
  /* Links in the consent line take the text colour: brand blue on lime is just under AA. */
  .form__privacy a { color: inherit; text-decoration: underline; }
  .form__captcha:empty { display: none; }

  .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
  .field label, .field legend { color: var(--color-purple); font-size: 15px; font-weight: 600; padding: 0; }
  .field > label { display: inline-flex; align-items: center; gap: 6px; }
  /* Required and optional (design item 12) */
  .required-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; padding-top: 3px; color: var(--color-purple); background: var(--color-lime); border: var(--border); border-radius: var(--radius-pill); font-size: 15px; font-weight: 900; line-height: 1; }
  .field__optional { color: var(--color-blue); font-size: 14px; font-weight: 400; }
  .form__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
  .form__key { display: inline-flex; align-self: flex-end; align-items: center; gap: 6px; color: var(--color-purple); font-size: 14px; font-weight: 600; }
  .form__top .form__key { align-self: center; }
  /* The audit band is lime, and its sticker sits top right. */
  .form--audit .form__key { align-self: flex-start; }
  .form--audit .form__error { color: var(--color-purple); }
  .form--audit .form__error::before { border-color: var(--color-purple); }
  .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    color: var(--color-ink);
    background: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    font-size: 16px;
  }
  .field textarea { resize: vertical; min-height: 120px; }
  .field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; box-shadow: none; }
  .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-error); box-shadow: 3px 3px 0 var(--color-error); }
  .field input[aria-invalid="true"]:focus-visible, .field textarea[aria-invalid="true"]:focus-visible { box-shadow: none; }
  .form__error { display: flex; align-items: center; gap: 6px; color: var(--color-error); font-size: 14px; font-weight: 600; }
  .form__error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border: 2px solid var(--color-error); border-radius: var(--radius-pill); font-size: 11px; font-weight: 900; }
  .form__error[hidden] { display: none; }
  .form__summary { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--color-white); border: 2px solid var(--color-error); border-radius: 12px; box-shadow: 3px 3px 0 var(--color-error); }
  .form__summary[hidden] { display: none; }
  .form__summary-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--color-error); border: 2px solid var(--color-error); border-radius: var(--radius-pill); font-size: 14px; font-weight: 900; }
  .form__summary-body, .form__summary-links { display: flex; flex-direction: column; gap: 4px; }
  .form__summary strong { color: var(--color-purple); font-size: 15px; font-weight: 800; }
  .form__summary a { color: var(--color-error); font-size: 14px; font-weight: 600; }

  /* Selectable tiles and chips: real inputs, visually hidden */
  .choice { position: relative; display: inline-flex; min-width: 0; cursor: pointer; }
  .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  @media (min-width: 768px) { .choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .choice-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .choice--tile { align-items: center; gap: 10px; min-height: 64px; padding: 12px 14px; background: var(--color-white); border: var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out); }
  .choice--tile:hover { transform: translate(-1px, -1px); }
  .choice--tile:has(input:checked) { background: var(--color-blue-soft); box-shadow: 4px 4px 0 var(--color-purple); }
  .choice__box { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; color: transparent; background: var(--color-white); border: var(--border); border-radius: 6px; }
  .choice__box .icon { width: 14px; height: 14px; stroke-width: 3; }
  .choice--tile:has(input:checked) .choice__box { color: var(--color-ink); background: var(--color-lime); }
  .choice__label { min-width: 0; color: var(--color-purple); font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
  @media (max-width: 479px) {
    .choice-grid { gap: var(--space-2); }
    .choice--tile { gap: 8px; padding: 10px; }
    .choice--tile .choice__box { display: none; }
    .choice--tile .choice__label { font-size: 14px; }
    .choice--tile:has(input:checked) { background: var(--color-lime); }
  }
  .choice__label small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--color-ink); }
  .choice--chip .choice__label { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; background: var(--color-white); border: var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
  .choice--chip:has(input:checked) .choice__label { background: var(--color-lime); }
  .choice--dark:has(input:checked) .choice__label { background: var(--color-purple); color: var(--color-lime); }
  .choice:has(input:focus-visible) .choice__label, .choice--tile:has(input:focus-visible) { outline: 3px solid var(--color-blue); outline-offset: 2px; }

  /* E1 Quote form card */
  .form--quote { padding: clamp(20px, 3vw, 32px); background: var(--color-white); border: var(--border-lg); border-radius: var(--radius-tile); box-shadow: var(--shadow-lg); }
  /* Quote form head as in the Contact template: small label left, step count right, bar below. */
  .form--quote .form__head { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; }
  .form--quote .form__title { color: var(--color-purple); font-size: 14px; font-weight: 600; letter-spacing: 0; }
  .form--quote .form__progress { display: contents; }
  .form--quote .form__progress[hidden] { display: none; }
  .form--quote .form__progress-bar { grid-column: 1 / -1; height: 12px; background: var(--color-paper); }
  .form--quote .form__legend { font-size: 20px; }
  .form--quote .form__nav { justify-content: flex-end; padding-top: 20px; border-top: 2px solid var(--color-blue-soft); }
  .choice-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  .choice-grid .choice--tile { flex-direction: column; align-items: flex-start; min-height: 84px; padding: 14px; }

  /* Contact page: form 7 columns, sidebar 5 (contact cards 2 x 2, next steps, map card). */
  .quote-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 24px); align-items: start; }
  .quote-layout > * { grid-column: span 12; }
  @media (min-width: 1024px) { .quote-layout > .form--quote, .quote-layout > .form--panel { grid-column: span 7; } .quote-layout__aside { grid-column: span 5; } }
  .quote-layout__aside { display: flex; flex-direction: column; gap: clamp(12px, 1.5vw, 20px); }
  .quote-layout__aside .contact-options { display: flex; flex-direction: column; gap: clamp(12px, 1.5vw, 20px); }
  .next-steps { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px; color: var(--color-white); background: var(--color-purple); border: var(--border); border-radius: var(--radius-tile); box-shadow: 5px 5px 0 var(--color-lime); }
  .next-steps__sticker { position: absolute; top: -20px; right: 18px; width: 60px; height: auto; transform: rotate(8deg); pointer-events: none; }
  .next-steps__title { color: var(--color-lime); font-size: 20px; font-weight: 800; }
  .next-steps .next-steps__list { gap: 12px; }
  .next-steps .next-steps__num { width: 28px; height: 28px; background: transparent; border-color: var(--color-white); font-size: 13px; }
  .next-steps .next-steps__list li > span:last-child { padding-top: 2px; }
  .next-steps__list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
  .next-steps__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
  .next-steps__list li > span:last-child { padding-top: 4px; }
  .next-steps__num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--color-lime); border: var(--border); border-radius: var(--radius-pill); font-size: 14px; font-weight: 900; }

  /* E2 Contact form band */
  .contact-form {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 32px;
    align-items: center;
    padding: clamp(28px, 5vw, 64px) clamp(24px, 4vw, 56px);
    background: var(--color-purple);
    color: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-md);
  }
  .contact-form__sticker { position: absolute; top: -26px; left: 24px; width: 80px; height: auto; transform: rotate(-8deg); pointer-events: none; }
  .contact-form__copy { display: flex; flex-direction: column; gap: 12px; }
  .contact-form__copy p { max-width: 30em; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; }
  .contact-form__title { color: var(--color-white); font-size: clamp(28px, 4vw, 48px); line-height: 1.05; font-weight: 900; }
  .form--contact {
    gap: 14px;
    padding: 24px;
    color: var(--color-ink);
    background: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-tile);
    box-shadow: 5px 5px 0 var(--color-lime);
  }
  .form--contact .button { justify-content: center; }
  /* On the Contact page (D-057): the same card weight as the quote form beside it. */
  .form--panel { gap: var(--space-4); padding: clamp(20px, 3vw, 32px); border: var(--border-lg); box-shadow: var(--shadow-lg); }
  .form--panel .form__title { color: var(--color-purple); font-size: 20px; font-weight: 800; }
  .form--panel .button { align-self: flex-start; }

  /* Based in Malta (About) */
  .based { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 24px); }
  .based > * { grid-column: span 12; }
  @media (min-width: 1024px) { .based__main { grid-column: span 7; } .based__side { grid-column: span 5; } }
  .based__main { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(24px, 3vw, 40px); background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .based__title { font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1; font-weight: 800; }
  .based__text { max-width: 34em; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; }
  .based__buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
  .based__side { display: grid; grid-template-rows: auto 1fr; gap: clamp(12px, 1.5vw, 24px); }
  .based__ways { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; color: var(--color-white); background: var(--color-blue); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .based__sticker { position: absolute; top: -20px; right: 18px; width: 60px; height: auto; transform: rotate(10deg); pointer-events: none; }
  .based__ways-title { color: var(--color-lime); font-size: 18px; font-weight: 800; }
  .based__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .based__list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255, 255, 255, .12); border: 2px solid var(--color-white); border-radius: 12px; }
  .based__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--color-ink); background: var(--color-lime); border: var(--border); border-radius: var(--radius-pill); }
  .based__icon .icon { width: 20px; height: 20px; }
  .based__way { display: flex; flex-direction: column; font-size: 13px; }
  .based__way strong { font-size: 15px; font-weight: 800; }
  .based__strip { display: flex; align-items: center; gap: 14px; min-height: 88px; margin: 0; padding: 20px 24px; color: var(--color-purple); background: var(--color-lime-soft); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); font-size: 15px; line-height: 1.45; }
  .based__code { font-size: clamp(28px, 3vw, 36px); font-weight: 900; line-height: 1; letter-spacing: -0.02em; }

  /* E3 Contact options */
  .contact-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--gap); }
  .contact-option { display: flex; align-items: center; gap: 16px; padding: 18px 20px; color: var(--color-ink); background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); text-decoration: none; transition: transform var(--dur-tile) var(--ease-out), box-shadow var(--dur-tile) var(--ease-out); }
  .contact-option:hover { color: var(--color-purple); transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
  .contact-option__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--color-ink); background: var(--color-lime); border: var(--border); border-radius: var(--radius-pill); }
  .contact-option__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
  .contact-option__arrow { flex: none; color: var(--color-blue); }
  .contact-option__arrow .icon { width: 20px; height: 20px; }
  .contact-option strong { color: var(--color-blue); font-size: 13px; font-weight: 600; }
  .contact-option__value { color: var(--color-purple); font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
  .contact-option__note { font-size: 14px; color: var(--color-ink); }


  /* E4 Audit form */
  .audit-form { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; align-items: center; padding: clamp(24px, 3vw, 40px); background: var(--color-lime); color: var(--color-purple); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .audit-form__sticker { position: absolute; top: -26px; right: 24px; width: 80px; height: auto; transform: rotate(8deg); pointer-events: none; }
  .audit-form__copy { display: flex; flex-direction: column; gap: 10px; }
  .audit-form__copy p { max-width: 30em; font-size: 16px; line-height: 1.55; }
  .audit-form__title { font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1; }
  .form--audit { gap: 14px; }
  .button--dark { background: var(--color-purple); color: var(--color-white); box-shadow: 5px 5px 0 var(--color-white); }
  .button--dark:hover { color: var(--color-white); box-shadow: 8px 8px 0 var(--color-white); }
  .button--dark:active { box-shadow: 0 0 0 var(--color-white); }
  .audit-form .button { align-self: flex-start; }

  /* E5 Project planner */
  .planner__eyebrow { display: block; margin-bottom: -8px; color: var(--color-blue); font-size: 14px; font-weight: 600; }
  .planner__form { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
  @media (min-width: 1024px) { .planner__form { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
  .planner__inputs { display: flex; flex-direction: column; gap: var(--space-5); padding: clamp(20px, 3vw, 32px); background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  .planner__title { font-size: var(--text-h3); letter-spacing: -0.01em; }
  .planner__group { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; border: 0; }
  .planner__group legend { display: flex; justify-content: space-between; gap: var(--space-3); width: 100%; margin-bottom: var(--space-2); color: var(--color-purple); font-weight: 800; }
  .planner__group output { color: var(--color-blue); font-weight: 600; }
  .planner__range { width: 100%; accent-color: var(--color-blue); }
  .planner__range-ends { display: flex; justify-content: space-between; font-size: 13px; }
  .planner__summary { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 2.5vw, 28px); background: var(--color-purple); color: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
  @media (min-width: 1024px) { .planner__summary { position: sticky; top: calc(var(--header-h) + var(--space-5)); } }
  .planner__summary-label { color: var(--color-lime); font-size: 14px; font-weight: 600; }
  .planner__summary-title { font-size: clamp(28px, 3vw, 40px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
  .planner__sticker { position: absolute; top: -20px; right: 18px; width: 60px; height: auto; transform: rotate(-8deg); pointer-events: none; }
  .planner__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-top: 14px; border-top: 2px solid var(--color-blue); }
  .planner__list div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 15px; }
  .planner__list dt { opacity: .8; }
  .planner__list dd { margin: 0; font-weight: 800; text-align: right; }
  .planner__chosen { display: flex; flex-direction: column; gap: 8px; }
  .planner__chosen-label { font-size: 13px; font-weight: 600; opacity: .8; }
  .planner__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .planner__chip { padding: 3px 10px; color: var(--color-lime); border: 2px solid var(--color-lime); border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; }
  .planner__none { font-size: 14px; opacity: .8; }
  .planner__summary .button { justify-content: center; margin-top: 8px; }
  .planner__hint { font-size: 13px; opacity: .85; }

  /* E6 Quiz */
  /* E6 Service quiz (Services hub): blue card, intro left, questions right. */
  .quiz {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 32px;
    align-items: center;
    padding: clamp(20px, 3vw, 40px);
    color: var(--color-white);
    background: var(--color-blue);
    border: var(--border-lg);
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-lg);
  }
  .quiz__sticker { position: absolute; top: -28px; right: 24px; width: 84px; height: auto; transform: rotate(6deg); pointer-events: none; }
  .quiz__intro { display: flex; flex-direction: column; gap: 12px; }
  .quiz__eyebrow { color: var(--color-lime); font-size: 14px; font-weight: 600; }
  .quiz__title { color: var(--color-white); font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1; font-weight: 800; }
  .quiz__text { max-width: 30em; font-size: 16px; line-height: 1.55; }
  .quiz__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .quiz__head { display: flex; flex-direction: column; gap: 12px; }
  .quiz__progress-label { color: var(--color-white); font-size: 14px; font-weight: 600; }
  .quiz .form__progress-bar { height: 12px; background: var(--color-purple); }
  .quiz__question { margin: 0; padding: 0; border: 0; }
  .quiz__question[hidden] { display: none; }
  /* Focus targets for script only (forms.js), never reached by Tab. */
  .quiz__question:focus, .quiz__result-title:focus { outline: 0; }
  .quiz__q { margin-bottom: 12px; color: var(--color-white); font-size: 18px; font-weight: 800; }
  .quiz .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  @media (max-width: 559px) { .quiz .choice-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
  .quiz__answer { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; cursor: pointer; text-align: left; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--color-purple); background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: 4px 4px 0 var(--color-purple); transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out), background-color var(--dur-lift); }
  /* A last answer on its own takes the row, left-aligned, so it reads as the end of the list. */
  .quiz__answer:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .quiz__answer:hover { background: var(--color-lime); transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
  .quiz__answer:focus-visible { outline: 3px solid var(--color-lime); outline-offset: 3px; }
  @media (max-width: 559px) { .quiz__answer { min-height: 52px; padding: 10px 12px; } }
  .quiz__key { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--color-blue-soft); border: var(--border); border-radius: var(--radius-pill); font-size: 13px; font-weight: 800; }
  .quiz__result { display: flex; flex-direction: column; gap: var(--space-4); }
  .quiz__result[hidden] { display: none; }
  .quiz__result-label { color: var(--color-lime); font-size: 14px; font-weight: 600; }
  .quiz__result-title { color: var(--color-white); font-size: var(--text-h2); font-weight: 900; line-height: 1.1; }
  .quiz__result-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--gap); }
  .quiz__result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
  .quiz__result-actions .text-link { background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; }

  /* ----- F1 Cookie banner (fixed, so no layout shift; above the mobile contact bar) ----- */
  .consent {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(var(--contact-bar-h) + var(--space-3));
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 760px;
    padding: 14px;
    background: var(--color-white);
    border: var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    animation: slice-rise var(--dur-ui) var(--ease-out);
  }
  .consent[hidden] { display: none; }
  @media (min-width: 768px) { .consent { bottom: var(--space-5); left: var(--space-5); right: auto; padding: 20px 24px; border-radius: var(--radius-tile); } }
  .consent__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
  .consent__text { flex: 1 1 260px; font-size: 15px; line-height: 1.5; }
  .consent__text a { font-weight: 600; }
  .consent__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); flex: 1 1 300px; }
  @media (min-width: 768px) { .consent__actions { display: flex; flex: none; } }
  /* Accept, Reject and Settings get the same size and weight (D-022) */
  .consent__button {
    min-height: 44px;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-purple);
    background: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out);
  }
  .consent__button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-purple); }
  .consent__button--accept { background: var(--color-lime); color: var(--color-ink); }
  .consent__button[aria-expanded="true"] { background: var(--color-blue-soft); }
  .consent__panel { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); border-top: 2px solid var(--color-blue-soft); }
  .consent__panel[hidden] { display: none; }
  .consent__panel .consent__button { align-self: flex-start; }
  .consent__option { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
  .consent__option input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-blue); }
  .consent__option strong { display: block; color: var(--color-purple); }

  /* ----- Page placeholder (until templates exist) ----- */
  .page-intro { padding-block: var(--space-6) var(--space-8); }
  .page-intro__title { margin-top: var(--space-4); }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes slice-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes slice-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slice-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes slice-wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-4deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* The logo strip stands still and shows each client once. */
  .logo-strip__track { width: 100%; animation: none !important; }
  .logo-strip__row { flex-wrap: wrap; justify-content: center; gap: var(--space-3) 0; width: 100%; }
  .logo-strip__row[aria-hidden], .logo-strip__row [aria-hidden], .logo-strip__control { display: none; }
}

/* --------------------------------------------------------------------------
   Editor canvas: WordPress's editor reset is unlayered, so it beats the layered
   base styles above. Restate the basics outside any layer (only matches in the editor).
   -------------------------------------------------------------------------- */
.editor-styles-wrapper {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-paper);
}
.editor-styles-wrapper :is(h1, h2, h3, h4, p, a, button, strong, span, li) { font-family: var(--font-sans); }

/* Core tables in posts look like slice/comparison (C14). Unlayered on purpose: WordPress's
 table block CSS is unlayered and would otherwise win over the layered theme styles. */
.post-content .wp-block-table { max-width: 100%; min-width: 0; margin: var(--space-5) 0; overflow-x: auto; background: var(--color-white); border: var(--border); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); }
.post-content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.post-content .wp-block-table thead { border: 0; }
.post-content .wp-block-table thead tr { background: var(--color-purple); }
.post-content .wp-block-table th, .post-content .wp-block-table td { padding: 12px 16px; text-align: left; vertical-align: top; border: 0; }
.post-content .wp-block-table thead th { color: var(--color-lime); font-weight: 800; }
.post-content .wp-block-table tbody tr { border-top: 2px solid var(--color-blue-soft); }
.post-content .wp-block-table tbody tr:nth-child(even) { background: var(--color-paper); }
.post-content .wp-block-table tbody td:first-child { color: var(--color-purple); font-weight: 600; }
@media (max-width: 479px) { .post-content .wp-block-table th, .post-content .wp-block-table td { padding: 10px; } .post-content .wp-block-table table { font-size: 14px; } }
.post-content .wp-block-table table:has(thead th:nth-child(3)) { min-width: 480px; }
/* Grid items default to min-width: auto, so a wide table would stretch the post column. */
.post-layout > .post-content { min-width: 0; }

/* Anchor offset under the sticky header. Unlayered and :root-specific on purpose: WordPress's
   admin-bar CSS sets its own html { scroll-padding-top } (unlayered), which beat the layered
   rule and left #anchors under the header for logged-in users. Adds the admin bar when shown. */
html:root { scroll-padding-top: calc(var(--header-h) + var(--space-4) + var(--wp-admin--admin-bar--height, 0px)); }
/* Up to 600px the admin bar scrolls away instead of sticking, so it isn't counted there. */
@media (max-width: 600px) { html:root { scroll-padding-top: calc(var(--header-h) + var(--space-4)); } }
/* Focused items stop above the open cookie banner; consent.js measures it (WCAG 2.4.11). */
html:root.has-consent-banner { scroll-padding-bottom: var(--consent-room, 0px); }
/* Scroll padding can't move past the page end, so the footer's last links need this room too. */
html:root.has-consent-banner body { padding-bottom: var(--consent-room, var(--contact-bar-h)); }

/* Figures as page sections (comparison, before/after) keep the container centring:
   WordPress's unlayered core CSS sets figure margins, which beats the layered rule. */
.container.page-content > figure { margin-inline: auto; }