/*!
  Ecommyone — Website Service
  Design system: minimalist, Google-inspired, white/gray/black + blue (+gold accent)
*/

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

/* ============================================================
   RESET
   ============================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img, picture, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  ul, ol { margin: 0; }
  a { color: inherit; }
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
@layer tokens {
  :root {
    color-scheme: light;

    /* Tier 1 — literal tokens */
    --blue-900: #0a2647;
    --blue-800: #0d3573;
    --blue-700: #0b57d0;
    --blue-600: #1a73e8;
    --blue-500: #4285f4;
    --blue-100: #e8f0fe;
    --blue-50:  #f3f8ff;

    --gold-600: #e8a300;
    --gold-500: #fdb913;
    --gold-100: #fff4d9;
    /* Darker than --gold-600 specifically so gold *text* on a light
       background still clears 4.5:1 contrast (gold-600 on white is only
       ~2.2:1 — fine for a badge fill, not for text). */
    --gold-text-on-light: #8a5e00;

    --gray-950: #0f1115;
    --gray-900: #1a1d23;
    --gray-700: #454b54;
    --gray-600: #5f6672;
    --gray-500: #7a8290;
    --gray-300: #d3d7de;
    --gray-200: #e6e9ee;
    --gray-100: #f1f3f6;
    --gray-50:  #f8f9fb;
    --white: #ffffff;

    /* Tier 2 — semantic tokens */
    --color-accent: var(--blue-700);
    --color-accent-strong: var(--blue-900);
    --color-accent-soft: var(--blue-50);
    --color-highlight: var(--gold-500);
    --color-text: var(--gray-900);
    --color-text-muted: var(--gray-600);
    --color-text-on-dark: var(--white);
    --color-text-on-dark-muted: #c3cbe0;
    --color-border: var(--gray-200);
    --color-surface: var(--white);
    --color-surface-alt: var(--gray-50);
    --color-surface-dark: var(--blue-900);

    /* Tier 3 — UI tokens */
    --ui-radius-sm: .5rem;
    --ui-radius-md: .875rem;
    --ui-radius-lg: 1.5rem;
    --ui-radius-pill: 999px;
    --ui-shadow-sm: 0 1px 2px rgb(15 17 21 / .06), 0 1px 1px rgb(15 17 21 / .04);
    --ui-shadow-md: 0 8px 24px -8px rgb(10 38 71 / .18), 0 2px 8px -2px rgb(10 38 71 / .08);
    --ui-shadow-lg: 0 24px 48px -16px rgb(10 38 71 / .24);
    --ui-focus-ring: var(--blue-600);
    --ui-container: 1200px;
    --ui-gap: clamp(1rem, .7rem + 1.2vw, 2rem);
    --ui-section-pad-y: clamp(3.5rem, 2.6rem + 3.5vw, 7rem);

    --font-sans: "Noto Sans Thai", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* motion */
    --ease-out: cubic-bezier(.16,1,.3,1);
    --dur-fast: .18s;
    --dur-med: .32s;
  }

  @property --animation-reduced {
    syntax: "*";
    inherits: false;
    initial-value: none;
  }
  @media (prefers-reduced-motion: reduce) {
    * { animation: var(--animation-reduced) !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  }

  @media (forced-colors: active) {
    :root { --ui-shadow-sm: none; --ui-shadow-md: none; --ui-shadow-lg: none; }
  }
}

/* ============================================================
   BASE
   ============================================================ */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
  }
  body {
    font-family: var(--font-sans);
    background: var(--color-surface);
    color: var(--color-text);
    line-height: 1.6;
    font-size: 1rem;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4 {
    font-weight: 800;
    line-height: 1.2;
    text-wrap: balance;
    color: var(--gray-950);
    margin: 0 0 .6em;
  }
  h1 { font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem); letter-spacing: -.02em; }
  h2 { font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.4rem); letter-spacing: -.01em; }
  h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); }
  p { margin: 0 0 1em; text-wrap: pretty; }
  p:last-child { margin-bottom: 0; }

  :where(a:any-link, button, [tabindex]):focus-visible {
    outline: 3px solid var(--ui-focus-ring);
    outline-offset: 3px;
    border-radius: .25rem;
  }

  ::selection { background: var(--blue-100); color: var(--blue-900); }

  a { text-decoration: none; }

  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  .skip-link {
    position: fixed;
    top: .6rem; left: .6rem;
    z-index: 200;
    background: var(--blue-900);
    color: #fff;
    padding: .7rem 1.1rem;
    border-radius: var(--ui-radius-sm);
    font-weight: 700;
    transform: translateY(-150%);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus-visible { transform: translateY(0); }
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
@layer layout {
  .wrap {
    width: min(100% - 2 * clamp(1.25rem, 4vw, 3rem), var(--ui-container));
    margin-inline: auto;
    container-type: inline-size;
  }
  .wrap--wide { --ui-container: 1360px; }
  .wrap--narrow { --ui-container: 840px; }

  section { padding-block: var(--ui-section-pad-y); }
  section + section { padding-block-start: 0; }

  .stack { display: flex; flex-direction: column; }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

  .grid {
    display: grid;
    gap: var(--ui-gap);
    grid-template-columns: repeat(var(--cols, 1), 1fr);
  }
  @media (min-width: 640px)  { .grid[data-cols~="sm2"] { --cols: 2; } }
  @media (min-width: 860px)  { .grid[data-cols~="md3"] { --cols: 3; } }
  @media (min-width: 860px)  { .grid[data-cols~="md2"] { --cols: 2; } }
  @media (min-width: 1080px) { .grid[data-cols~="lg4"] { --cols: 4; } }

  .split {
    display: grid;
    gap: clamp(2rem, 1.2rem + 3vw, 4.5rem);
    align-items: center;
    grid-template-columns: 1fr;
  }
  /* Prevent grid/flex blowout: items default to min-width:auto (their
     content's min-content size), which can force a track wider than its
     container when content (e.g. images) can't shrink below that size. */
  .split > *, .grid > * { min-width: 0; }
  @media (min-width: 900px) {
    .split { grid-template-columns: 1.05fr 1fr; }
    .split[data-reverse] { grid-template-columns: 1fr 1.05fr; }
    .split[data-reverse] > :first-child { order: 2; }
  }

  .section-head {
    max-width: 42rem;
    margin-inline: auto;
    text-align: center;
    margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3.5rem);
  }
  .section-head[data-align="start"] { margin-inline: 0; text-align: start; }
}

/* ============================================================
   COMPONENTS
   ============================================================ */
@layer components {

  /* ---- Eyebrow / kicker ---- */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border: 1px solid var(--blue-100);
    padding: .35rem .85rem;
    border-radius: var(--ui-radius-pill);
    margin-bottom: 1rem;
  }
  .eyebrow::before {
    content: "";
    inline-size: .4rem;
    block-size: .4rem;
    border-radius: 50%;
    background: var(--color-highlight);
    flex-shrink: 0;
  }

  /* ---- Buttons ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .96rem;
    padding: .85rem 1.5rem;
    border-radius: var(--ui-radius-pill);
    border: 1px solid transparent;
    min-block-size: 3rem;
    line-height: 1.2;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
    white-space: nowrap;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary {
    background: var(--color-accent);
    color: #fff;
    box-shadow: var(--ui-shadow-sm);
  }
  .btn-primary:hover { background: var(--blue-800); box-shadow: var(--ui-shadow-md); }
  .btn-gold {
    background: var(--color-highlight);
    color: var(--blue-900);
  }
  .btn-gold:hover { background: var(--gold-600); box-shadow: var(--ui-shadow-md); }
  .btn-outline {
    background: transparent;
    border-color: var(--gray-300);
    color: var(--color-text);
  }
  .btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); }
  .btn-ghost-light {
    background: rgb(255 255 255 / .1);
    color: #fff;
    border-color: rgb(255 255 255 / .35);
    backdrop-filter: blur(6px);
  }
  .btn-ghost-light:hover { background: rgb(255 255 255 / .18); border-color: #fff; }
  .btn-block { width: 100%; }
  .btn-lg { padding: 1rem 1.9rem; font-size: 1.02rem; }
  .btn[data-icon]::after {
    content: "";
    inline-size: 1em; block-size: 1em;
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
            mask: var(--icon) center / contain no-repeat;
  }

  /* ---- Site header ---- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgb(255 255 255 / .88);
    backdrop-filter: saturate(1.4) blur(10px);
    border-block-end: 1px solid var(--color-border);
  }
  .site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    block-size: 4.5rem;
  }
  .brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; }
  .brand img { block-size: 2rem; inline-size: auto; }
  .brand-sub {
    font-size: .68rem;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: .04em;
    border-inline-start: 1px solid var(--color-border);
    padding-inline-start: .6rem;
    margin-inline-start: .1rem;
    display: none;
  }
  @container (min-width: 30rem) { .brand-sub { display: inline; } }

  .primary-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(.25rem, 1vw, .5rem);
    list-style: none;
    padding: 0;
  }
  .primary-nav a {
    display: inline-block;
    padding: .6rem .9rem;
    border-radius: var(--ui-radius-pill);
    font-weight: 600;
    font-size: .94rem;
    color: var(--gray-700);
    transition: background var(--dur-fast), color var(--dur-fast);
  }
  .primary-nav a:hover { background: var(--gray-100); color: var(--color-text); }
  .primary-nav a[aria-current="page"] {
    color: var(--color-accent);
    background: var(--color-accent-soft);
  }

  .header-actions { display: flex; align-items: center; gap: .6rem; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--color-border);
    background: #fff;
  }
  .nav-toggle svg { inline-size: 1.3rem; block-size: 1.3rem; }
  .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }

  @media (min-width: 900px) {
    .nav-toggle { display: none; }
    .primary-nav { display: block !important; }
  }
  @media (max-width: 899.98px) {
    .primary-nav {
      display: none;
      position: fixed;
      inset: 4.5rem 0 0 0;
      background: #fff;
      overflow-y: auto;
      block-size: calc(100dvh - 4.5rem);
      border-block-start: 1px solid var(--color-border);
    }
    .primary-nav[data-open="true"] { display: block; }
    .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 1rem; }
    .primary-nav a { padding: 1rem 1.1rem; border-radius: var(--ui-radius-sm); font-size: 1.05rem; }
    .primary-nav .nav-cta { margin-top: .75rem; }
  }
  .nav-cta.btn { display: none; }
  @media (min-width: 900px) { .nav-cta.btn { display: inline-flex; } }
  @media (max-width: 899.98px) { .primary-nav .nav-cta.btn { display: flex; } }

  /* ---- Hero ---- */
  .hero {
    position: relative;
    overflow: clip;
    background:
      radial-gradient(60rem 30rem at 85% -10%, var(--blue-100), transparent 60%),
      linear-gradient(180deg, var(--gray-50), #fff 70%);
    padding-block-start: clamp(3rem, 2.2rem + 3vw, 5.5rem);
  }
  .hero-eyebrow-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
  .hero h1 { margin-bottom: .55em; }
  .hero .lede { font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem); color: var(--color-text-muted); max-width: 34rem; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }
  .hero-trustbar { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, .9rem + 1vw, 2.5rem); margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem); }
  .hero-trustbar .stat b { display: block; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); color: var(--blue-900); font-weight: 800; }
  .hero-trustbar .stat span { font-size: .84rem; color: var(--color-text-muted); }

  .hero-visual {
    /* Establishes the containing block for the floating badge cards below —
       without this they'd resolve against .wrap (which has container-type:
       inline-size, and layout containment from that makes .wrap itself a
       containing block for absolutely positioned descendants), landing far
       from the image instead of pinned to its corners. */
    position: relative;
  }
  .hero-media {
    position: relative;
    border-radius: var(--ui-radius-lg);
    overflow: clip;
    box-shadow: var(--ui-shadow-lg);
    background: var(--blue-900);
    aspect-ratio: 4 / 3.1;
  }
  .hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  /* Variant for a transparent-background composite graphic (device mockups,
     fanned screenshot cards) rather than a single cropped photo — it should
     float over the hero background as-is, not sit inside a dark card with a
     cover-cropped photo treatment. */
  .hero-media--float {
    background: none;
    box-shadow: none;
    overflow: visible;
    aspect-ratio: 1 / 1;
  }
  .hero-media--float img { object-fit: contain; }
  .hero-media figcaption {
    position: absolute;
    inset-inline: 0; inset-block-end: 0;
    padding: 1rem 1.2rem;
    background: linear-gradient(0deg, rgb(10 38 71 / .82), transparent);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
  }
  .floating-card {
    position: absolute;
    background: #fff;
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-md);
    padding: .85rem 1.05rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .82rem;
    font-weight: 700;
    max-width: 13rem;
  }
  .floating-card .dot {
    inline-size: 2.3rem; block-size: 2.3rem;
    border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 1.1rem;
  }
  .floating-card--top { inset-block-start: -1rem; inset-inline-start: -1rem; }
  .floating-card--bottom { inset-block-end: -1.2rem; inset-inline-end: -1.2rem; }
  @media (max-width: 640px) {
    .floating-card { display: none; }
  }

  /* ---- Wide showcase banner (e.g. multi-site collage) ---- */
  .showcase-banner {
    position: relative;
    margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem);
    border-radius: var(--ui-radius-lg);
    overflow: clip;
    box-shadow: var(--ui-shadow-md);
    /* A collage banner reads as one wide panorama — its content is spread
       edge-to-edge, so cropping it into a taller shape on narrow screens
       loses the sides instead of just shrinking. Keep it close to its
       native ~2.7:1 panorama shape at every size instead. Scoped to the
       .wrap container's own inline-size rather than the viewport. */
    aspect-ratio: 21 / 9;
  }
  .showcase-banner img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
  @container (max-width: 30rem) {
    .showcase-banner { aspect-ratio: 3 / 2; }
  }

  /* Text overlay: a gradient scrim guarantees contrast regardless of what
     part of the source photo happens to sit behind it — never rely on the
     underlying image being dark enough on its own. Wide layout puts a
     left-aligned panel over a left-to-right scrim; narrow containers swap
     to a bottom-anchored scrim (same language as .hero-media figcaption)
     so the text doesn't cover the whole short, wide crop. */
  .showcase-banner figcaption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: clamp(1.25rem, .9rem + 2.2vw, 3rem);
    /* Stops chosen so the .banner-copy text column (max-width 24rem) never
       sits past the .72-alpha mark — checked against a worst-case pure-white
       patch of the underlying photo, that still holds ~5.8:1 white-on-scrim
       contrast, clear of the 4.5:1 AA minimum for normal-weight text. */
    background: linear-gradient(90deg, rgb(10 38 71 / .85) 0%, rgb(10 38 71 / .72) 42%, transparent 70%);
  }
  .showcase-banner .banner-copy { max-width: 24rem; display: grid; gap: .65rem; }
  .showcase-banner figcaption .eyebrow {
    /* Grid items stretch to the track's inline size by default — without
       this the pill filled the whole banner-copy width instead of hugging
       its own text, and its semi-transparent glass fill let the source
       photo behind it (which happens to contain its own "Recommended"
       text) show through the empty stretched space. */
    justify-self: start;
    background: rgb(255 255 255 / .16);
    border-color: rgb(255 255 255 / .3);
    color: #fff;
  }
  .showcase-banner figcaption p {
    margin: 0;
    color: #fff;
    font-weight: 800;
    line-height: 1.28;
    text-wrap: balance;
    font-size: clamp(1.05rem, .85rem + 1.4vw, 1.6rem);
  }
  @container (max-width: 30rem) {
    .showcase-banner figcaption {
      align-items: flex-end;
      background: linear-gradient(0deg, rgb(10 38 71 / .88) 0%, rgb(10 38 71 / .75) 45%, transparent 100%);
    }
    .showcase-banner .banner-copy { max-width: none; }
  }

  /* ---- Page header (interior pages) ---- */
  .page-header {
    background: linear-gradient(180deg, var(--blue-900), var(--blue-800));
    color: #fff;
    padding-block: clamp(3rem, 2.3rem + 2.6vw, 5rem);
  }
  .page-header .eyebrow { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .2); color: #fff; }
  .page-header h1 { color: #fff; margin-bottom: .5rem; }
  .page-header p { color: var(--color-text-on-dark-muted); max-width: 40rem; font-size: 1.05rem; }
  .breadcrumb {
    list-style: none; padding: 0; display: flex; gap: .4rem; flex-wrap: wrap;
    font-size: .82rem; color: var(--color-text-on-dark-muted); margin-bottom: 1.2rem;
  }
  .breadcrumb li:not(:last-child)::after { content: "/"; margin-inline-start: .4rem; opacity: .6; }
  .breadcrumb a:hover { color: #fff; }

  /* ---- Cards ---- */
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-md);
    padding: clamp(1.4rem, 1.2rem + 1vw, 2rem);
    box-shadow: var(--ui-shadow-sm);
    transition: box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med), transform var(--dur-med);
  }
  a.card:hover, .card:has(:hover)  { box-shadow: var(--ui-shadow-md); }
  .card:has(> .card-link:hover) { transform: translateY(-3px); border-color: var(--blue-100); }

  .icon-tile {
    inline-size: 3rem; block-size: 3rem;
    border-radius: var(--ui-radius-sm);
    display: grid; place-items: center;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    margin-bottom: 1.1rem;
    flex-shrink: 0;
  }
  .icon-tile svg { inline-size: 1.5rem; block-size: 1.5rem; }
  .icon-tile[data-tone="gold"] { background: var(--gold-100); color: var(--gold-600); }

  /* Content-based styling: cards that contain a figure get a media layout */
  .card:has(figure) { padding: 0; overflow: clip; }
  .card:has(figure) figure { margin: 0; aspect-ratio: 16/10; overflow: clip; background: var(--gray-100); }
  .card:has(figure) figure img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
  .card:has(figure):hover figure img { transform: scale(1.045); }
  .card:has(figure) .card-body { padding: 1.3rem 1.4rem 1.5rem; }

  .service-card { display: flex; flex-direction: column; }
  .service-card ul { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .5rem; }
  .service-card li { display: flex; gap: .55rem; font-size: .92rem; color: var(--color-text-muted); align-items: start; }
  .service-card li::before {
    content: "";
    inline-size: 1.1rem; block-size: 1.1rem; flex-shrink: 0; margin-top: .15em;
    background: var(--blue-600);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .card-foot { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border); }

  /* ---- Pricing ---- */
  .price-card {
    display: flex; flex-direction: column;
    position: relative;
  }
  .price-card[data-featured="true"] {
    border-color: var(--color-accent);
    box-shadow: var(--ui-shadow-md);
  }
  .price-card .badge {
    position: absolute; top: -.9rem; inset-inline-start: 1.4rem;
    background: var(--color-highlight); color: var(--blue-900);
    font-size: .74rem; font-weight: 800; letter-spacing: .03em;
    padding: .3rem .75rem; border-radius: var(--ui-radius-pill);
  }
  .price-card .price {
    display: flex; align-items: baseline; gap: .4rem;
    margin: .6rem 0 .2rem;
    color: var(--blue-900);
  }
  .price-card .price .amount { font-size: clamp(1.7rem, 1.5rem + .7vw, 2.2rem); font-weight: 800; }
  .price-card .price .period { color: var(--color-text-muted); font-size: .85rem; }
  .price-note { font-size: .82rem; color: var(--color-text-muted); margin-bottom: 1.2rem; }
  .price-card ul { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .65rem; flex-grow: 1; }
  .price-card li { display: flex; gap: .55rem; font-size: .93rem; align-items: start; }
  .price-card li::before {
    content: "";
    inline-size: 1.15rem; block-size: 1.15rem; flex-shrink: 0; margin-top: .15em;
    background: var(--blue-600);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .price-card li[data-muted="true"] { color: var(--color-text-muted); }
  .price-card li[data-muted="true"]::before { background: var(--gray-300); }

  /* ---- Process / steps ---- */
  .steps { counter-reset: step; }
  .step {
    position: relative;
    padding-inline-start: 3.4rem;
  }
  .step:not(:last-child) { margin-bottom: 2rem; }
  .step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute; inset-inline-start: 0; inset-block-start: 0;
    inline-size: 2.5rem; block-size: 2.5rem;
    border-radius: 50%;
    background: var(--blue-900); color: #fff;
    display: grid; place-items: center;
    font-weight: 800; font-size: 1.05rem;
  }
  .step h3 { margin-bottom: .35em; }
  .step p { color: var(--color-text-muted); }

  /* ---- Stat band ---- */
  .stat-band {
    background: var(--blue-900);
    color: #fff;
  }
  .stat-band .grid { text-align: center; }
  .stat-band .stat b { display: block; font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.6rem); font-weight: 800; }
  .stat-band .stat span { color: var(--color-text-on-dark-muted); font-size: .9rem; }

  /* ---- Testimonial ---- */
  .quote-card { background: var(--color-surface-alt); border: none; }
  .quote-card blockquote { margin: 0 0 1rem; font-size: 1.05rem; }
  .quote-card blockquote::before { content: "\201C"; color: var(--color-highlight); font-size: 1.4em; }
  .quote-card figcaption { display: flex; align-items: center; gap: .7rem; font-size: .88rem; color: var(--color-text-muted); }
  .quote-card figcaption b { color: var(--color-text); display: block; }

  /* ---- CTA band ---- */
  .cta-band {
    background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
    color: #fff;
    border-radius: var(--ui-radius-lg);
    padding: clamp(2.2rem, 1.7rem + 2vw, 3.5rem);
    text-align: center;
    position: relative;
    overflow: clip;
  }
  .cta-band::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(30rem 16rem at 15% 0%, rgb(253 185 19 / .18), transparent 60%);
  }
  .cta-band > * { position: relative; }
  .cta-band h2 { color: #fff; }
  .cta-band p { color: var(--color-text-on-dark-muted); max-width: 34rem; margin-inline: auto; }
  .cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.6rem; }

  /* ---- Contact info list ---- */
  .contact-list { list-style: none; padding: 0; display: grid; gap: 1.1rem; }
  .contact-list li { display: flex; gap: .9rem; align-items: flex-start; }
  .contact-list a:hover { color: var(--color-accent); }
  .contact-list .icon-tile { margin-bottom: 0; }

  /* ---- Forms ---- */
  .form-grid { display: grid; gap: 1.15rem; }
  .field { display: grid; gap: .4rem; }
  .field label { font-weight: 700; font-size: .92rem; }
  .field .req { color: var(--blue-700); }
  .field .hint { font-size: .8rem; color: var(--color-text-muted); }
  .field input, .field textarea, .field select {
    border: 1.5px solid var(--gray-300);
    border-radius: var(--ui-radius-sm);
    padding: .8rem .9rem;
    background: #fff;
    font-size: 1rem;
    min-block-size: 3rem;
    width: 100%;
  }
  .field textarea { min-block-size: 8rem; resize: vertical; }
  .field :is(input, textarea, select):focus-visible {
    outline: 3px solid var(--ui-focus-ring);
    outline-offset: 1px;
    border-color: var(--ui-focus-ring);
  }
  .field :is(input, textarea):user-invalid { border-color: #c5221f; }
  .field :is(input, textarea):user-invalid ~ .error { display: block; }
  .field .error {
    display: none;
    color: #c5221f;
    font-size: .82rem;
    font-weight: 600;
  }
  .field-row { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
  @container (min-width: 32rem) { .field-row[data-cols="2"] { grid-template-columns: 1fr 1fr; } }
  fieldset { border: none; padding: 0; margin: 0; }
  legend { font-weight: 800; font-size: 1.05rem; padding: 0; margin-bottom: 1rem; }
  .radio-row { display: flex; flex-wrap: wrap; gap: .6rem; }
  /* Visually hide the native radio but keep it in the accessibility tree and
     focusable — the canonical recipe (clip-path, not display:none/opacity
     tricks), same one used for .visually-hidden above. */
  .radio-row input {
    position: absolute;
    clip-path: inset(50%);
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
  }
  .radio-row label {
    border: 1.5px solid var(--gray-300);
    border-radius: var(--ui-radius-pill);
    padding: .6rem 1.05rem;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-fast);
  }
  .radio-row label:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
  .radio-row label:has(input:focus-visible) { outline: 3px solid var(--ui-focus-ring); outline-offset: 2px; }
  .form-status[role="alert"] {
    padding: .9rem 1.1rem;
    border-radius: var(--ui-radius-sm);
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    color: var(--blue-900);
    font-weight: 600;
    font-size: .92rem;
  }
  .form-note { font-size: .82rem; color: var(--color-text-muted); }

  /* ---- Accordion (FAQ) via <details> ---- */
  .faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-md);
    padding: 0;
    background: #fff;
  }
  .faq-item + .faq-item { margin-top: .8rem; }
  .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 700;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary .chev {
    inline-size: 1.3rem; block-size: 1.3rem; flex-shrink: 0;
    border-radius: 50%;
    background: var(--gray-100);
    display: grid; place-items: center;
    transition: transform var(--dur-med) var(--ease-out), background var(--dur-med);
  }
  .faq-item[open] summary .chev { transform: rotate(45deg); background: var(--color-accent-soft); }
  .faq-item .faq-body { padding: 0 1.3rem 1.2rem; color: var(--color-text-muted); }

  /* ---- Portfolio filter ---- */
  .filter-row {
    display: flex; flex-wrap: wrap; gap: .6rem;
    margin-bottom: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  }
  .filter-row button {
    border: 1.5px solid var(--gray-300);
    background: #fff;
    padding: .55rem 1.1rem;
    border-radius: var(--ui-radius-pill);
    font-weight: 700;
    font-size: .88rem;
    color: var(--gray-700);
  }
  .filter-row button[aria-pressed="true"] {
    background: var(--blue-900); border-color: var(--blue-900); color: #fff;
  }
  .portfolio-tag {
    display: inline-block;
    font-size: .74rem; font-weight: 700;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    padding: .25rem .65rem;
    border-radius: var(--ui-radius-pill);
    margin-bottom: .5rem;
  }
  .external-link-list { list-style: none; padding: 0; display: grid; gap: .8rem; }
  .external-link-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-md);
    font-weight: 700;
    background: #fff;
    transition: border-color var(--dur-fast), background var(--dur-fast);
  }
  .external-link-list a:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
  .external-link-list .url { font-weight: 500; color: var(--color-text-muted); font-size: .88rem; }

  /* ---- Footer ---- */
  .site-footer {
    background: var(--gray-950);
    color: var(--color-text-on-dark-muted);
  }
  .site-footer a:hover { color: #fff; }
  .footer-grid {
    display: grid;
    gap: 2.5rem;
    padding-block: clamp(3rem, 2.4rem + 2vw, 4.5rem) 2.5rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
  .footer-grid h4 { color: #fff; font-size: .92rem; margin-bottom: 1rem; }
  .footer-grid ul { list-style: none; padding: 0; display: grid; gap: .65rem; font-size: .9rem; }
  .footer-brand img { block-size: 1.9rem; margin-bottom: 1rem; filter: brightness(0) invert(1); }
  .footer-bottom {
    border-top: 1px solid rgb(255 255 255 / .08);
    padding-block: 1.4rem;
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
    font-size: .82rem;
  }
  .social-row { display: flex; gap: .6rem; }
  .social-row a {
    inline-size: 2.3rem; block-size: 2.3rem;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / .15);
    display: grid; place-items: center;
  }
  .social-row a:hover { border-color: #fff; }

  /* Note on [data-reveal]: earlier drafts tied these hooks to a scroll-driven
     opacity animation (animation-timeline: view()). Testing showed it can
     leave content stuck at opacity:0 in some rendering/capture paths (screen-
     shot tools, and possibly some browser/print/PDF contexts) with no content
     fallback, which is an unacceptable risk for a business site — so content
     under [data-reveal] is deliberately always visible with no motion. The
     markup hook is left in place if a future, more robust reveal is wanted. */

  /* ---- Sticky mobile CTA ---- */
  .mobile-cta-bar {
    position: fixed;
    inset-inline: 0; inset-block-end: 0;
    z-index: 90;
    background: rgb(255 255 255 / .96);
    backdrop-filter: blur(8px);
    border-block-start: 1px solid var(--color-border);
    padding: .7rem clamp(1rem, 4vw, 1.5rem);
    padding-block-end: calc(.7rem + env(safe-area-inset-bottom));
    display: flex;
    gap: .7rem;
  }
  .mobile-cta-bar .btn { flex: 1; }
  @media (min-width: 900px) { .mobile-cta-bar { display: none; } }
  /* The bar is position:fixed at the bottom, so on pages that include it,
     the last bit of footer content would otherwise sit underneath it. */
  @media (max-width: 899.98px) {
    body:has(.mobile-cta-bar) .site-footer {
      padding-block-end: calc(4.75rem + env(safe-area-inset-bottom));
    }
  }
}

/* ============================================================
   UTILITIES
   ============================================================ */
@layer utilities {
  .text-muted { color: var(--color-text-muted); }
  .text-accent { color: var(--color-accent); }
  .text-center { text-align: center; }
  .mt-0 { margin-top: 0; }
  .gap-tight { gap: .5rem; }
  .flow > * + * { margin-top: 1rem; }
  .max-prose { max-width: 60ch; }
  .bg-alt { background: var(--color-surface-alt); }
  .bg-dark { background: var(--blue-900); color: #fff; }
  .rounded-img { border-radius: var(--ui-radius-md); overflow: clip; }
  .table-scroll { overflow-x: auto; }
  table.compare {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
  }
  table.compare caption { text-align: start; font-weight: 800; margin-bottom: .8rem; }
  table.compare th, table.compare td {
    text-align: start;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--color-border);
  }
  table.compare th[scope="col"] { color: var(--color-text-muted); font-size: .84rem; text-transform: uppercase; letter-spacing: .03em; }
  table.compare th[scope="row"] { font-weight: 700; }
  @media print {
    .site-header, .site-footer, .mobile-cta-bar, .hero-actions { display: none; }
  }
}