/* AHeAD Automation — shared design system
   Extracted from index.html (Phase 0). Every page links this file.
   Tokens, base, .eyebrow/.heading-*, the .lz-* section system, nav,
   language toggle, footer, #back-to-top, #sticky-cta, booking <dialog>,
   plus the page-specific animation CSS (weight / oppsheet / aios / faq).
   Page-specific rules are harmless on pages that don't use them. */


  :root {
    --bg: #0B1020;
    --panel: #18243D;
    --cream: #F1E8D8;
    --sand: #A9B8D6;
    --tan: #7C8CB0;
    --rust: #3D7DDB;
    --rustlight: #4D9FFF;
    --line: #26334D;
  }
  * { -webkit-tap-highlight-color: transparent; }
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Manrope', system-ui, sans-serif;
    background-color: var(--bg);
    background-image:
      radial-gradient(110% 70% at 50% -10%, rgba(77,159,255,.16), rgba(77,159,255,0) 62%),
      radial-gradient(55% 55% at -6% 24%, rgba(58,70,104,.16), rgba(58,70,104,0) 70%),
      radial-gradient(55% 55% at 106% 46%, rgba(124,140,176,.10), rgba(124,140,176,0) 70%),
      radial-gradient(65% 40% at 50% 100%, rgba(77,159,255,.08), rgba(77,159,255,0) 72%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-position: top center, top center, top center, top center, top left;
    background-size: 100% 1400px, 100% 1400px, 100% 1400px, 100% 1400px, 180px 180px;
    color: var(--sand);
  }

  ::selection { background: var(--rust); color: var(--cream); }

  a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
    outline: 2px solid var(--rustlight);
    outline-offset: 3px;
  }

  .skip-link {
    position: absolute;
    left: 1rem;
    top: -60px;
    z-index: 100;
    background: var(--rustlight);
    color: #0B1020;
    font-weight: 700;
    padding: .75rem 1.25rem;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: top .2s ease;
  }
  .skip-link:focus { top: 1rem; }

  /* ---- typographic system ---- */
  .eyebrow {
    font-family: 'Courier Prime', monospace;
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tan);
    display: flex;
    align-items: center;
    gap: .6rem;
  }
  .heading-xl {
    font-family: 'Courier Prime', monospace;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--cream);
  }
  .heading-lg {
    font-family: 'Courier Prime', monospace;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.12;
    color: var(--cream);
  }
  .heading-sm {
    font-family: 'Courier Prime', monospace;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cream);
  }
  .label {
    font-family: 'Courier Prime', monospace;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  /* ---- circuit texture tile ---- */
  .circuit-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23F1E8D8' stroke-width='1'%3E%3Cpath d='M10 10 H50 V40 H90'/%3E%3Cpath d='M90 40 V80 H130'/%3E%3Cpath d='M10 90 H40 V130'/%3E%3Cpath d='M60 130 V100 H100 V70'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3Ccircle cx='90' cy='40' r='2.5'/%3E%3Ccircle cx='130' cy='80' r='2.5'/%3E%3Ccircle cx='10' cy='90' r='2.5'/%3E%3Ccircle cx='60' cy='130' r='2.5'/%3E%3Ccircle cx='100' cy='70' r='2.5'/%3E%3Crect x='36' y='36' width='8' height='8'/%3E%3Crect x='96' y='66' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 140px 140px;
  }

  /* ---- surfaces ---- */
  .panel-surface {
    background: var(--panel);
    border: 1px solid var(--line);
    position: relative;
  }
  .panel-surface::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(241,232,216,.22), transparent);
  }
  .glow-behind {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(70px);
    pointer-events: none;
  }

  .shadow-btn {
    box-shadow: 0 1px 1px rgba(0,0,0,.35), 0 16px 32px -12px rgba(77,159,255,.45);
  }

  .cursor-blink::after {
    content: "\2588";
    margin-left: 2px;
    animation: blink 1s steps(1) infinite;
    color: var(--rustlight);
  }
  @keyframes blink { 50% { opacity: 0; } }

  /* ---- scroll reveal (transition-based; safe to override inline later) ---- */
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
  }
  .reveal.in { opacity: 1; transform: translateY(0); }

  .gear-spin { animation: gear-spin 9s linear infinite; transform-origin: 50% 50%; }
  @keyframes gear-spin { to { transform: rotate(360deg); } }

  .booking-loadbar { position: relative; height: 3px; border-radius: 2px; overflow: hidden; background: var(--line); margin-bottom: 14px; }
  .booking-loadbar::after {
    content: ''; position: absolute; inset: 0; width: 40%; border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--rustlight), transparent);
    animation: booking-loadbar-sweep 1.1s ease-in-out infinite;
  }
  @keyframes booking-loadbar-sweep {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(340%); }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .cursor-blink::after { animation: none; }
    .gear-spin { animation: none; }
    .booking-loadbar::after { animation: none; transform: translateX(0); width: 100%; opacity: .5; }
  }

  .nav-link { position: relative; color: var(--sand); }
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: -4px;
    height: 1px;
    background: var(--rustlight);
    transition: right .25s ease;
  }
  .nav-link:hover, .nav-link:focus-visible { color: var(--cream); }
  .nav-link:hover::after, .nav-link:focus-visible::after { right: 0; }
  .nav-link.is-current, .nav-link[aria-current="page"] { color: var(--cream); }
  .nav-link.is-current::after, .nav-link[aria-current="page"]::after { right: 0; }

  /* mobile menu: current page marker */
  #mobile-menu a[aria-current="page"] { color: var(--cream); }
  #mobile-menu a[aria-current="page"]::before { content: "▸ "; color: var(--rustlight); }

  #mobile-menu { transition: max-height .3s ease, opacity .25s ease; }

  /* ---- the weight: scattered task fragments ---- */
  .frag {
    position: absolute;
    font-family: 'Courier Prime', monospace;
    font-size: clamp(10px, 2.2vw, 13px);
    color: var(--rustlight);
    opacity: 0.85;
    max-width: min(64vw, 280px);
    text-shadow: 0 1px 12px rgba(11,16,32,.95), 0 0 4px rgba(11,16,32,.85);
    will-change: transform, opacity;
  }

  /* ---- the weight: scroll-driven scene, chaos desk -> calm desk ---- */
  #weight-scene { z-index: 0; }
  .weight-frame {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    will-change: opacity, transform;
  }
  .weight-frame--chaos { opacity: .8; }
  .weight-frame--calm { opacity: 0; }
  .weight-scrim {
    position: absolute; inset: 0;
    background:
      /* tight dark pool behind the headline, fading to almost nothing so the
         cluttered edges of the photo stay visible */
      radial-gradient(44% 36% at 50% 45%, rgba(11,16,32,.55), rgba(11,16,32,.06) 80%),
      linear-gradient(180deg, rgba(11,16,32,.42) 0%, rgba(11,16,32,.12) 34%, rgba(11,16,32,.12) 66%, rgba(11,16,32,.5) 100%);
  }
  #weight .heading-lg { text-shadow: 0 2px 26px rgba(11,16,32,.9), 0 1px 4px rgba(11,16,32,.7); }
  @media (prefers-reduced-motion: reduce) {
    .weight-frame--chaos { opacity: 0; }
    .weight-frame--calm { opacity: .78; }
  }

  /* ---- process pipeline node ---- */
  .node-dot {
    transition: border-color .3s ease, box-shadow .3s ease, color .3s ease, background-color .3s ease;
  }
  .node-dot.lit {
    border-color: var(--rustlight);
    color: var(--rustlight);
    background: #142238;
    box-shadow: inset 0 0 0 20px rgba(77,159,255,.12), 0 0 0 4px rgba(77,159,255,.12);
  }

  /* process connectors: drawn precisely between node centers, not guessed percentages */
  .process-connector { display: none; }
  @media (min-width: 768px) {
    .process-connector {
      display: block;
      position: absolute;
      top: 13px;
      left: 50%;
      width: calc(100% + 24px);
      height: 2px;
      background: rgba(124,140,176,.3);
      z-index: 0;
    }
  }
  .process-connector-fill {
    position: absolute;
    inset: 0;
    background: var(--rustlight);
    transform: scaleX(0);
    transform-origin: left;
  }
  @media (prefers-reduced-motion: reduce) {
    .process-connector-fill { transform: scaleX(1) !important; }
  }

  /* traveling pulse dot, riding the leading edge of a connector-fill */
  .connector-dot {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--rustlight);
    box-shadow: 0 0 8px 2px rgba(77,159,255,.65);
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .connector-dot { display: none; }
  }

  /* ---- team system diagram: bigger nodes, same pipeline mechanics ---- */
  .team-connector { top: 28px !important; height: 3px !important; background: rgba(124,140,176,.4) !important; }
  .team-node-dot svg { width: 22px; height: 22px; }

  /* ---- FAQ accordion ---- */
  .faq-item summary { list-style: none; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-chevron { transition: transform .25s ease; }
  .faq-item[open] .faq-chevron { transform: rotate(180deg); }
  .faq-item[open] summary .faq-q { color: var(--rustlight); }
  .faq-answer { animation: faq-in .35s ease-out; }
  @keyframes faq-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .faq-chevron { transition: none; }
    .faq-answer { animation: none; }
  }

  /* ---- back to top ---- */
  #back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 40;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--panel2);
    border: 1px solid var(--line);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px) scale(.9);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, border-color .2s ease;
  }
  #back-to-top.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  #back-to-top:hover { border-color: var(--rustlight); color: var(--rustlight); }
  #back-to-top:hover svg { animation: gear-spin 3s linear infinite; }
  @media (prefers-reduced-motion: reduce) {
    #back-to-top:hover svg { animation: none; }
  }

  /* ---- sticky mobile CTA: appears once the hero has scrolled away ---- */
  #sticky-cta {
    transform: translateY(110%);
    transition: transform .3s cubic-bezier(.16,.8,.3,1);
  }
  #sticky-cta.show { transform: translateY(0); }
  /* lift the back-to-top button clear of the bar while it's up */
  #sticky-cta.show ~ #back-to-top { bottom: 88px; }
  @media (prefers-reduced-motion: reduce) {
    #sticky-cta { transition: none; }
  }

  /* ============ consultation: the opportunities table, rendered as a deliverable ============ */
  .oppdoc { position: relative; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
  .oppdoc::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(241,232,216,.22), transparent);
  }
  .oppdoc-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--bgalt);
    font-family: 'Courier Prime', monospace; font-size: 10px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--tan);
  }
  .oppdoc-bar .oppdoc-meta { color: var(--rustlight); }
  .opptable { width: 100%; border-collapse: collapse; }
  .opptable thead th {
    text-align: left; font-family: 'Courier Prime', monospace; font-size: 10px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--tan);
    padding: .95rem 1.1rem .55rem; border-bottom: 1px solid var(--line);
  }
  .opptable td {
    padding: 1rem 1.1rem; border-bottom: 1px solid var(--line);
    font-size: 13.5px; line-height: 1.6; vertical-align: top;
  }
  .opptable tbody tr:last-child td { border-bottom: none; }
  .opptable .opp-problem { color: var(--sand); }
  .opptable .opp-fix { color: var(--cream); }
  .opptable th.opp-saving-h, .opptable td.opp-saving { text-align: right; white-space: nowrap; }
  .opptable td.opp-saving {
    font-family: 'Courier Prime', monospace; font-weight: 700; font-size: 14px; color: var(--rustlight);
  }
  .opptable tfoot td {
    border-bottom: none; border-top: 1px solid var(--tan);
    font-family: 'Courier Prime', monospace; text-transform: uppercase; letter-spacing: .1em;
    font-size: 10.5px; color: var(--tan); padding-top: .9rem;
  }
  .opptable tfoot td.opp-saving { font-size: 15px; letter-spacing: 0; color: var(--cream); }
  .opp-k { display: none; }
  @media (max-width: 640px) {
    .opptable, .opptable tbody, .opptable tfoot, .opptable tr, .opptable td { display: block; width: 100%; }
    .opptable thead { display: none; }
    .opptable tbody tr { border-bottom: 1px solid var(--line); padding: .4rem 0 .7rem; }
    .opptable td { border-bottom: none; padding: .4rem 1.1rem; }
    .opptable th.opp-saving-h, .opptable td.opp-saving { text-align: left; }
    .opptable tfoot td { border-top: 1px solid var(--tan); }
    .opp-k {
      display: block; font-family: 'Courier Prime', monospace; font-size: 9px;
      letter-spacing: .18em; text-transform: uppercase; color: var(--tan); margin-bottom: .3rem;
    }
  }

  /* ============ ai-os: command-centre hub diagram ============ */
  .aios-diagram { width: 100%; height: auto; max-width: 420px; }
  .aios-diagram .hub { fill: var(--panel2); stroke: var(--rustlight); stroke-width: 1.5; }
  .aios-diagram .sat { fill: var(--panel2); stroke: var(--tan); stroke-width: 1.2; }
  .aios-diagram .spoke { stroke: var(--tan); stroke-opacity: .4; stroke-width: 1; }
  .aios-diagram .hub-label {
    fill: var(--cream); font-family: 'Courier Prime', monospace; font-weight: 700;
    font-size: 11px; letter-spacing: .1em; text-anchor: middle;
  }

  /* ============ services: tabbed system diagram ============ */
  .service-tab {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    text-align: left;
    width: 100%;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--sand);
    border-left: 2px solid transparent;
    transition: background-color .2s ease, border-color .2s ease;
    flex: 1 0 auto;
  }
  .service-tab:last-child { border-bottom: none; }
  .service-tab-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bgalt);
    border: 1px solid var(--line);
    color: var(--tan);
    transition: color .2s ease, border-color .2s ease;
  }
  .service-tab-title {
    display: block;
    font-family: 'Courier Prime', monospace;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .01em;
    color: var(--cream);
  }
  .service-tab-sub {
    display: block;
    font-size: 12.5px;
    color: var(--tan);
    margin-top: .2rem;
    line-height: 1.5;
  }
  .service-tab:hover { background: rgba(241,232,216,.03); }
  .service-tab.is-active {
    background: var(--panel2);
    border-left-color: var(--rustlight);
  }
  .service-tab.is-active .service-tab-icon {
    color: var(--rustlight);
    border-color: rgba(77,159,255,.4);
  }

  .service-panel { animation: panel-in .4s ease-out; }
  @keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

  .diagram .node-fill { fill: var(--panel2); }
  .diagram .node-stroke { stroke: var(--tan); }
  .diagram .node-stroke-active { stroke: var(--rustlight); }
  .diagram .node-dashed { stroke-dasharray: 3 3; }
  .diagram .diagram-label {
    font-family: 'Courier Prime', monospace;
    font-size: 8.5px;
    letter-spacing: .04em;
    fill: var(--tan);
    text-anchor: middle;
  }
  .diagram .trace {
    fill: none;
    stroke: var(--rustlight);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .diagram .trace-dim {
    stroke: var(--tan);
    opacity: .8;
  }
  .service-panel.is-active .diagram .trace {
    animation: trace-draw 1s cubic-bezier(.4,.1,.2,1) forwards;
    animation-delay: .1s;
  }
  @keyframes trace-draw { to { stroke-dashoffset: 0; } }
  .diagram .motion-dot { fill: var(--rustlight); }
  .diagram .messy-dot { fill: var(--tan); opacity: .7; }
  .diagram .clean-cell { fill: rgba(241,232,216,.08); stroke: var(--tan); stroke-opacity: .55; }

  /* the dashed "alternate outcome" node breathes on its own, since the dot never travels there */
  .diagram .breathe { animation: node-breathe 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes node-breathe {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
  }

  .diagram .conf-line { fill: none; stroke: var(--tan); stroke-dasharray: 2 3; opacity: .5; }
  .diagram .type-cursor { animation: blink 1s steps(1) infinite; }

  .service-tab-icon svg { display: block; }
  .service-tab .icon-gear {
    transition: transform .6s cubic-bezier(.5,0,.15,1);
    transform-box: fill-box;
    transform-origin: center;
  }
  .service-tab:hover .icon-gear,
  .service-tab.is-active .icon-gear { transform: rotate(45deg); }

  @media (prefers-reduced-motion: reduce) {
    .service-panel { animation: none; }
    .diagram .trace { animation: none !important; stroke-dashoffset: 0 !important; }
    .diagram .breathe { animation: none !important; opacity: .8; }
    .diagram .type-cursor { animation: none; }
    .service-tab .icon-gear { transition: none; }
  }

  #services-tablist { display: flex; flex-direction: column; }
  .service-tab { flex: 1 1 0; align-items: center; }

  /* ---- photo placeholder frames (temporary — mark where real photos will go) ---- */
  .photo-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--bgalt);
  }
  .photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .photo-frame-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--rustlight);
    pointer-events: none;
  }
  .photo-frame-corner.tl { top: 8px; left: 8px; border-top: 1.5px solid; border-left: 1.5px solid; }
  .photo-frame-corner.tr { top: 8px; right: 8px; border-top: 1.5px solid; border-right: 1.5px solid; }
  .photo-frame-corner.bl { bottom: 8px; left: 8px; border-bottom: 1.5px solid; border-left: 1.5px solid; }
  .photo-frame-corner.br { bottom: 8px; right: 8px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
  .photo-frame-tag {
    position: absolute;
    inset: auto 0 0 0;
    padding: .6rem .9rem;
    background: linear-gradient(to top, rgba(11,16,32,.9), transparent);
    font-family: 'Courier Prime', monospace;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cream);
  }

  .cta-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
  }
  .cta-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,16,32,.55), rgba(11,16,32,.94) 75%);
  }

  /* ---- intro: full-screen wordmark splash ---- */
  .intro-frame {
    position: relative;
    height: calc(100vh - 1rem);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg);
  }
  @media (min-width: 640px) { .intro-frame { height: calc(100vh - 1.5rem); } }

  /* hero content, pinned to the bottom of the frame on roomy viewports */
  .intro-hero { position: absolute; left: 0; right: 0; bottom: 0; }

  /* Short/narrow viewports: the bottom-pinned hero block is taller than the
     frame, so it used to overflow upward, get clipped, and slide under the
     fixed header. Let the frame grow and bottom-weight the content with flow
     layout instead, keeping the header's height clear at the top. */
  @media (max-width: 767.98px), (max-height: 640px) {
    .intro-frame {
      height: auto;
      min-height: calc(100vh - 1rem);
      min-height: calc(100svh - 1rem);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .intro-hero { position: static; padding-top: 8rem; }
  }

  .intro-backdrop {
    background:
      radial-gradient(85% 60% at 20% 10%, rgba(77,159,255,.26), rgba(77,159,255,0) 65%),
      radial-gradient(60% 55% at 88% 20%, rgba(58,70,104,.24), rgba(58,70,104,0) 70%),
      radial-gradient(70% 60% at 50% 105%, rgba(77,159,255,.2), rgba(77,159,255,0) 70%);
    background-size: 160% 160%;
    animation: intro-drift 18s ease-in-out infinite alternate;
  }

  /* atmosphere photo behind the wordmark — a lived-in desk at dusk, navy-graded.
     Sits under the circuit SVG and the hero copy; a light scrim on the right
     keeps the value-prop column readable, the bottom fade is handled by the
     hero's own gradient layer. */
  .intro-photo {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url("/assets/hero-atmosphere.jpg") 20% bottom / cover no-repeat;
    opacity: .9;
  }
  .intro-photo::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(11,16,32,0) 40%, rgba(11,16,32,.3) 72%, rgba(11,16,32,.55) 100%),
      linear-gradient(180deg, rgba(11,16,32,.28) 0%, rgba(11,16,32,0) 22%);
  }
  /* the photo now carries the hero atmosphere — dial back the animated blue haze */
  .intro-frame:has(.intro-photo) .intro-backdrop { opacity: .45; }
  @media (max-width: 767.98px) {
    .intro-photo {
      background-image: url("/assets/hero-atmosphere-m.jpg");
      background-position: 34% bottom; opacity: .6;
    }
    .intro-photo::after {
      background: linear-gradient(180deg, rgba(11,16,32,.4) 0%, rgba(11,16,32,.1) 26%, rgba(11,16,32,.7) 100%);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .intro-photo { animation: intro-photo-in 1.4s ease .2s both; }
  }
  @keyframes intro-photo-in { from { opacity: 0; transform: scale(1.04); } }
  @keyframes intro-drift {
    0% { background-position: 0% 0%, 100% 0%, 50% 100%; }
    100% { background-position: 10% 10%, 90% 15%, 55% 92%; }
  }

  .intro-letter-mask { display: inline-block; overflow: hidden; vertical-align: top; }
  .intro-letter { display: inline-block; }
  .reveal.intro-letter:not(.in) { transform: translateY(0.5em); }
  .reveal.intro-gear-mark:not(.in) { transform: translateY(0.4em) scale(.85); }

  /* ---- intro backdrop: circuit traces drawing themselves, behind the wordmark ---- */
  .intro-circuit { position: absolute; inset: 0; width: 100%; height: 100%; }
  .intro-circuit .trace {
    fill: none;
    stroke: var(--tan);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    animation: intro-trace-draw 9s cubic-bezier(.4,.1,.2,1) infinite;
  }
  .intro-circuit .trace-accent { stroke: var(--rustlight); }
  .intro-circuit .node { fill: var(--tan); opacity: 0; animation: intro-node-in 9s ease infinite; }
  .intro-circuit .node-accent { fill: var(--rustlight); }
  @keyframes intro-trace-draw {
    0% { stroke-dashoffset: 1; opacity: 0; }
    10% { opacity: .5; }
    45% { stroke-dashoffset: 0; opacity: .5; }
    75% { stroke-dashoffset: 0; opacity: .5; }
    92% { opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }
  @keyframes intro-node-in {
    0%, 40% { opacity: 0; }
    50%, 75% { opacity: .6; }
    92%, 100% { opacity: 0; }
  }

  /* large faint gear silhouettes turning slowly in the background */
  .intro-gear-bg { position: absolute; opacity: .1; color: var(--tan); pointer-events: none; }
  .intro-gear-bg .gear-spin { animation-duration: 60s; }
  .intro-gear-bg.alt .gear-spin { animation-duration: 46s; animation-direction: reverse; }

  /* the small gear standing in for the "e", inside the wordmark */
  .intro-gear-mark { display: inline-block; }
  .intro-gear-e { display: inline-block; vertical-align: -0.06em; }
  .intro-gear-e svg { display: block; width: 0.82em; height: 0.82em; }
  .intro-gear-e .gear-spin { animation-duration: 16s; }

  /* scattered agent-log fragments in the empty middle */
  .intro-frag {
    position: absolute;
    font-family: 'Courier Prime', monospace;
    font-size: clamp(10px, 1.05vw, 13px);
    letter-spacing: .01em;
    color: var(--tan);
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    animation: intro-frag-breathe 8s ease-in-out infinite;
  }
  @keyframes intro-frag-breathe {
    0%, 100% { opacity: 0; transform: translateY(5px); }
    18%, 68% { opacity: .55; transform: translateY(0); }
    85% { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .intro-backdrop { animation: none; }
    .intro-circuit .trace { animation: none; stroke-dashoffset: 0; opacity: .4; }
    .intro-circuit .node { animation: none; opacity: .5; }
    .intro-gear-bg .gear-spin, .intro-gear-e .gear-spin { animation: none; }
    .intro-frag { animation: none; opacity: .55; }
  }

  /* ---- language toggle: fixed below the header, always on screen ---- */
  .lang-toggle-btn {
    position: fixed;
    top: 92px;
    right: 24px;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px;
    background: var(--panel);
    box-shadow: 0 6px 16px -6px rgba(0,0,0,.5);
    flex-shrink: 0;
  }
  .lang-toggle-btn:hover { border-color: var(--rustlight); }
  .lang-pill {
    font-family: 'Courier Prime', monospace;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tan);
    padding: 5px 10px;
    border-radius: 999px;
    transition: background-color .2s ease, color .2s ease;
  }
  .lang-pill.is-active { background: var(--rustlight); color: #0B1020; }

  /* ---- fullscreen logo intro: the sting plays, then the site is revealed ---- */
  html.logo-intro-active, html.logo-intro-active body { overflow: hidden; }
  #logo-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    display: grid;
    place-items: center;
    opacity: 1;
    transition: opacity .7s cubic-bezier(.4, 0, .2, 1);
  }
  #logo-intro.is-leaving { opacity: 0; pointer-events: none; }
  #logo-intro video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--bg);
  }
  /* on a portrait screen a contained 16:9 frame leaves the lockup tiny, so zoom
     in until the wordmark nearly spans the width (it is 68% of the frame) */
  @media (max-aspect-ratio: 1/1) {
    #logo-intro { overflow: hidden; }
    #logo-intro video { transform: scale(1.35); }
  }
  .logo-intro-skip {
    position: absolute;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    font-family: "Courier Prime", "Courier New", Courier, monospace;
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tan);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 16px;
    cursor: pointer;
    opacity: 0;
    animation: logo-intro-skip-in .5s ease 1.8s forwards;
    transition: color .2s ease, border-color .2s ease;
  }
  .logo-intro-skip:hover,
  .logo-intro-skip:focus-visible { color: var(--cream); border-color: var(--rustlight); }
  @keyframes logo-intro-skip-in { to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { #logo-intro { display: none; } }

  /* ============================================================
     LEDGER ZONE  —  #consultanta … #pricing
     "navy ledger, earned gold": gold = value/outcome, blue = mechanism.
     Scoped under .lz so the hero, nav, FAQ and footer are untouched.
     ============================================================ */
  /* ledger palette promoted to :root so .lz-kicker / .lz-h2 / .lz-lede / .lz-cta
     work on standalone pages (servicii, proces, echipa, ai-os) outside a .lz section.
     .lz below re-declares the same values plus its own background/color/layout. */
  :root {
    --lz-ground:  #0C1A2B;
    --lz-raised:  #10273F;
    --lz-raised-2:#16324E;
    --lz-line:    #24405E;
    --lz-line-2:  #315277;
    --lz-cream:   #F3EAD8;
    --lz-text:    #C7D3E3;
    --lz-slate:   #93A6C0;
    --lz-gold:    #E9B45A;
    --lz-gold-hi: #F7CF86;
    --lz-gold-dim:#8a6d3c;
    --lz-blue:    #4E9BE6;
    --lz-shadow-raised: 0 1px 0 rgba(243,234,216,.045) inset, 0 20px 44px -26px rgba(0,0,0,.72);
    --lz-shadow-float:  0 1px 0 rgba(243,234,216,.07) inset, 0 34px 66px -30px rgba(0,0,0,.78), 0 12px 30px -18px rgba(7,17,30,.7);
  }

  .lz { scroll-margin-top: 92px; }
  .lz {
    --lz-ground:  #0C1A2B;
    --lz-raised:  #10273F;
    --lz-raised-2:#16324E;
    --lz-line:    #24405E;
    --lz-line-2:  #315277;
    --lz-cream:   #F3EAD8;
    --lz-text:    #C7D3E3;
    --lz-slate:   #93A6C0;
    --lz-gold:    #E9B45A;
    --lz-gold-hi: #F7CF86;
    --lz-gold-dim:#8a6d3c;
    --lz-blue:    #4E9BE6;
    --lz-shadow-raised: 0 1px 0 rgba(243,234,216,.045) inset, 0 20px 44px -26px rgba(0,0,0,.72);
    --lz-shadow-float:  0 1px 0 rgba(243,234,216,.07) inset, 0 34px 66px -30px rgba(0,0,0,.78), 0 12px 30px -18px rgba(7,17,30,.7);
    position: relative;
    background: var(--lz-ground);
    color: var(--lz-text);
    font-family: 'Manrope', system-ui, sans-serif;
    border: 0;
  }
  .lz + .lz { border-top: 1px solid rgba(49,82,119,.35); }
  .lz ::selection { background: var(--lz-gold); color: #21170a; }

  /* seam from the near-black hero zone into the navy ledger, and back out */
  #consultanta::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px;
    background: linear-gradient(180deg, #0B1020 0%, rgba(12,26,43,0) 100%);
    pointer-events: none; z-index: 0;
  }
  #pricing::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 140px;
    background: linear-gradient(180deg, rgba(12,26,43,0) 0%, #101A2E 100%);
    pointer-events: none; z-index: 0;
  }

  .lz-inner {
    position: relative; z-index: 1;
    max-width: 1160px; margin: 0 auto;
    padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 40px);
  }
  @media (min-width: 780px) { .lz-inner { padding-left: 84px; } }
  /* the spine: one continuous hairline threading every ledger section, sitting
     in the left gutter like the ruled margin of a ledger page */
  .lz-inner::before {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: clamp(20px, 5vw, 40px); width: 1px;
    background: linear-gradient(180deg, transparent, var(--lz-line-2) 6%, var(--lz-line-2) 94%, transparent);
  }
  @media (min-width: 780px) { .lz-inner::before { left: 44px; } }
  #consultanta .lz-inner::before { background: linear-gradient(180deg, transparent 26%, var(--lz-line-2) 40%, var(--lz-line-2) 94%, transparent); }
  #pricing .lz-inner::before { background: linear-gradient(180deg, transparent, var(--lz-line-2) 6%, var(--lz-line-2) 66%, transparent 88%); }
  /* the ledger spine is a desktop flourish; on phones it reads as one long
     stray vertical line down the page, so drop it */
  @media (max-width: 779.98px) { .lz-inner::before { display: none; } }

  /* ---- section header ---- */
  .lz-head { position: relative; margin-bottom: clamp(24px, 4vw, 40px); }
  .lz-rail { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
  .lz-rail::before {
    content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--lz-gold);
    box-shadow: 0 0 0 4px rgba(233,180,90,.14), 0 0 14px rgba(233,180,90,.4);
    flex-shrink: 0;
  }
  @media (min-width: 780px) { .lz-rail::before { margin-left: -40px; } }
  .lz-kicker {
    font-family: 'Courier Prime', monospace; font-size: 11px; font-weight: 700;
    letter-spacing: .24em; text-transform: uppercase; color: var(--lz-slate);
  }
  .lz-h2 {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
    font-size: clamp(1.9rem, 1rem + 3vw, 3.05rem); line-height: 1.05;
    letter-spacing: -0.022em; color: var(--lz-cream); text-wrap: balance;
    margin: 0; max-width: 26ch;
  }
  .lz-lede {
    margin: 22px 0 0; max-width: 58ch; text-wrap: pretty;
    font-size: clamp(1rem, .96rem + .25vw, 1.1rem); line-height: 1.7; color: var(--lz-text);
  }
  .lz-lede strong { color: var(--lz-cream); font-weight: 600; }
  .lz-note {
    font-family: 'Courier Prime', monospace; font-size: 12.5px; line-height: 1.7;
    color: var(--lz-slate);
  }
  .lz-note::before { content: "// "; color: var(--lz-gold-dim); }

  .lz-body { position: relative; }
  .lz-duo { display: grid; gap: 14px; align-items: start; }
  @media (min-width: 640px) { .lz-duo { grid-template-columns: 1fr 1fr; } }

  /* ---- surfaces ---- */
  .lz-card {
    position: relative; background: var(--lz-raised);
    border: 1px solid var(--lz-line); border-radius: 4px;
    padding: clamp(20px, 3vw, 30px);
    box-shadow: var(--lz-shadow-raised);
  }
  .lz-card--float { background: var(--lz-raised-2); box-shadow: var(--lz-shadow-float); }
  .lz-card__tag {
    font-family: 'Courier Prime', monospace; font-size: 10.5px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--lz-slate);
    display: block; margin-bottom: 12px;
  }
  .lz-card__tag--gold { color: var(--lz-gold); }
  .lz-card h3 {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; letter-spacing: -0.01em;
    color: var(--lz-cream); margin: 0 0 8px;
  }
  .lz-card p { font-size: 14.5px; line-height: 1.72; color: var(--lz-text); margin: 0; }

  /* ---- primary CTA (gold) ---- */
  .lz-cta {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'Courier Prime', monospace; font-size: 12px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: #21170a; background: var(--lz-gold);
    padding: 14px 20px; border-radius: 2px; border: 0; cursor: pointer;
    box-shadow: 0 1px 1px rgba(0,0,0,.3), 0 16px 30px -12px rgba(233,180,90,.4);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .lz-cta:hover { background: var(--lz-gold-hi); transform: translateY(-1px); }
  .lz-cta:active { transform: translateY(0); }
  .lz-cta svg { width: 15px; height: 15px; }
  .lz-link {
    color: var(--lz-blue); text-decoration: none;
    border-bottom: 1px solid rgba(78,155,230,.4); transition: border-color .2s ease, color .2s ease;
  }
  .lz-link:hover { color: var(--lz-gold); border-color: var(--lz-gold); }

  /* "→ read the full page" links: mono, uppercase, gold on hover */
  .lz-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Courier Prime', monospace; font-size: 12px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--lz-slate); text-decoration: none;
    transition: color .2s ease, gap .2s ease;
  }
  .lz-arrow::after { content: "\2192"; transition: transform .2s ease; }
  .lz-arrow:hover, .lz-arrow:focus-visible { color: var(--lz-gold); }
  .lz-arrow:hover::after { transform: translateX(3px); }

  /* =========== the deliverable — rendered as the document the client receives =========== */
  .oppsheet {
    position: relative; isolation: isolate;
    background: linear-gradient(178deg, #F7F0DF, #F1E7CF);
    color: #24333F; border-radius: 3px;
    padding: clamp(26px, 4vw, 46px) clamp(20px, 4vw, 48px) clamp(22px, 3.4vw, 36px);
    box-shadow: 0 2px 0 rgba(255,255,255,.5) inset,
                0 34px 64px -26px rgba(0,0,0,.6), 0 12px 26px -16px rgba(7,17,30,.55);
  }
  .oppsheet::before {
    content: ""; position: absolute; inset: 9px; border: 1px solid rgba(26,58,92,.16);
    border-radius: 2px; pointer-events: none; z-index: 0;
  }
  .oppsheet::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .55; border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.30 0 0 0 0 0.18 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .oppsheet > * { position: relative; z-index: 1; }

  .deliv__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  .deliv__brand { height: 38px; width: auto; display: block; }
  .deliv__meta { text-align: right; font-family: 'Courier Prime', monospace; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: #857B63; line-height: 1.8; }
  .deliv__meta b { display: block; color: #1A3A5C; font-weight: 700; letter-spacing: .14em; font-size: 9.5px; }
  .deliv__rule { border: 0; border-top: 1.5px solid #1A3A5C; margin: 15px 0 0; }
  .deliv__introline { font-family: 'Courier Prime', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #93844F; margin: 12px 0 4px; }

  .deliv__list { position: relative; margin-top: 4px; }
  .deliv__list::before {
    content: ""; position: absolute; top: 12px; bottom: 12px; left: 10.5px; width: 1.5px;
    background: linear-gradient(180deg, rgba(26,58,92,.6), rgba(26,58,92,.18));
  }
  .deliv__item {
    position: relative; display: grid; grid-template-columns: 1fr; gap: 2px 26px;
    padding: 18px 0 18px 34px; border-bottom: 1px solid #D9CFB6;
  }
  @media (min-width: 620px) { .deliv__item { grid-template-columns: minmax(0,1fr) 150px; align-items: baseline; } }
  .deliv__item::before {
    content: attr(data-n); position: absolute; left: 0; top: 19px; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Courier Prime', monospace; font-size: 9.5px; font-weight: 700;
    color: #1A3A5C; background: #F6EEDB; border: 1.5px solid #1A3A5C; border-radius: 4px;
  }
  .deliv__cat {
    display: block; font-family: 'Courier Prime', monospace; font-size: 8.5px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: #A29873; margin: 0 0 6px;
  }
  .deliv__problem { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 15px; line-height: 1.38; color: #16242F; letter-spacing: -0.004em; margin: 0; }
  .deliv__fix { font-size: 13px; line-height: 1.58; color: #4A565F; margin: 6px 0 0; }
  .deliv__fix::before { content: "→ "; color: #1A3A5C; font-weight: 700; }
  .deliv__save { margin-top: 10px; }
  @media (min-width: 620px) { .deliv__save { text-align: right; margin-top: 0; } }
  .deliv__save-k { display: block; font-family: 'Courier Prime', monospace; font-size: 7.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #A29873; margin-bottom: 4px; }
  .deliv__save-v {
    font-family: 'Courier Prime', monospace; font-weight: 700; font-size: 13px; color: #14232F;
    letter-spacing: -0.02em; white-space: nowrap;
    background: linear-gradient(180deg, transparent 44%, rgba(233,180,90,.6) 44%, rgba(233,180,90,.6) 90%, transparent 90%);
  }

  .deliv__total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 15px; padding-top: 15px; border-top: 3px double #1A3A5C;
  }
  .deliv__total-l { font-family: 'Courier Prime', monospace; }
  .deliv__total-l span:first-child { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #6D7883; }
  .deliv__total-l span:last-child { display: block; font-size: 9.5px; letter-spacing: .03em; color: #A29873; margin-top: 3px; }
  .deliv__total-v { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 1rem + 2vw, 2.1rem); color: #1A3A5C; letter-spacing: -0.03em; line-height: 1; }
  .deliv__total-v span[data-en] { font-size: .5em; font-weight: 700; letter-spacing: .02em; }

  .deliv__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 18px; }
  .deliv__fine { font-family: 'Courier Prime', monospace; font-size: 8.5px; line-height: 1.65; letter-spacing: .015em; color: #8E856C; max-width: 42ch; margin: 0; }
  .deliv__stamp {
    flex-shrink: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase; color: #1A3A5C;
    border: 2px solid #1A3A5C; border-radius: 3px; padding: 5px 11px; transform: rotate(-5deg);
    opacity: .34;
  }

  @media (prefers-reduced-motion: no-preference) {
    .oppsheet[data-animate] .deliv__item { opacity: 0; transform: translateY(8px); }
    .oppsheet.is-drawn .deliv__item {
      opacity: 1; transform: none;
      transition: opacity .5s ease, transform .5s cubic-bezier(.16,.8,.3,1);
    }
    .oppsheet.is-drawn .deliv__item:nth-child(2) { transition-delay: .09s; }
    .oppsheet.is-drawn .deliv__item:nth-child(3) { transition-delay: .18s; }
  }

  /* =========== commitments ticker =========== */
  #commitments .lz-inner { padding-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(36px, 5vw, 56px); }
  .lz-ticker { display: grid; gap: 1px; background: var(--lz-line); border: 1px solid var(--lz-line); border-radius: 4px; overflow: hidden; }
  @media (min-width: 720px) { .lz-ticker { grid-template-columns: repeat(4, 1fr); } }
  .lz-ticker__cell { background: var(--lz-ground); padding: 22px; }
  .lz-ticker__cell::before {
    content: ""; display: block; width: 7px; height: 7px; border-radius: 999px;
    background: var(--lz-gold); box-shadow: 0 0 0 4px rgba(233,180,90,.12); margin-bottom: 14px;
  }
  .lz-ticker__k { display: block; margin: 0 0 4px; font-family: 'Courier Prime', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--lz-slate); }
  .lz-ticker__v { color: var(--lz-cream); font-size: 14px; font-weight: 500; }

  /* =========== services: mechanism panel =========== */
  #services .svc-shell {
    position: relative; background: var(--lz-raised); border: 1px solid var(--lz-line-2);
    border-radius: 5px; overflow: hidden; box-shadow: var(--lz-shadow-float);
  }
  #services .svc-shell .circuit-bg { position: absolute; inset: 0; opacity: .06; pointer-events: none; }
  #services .svc-grid { position: relative; display: grid; }
  @media (min-width: 860px) { #services .svc-grid { grid-template-columns: 288px minmax(0,1fr); } }
  #services #services-tablist { display: flex; flex-direction: column; border-bottom: 1px solid var(--lz-line); }
  @media (min-width: 860px) { #services #services-tablist { border-bottom: 0; border-right: 1px solid var(--lz-line); } }
  #services .service-tab {
    display: flex; align-items: flex-start; gap: 14px; text-align: left; width: 100%;
    padding: 20px 22px; background: transparent; color: var(--lz-text);
    border: 0; border-left: 2px solid transparent; border-bottom: 1px solid var(--lz-line);
    cursor: pointer; transition: background-color .2s ease, border-color .2s ease;
  }
  #services .service-tab:last-child { border-bottom: 0; }
  #services .service-tab:hover { background: rgba(243,234,216,.03); }
  #services .service-tab.is-active { background: var(--lz-raised-2); border-left-color: var(--lz-gold); }
  #services .service-tab-icon {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    background: var(--lz-ground); border: 1px solid var(--lz-line-2); color: var(--lz-slate);
    transition: color .2s ease, border-color .2s ease;
  }
  #services .service-tab.is-active .service-tab-icon { color: var(--lz-gold); border-color: rgba(233,180,90,.45); }
  #services .service-tab-title { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 14px; color: var(--lz-cream); }
  #services .service-tab-sub { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--lz-slate); }
  #services .service-tab .icon-gear { transition: transform .6s cubic-bezier(.5,0,.15,1); transform-box: fill-box; transform-origin: center; }
  #services .service-tab:hover .icon-gear, #services .service-tab.is-active .icon-gear { transform: rotate(45deg); }
  #services .service-panel { animation: panel-in .4s ease-out; }
  #services .service-panel h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; color: var(--lz-cream); font-size: 1.15rem; margin: 0 0 10px; letter-spacing: -0.01em; }
  #services .service-panel p { font-size: 14.5px; line-height: 1.74; color: var(--lz-text); }
  #services .service-panel p.svc-eg {
    margin-top: 14px; font-family: 'Courier Prime', monospace; font-size: 12.5px;
    line-height: 1.7; color: var(--lz-slate);
  }
  #services .service-panel p.svc-eg::before { content: "// "; color: var(--lz-gold-dim); }
  #services .diagram .node-fill { fill: var(--lz-raised-2); }
  #services .diagram .node-stroke { stroke: var(--lz-slate); }
  #services .diagram .node-stroke-active { stroke: var(--lz-blue); }
  #services .diagram .trace { stroke: var(--lz-blue); }
  #services .diagram .diagram-label { fill: var(--lz-slate); font-family: 'Courier Prime', monospace; }
  #services .diagram .conf-line { stroke: var(--lz-gold); opacity: .55; }
  #services .diagram .motion-dot { fill: var(--lz-gold); }

  /* standalone service diagrams on servicii.html — no active tab panel to
     trigger the trace-draw, so paint them in directly. Same ledger palette
     as the landing's tab diagrams. */
  .svc-diagram {
    background: var(--lz-raised); border: 1px solid var(--lz-line);
    border-radius: 6px; padding: 22px;
  }
  .svc-diagram .diagram { width: 100%; height: auto; display: block; }
  .svc-diagram .diagram .trace { stroke-dashoffset: 0; stroke: var(--lz-blue); }
  .svc-diagram .diagram .node-fill { fill: var(--lz-raised-2); }
  .svc-diagram .diagram .node-stroke { stroke: var(--lz-slate); }
  .svc-diagram .diagram .node-stroke-active { stroke: var(--lz-blue); }
  .svc-diagram .diagram .diagram-label { fill: var(--lz-slate); }
  .svc-diagram .diagram .conf-line { stroke: var(--lz-gold); opacity: .55; }
  .svc-diagram .diagram .motion-dot { fill: var(--lz-gold); }
  @media (prefers-reduced-motion: reduce) {
    .svc-diagram .diagram .motion-dot { display: none; }
  }

  /* ---- detail-page building blocks (servicii / proces / ai-os) ---- */
  .page-back {
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px;
    font-family: 'Courier Prime', monospace; font-size: 12px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--lz-slate); text-decoration: none;
  }
  .page-back svg { width: 26px; height: 26px; padding: 6px; border: 1px solid var(--lz-line); border-radius: 999px; transition: transform .2s ease; }
  .page-back:hover { color: var(--lz-gold); }
  .page-back:hover svg { transform: translateX(-3px); }

  .svc-block {
    display: grid; gap: clamp(22px, 4vw, 44px); align-items: center;
    padding: clamp(34px, 6vw, 60px) 0; border-top: 1px solid var(--lz-line);
  }
  .svc-block:first-of-type { border-top: 0; padding-top: clamp(20px, 3vw, 32px); }
  @media (min-width: 880px) {
    .svc-block { grid-template-columns: 1fr 1fr; }
    .svc-block--flip .svc-block__media { order: -1; }
  }
  .svc-block__n {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 13px;
    letter-spacing: .1em; color: var(--lz-gold); margin: 0 0 10px;
  }
  .svc-block h2 {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
    font-size: clamp(20px, 3vw, 26px); color: var(--lz-cream); margin: 0 0 14px; letter-spacing: -.01em;
  }
  .svc-block p { font-size: 14.5px; line-height: 1.8; color: var(--lz-text); margin: 0 0 12px; max-width: 52ch; }
  .svc-block ul { margin: 0 0 14px; padding: 0; list-style: none; }
  .svc-block li { font-size: 14px; line-height: 1.7; color: var(--lz-text); margin-bottom: 7px; padding-left: 20px; position: relative; }
  .svc-block li::before { content: "→"; position: absolute; left: 0; color: var(--lz-gold-dim); }
  .svc-block .svc-eg-inline {
    font-family: 'Courier Prime', monospace; font-size: 12.5px; line-height: 1.8;
    color: var(--lz-slate); border-left: 2px solid var(--lz-gold-dim); padding-left: 14px; max-width: 50ch; margin-top: 4px;
  }
  .svc-block .svc-eg-inline b { color: var(--lz-cream); font-weight: 400; }

  .page-cta {
    margin-top: clamp(40px, 7vw, 72px); padding: clamp(28px, 5vw, 44px);
    background: var(--lz-raised); border: 1px solid var(--lz-line); border-radius: 8px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  }
  .page-cta__text { flex: 1 1 22rem; }
  .page-cta__text h2 {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: clamp(18px, 2.6vw, 22px);
    color: var(--lz-cream); margin: 0 0 8px;
  }
  .page-cta__text p { font-size: 14px; line-height: 1.7; color: var(--lz-text); margin: 0; max-width: 46ch; }

  /* ---- proces.html: numbered stages ---- */
  .proc-stage {
    padding: clamp(28px, 5vw, 52px) 0; border-top: 1px solid var(--lz-line);
    display: grid; gap: 6px 34px;
  }
  .proc-stage:first-of-type { border-top: 0; padding-top: clamp(16px, 3vw, 28px); }
  @media (min-width: 760px) { .proc-stage { grid-template-columns: 4rem 1fr; } }
  .proc-stage__n {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
    font-size: clamp(26px, 5vw, 42px); color: var(--lz-gold); line-height: 1;
  }
  .proc-stage h2 {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
    font-size: clamp(19px, 2.8vw, 24px); color: var(--lz-cream); margin: 0 0 12px; letter-spacing: -.01em;
  }
  .proc-stage p { font-size: 14.5px; line-height: 1.8; color: var(--lz-text); margin: 0 0 12px; max-width: 58ch; }
  .proc-stage__meta { margin-top: 14px; display: grid; gap: 12px; }
  @media (min-width: 560px) { .proc-stage__meta { grid-template-columns: 1fr 1fr; } }
  .proc-stage__meta div { font-size: 13px; line-height: 1.65; color: var(--lz-text); }
  .proc-stage__meta b {
    font-family: 'Courier Prime', monospace; font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--lz-slate); display: block; margin-bottom: 3px;
  }
  .proc-note {
    margin-top: clamp(32px, 5vw, 52px); padding: clamp(22px, 4vw, 32px);
    background: var(--lz-raised); border: 1px solid var(--lz-line); border-radius: 8px;
  }
  .proc-note h2 {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 17px;
    color: var(--lz-cream); margin: 0 0 12px;
  }
  .proc-note p { font-size: 14px; line-height: 1.8; color: var(--lz-text); margin: 0 0 10px; max-width: 62ch; }
  .proc-note p:last-child { margin-bottom: 0; }

  /* mobile: accordion — each diagram opens right under its own button,
     instead of all three buttons first and one panel at the very end.
     display:contents lifts the tabs and panels into .svc-grid so `order`
     can interleave them. */
  @media (max-width: 859.98px) {
    #services #services-tablist,
    #services .svc-panels { display: contents; }
    #services #tab-0   { order: 1; }
    #services #panel-0 { order: 2; }
    #services #tab-1   { order: 3; }
    #services #panel-1 { order: 4; }
    #services #tab-2   { order: 5; }
    #services #panel-2 { order: 6; }
    #services .service-tab:last-child { border-bottom: 1px solid var(--lz-line); }
    #services .service-panel {
      border-bottom: 1px solid var(--lz-line);
      border-left: 2px solid var(--lz-gold);
      padding-top: 22px;
    }
    #services .service-panel:last-of-type { border-bottom: 0; }
    /* the button right above already names the panel */
    #services .service-panel h3 { display: none; }
  }

  /* the "further out" directions — a rail, not four equal cards */
  .lz-further { display: grid; gap: 14px; }
  @media (min-width: 680px) { .lz-further { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .lz-further { grid-template-columns: repeat(4, 1fr); } }
  .lz-further__item {
    background: var(--lz-raised); border: 1px solid var(--lz-line); border-radius: 4px;
    padding: 20px; text-decoration: none; display: block;
    transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
  }
  a.lz-further__item:hover { border-color: rgba(233,180,90,.4); transform: translateY(-2px); background: var(--lz-raised-2); }
  .lz-further__item h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 15px; color: var(--lz-cream); margin: 0 0 6px; }
  .lz-further__item p { font-size: 13px; line-height: 1.68; color: var(--lz-text); margin: 0; }
  .lz-further__item--link h3 { color: var(--lz-gold); }

  /* =========== landing teasers: services list + team card =========== */
  .svc-teaser { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .svc-teaser li {
    padding: 20px 0; border-top: 1px solid var(--lz-line);
    display: grid; gap: 6px;
  }
  .svc-teaser li:last-child { border-bottom: 1px solid var(--lz-line); }
  .svc-teaser h3 {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
    font-size: clamp(16px, 2.2vw, 19px); color: var(--lz-cream); margin: 0;
  }
  .svc-teaser p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--lz-text); max-width: 62ch; }
  @media (min-width: 720px) {
    .svc-teaser li { grid-template-columns: 15rem 1fr; gap: 8px 32px; align-items: baseline; }
  }

  .team-teaser { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
  @media (min-width: 760px) { .team-teaser { grid-template-columns: minmax(0, 17rem) 1fr; } }
  .team-teaser .photo-frame { width: 100%; }
  .team-teaser p { font-size: 14.5px; line-height: 1.8; color: var(--lz-text); margin: 0; max-width: 54ch; }
  .team-teaser__names {
    font-family: 'Roboto Slab', serif; font-weight: 700;
    font-size: clamp(18px, 2.6vw, 22px); color: var(--lz-cream); margin: 0 0 12px;
  }
  .team-teaser .mk { color: var(--lz-gold); }

  /* =========== process / team pipelines =========== */
  #process .node-dot, #team .team-node-dot {
    background: var(--lz-ground) !important; border-color: var(--lz-slate) !important; color: var(--lz-slate) !important;
  }
  #process .node-dot.lit, #team .team-node-dot.lit {
    border-color: var(--lz-gold) !important; color: #21170a !important; background: var(--lz-gold) !important;
    box-shadow: 0 0 0 5px rgba(233,180,90,.14), 0 0 20px -2px rgba(233,180,90,.45) !important;
  }
  #process .process-connector, #team .process-connector { background: rgba(147,166,192,.28); }
  #process .process-connector-fill, #team .process-connector-fill { background: var(--lz-gold); }
  #team .connector-dot { background: var(--lz-gold); box-shadow: 0 0 8px 2px rgba(233,180,90,.6); }
  #process .lz-step-h, #team .lz-step-h {
    font-family: 'Courier Prime', monospace; font-size: 12px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--lz-cream);
    margin: 20px 0 8px;
  }
  #process .lz-step-p, #team .lz-step-p { font-size: 14px; line-height: 1.7; color: var(--lz-text); max-width: 230px; }
  #team .lz-step-n { display: block; margin-bottom: 14px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 13px; color: var(--lz-gold); letter-spacing: .06em; }

  /* team bio block — the part that already works; warm it, lift contrast */
  #team .biocard {
    display: grid; overflow: hidden; border-radius: 5px;
    border: 1px solid var(--lz-line-2); background: var(--lz-raised);
    box-shadow: var(--lz-shadow-float); max-width: 900px; margin: 0 0 clamp(60px, 8vw, 96px);
  }
  @media (min-width: 760px) { #team .biocard { grid-template-columns: 1fr 1fr; } }
  #team .biocard .photo-frame { background: var(--lz-ground); }
  #team .biocard .photo-frame-corner { border-color: var(--lz-gold); }
  #team .biocard .photo-frame-tag { background: linear-gradient(to top, rgba(12,26,43,.92), transparent); color: var(--lz-cream); font-family: 'Courier Prime', monospace; }
  #team .biocard__body { padding: clamp(24px, 4vw, 36px); display: flex; flex-direction: column; justify-content: center; gap: 22px; }
  #team .biocard__row { padding-top: 20px; border-top: 1px solid var(--lz-line); }
  #team .biocard__row:first-child { padding-top: 0; border-top: 0; }
  #team .biocard__label { font-family: 'Courier Prime', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--lz-slate); margin: 0 0 8px; display: flex; align-items: center; gap: 4px; }
  #team .biocard h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 15px; color: var(--lz-cream); margin: 0; }
  #team .biocard h3 .mk { color: var(--lz-gold); }
  #team .biocard a { color: var(--lz-text); text-decoration: none; font-size: 13px; transition: color .2s ease; }
  #team .biocard a:hover { color: var(--lz-gold); }
  #team .biocard p { font-size: 13px; line-height: 1.7; color: var(--lz-text); margin: 6px 0 0; }
  #team .biocard .mk { color: var(--lz-gold); font-weight: 700; }

  /* =========== ai-os horizon =========== */
  #ai-os .aios-wrap { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
  @media (min-width: 900px) { #ai-os .aios-wrap { grid-template-columns: 1fr 1.15fr; } }
  #ai-os .aios-stage {
    position: relative; border: 1px solid var(--lz-line-2); border-radius: 8px;
    background: radial-gradient(120% 90% at 50% 40%, rgba(78,155,230,.08), rgba(12,26,43,0) 70%), var(--lz-raised);
    box-shadow: var(--lz-shadow-float); padding: clamp(18px, 2.6vw, 30px); overflow: hidden;
  }
  #ai-os .aios-stage .circuit-bg { position: absolute; inset: 0; opacity: .04; pointer-events: none; }
  #ai-os .aios-diagram { position: relative; width: 100%; height: auto; max-width: 520px; margin: 0 auto; display: block; }
  #ai-os .aios-win { fill: var(--lz-raised-2); stroke: rgba(78,155,230,.32); stroke-width: 1; }
  #ai-os .aios-rule { stroke: var(--lz-line-2); stroke-width: 1; }
  #ai-os .aios-conn { stroke: rgba(78,155,230,.22); stroke-width: 1; fill: none; }
  #ai-os .aios-dot-gold { fill: var(--lz-gold); }
  #ai-os .aios-dot-blue { fill: var(--lz-blue); }
  #ai-os .aios-dot-slate { fill: var(--lz-slate); }
  #ai-os .aios-flow { fill: var(--lz-gold); }
  #ai-os .aios-title { fill: var(--lz-cream); font-family: 'Courier Prime', monospace; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
  #ai-os .aios-label { fill: var(--lz-slate); font-family: 'Courier Prime', monospace; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
  #ai-os .aios-label--gold { fill: var(--lz-gold); }
  #ai-os .aios-agent { fill: var(--lz-cream); font-family: 'Courier Prime', monospace; font-size: 10.5px; }
  #ai-os .aios-agent--idle { fill: var(--lz-slate); }
  #ai-os .aios-num { fill: var(--lz-cream); font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
  #ai-os .aios-num--gold { fill: var(--lz-gold); }
  #ai-os .aios-tile { fill: var(--lz-ground); stroke: var(--lz-line); stroke-width: 1; }
  #ai-os .aios-item { fill: var(--lz-ground); stroke: var(--lz-line); stroke-width: 1; }
  #ai-os .aios-itemtext { fill: var(--lz-text); font-family: 'Courier Prime', monospace; font-size: 10px; }
  #ai-os .aios-badge { fill: var(--lz-gold); }
  #ai-os .aios-badge-t { fill: #21170a; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 11px; text-anchor: middle; }
  #ai-os .aios-ok { stroke: var(--lz-blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  #ai-os .aios-no { stroke: var(--lz-slate); stroke-width: 1.6; stroke-linecap: round; }
  #ai-os .aios-spark rect { fill: var(--lz-blue); opacity: .45; }
  #ai-os .aios-spark rect.aios-spark--hi { fill: var(--lz-gold); opacity: .9; }
  #ai-os .aios-on { fill: var(--lz-blue); animation: aios-pulse 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  #ai-os .aios-live { fill: var(--lz-gold); animation: aios-pulse 1.9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes aios-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) {
    #ai-os .aios-on, #ai-os .aios-live { animation: none; opacity: 1; transform: none; }
  }

  /* =========== pricing: what you pay, and when (a statement, not tiers) =========== */
  #pricing .pay-ledger {
    position: relative; background: var(--lz-raised-2);
    border: 1px solid var(--lz-line-2); border-radius: 6px; overflow: hidden;
    box-shadow: var(--lz-shadow-float);
  }
  #pricing .pay-ledger__head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 15px 22px; border-bottom: 1px solid var(--lz-line);
    background: linear-gradient(180deg, rgba(233,180,90,.06), rgba(233,180,90,0));
    font-family: 'Courier Prime', monospace; font-size: 10px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--lz-slate);
  }
  #pricing .pay-ledger__head b { color: var(--lz-gold); font-weight: 700; }
  #pricing .pay-rows { position: relative; }
  #pricing .pay-rows::before {
    content: ""; position: absolute; top: 40px; bottom: 40px; left: 33px; width: 1px;
    background: linear-gradient(180deg, var(--lz-gold), rgba(233,180,90,.25));
  }
  @media (min-width: 560px) { #pricing .pay-rows::before { left: 41px; } }
  #pricing .pay-row {
    position: relative; display: grid; gap: 4px 20px; grid-template-columns: 1fr;
    align-items: start; padding: 24px 22px 24px 54px; border-bottom: 1px solid var(--lz-line);
  }
  @media (min-width: 560px) {
    #pricing .pay-row { grid-template-columns: minmax(0,1fr) auto; padding-left: 66px; }
  }
  #pricing .pay-row:last-child { border-bottom: 0; }
  #pricing .pay-row__node {
    position: absolute; left: 27px; top: 27px; width: 13px; height: 13px; border-radius: 999px;
    background: var(--lz-ground); border: 2px solid var(--lz-gold); box-shadow: 0 0 0 4px rgba(233,180,90,.1);
  }
  @media (min-width: 560px) { #pricing .pay-row__node { left: 35px; } }
  #pricing .pay-row--paid .pay-row__node { background: var(--lz-gold); box-shadow: 0 0 0 4px rgba(233,180,90,.16), 0 0 16px rgba(233,180,90,.4); }
  #pricing .pay-row__stage {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 1.05rem;
    color: var(--lz-cream); margin: 0 0 5px; letter-spacing: -0.01em;
  }
  #pricing .pay-row__desc { font-size: 13.5px; line-height: 1.65; color: var(--lz-text); margin: 0; max-width: 44ch; }
  #pricing .pay-row__amt { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
  @media (min-width: 560px) { #pricing .pay-row__amt { align-items: flex-end; margin-top: 2px; } }
  #pricing .pay-chip {
    align-self: flex-start;
    font-family: 'Courier Prime', monospace; font-size: 10px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--lz-gold);
    border: 1px solid rgba(233,180,90,.4); border-radius: 999px; padding: 7px 13px; white-space: nowrap;
  }
  @media (min-width: 560px) { #pricing .pay-chip { align-self: flex-end; } }
  #pricing .pay-chip--solid { background: var(--lz-gold); color: #21170a; border-color: var(--lz-gold); }
  #pricing .pay-zero {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; letter-spacing: -0.03em;
    font-size: clamp(2.4rem, 1.5rem + 2.6vw, 3.1rem); line-height: 1; color: var(--lz-gold-hi);
  }
  #pricing .pay-zero span {
    font-family: 'Bricolage Grotesque', sans-serif; font-size: .4em; font-weight: 700;
    letter-spacing: -0.01em; text-transform: none; color: var(--lz-gold-hi);
    display: inline; margin-left: 5px;
  }
  #pricing .pay-sub {
    font-family: 'Courier Prime', monospace; font-size: 10.5px; line-height: 1.5;
    letter-spacing: .04em; color: var(--lz-slate); white-space: nowrap;
  }
  @media (min-width: 560px) { #pricing .pay-sub { text-align: right; } }

  @media (prefers-reduced-motion: reduce) {
    #services .service-panel { animation: none; }
    .oppsheet[data-animate] .deliv__item { opacity: 1; transform: none; }
  }

  /* ---- testimonials (ledger zone) ---- */
  #testimoniale .tz-card {
    background: var(--lz-raised);
    border: 1px solid var(--lz-line);
    border-radius: 4px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: var(--lz-shadow-raised);
  }
  #testimoniale blockquote {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--lz-cream);
  }
  #testimoniale blockquote::before { content: "\201C"; color: var(--lz-gold); margin-right: 2px; }
  #testimoniale blockquote::after { content: "\201D"; color: var(--lz-gold); margin-left: 1px; }
  #testimoniale figcaption { margin-top: auto; }
  #testimoniale .tz-name {
    display: block;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    color: var(--lz-text);
    font-size: 13.5px;
  }
  #testimoniale .tz-meta {
    display: block;
    font-family: 'Courier Prime', monospace;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lz-slate);
    margin-top: 4px;
  }

  /* ============================================================
     MOBILE POLISH  —  phone-only refinements, nothing above 1024px.
     The layout was tuned on desktop first; these rules stop elements
     from floating loose on a narrow screen and put the CTA where a
     thumb can reach it.
     ============================================================ */

  /* language toggle: was a loose pill floating over the content at
     top:92px. Dock it into the header bar next to the menu button. */
  @media (max-width: 1023.98px) {
    .lang-toggle-btn {
      top: 26px;
      right: 72px;
      z-index: 60;
      padding: 2px;
      background: var(--bg);
      box-shadow: none;
    }
    .lang-pill { font-size: 10px; padding: 4px 7px; letter-spacing: .06em; }
  }

  /* sticky booking bar: the money-back line ran onto a second line
     because of the wide tracking, which made the whole bar tall and
     cramped. Keep it to one line, and clear room under the footer so
     the bar never sits on top of the contact details. */
  @media (max-width: 1023.98px) {
    #sticky-cta .sticky-cta__sub { letter-spacing: .06em; white-space: nowrap; }
    #sticky-cta .flex { padding-top: 10px; padding-bottom: 10px; }
    footer#contact { padding-bottom: 76px; }
  }

  @media (max-width: 640px) {
    /* hero: collapse the empty circuit field above the wordmark and
       drop the scattered agent-log fragments that were landing on top
       of the "AHeAD" letters. The backdrop texture stays. */
    .intro-frag { display: none; }
    /* full screen on phones, like the tablet/desktop frame above — was
       min-height:0/height:auto, which shrank the hero to just its content
       height instead of filling the viewport. */
    .intro-frame { min-height: calc(100vh - 1rem); min-height: calc(100svh - 1rem); height: auto; }
    .intro-hero { padding-top: 6rem; padding-bottom: 2.5rem; }

    /* hero CTAs: two full-width stacked pills, label left / icon right.
       Tighten the tracking so the label holds one line on a 360px screen. */
    .hero-cta { width: 100%; justify-content: space-between; letter-spacing: .08em; }

    /* hero trust row: was wrapping into three lines with stranded
       middots. Stack it as a short scannable list. (id/element bump so
       it beats Tailwind's later-injected .items-center) */
    ul.hero-trust { flex-direction: column; align-items: flex-start; gap: .4rem; font-size: 10px; letter-spacing: .1em; }
    ul.hero-trust li[aria-hidden="true"] { display: none; }

    /* the weight: less dead scroll, smaller fragments so they clear
       the centred headline */
    #weight { height: 155vh; }
    .frag { font-size: 10.5px; max-width: 44vw; }

    /* pricing ledger header: two wide mono labels can't share a row on
       a phone — stack them left instead of wrapping into four fragments */
    #pricing .pay-ledger__head { flex-direction: column; align-items: flex-start; gap: 4px; }

    /* dial the circuit texture back where it sat behind body copy */
    #faq .circuit-bg { opacity: .045; }
    #contact .circuit-bg { opacity: .05; }

    /* footer: two-column sitemap and tighter stack so it isn't a ladder */
    #contact .footer-sitemap { columns: 2; column-gap: 24px; }
    #contact .footer-sitemap li { break-inside: avoid; }
    #contact .grid { gap: 2.25rem; }
  }

  /* ============================================================
     MOBILE — READABILITY + RHYTHM
     Bumps cramped body copy to a comfortable reading size, opens the
     leading, adds air between sections, and turns the process/team
     step lists into a scroll-driven vertical timeline so scrolling the
     phone feels alive instead of like reading a wall.
     ============================================================ */
  @media (max-width: 767px) {
    /* reveal: quicker, so a scroll doesn't wait on a slow fade */
    .reveal { transition-duration: .5s; transform: translateY(18px); }

    /* comfortable reading sizes — nothing below 15px for body copy */
    .lz-lede { font-size: 16px; line-height: 1.75; margin-top: 16px; }
    .lz-card p,
    #services .service-panel p { font-size: 15.5px; line-height: 1.75; }
    #services .service-tab-title { font-size: 15px; }
    #services .service-tab-sub { font-size: 13.5px; line-height: 1.55; }
    .lz-further__item h3 { font-size: 16px; }
    .lz-further__item p { font-size: 14px; line-height: 1.7; }
    #pricing .pay-row__desc { font-size: 15px; line-height: 1.7; }
    #team .biocard p { font-size: 14.5px; line-height: 1.72; }
    #team .biocard a { font-size: 14px; }
    .lz-ticker__v { font-size: 15px; line-height: 1.55; }
    .lz-note,
    #services .service-panel p.svc-eg { font-size: 13px; line-height: 1.7; }
    #faq .faq-answer { font-size: 15px; line-height: 1.8; }
    #faq .faq-item summary { font-size: 15.5px; }
    .deliv__problem { font-size: 15px; }
    .deliv__fix { font-size: 13.5px; line-height: 1.62; }

    /* headings: stop the monospace FAQ/weight headline packing into an
       unreadable block; give the ledger h2 a gentler first step */
    .heading-lg { line-height: 1.3; letter-spacing: 0; }
    .lz-h2 { font-size: 1.7rem; line-height: 1.14; }

    /* more air between ledger sections */
    .lz-inner { padding-top: 56px; padding-bottom: 56px; }
    .lz-head { margin-bottom: 26px; }

    /* ---- process + team: vertical timeline with a gold fill that
       tracks scroll (--fill is driven by GSAP; 0 by default so it
       degrades to a plain rail if the script never runs) ---- */
    #process #process-row,
    #team #team-diagram-row {
      display: block;
      position: relative;
      padding-left: 46px;
      --fill: 0;
    }
    #process #process-row::before,
    #team #team-diagram-row::before,
    #process #process-row::after,
    #team #team-diagram-row::after {
      content: "";
      position: absolute;
      left: 15px; top: 10px; bottom: 10px;
      width: 2px; border-radius: 2px;
      z-index: 0;
    }
    #process #process-row::before,
    #team #team-diagram-row::before { background: var(--lz-line-2); }
    #process #process-row::after,
    #team #team-diagram-row::after {
      background: linear-gradient(180deg, var(--lz-gold-hi), var(--lz-gold));
      transform-origin: top;
      transform: scaleY(var(--fill));
      box-shadow: 0 0 12px rgba(233,180,90,.45);
    }
    /* fade the rail in before the first dot and out after the last, so it
       doesn't leave a hard stub hanging past the final step */
    #process #process-row::before, #team #team-diagram-row::before,
    #process #process-row::after, #team #team-diagram-row::after {
      -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 44px), transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 44px), transparent 100%);
    }
    #process #process-row > div,
    #team #team-diagram-row > div {
      position: relative;
      z-index: 1;               /* keep the step (and its dot) above the rail */
      align-items: flex-start;
      text-align: left;
      margin-bottom: 32px;
      transition-delay: 0s !important;
    }
    #process #process-row > div:last-child,
    #team #team-diagram-row > div:last-child { margin-bottom: 0; }

    #process #process-row .node-dot {
      position: absolute; left: -44px; top: 1px; margin: 0;
    }
    #team #team-diagram-row .lz-step-n { display: none; }
    #team #team-diagram-row .team-node-dot {
      position: absolute; left: -52px; top: 0; margin: 0;
      width: 40px; height: 40px;
    }
    #team #team-diagram-row .team-node-dot svg { width: 18px; height: 18px; }

    #process #process-row > div,
    #team #team-diagram-row > div { padding-top: 2px; }
    #process .lz-step-h,
    #team .lz-step-h { margin: 0 0 10px; }
    #team #team-diagram-row .lz-step-h { margin-top: 6px; }
    #process .lz-step-p,
    #team .lz-step-p { max-width: none; font-size: 15.5px; line-height: 1.72; }

    /* FAQ headline: monospace at 30px packed into three lines was the
       hardest thing on the page to read — smaller, looser leading */
    #faq h2.heading-lg { font-size: 1.55rem; line-height: 1.36; }

    /* the dot pops when the gold fill reaches it */
    #process .node-dot, #team .team-node-dot { transition: transform .3s cubic-bezier(.2,.8,.3,1.3), background-color .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease; }
    #process .node-dot.lit, #team .team-node-dot.lit { transform: scale(1.08); }
  }

  @media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    #process #process-row, #team #team-diagram-row { --fill: 1; }
  }

  /* ---- touch press feedback: give every tappable surface a small
     give on press, since there is no hover on a phone ---- */
  @media (hover: none) {
    .lz-card, .lz-further__item, #services .service-tab, #pricing .pay-row,
    .lz-cta, .hero-cta, #back-to-top, [data-open-booking] {
      transition: transform .12s ease, border-color .2s ease, background-color .2s ease;
    }
    .lz-card:active, .lz-further__item:active,
    #services .service-tab:active, #pricing .pay-row:active { transform: scale(.985); }
    .lz-cta:active, .hero-cta:active, [data-open-booking]:active,
    #back-to-top:active { transform: scale(.955); }
    .faq-item summary:active .faq-q { color: var(--rustlight); }
  }