*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* Option C, Deep Navy (dark, premium): navy page, serious gold accent */
      --black: #0E1C30;
      --off-black: #122238;
      --dark: #16273F;
      --mid: #22354F;
      --border: #24344D;
      --muted: #93A3B8;
      --text: #EEF3F9;
      --white: #ffffff;
      --accent: #C9A24B;
      --accent-hover: #D8B45F;
      --control-border: #667790;   /* interactive edges only: 3.3:1 on --dark, measured */
      --sans: 'Inter', system-ui, -apple-system, sans-serif;
      --radius: 12px;
      --radius-sm: 8px;
      /* Raised-panel system (DES-18): cards sit on --surface, a step lighter
         than either section tone, with a visible edge + soft shadow so nothing
         blends into the background. --divider draws a crisp line between sections. */
      --surface: #1B2E48;
      --surface-border: #30425D;
      --divider: #2A3B55;
      --shadow-card: 0 20px 45px -30px rgba(0,0,0,0.95);
    }

    /* font-size stays at 100% so the visitor's own browser text-size setting wins.
       scroll-padding-top clears the fixed 68px nav on anchor jumps and Shift+Tab. */
    html { scroll-behavior: smooth; font-size: 100%; scroll-padding-top: 84px; }

    body {
      font-family: var(--sans);
      background: var(--black);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }

    /* Accessible focus ring: visible for keyboard users, quiet for mouse */
    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* Skip link for keyboard / screen-reader users */
    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      z-index: 300;
      background: var(--accent);
      color: var(--black);
      padding: 0.6rem 1rem;
      border-radius: 0 0 var(--radius-sm) 0;
      font-size: 0.875rem;
      font-weight: 600;
    }
    .skip-link:focus { left: 0; }

    /* Screen-reader-only status text: used for the live region that announces
       form progress. Visually gone, still read aloud. */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* ── SCROLL REVEAL ──
       Only hidden when JS is confirmed active (html.js). Without JS, or with
       reduced-motion preference, content is always visible, never trapped at opacity:0. */
    .js .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .js .reveal.visible {
      opacity: 1;
      transform: none;
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
      *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    }

    /* ── NAV ── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5%;
      height: 68px;
      background: rgba(14,28,48,0.9);
      backdrop-filter: blur(24px);
      border-bottom: 1px solid var(--border);
      transition: border-color 0.3s;
    }

    .nav-logo {
      font-size: 1.1rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--white);
    }
    .nav-logo span { color: var(--accent); }

    .nav-links {
      display: flex;
      gap: 2rem;
      list-style: none;
    }
    .nav-links a {
      font-size: 0.875rem;
      color: var(--muted);
      transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--white); }
    .nav-links a.active { color: var(--white); }
    .nav-links a.active::after {
      content: '';
      display: block;
      height: 2px;
      background: var(--accent);
      border-radius: 2px;
      margin-top: 4px;
    }
    /* The current-page marker is the loud one. A section scrolling into view gets
       a quieter version, so on /claude and /salesforce the two never compete. */
    .nav-links a.active:not([aria-current="page"])::after {
      height: 1px;
      background: var(--control-border);
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.6rem 1.25rem;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      border: none;
      font-family: var(--sans);
      white-space: nowrap;
    }

    .btn-primary {
      background: var(--accent);
      color: var(--black);
    }
    .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 20px rgba(201,162,75,0.25); }
    /* A gold focus ring on a gold button is invisible, so this one goes light. */
    .btn-primary:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

    .btn-ghost {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--control-border);
    }
    .btn-ghost:hover { color: var(--white); border-color: var(--muted); }

    .btn-lg {
      padding: 0.85rem 1.75rem;
      font-size: 1rem;
      border-radius: var(--radius);
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 4px;
    }
    .hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: transform 0.3s, opacity 0.2s;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mobile-menu {
      display: none;
      position: fixed;
      top: 68px; left: 0; right: 0;
      background: var(--off-black);
      border-bottom: 1px solid var(--border);
      padding: 1.5rem 5%;
      z-index: 99;
    }
    .mobile-menu.open { display: block; }
    .mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.5rem; }
    .mobile-menu ul a { font-size: 1rem; color: var(--muted); }

    /* ── STICKY CTA ── */
    .sticky-cta {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      z-index: 90;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
      pointer-events: none;
      /* visibility, not just opacity: otherwise the invisible button keeps a
         tab stop on every page. */
      visibility: hidden;
    }
    .sticky-cta.visible {
      opacity: 1;
      transform: none;
      pointer-events: auto;
      visibility: visible;
    }
    .sticky-cta .btn {
      box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,162,75,0.2);
    }

    /* ── SECTIONS ── */
    section { padding: 7rem 5%; }
    /* Crisp hairline between stacked sections so each one reads as its own band
       instead of blending into the next (DES-18). Hero stays borderless. */
    main > section { border-top: 1px solid var(--divider); }
    #hero { border-top: none; }
    .container { max-width: 1100px; margin: 0 auto; }
    .container-sm { max-width: 680px; margin: 0 auto; }

    /* ── HERO ── */
    #hero {
      padding-top: 10rem;
      padding-bottom: 7rem;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    #hero::before {
      content: '';
      position: absolute;
      top: -40%;
      left: 50%;
      transform: translateX(-50%);
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(201,162,75,0.05) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(201,162,75,0.08);
      border: 1px solid rgba(201,162,75,0.25);
      border-radius: 100px;
      padding: 0.35rem 0.9rem;
      font-size: 0.8rem;
      color: var(--accent);
      margin-bottom: 2rem;
      font-weight: 500;
    }

    .hero-badge::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }

    h1 {
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.04em;
      color: var(--white);
      max-width: 820px;
      margin: 0 auto 1.5rem;
    }

    h1 em {
      font-style: normal;
      color: var(--accent);
    }

    .hero-sub {
      font-size: 1.15rem;
      color: var(--muted);
      max-width: 520px;
      margin: 0 auto 2.5rem;
      line-height: 1.7;
    }

    .hero-actions {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 4rem;
    }

    /* ── HERO PRODUCT VISUAL ──
       Gives the page an "above-the-fold" product shot like Linear/Vercel/Stripe,
       instead of a text-only hero. Pure CSS mock, no image weight. */
    .hero-visual {
      max-width: 940px;
      margin: 4.5rem auto 0;
      position: relative;
    }
    .js .hero-visual { animation: heroFloat 7s ease-in-out infinite; }

    @keyframes heroFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .browser-frame {
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--off-black);
      overflow: hidden;
      box-shadow: 0 40px 120px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.02);
    }
    .browser-bar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--border);
      background: var(--dark);
    }
    .browser-dots { display: flex; gap: 0.4rem; }
    .browser-dots span {
      width: 11px; height: 11px; border-radius: 50%;
      background: var(--surface-border);
    }
    .browser-url {
      flex: 1;
      margin-left: 0.75rem;
      background: var(--black);
      border: 1px solid var(--border);
      border-radius: 100px;
      font-size: 0.72rem;
      color: var(--muted);
      padding: 0.3rem 0.85rem;
      text-align: center;
      max-width: 260px;
    }
    /* Padlock drawn as a masked SVG (inherits the URL text colour), no emoji. */
    .browser-url::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 10px;
      margin-right: 5px;
      vertical-align: -1px;
      background: currentColor;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a5 5 0 0 0-5 5v2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5Zm3 7H9V7a3 3 0 0 1 6 0v2Z'/%3E%3C/svg%3E") no-repeat center / contain;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a5 5 0 0 0-5 5v2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5Zm3 7H9V7a3 3 0 0 1 6 0v2Z'/%3E%3C/svg%3E") no-repeat center / contain;
      opacity: 0.6;
    }

    .browser-body {
      padding: 2.75rem 2rem 3rem;
      background:
        radial-gradient(circle at 70% 0%, rgba(201,162,75,0.06) 0%, transparent 45%),
        var(--off-black);
      text-align: center;
      position: relative;
    }
    .bp-badge {
      display: inline-block;
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      border: 1px solid rgba(201,162,75,0.25);
      border-radius: 100px;
      padding: 0.2rem 0.6rem;
      margin-bottom: 1.1rem;
    }
    /* Hero product screen: a real support-assistant view (customer message →
       Claude draft → what's under the hood), not grey placeholder bars (DES-18). */
    .ui-hero-app { text-align: left; max-width: 480px; margin: 0.4rem auto 0; }
    .ui-hero-app .ui-msg { font-size: 0.82rem; padding: 0.7rem 0.9rem; border-radius: 9px; }
    .ui-hero-app .ui-who { font-size: 0.625rem; }
    .ui-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1.1rem; }
    .ui-tile { background: var(--off-black); border: 1px solid var(--surface-border); border-radius: 8px; padding: 0.6rem 0.7rem; }
    .ui-tile-k { display: block; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
    .ui-tile-v { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }

    /* Floating stat chip overlapping the mock, signalling the outcome we sell */
    .hero-stat-chip {
      position: absolute;
      right: -14px;
      top: 30%;
      background: var(--black);
      border: 1px solid rgba(201,162,75,0.3);
      border-radius: var(--radius);
      padding: 0.85rem 1.1rem;
      box-shadow: 0 18px 40px -12px rgba(0,0,0,0.7);
      text-align: left;
    }
    .hero-stat-chip .stat-big { font-size: 1.5rem; font-weight: 700; color: var(--accent); line-height: 1; }
    .hero-stat-chip .stat-cap { font-size: 0.68rem; color: var(--muted); margin-top: 0.25rem; }

    /* ── LOGO BAR ── */
    /* No border-bottom: the next section already draws its own --divider
       border-top, and the two stacked as a doubled two-tone hairline. */
    #logos {
      padding: 4rem 5%;
      border-top: 1px solid var(--divider);
    }

    .logos-label {
      text-align: center;
      font-size: 0.8rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 2.5rem;
    }

    .logos-grid {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 3rem;
    }

    .logo-item {
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: #8A99B0; /* AA-compliant (~6:1 on navy --black); still visually quiet */
      transition: color 0.2s;
      white-space: nowrap;
    }
    .logo-item:hover { color: var(--text); }

    /* ── SECTION HEADERS ── */
    .section-label {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 1rem;
    }

    h2 {
      font-size: clamp(1.8rem, 4vw, 3rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--white);
      line-height: 1.1;
    }

    .section-intro {
      font-size: 1.05rem;
      color: var(--muted);
      line-height: 1.7;
      margin-top: 1rem;
    }

    /* ── VALUE PROPS ── */
    #value .container { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }

    .value-list { margin-top: 3rem; display: flex; flex-direction: column; gap: 1.5rem; }

    .value-item {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }

    .value-icon {
      width: 38px;
      height: 38px;
      min-width: 38px;
      border-radius: var(--radius-sm);
      background: rgba(201,162,75,0.07);
      border: 1px solid rgba(201,162,75,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }
    .value-icon svg { width: 19px; height: 19px; display: block; }

    .value-item h3 {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--white);
      margin-bottom: 0.25rem;
    }

    .value-item p { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }

    .value-right {
      background: var(--surface);
      border: 1px solid var(--surface-border);
      border-radius: var(--radius);
      padding: 2rem;
      box-shadow: var(--shadow-card);
      position: sticky;
      top: 90px;
    }

    .contrast-table { width: 100%; }
    .contrast-table th {
      font-size: 0.78rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0 0 0.75rem;
      text-align: left;
    }
    .contrast-table th:last-child { text-align: right; }
    .contrast-table th.bad { color: #f87171; }
    .contrast-table th.good { color: var(--accent); }
    .contrast-table td {
      padding: 0.75rem 0;
      font-size: 0.875rem;
      border-top: 1px solid var(--border);
      vertical-align: top;
    }
    .contrast-table td:first-child { color: var(--muted); }
    .contrast-table td:last-child { text-align: right; color: var(--text); }
    .check { color: var(--accent); font-weight: 700; }
    .cross { color: #f87171; }

    /* ── PROCESS ── */
    #process { background: var(--off-black); }

    .process-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin-top: 3.5rem;
    }

    .process-step {
      padding: 2rem;
      border: 1px solid var(--surface-border);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow-card);
      position: relative;
      transition: border-color 0.25s, transform 0.25s;
    }
    .process-step:hover { border-color: rgba(201,162,75,0.35); }

    .step-num {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: var(--accent);
      margin-bottom: 1.25rem;
    }

    .process-step h3 {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--white);
      margin-bottom: 0.6rem;
    }

    .process-step p { font-size: 0.875rem; color: var(--muted); line-height: 1.65; }

    /* ── SERVICES ── */
    #services .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      margin-top: 3.5rem;
    }

    .service-card {
      background: var(--surface);
      border: 1px solid var(--surface-border);
      border-radius: var(--radius);
      padding: 1.75rem;
      box-shadow: var(--shadow-card);
      transition: border-color 0.25s, transform 0.25s;
    }
    .service-card:hover { border-color: rgba(201,162,75,0.3); }

    .service-icon {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }

    .service-card h3 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--white);
      margin-bottom: 0.5rem;
    }

    .service-card p { font-size: 0.875rem; color: var(--muted); line-height: 1.6; margin-bottom: 1rem; }

    .service-tag {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--accent);
      background: rgba(201,162,75,0.08);
      border: 1px solid rgba(201,162,75,0.15);
      border-radius: 4px;
      padding: 0.2rem 0.5rem;
    }

    /* ── CASE STUDIES ── */
    #work { background: var(--off-black); }

    .work-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      margin-top: 3.5rem;
    }

    .work-card {
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--surface-border);
      transition: border-color 0.25s, transform 0.25s;
      background: var(--surface);
      box-shadow: var(--shadow-card);
    }
    /* No cursor: pointer. These two cards are not links and go nowhere. */
    .work-card:hover { border-color: rgba(201,162,75,0.35); }

    .work-preview {
      aspect-ratio: 16/9;
      background:
        radial-gradient(circle at 75% 10%, rgba(201,162,75,0.07) 0%, transparent 50%),
        var(--dark);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--surface-border);
    }

    /* ── PRODUCT MICRO-UI ──
       Legible, real illustrative UI used in the hero and the two work previews,
       replacing the old grey wireframe bars. Depicts what each service does:
       a Claude support-triage reply, and a Salesforce pipeline board (DES-18). */
    .ui-panel {
      width: 88%;
      background: var(--surface);
      border: 1px solid var(--surface-border);
      border-radius: 10px;
      padding: 0.7rem;
      box-shadow: 0 14px 30px -20px rgba(0,0,0,0.9);
      text-align: left;
    }
    .ui-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
    .ui-head { margin-bottom: 0.55rem; }
    .ui-tt { font-size: 0.62rem; font-weight: 600; color: var(--text); }
    .ui-chip {
      font-size: 0.54rem; font-weight: 600; letter-spacing: 0.02em;
      color: var(--muted); background: rgba(255,255,255,0.05);
      border: 1px solid var(--surface-border); border-radius: 100px;
      padding: 0.12rem 0.5rem; white-space: nowrap;
    }
    .ui-chip-hot { color: var(--accent); background: rgba(201,162,75,0.12); border-color: rgba(201,162,75,0.35); }

    .ui-msg { border-radius: 7px; padding: 0.45rem 0.6rem; margin-bottom: 0.4rem; color: var(--text); font-size: 0.62rem; line-height: 1.45; }
    .ui-msg:last-of-type { margin-bottom: 0; }
    .ui-msg-in { background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
    .ui-msg-ai { background: rgba(201,162,75,0.07); border: 1px solid rgba(201,162,75,0.22); }
    .ui-who { display: block; font-size: 0.625rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
    .ui-who-ai { color: var(--accent); }
    .ui-spark { width: 9px; height: 9px; vertical-align: -1px; margin-right: 2px; }

    .ui-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-top: 0.5rem; }
    .ui-tag, .ui-metric { font-size: 0.54rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.25rem; }
    .ui-tag::before { content: '✓'; color: var(--accent); font-weight: 700; }
    .ui-send { font-size: 0.58rem; font-weight: 600; color: var(--accent); white-space: nowrap; }

    /* Pipeline board (Salesforce work preview) */
    .ui-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-bottom: 0.5rem; }
    .ui-col { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem; display: flex; flex-direction: column; gap: 0.3rem; }
    .ui-col-h { font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
    .ui-col-won { color: var(--accent); }
    .ui-deal { font-size: 0.54rem; color: var(--text); background: var(--off-black); border: 1px solid var(--surface-border); border-radius: 4px; padding: 0.22rem 0.32rem; }
    .ui-deal-won { border-color: rgba(201,162,75,0.4); color: var(--accent); }

    .work-card-body { padding: 1.5rem; }
    .work-card-label { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.3rem; }
    .work-card-title { font-size: 1rem; font-weight: 600; color: var(--white); margin-bottom: 1rem; }

    .work-result {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(201,162,75,0.07);
      border: 1px solid rgba(201,162,75,0.15);
      border-radius: var(--radius-sm);
      padding: 0.4rem 0.75rem;
      font-size: 0.82rem;
      color: var(--accent);
      font-weight: 500;
    }

    .work-card.featured { grid-column: span 2; }
    .work-card.featured .work-preview { aspect-ratio: 21/9; }

    /* ── PRICING ── */
    #pricing { background: var(--off-black); }

    /* The three-tier card system that used to live here is gone. Pricing is one
       fixed figure, From A$10,000, shown on the offer cards. Do not reintroduce
       a tier grid, a "featured" gradient card or a "most popular" badge pill. */

    .pricing-note {
      text-align: center;
      margin-top: 2.5rem;
      font-size: 0.85rem;
      color: var(--muted);
    }

    .pricing-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

    /* Inline prompts that open the enquiry modal. Real buttons, so they are
       keyboard-reachable, but drawn exactly like the .pricing-note a and
       .offer-nudge a treatment: one underlined gold phrase inside a sentence.
       Do not enlarge these into gold pill buttons. */
    .link-btn {
      background: none;
      border: 0;
      padding: 0;
      font: inherit;
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }
    .link-btn:hover { color: var(--accent-hover); }

    /* ── FAQ ── */
    .faq-list { margin-top: 3rem; display: flex; flex-direction: column; gap: 0; }

    .faq-item { border-top: 1px solid var(--border); }
    .faq-item:last-child { border-bottom: 1px solid var(--border); }

    .faq-q {
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      padding: 1.25rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      cursor: pointer;
      font-family: var(--sans);
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--white);
    }

    .faq-q:hover { color: var(--accent); }

    .faq-icon {
      font-size: 1.1rem;
      color: var(--muted);
      transition: transform 0.25s;
      flex-shrink: 0;
    }

    .faq-item.open .faq-icon { transform: rotate(45deg); color: var(--accent); }

    .faq-a {
      display: none;
      padding: 0 0 1.25rem;
      font-size: 0.9rem;
      color: var(--muted);
      line-height: 1.7;
      max-width: 640px;
    }
    .faq-item.open .faq-a { display: block; }

    /* ── FINAL CTA ── */
    #cta {
      background: var(--off-black);
      text-align: center;
    }

    .cta-box {
      background: linear-gradient(135deg, rgba(201,162,75,0.06) 0%, rgba(201,162,75,0.02) 100%);
      border: 1px solid rgba(201,162,75,0.2);
      border-radius: 20px;
      padding: 5rem 3rem;
    }

    .cta-box h2 { max-width: 580px; margin: 1rem auto; }
    .cta-box .section-intro { max-width: 440px; margin: 1rem auto 2.5rem; }
    .cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

    .cta-guarantee {
      margin-top: 1.5rem;
      font-size: 0.82rem;
      color: var(--muted);
    }

    /* ── FOOTER ── */
    footer {
      border-top: 1px solid var(--border);
      padding: 3rem 5%;
    }

    .footer-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .footer-brand { font-size: 0.95rem; font-weight: 600; color: var(--white); }
    .footer-brand span { color: var(--accent); }

    .footer-links { display: flex; gap: 2rem; }
    .footer-links a { font-size: 0.85rem; color: var(--muted); transition: color 0.2s; }
    .footer-links a:hover { color: var(--white); }

    .footer-copy { font-size: 0.8rem; color: #8A99B0; } /* AA-compliant (~6:1 on navy --black) */

    .footer-legal {
      max-width: 1100px;
      margin: 1.75rem auto 0;
      padding-top: 1.25rem;
      border-top: 1px solid var(--divider);
      font-size: 0.75rem;
      line-height: 1.7;
      color: #8A99B0;
    }
    .footer-legal a { color: #8A99B0; text-decoration: underline; transition: color 0.2s; }
    .footer-legal a:hover { color: var(--white); }

    /* ── CONTACT MODAL ── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.75);
      z-index: 200;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(8px);
    }
    .modal-overlay.open { display: flex; }

    .modal {
      background: var(--off-black);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 2.5rem;
      width: 100%;
      max-width: 480px;
      margin: 1rem;
      position: relative;
      max-height: 90vh;
      overflow-y: auto;
    }

    .modal-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: none;
      border: none;
      color: var(--muted);
      font-size: 1.25rem;
      cursor: pointer;
      line-height: 1;
    }
    .modal-close:hover { color: var(--white); }

    .modal h3 { font-size: 1.35rem; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; }
    .modal p { font-size: 0.875rem; color: var(--muted); margin-bottom: 1.75rem; }

    .form-group { margin-bottom: 1.1rem; }
    .form-group label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text); margin-bottom: 0.4rem; }

    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      background: var(--dark);
      border: 1px solid var(--control-border);
      border-radius: var(--radius-sm);
      padding: 0.7rem 0.9rem;
      font-family: var(--sans);
      font-size: 0.9rem;
      color: var(--white);
      transition: border-color 0.2s;
      /* No outline: none here. It beat the global :focus-visible gold ring on
         specificity and left keyboard users with no visible focus. */
    }
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus { border-color: var(--accent); }

    .form-group textarea { resize: vertical; min-height: 90px; }
    /* appearance: none strips the native arrow, so draw one back on. Without it
       the two selects read as plain text fields and visitors skip them.
       Chevron is an inline SVG using the existing --muted hex (#93A3B8). */
    .form-group select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2393A3B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.75 6 6.25l5-4.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.9rem center;
      padding-right: 2.5rem;
    }

    /* Email chooser: shown when any email link or the form fallback needs
       the visitor to pick Gmail / Outlook web / their mail app */
    .email-chooser { max-width: 400px; }
    .email-chooser-options { display: grid; gap: 0.6rem; }
    .email-chooser-options .btn {
      width: 100%;
      justify-content: center;
      white-space: normal;
      text-align: center;
      padding: 0.75rem 1rem;
    }
    .email-chooser p.email-chooser-address {
      margin: 1.25rem 0 0;
      text-align: center;
      font-size: 0.8rem;
      color: var(--muted);
      letter-spacing: 0.02em;
    }

    .form-success {
      display: none;
      text-align: center;
      padding: 1rem 0;
    }
    .form-success .success-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
    .form-success h4 { color: var(--white); font-size: 1.1rem; margin-bottom: 0.5rem; }
    .form-success p { font-size: 0.875rem; color: var(--muted); margin-bottom: 0; }

    /* Form validation + async states */
    .form-group input:user-invalid,
    .form-group input.invalid { border-color: #f87171; }
    .field-error {
      display: none;
      font-size: 0.75rem;
      color: #f87171;
      margin-top: 0.35rem;
    }
    .field-error.show { display: block; }
    .form-error-banner {
      display: none;
      background: rgba(248,113,113,0.08);
      border: 1px solid rgba(248,113,113,0.3);
      color: #f87171;
      border-radius: var(--radius-sm);
      padding: 0.7rem 0.9rem;
      font-size: 0.82rem;
      margin-bottom: 1rem;
      line-height: 1.5;
    }
    .form-error-banner.show { display: block; }
    .form-error-banner a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
    .btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

    /* Micro-copy under CTAs to reduce perceived commitment */
    .cta-microcopy {
      font-size: 0.78rem;
      color: var(--muted);
      margin-top: 0.9rem;
    }
    .cta-microcopy span { color: var(--accent); }

    /* ── OFFER CARDS (the two quick starts) ── */
    .offer-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      margin-top: 3.5rem;
      align-items: stretch;
    }
    .offer-card {
      background: var(--surface);
      border: 1px solid var(--surface-border);
      border-radius: var(--radius);
      padding: 2.25rem;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      transition: border-color 0.25s, transform 0.25s;
    }
    .offer-card:hover { border-color: rgba(201,162,75,0.3); }
    .offer-eyebrow {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.75rem;
    }
    .offer-card h3 {
      font-size: 1.4rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--white);
      margin-bottom: 0.6rem;
    }
    .offer-lead { font-size: 0.95rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.5rem; }
    .offer-subhead {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text);
      margin: 0.5rem 0 0.75rem;
    }
    .offer-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; }
    .offer-list li {
      font-size: 0.875rem;
      color: var(--muted);
      display: flex;
      align-items: flex-start;
      gap: 0.6rem;
      line-height: 1.5;
    }
    .offer-list li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; margin-top: 0.05em; }
    .offer-outcome {
      background: rgba(201,162,75,0.06);
      border: 1px solid rgba(201,162,75,0.15);
      border-radius: var(--radius-sm);
      padding: 0.9rem 1rem;
      font-size: 0.85rem;
      color: var(--text);
      line-height: 1.55;
      margin-bottom: 1.25rem;
    }
    .offer-outcome strong { color: var(--accent); font-weight: 600; }
    .offer-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1.5rem;
      padding: 1rem 0 1.25rem;
      border-top: 1px solid var(--border);
      margin-top: auto;
    }
    .offer-meta div { font-size: 0.8rem; color: var(--muted); }
    .offer-meta strong { display: block; color: var(--white); font-size: 0.95rem; font-weight: 600; margin-top: 0.1rem; }
    .offer-card .btn { width: 100%; }

    .offer-nudge { text-align: center; margin-top: 2.5rem; font-size: 0.9rem; color: var(--muted); }
    .offer-nudge a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

    /* Illustrative-scenario badge (honest labelling, not a real client result) */
    .illustrative-badge {
      display: inline-block;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      border: 1px dashed var(--border);
      border-radius: 4px;
      padding: 0.2rem 0.5rem;
    }

    /* ── PRICING MODEL BAND ── */
    .pm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3.5rem; }
    /* Same raised-panel recipe as the other card types (DES-18), so the pricing
       row does not read flatter than everything around it. */
    .pm-card {
      background: var(--surface);
      border: 1px solid var(--surface-border);
      border-radius: var(--radius);
      padding: 1.75rem;
      box-shadow: var(--shadow-card);
    }
    .pm-card .pm-icon { color: var(--accent); margin-bottom: 0.85rem; line-height: 0; }
    .pm-card .pm-icon svg { width: 22px; height: 22px; display: block; }
    .pm-card h3 { font-size: 1rem; font-weight: 600; color: var(--white); margin-bottom: 0.4rem; }
    .pm-card p { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }

    /* ── CERTIFICATIONS NOTE ──
       A quiet footnote on the raised-panel recipe, not a feature panel. Plain
       text only: no logos, badge images, seals, counters or verified flourish. */
    .cert-note {
      background: var(--surface);
      border: 1px solid var(--surface-border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-card);
      padding: 1.35rem 1.5rem;
      margin-top: 2rem;
      max-width: 640px;
    }
    .cert-note p { font-size: 0.875rem; color: var(--muted); line-height: 1.65; }
    .cert-note .cert-label {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.5rem;
    }
    /* The panel is one line of framing followed by a list per platform. */
    .cert-note p + p { margin-top: 0.5rem; }
    /* Inside the sticky value panel the offer list already leaves a gap below. */
    .value-right .cert-note { margin-top: 0.75rem; }

    /* ── HOVER LIFT ──
       Pointer devices only. On touch, :hover sticks after a tap and the card
       stays raised, so the lift lives behind @media (hover: hover). The :active
       reset gives a press response instead of a stuck hover. */
    @media (hover: hover) {
      .btn-primary:hover { transform: translateY(-1px); }
      .process-step:hover,
      .service-card:hover,
      .offer-card:hover { transform: translateY(-2px); }
      .work-card:hover { transform: translateY(-3px); }

      .btn:active { transform: translateY(0); }
      .process-step:active,
      .service-card:active,
      .work-card:active,
      .offer-card:active { transform: translateY(0); }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .offer-grid { grid-template-columns: 1fr; }
      .pm-grid { grid-template-columns: 1fr; }
      .nav-links { display: none; }
      .nav-cta .btn { display: none; }
      .hamburger { display: flex; }

      #value .container { grid-template-columns: 1fr; gap: 3rem; }
      .value-right { position: static; }

      .process-steps { grid-template-columns: 1fr; }

      #services .services-grid { grid-template-columns: 1fr; }

      .work-grid { grid-template-columns: 1fr; }
      .work-card.featured { grid-column: span 1; }
      .work-card.featured .work-preview { aspect-ratio: 16/9; }

      .cta-box { padding: 3rem 1.5rem; }

      .footer-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
      .footer-links { flex-wrap: wrap; gap: 1rem; }

      .sticky-cta { bottom: 1rem; right: 1rem; }

      .hero-visual { margin-top: 3.5rem; }
      .hero-stat-chip { right: 8px; top: auto; bottom: -18px; padding: 0.6rem 0.85rem; }
      .hero-stat-chip .stat-big { font-size: 1.15rem; }
      .browser-body { padding: 2rem 1.25rem 2.25rem; }
      .bp-grid { gap: 0.5rem; }
    }

/* ── DETAIL PAGE (Claude / Salesforce) ── */
.detail-hero { padding-top: 10rem; padding-bottom: 5rem; text-align: center; position: relative; overflow: hidden; }
.detail-hero::before {
  content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(201,162,75,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.detail-hero h1 { max-width: 780px; }
.price-line {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  margin: 0.5rem auto 2rem; font-size: 1.05rem; color: var(--muted);
}
.price-line strong { font-size: 1.5rem; font-weight: 700; color: var(--white); letter-spacing: -0.02em; }
.price-line .price-tag {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); background: rgba(201,162,75,0.08);
  border: 1px solid rgba(201,162,75,0.2); border-radius: 100px; padding: 0.25rem 0.7rem;
  align-self: center;
}

/* Two-column "what we build / what you own" spec block */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 3.5rem; margin-top: 3.5rem; }
.spec-col h3 {
  font-size: 0.95rem; font-weight: 600; color: var(--white); margin-bottom: 1.25rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--border);
}
.spec-col .offer-list { margin-bottom: 0; }

/* "Best for / not for" honesty band */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem; }
.fit-card {
  background: var(--surface); border: 1px solid var(--surface-border);
  border-radius: var(--radius); padding: 1.75rem;
  box-shadow: var(--shadow-card);
}
.fit-card h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 1rem; color: var(--white); }
.fit-card.good h3 { color: var(--accent); }
.fit-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.fit-card li { font-size: 0.875rem; color: var(--muted); display: flex; gap: 0.6rem; line-height: 1.5; align-items: flex-start; }
.fit-card.good li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.fit-card.bad li::before { content: '→'; color: var(--muted); flex-shrink: 0; }

@media (max-width: 900px) {
  .spec-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .fit-grid { grid-template-columns: 1fr; }
}