/*
Theme Name: Laplacio
Description: Laplacio — tư vấn & triển khai giải pháp số cho SME. Industrial documentary design; catalog data in assets/catalog.json (generated by mockups/build_outline.py).
Version: 2.0.0
Text Domain: laplacio
*/

  /* Single light theme on purpose: this mocks the real website, which ships one look. */
  :root {
    color-scheme: light;
    --ink: #0F1419;
    --ink-2: #1A222B;
    --ink-3: #26303B;
    --paper: #FFFFFF;
    --concrete: #EEF0F3;
    --line: #D6DAE0;
    --line-dark: #333D48;
    --slate: #5A6472;
    --mute-dark: #A3AEBB;
    --blue: #1646E0;
    --blue-deep: #0E2F9E;
    --blue-tint: #E8EEFF;
    --signal: #FFC400;
    --signal-ink: #3D2E00;
    --ok: #13A06F;
    --alert: #E5483A;

    --f-display: "Archivo", "Be Vietnam Pro", system-ui, sans-serif;
    --f-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-data: "JetBrains Mono", ui-monospace, Menlo, monospace;

    --wrap: 1280px;
    --gutter: clamp(16px, 4vw, 48px);
    --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  }

  * { box-sizing: border-box; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.65 var(--f-body); -webkit-font-smoothing: antialiased; }
  h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-stretch: 85%; font-weight: 800; line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; }
  p { margin: 0; }
  a { color: inherit; }
  img { display: block; max-width: 100%; }
  button { font: inherit; }
  :focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

  .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
  .section { padding-block: clamp(4rem, 8vw, 7rem); }
  .label { display: flex; align-items: center; gap: 0.65rem; font: 700 0.78rem/1 var(--f-display); font-stretch: 112%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
  .label::before { content: ""; width: 28px; height: 3px; background: currentColor; }
  .on-dark .label { color: var(--signal); }
  .h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); }
  .lead { font-size: 1.15rem; color: var(--slate); max-width: 60ch; }
  .on-dark { background: var(--ink); color: var(--paper); }
  .on-dark .lead { color: var(--mute-dark); }
  .head { display: grid; gap: 1.1rem; max-width: 760px; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 52px; padding: 0 1.5rem; font: 600 1rem/1 var(--f-body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
  .btn svg { width: 18px; height: 18px; transition: transform .18s; }
  .btn:hover svg { transform: translateX(3px); }
  .btn-blue { background: var(--blue); color: #fff; }
  .btn-blue:hover { background: var(--blue-deep); }
  .btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
  .btn-line:hover { background: var(--ink); color: #fff; }
  .btn-white { background: #fff; color: var(--ink); }
  .btn-white:hover { background: var(--signal); }

  /* ---------- Header ---------- */
  .site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
  .site-header .wrap { display: flex; align-items: center; gap: 2rem; min-height: 72px; }
  .logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; font: 900 1.35rem/1 var(--f-display); font-stretch: 105%; letter-spacing: 0.02em; }
  .logo i { width: 22px; height: 22px; background: var(--blue); position: relative; }
  .logo i::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 9px; height: 9px; background: var(--signal); }
  .nav { display: flex; gap: 1.75rem; margin-left: auto; }
  .nav a { text-decoration: none; font-weight: 500; font-size: 0.95rem; color: var(--slate); padding-block: 0.4rem; border-bottom: 2px solid transparent; }
  .nav a:hover { color: var(--ink); border-color: var(--ink); }
  .lang { display: flex; font: 700 0.75rem/1 var(--f-display); letter-spacing: .08em; }
  .lang span { padding: 0.45rem 0.55rem; color: var(--slate); border: 1px solid var(--line); }
  .lang span + span { border-left: 0; }
  .lang .on { background: var(--ink); border-color: var(--ink); color: #fff; }
  .site-header .btn { min-height: 44px; padding: 0 1.1rem; font-size: 0.92rem; }

  /* ---------- Hero ---------- */
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); min-height: clamp(560px, 78vh, 760px); }
  .hero-copy { padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem) clamp(3rem, 6vw, 5rem) var(--edge); display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; }
  .hero h1 { font-size: clamp(2.6rem, 1.2rem + 4.2vw, 4.9rem); font-stretch: 78%; font-weight: 850; line-height: 1.02; }
  .hero h1 em { font-style: normal; color: var(--blue); display: block; }
  .hero .lead { font-size: 1.2rem; max-width: 52ch; }
  .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .assure { list-style: none; margin: 0.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; font-weight: 600; font-size: 0.95rem; }
  .assure li { display: flex; align-items: center; gap: 0.5rem; }
  .assure li::before { content: ""; width: 10px; height: 10px; background: var(--blue); }

  .hero-media { position: relative; margin: 0; background: var(--ink); overflow: hidden; }
  .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
  .ov { position: absolute; background: rgba(15, 20, 25, .92); color: #fff; padding: 0.95rem 1.05rem; width: min(300px, 70%); backdrop-filter: blur(6px); }
  .ov-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font: 700 0.7rem/1 var(--f-display); font-stretch: 110%; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-dark); margin-bottom: 0.7rem; }
  .ov-top .rec { display: flex; align-items: center; gap: 0.35rem; color: var(--alert); }
  .ov-top .rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.4s infinite; }
  @keyframes blink { 50% { opacity: .25; } }
  .ov-row { display: flex; justify-content: space-between; gap: 0.75rem; padding-block: 0.35rem; border-top: 1px solid var(--line-dark); font-size: 0.85rem; }
  .ov-row b { font: 500 0.85rem/1.4 var(--f-data); font-variant-numeric: tabular-nums; }
  .ov-row .bad { color: #FF8A7F; }
  .ov-row .good { color: #5FE0AE; }
  .ov-1 { left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); }
  .ov-2 { right: clamp(1rem, 3vw, 2rem); top: clamp(1rem, 3vw, 2rem); width: min(250px, 60%); }
  .ov-2 .big { font: 850 2.2rem/1 var(--f-display); font-stretch: 80%; }
  .ov-2 .big small { font-size: 1rem; color: var(--mute-dark); font-weight: 600; }
  .bar { height: 6px; background: var(--ink-3); margin-top: 0.6rem; }
  .bar span { display: block; height: 100%; width: 94.6%; background: var(--signal); }
  .hero-media figcaption { position: absolute; right: 0; bottom: 0; background: #fff; color: var(--slate); font-size: 0.7rem; padding: 0.3rem 0.6rem; }

  .scope { background: var(--ink); color: #fff; }
  .scope .wrap { display: grid; grid-template-columns: repeat(3, auto) 1fr; align-items: center; gap: 1.5rem clamp(2rem, 5vw, 4.5rem); padding-block: 1.75rem; }
  .scope strong { display: block; font: 850 2.6rem/1 var(--f-display); font-stretch: 78%; color: var(--signal); font-variant-numeric: tabular-nums; }
  .scope span { font-size: 0.88rem; color: var(--mute-dark); }
  .scope p { justify-self: end; max-width: 42ch; color: var(--mute-dark); font-size: 0.95rem; }

  /* ---------- Industries mosaic ---------- */
  .mosaic { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); text-decoration: none; color: #fff; }
  .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s; opacity: .88; }
  .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,20,25,0) 35%, rgba(15,20,25,.85) 100%); }
  .tile-text { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.8rem; z-index: 1; }
  .tile b { display: block; font: 800 1.12rem/1.15 var(--f-display); font-stretch: 85%; }
  .tile small { display: block; font-size: 0.78rem; color: #D5DCE4; margin-top: 0.2rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s, opacity .35s; }
  .tile:hover img, .tile:focus-visible img { transform: scale(1.05); opacity: 1; }
  .tile:hover small, .tile:focus-visible small { max-height: 4em; opacity: 1; }
  .tile .count { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 1; background: var(--signal); color: var(--signal-ink); font: 700 0.68rem/1 var(--f-display); letter-spacing: .06em; padding: 0.3rem 0.45rem; }

  /* ---------- Why ---------- */
  .why-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .why-photo { margin: 0; position: sticky; top: 96px; }
  .why-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .why-photo figcaption { font-size: 0.78rem; color: var(--slate); margin-top: 0.6rem; }
  .cmp { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.95rem; }
  .cmp th, .cmp td { text-align: left; vertical-align: top; padding: 0.95rem 1rem; border-bottom: 1px solid var(--line); }
  .cmp thead th { font: 800 1rem/1.2 var(--f-display); font-stretch: 90%; border-bottom: 2px solid var(--ink); }
  .cmp thead th.us { background: var(--blue); color: #fff; border-bottom-color: var(--blue); }
  .cmp tbody th { font: 700 0.76rem/1.3 var(--f-display); font-stretch: 110%; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); width: 17%; padding-top: 1.1rem; }
  .cmp td { color: var(--slate); }
  .cmp td.us { background: var(--blue-tint); color: var(--ink); font-weight: 500; }

  .breakout { background: var(--blue); color: #fff; }
  .breakout .wrap { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); padding-block: clamp(3.5rem, 7vw, 6rem); }
  .breakout .label { color: var(--signal); }
  .breakout .lead { color: #D5DEFF; margin-top: 1.1rem; }
  .breakout .btn { margin-top: 1.75rem; }
  .gains { display: grid; grid-template-columns: 1fr 1fr; }
  .gain { padding: 1.5rem 1.5rem 1.5rem 0; border-top: 1px solid rgba(255,255,255,.3); }
  .gain:nth-child(odd) { padding-right: 2rem; }
  .gain:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid rgba(255,255,255,.3); }
  .gain h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
  .gain p { color: #D5DEFF; font-size: 0.95rem; }

  /* ---------- Catalog ---------- */
  .catalog-sec { background: var(--concrete); }
  .tiers-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-size: 0.92rem; color: var(--slate); }
  .tiers-legend li { display: flex; gap: 0.5rem; align-items: baseline; }
  .tiers-legend b { font: 850 1.3rem/1 var(--f-display); color: var(--blue); }
  .tiers-legend span b { font: 600 0.92rem/1 var(--f-body); color: var(--ink); }
  .filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-block: 1px solid var(--line); margin-bottom: 1.5rem; position: sticky; top: 72px; z-index: 10; background: var(--concrete); }
  .filters { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1 1 600px; }
  .chip { border: 1px solid var(--line); background: #fff; padding: 0.5rem 0.8rem; font-size: 0.86rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
  .chip svg { width: 16px; height: 16px; color: var(--slate); }
  .chip:hover { border-color: var(--ink); }
  .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .chip[aria-pressed="true"] svg { color: var(--signal); }
  .switch { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .switch i { width: 40px; height: 22px; background: var(--line); position: relative; transition: background .2s; flex: none; }
  .switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; transition: transform .2s; }
  .switch input:checked + i { background: var(--ink); }
  .switch input:checked + i::after { transform: translateX(18px); background: var(--signal); }
  .switch input:focus-visible + i { outline: 3px solid var(--signal); outline-offset: 2px; }

  .ind-panel { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1.1fr); background: var(--ink); color: #fff; margin-bottom: 2.25rem; min-height: 190px; }
  .ind-panel.all { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .ind-panel > img { width: 100%; height: 100%; object-fit: cover; }
  .ind-panel .txt, .ind-panel .pains { padding: 1.5rem 1.6rem; }
  .ind-panel h3 { font-size: 1.7rem; margin-bottom: 0.6rem; }
  .ind-panel .for { font-size: 0.88rem; color: var(--mute-dark); }
  .ind-panel .for b { color: #fff; font-weight: 600; }
  .ind-panel .desc { margin-top: 0.4rem; color: #D5DCE4; }
  .ind-panel .count { margin-top: 1rem; display: inline-block; background: var(--signal); color: var(--signal-ink); font: 700 0.8rem/1 var(--f-display); letter-spacing: .04em; padding: 0.4rem 0.6rem; }
  .pains { border-left: 1px solid var(--line-dark); }
  .pains h4 { font: 700 0.74rem/1 var(--f-display); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-dark); margin-bottom: 0.9rem; }
  .pains ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
  .pains li { font-size: 0.93rem; line-height: 1.45; padding-left: 1rem; border-left: 3px solid var(--alert); }
  .pains li .sol { display: block; margin-top: 0.25rem; color: var(--signal); font-weight: 600; }
  .pains li .sol::before { content: "→ "; }

  .tier + .tier { margin-top: 3rem; }
  .tier-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 1.25rem; }
  .tier-head h3 { font-size: 1.7rem; }
  .tier-head h3 b { color: var(--blue); margin-right: 0.5rem; }
  .tier-head p { color: var(--slate); }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; align-items: start; }
  .card { background: #fff; border: 1px solid var(--line); display: grid; transition: border-color .2s; }
  .card:hover { border-color: var(--ink); }
  .card-photo { aspect-ratio: 16 / 8; overflow: hidden; }
  .card-photo img { width: 100%; height: 100%; object-fit: cover; }
  .card-body { padding: 1.15rem 1.2rem 1rem; display: grid; gap: 0.7rem; }
  .card-head { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; }
  .card-head .ic { width: 38px; height: 38px; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; }
  .card-head .ic svg { width: 20px; height: 20px; }
  .card-head h4 { font-size: 1.2rem; }
  .card-head .n { font: 700 0.75rem/1 var(--f-display); color: var(--slate); }
  .card .sub { font-size: 0.83rem; color: var(--slate); margin-top: -0.2rem; }
  .card .sub b { color: var(--ink); font-weight: 600; }
  .card ul { list-style: none; margin: 0; padding: 0; }
  .card li { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; padding: 0.6rem 0; border-top: 1px solid var(--concrete); }
  .card li b { display: block; font-weight: 600; font-size: 0.93rem; line-height: 1.35; }
  .card li small { display: block; color: var(--slate); font-size: 0.8rem; line-height: 1.45; margin-top: 0.15rem; }
  .card li.key b::before { content: "Giải quyết vấn đề"; display: inline-block; margin-right: 0.4rem; background: var(--alert); color: #fff; font: 700 0.6rem/1 var(--f-display); letter-spacing: .05em; padding: 0.22rem 0.35rem; vertical-align: 0.15em; }
  .tech { align-self: start; font: 700 0.64rem/1 var(--f-display); letter-spacing: .06em; padding: 0.28rem 0.4rem; background: var(--signal); color: var(--signal-ink); }
  .tech.llm { background: var(--blue); color: #fff; }
  .tech.iot { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .more { justify-self: start; background: none; border: 0; padding: 0.2rem 0; color: var(--blue); font-weight: 600; font-size: 0.87rem; cursor: pointer; border-bottom: 2px solid transparent; }
  .more:hover { border-bottom-color: var(--blue); }
  .empty { background: #fff; border: 1px solid var(--line); padding: 1.5rem; color: var(--slate); }
  .catalog-foot { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; background: #fff; border-left: 6px solid var(--signal); padding: 1.5rem 1.75rem; }
  .catalog-foot strong { font: 800 1.35rem/1.2 var(--f-display); font-stretch: 85%; display: block; }
  .catalog-foot p { color: var(--slate); }

  /* ---------- AI ---------- */
  .ai-block + .ai-block { margin-top: clamp(3rem, 6vw, 4.5rem); }
  .ai-sub { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 0.75rem 2rem; margin-bottom: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
  .ai-sub h3 { font-size: 1.7rem; }
  .ai-sub p { color: var(--mute-dark); max-width: 52ch; }
  .ai-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  .ai-card { display: grid; gap: 0.8rem; align-content: start; }
  .ai-card h4 { font-size: 1.15rem; }
  .ai-card p { color: var(--mute-dark); font-size: 0.9rem; }
  .ai-card .in { font-size: 0.82rem; color: var(--mute-dark); }
  .ai-card .in a { color: var(--signal); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
  .cam { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); }
  .cam img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); }
  .cam::before { content: ""; position: absolute; inset: 10px; z-index: 1; background:
      linear-gradient(#fff, #fff) left top / 16px 2px no-repeat, linear-gradient(#fff, #fff) left top / 2px 16px no-repeat,
      linear-gradient(#fff, #fff) right top / 16px 2px no-repeat, linear-gradient(#fff, #fff) right top / 2px 16px no-repeat,
      linear-gradient(#fff, #fff) left bottom / 16px 2px no-repeat, linear-gradient(#fff, #fff) left bottom / 2px 16px no-repeat,
      linear-gradient(#fff, #fff) right bottom / 16px 2px no-repeat, linear-gradient(#fff, #fff) right bottom / 2px 16px no-repeat; }
  .cam .meta { position: absolute; top: 16px; left: 18px; z-index: 2; font: 500 0.64rem/1 var(--f-data); color: #fff; display: flex; align-items: center; gap: 0.4rem; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
  .cam .meta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--alert); animation: blink 1.4s infinite; }
  .cam .det { position: absolute; z-index: 2; border: 2px solid var(--signal); }
  .cam .det.ok { border-color: #5FE0AE; }
  .cam .det.bad { border-color: var(--alert); }
  .cam .tag { position: absolute; z-index: 3; left: 18px; bottom: 16px; right: 18px; display: flex; justify-content: space-between; gap: 0.5rem; background: rgba(15,20,25,.9); color: #fff; font-size: 0.74rem; padding: 0.45rem 0.6rem; }
  .cam .tag b { font-weight: 600; }
  .cam .tag span { font-family: var(--f-data); color: var(--signal); white-space: nowrap; }
  .ui { background: var(--ink-2); border: 1px solid var(--line-dark); aspect-ratio: 4 / 3; padding: 0.8rem; display: grid; gap: 0.5rem; align-content: start; font-size: 0.76rem; line-height: 1.45; overflow: hidden; }
  .ui-top { display: flex; justify-content: space-between; font: 700 0.62rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--mute-dark); padding-bottom: 0.5rem; border-bottom: 1px solid var(--line-dark); }
  .msg { max-width: 90%; padding: 0.45rem 0.6rem; }
  .msg.user { justify-self: end; background: var(--blue); color: #fff; }
  .msg.bot { justify-self: start; background: var(--ink-3); color: #E7ECF2; }
  .msg ol { margin: 0.2rem 0 0; padding-left: 1rem; }
  .cite { display: inline-block; margin-top: 0.35rem; font: 500 0.6rem/1.3 var(--f-data); background: rgba(255,196,0,.15); color: var(--signal); padding: 0.15rem 0.35rem; }
  .qbars { display: grid; gap: 0.3rem; margin-top: 0.35rem; }
  .qbars div { display: grid; grid-template-columns: 62px 1fr auto; gap: 0.4rem; align-items: center; font-size: 0.68rem; }
  .qbars i { height: 8px; background: var(--signal); }
  .qbars span:last-child { font-family: var(--f-data); }
  .doc { background: #F4F1EA; color: var(--ink); padding: 0.55rem; display: grid; gap: 4px; }
  .doc b { font: 800 0.66rem/1 var(--f-display); letter-spacing: .06em; }
  .doc i { height: 4px; background: #CFC8B8; }
  .doc i:nth-child(3) { width: 70%; } .doc i:nth-child(4) { width: 85%; }
  .fields { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; border: 1px solid var(--signal); padding: 0.5rem; }
  .fields dt { color: var(--mute-dark); }
  .fields dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
  .ok-chip { justify-self: start; background: #5FE0AE; color: var(--ink); font: 700 0.62rem/1 var(--f-display); padding: 0.3rem 0.45rem; }

  /* ---------- Process ---------- */
  .modes { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); margin-bottom: clamp(3rem, 6vw, 4.5rem); }
  .mode { padding: clamp(1.25rem, 3vw, 2rem); }
  .mode + .mode { border-left: 1px solid var(--line); }
  .mode h3 { font-size: 1.5rem; margin-bottom: 1rem; }
  .mode dl { margin: 0; display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.6rem 1rem; }
  .mode dt { font: 700 0.72rem/1.5 var(--f-display); font-stretch: 110%; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
  .mode dd { margin: 0; }
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: s; }
  .step { counter-increment: s; padding: 1.5rem 1.5rem 0 0; border-top: 4px solid var(--line); position: relative; display: grid; gap: 0.6rem; align-content: start; }
  .step:first-child { border-top-color: var(--blue); }
  .step::before { content: counter(s); font: 850 3.4rem/1 var(--f-display); font-stretch: 75%; color: var(--blue); }
  .step h3 { font-size: 1.3rem; }
  .step p { color: var(--slate); font-size: 0.93rem; }
  .step .deliver { color: var(--ink); font-size: 0.88rem; border-left: 3px solid var(--signal); padding-left: 0.7rem; margin-top: 0.3rem; }
  .step .deliver b { display: block; font: 700 0.68rem/1.4 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }

  /* ---------- About ---------- */
  .about { background: var(--concrete); }
  .about-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .about figure { margin: 0; position: relative; }
  .about figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  .about figcaption { position: absolute; left: 0; bottom: 0; background: var(--signal); color: var(--signal-ink); font-size: 0.75rem; font-weight: 600; padding: 0.4rem 0.7rem; }
  .values { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; }
  .values li { padding: 1rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; }
  .values b { font: 800 1.05rem/1.3 var(--f-display); font-stretch: 90%; }
  .values span { color: var(--slate); font-size: 0.95rem; }

  /* ---------- CTA ---------- */
  .cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .contact { margin-top: 2rem; display: grid; gap: 1rem; }
  .contact div { border-top: 1px solid var(--line-dark); padding-top: 0.8rem; }
  .contact span { display: block; font: 700 0.7rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--mute-dark); margin-bottom: 0.35rem; }
  .contact p { font-size: 1.1rem; font-weight: 600; }
  form { background: #fff; color: var(--ink); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1rem; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  label { display: grid; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; }
  input, select, textarea { font: 400 0.98rem/1.4 var(--f-body); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 0.75rem 0.85rem; width: 100%; }
  input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--blue); }
  textarea { min-height: 110px; resize: vertical; }
  .form-note { font-size: 0.85rem; color: var(--slate); min-height: 1.2em; }
  .form-note.ok { color: var(--ok); font-weight: 600; }

  /* ---------- Footer ---------- */
  footer { background: var(--ink-2); color: var(--mute-dark); font-size: 0.9rem; padding-block: 3.5rem 2rem; }
  footer .wrap { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2rem; }
  footer .logo { color: #fff; }
  footer h4 { font: 700 0.75rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
  footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
  footer a { text-decoration: none; }
  footer a:hover { color: #fff; }
  .copy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; border-top: 1px solid var(--line-dark); padding-top: 1.5rem; margin-top: 1rem; font-size: 0.8rem; }

  /* ---------- Responsive ---------- */
  @media (max-width: 1100px) {
    .mosaic { grid-template-columns: repeat(3, 1fr); }
    .ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ind-panel { grid-template-columns: 180px minmax(0, 1fr); }
    .ind-panel .pains { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-dark); }
    footer .wrap { grid-template-columns: repeat(2, 1fr); }
    footer .brand { grid-column: 1 / -1; }
  }
  @media (max-width: 900px) {
    .nav { display: none; }
    .lang { margin-left: auto; }
    .hero-grid, .why-grid, .breakout .wrap, .about-grid, .cta-grid { grid-template-columns: 1fr; }
    .hero-media { min-height: 420px; }
    .why-photo { position: static; }
    .why-photo img { aspect-ratio: 16 / 9; }
    .scope .wrap { grid-template-columns: repeat(3, auto); }
    .scope p { grid-column: 1 / -1; justify-self: start; }
    .steps { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
    .modes { grid-template-columns: 1fr; }
    .mode + .mode { border-left: 0; border-top: 1px solid var(--line); }
    .filter-bar { position: static; }
  }
  @media (max-width: 640px) {
    .site-header .btn { display: none; }
    .mosaic { grid-template-columns: repeat(2, 1fr); }
    .tile small { display: none; }
    .ind-panel, .ind-panel.all { grid-template-columns: 1fr; }
    .ind-panel > img { aspect-ratio: 16 / 7; height: auto; }
    .gains { grid-template-columns: 1fr; }
    .gain:nth-child(even) { padding-left: 0; border-left: 0; }
    .ai-grid, .steps, .row { grid-template-columns: 1fr; }
    .values li { grid-template-columns: 1fr; gap: 0.3rem; }
    .mode dl { grid-template-columns: 1fr; gap: 0.2rem; }
    .mode dd { margin-bottom: 0.5rem; }
    .cmp thead { display: none; }
    .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
    .cmp tr { border-top: 2px solid var(--ink); padding-block: 0.5rem; }
    .cmp tbody th { padding: 0.5rem 0 0.25rem; border: 0; }
    .cmp td { border: 0; padding: 0.5rem 0.75rem; }
    .cmp td::before { content: attr(data-h); display: block; font: 700 0.7rem/1.4 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
    .cmp td.us::before { color: var(--blue); }
    .ov-2 { display: none; }
    footer .wrap { grid-template-columns: 1fr 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

/* =====================================================================
   WordPress layer: admin bar, mega menu, mobile nav, sub pages, CF7
   ===================================================================== */
.admin-bar .site-header { top: calc(32px + env(safe-area-inset-top, 0px)); }
.admin-bar .filter-bar { top: 104px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header .wrap { position: relative; }
.nav > a, .nav .has-mega > a { text-decoration: none; font-weight: 500; font-size: 0.95rem; color: var(--slate); padding-block: 0.4rem; border-bottom: 2px solid transparent; }
.nav .has-mega > a { display: block; }
/* Hover area spans the full header height so the pointer can reach the mega panel without a gap */
.nav { align-self: stretch; align-items: center; }
.nav .has-mega { align-self: stretch; display: flex; align-items: center; }
.nav .has-mega > a::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); margin-left: 0.5rem; }
.nav a.current { color: var(--ink); border-color: var(--blue); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); border-bottom: 3px solid var(--ink); display: none; box-shadow: 0 30px 40px -30px rgba(15,20,25,.35); }
.has-mega:hover .mega, .has-mega:focus-within .mega { display: block; }
.mega-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; padding: 1.75rem var(--gutter) 2rem; max-width: var(--wrap); margin-inline: auto; }
.mega h5 { margin: 0 0 0.8rem; font: 700 0.72rem/1 var(--f-display); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega .cols2 { columns: 2; column-gap: 2rem; }
.mega li { break-inside: avoid; }
.mega a { display: flex; align-items: center; gap: 0.55rem; padding: 0.38rem 0; text-decoration: none; color: var(--ink); font-size: 0.92rem; border: 0; }
.mega a svg { width: 16px; height: 16px; color: var(--slate); flex: none; }
.mega a:hover { color: var(--blue); }
.mega a:hover svg { color: var(--blue); }
.mega .all { margin-top: 1rem; font-weight: 600; color: var(--blue); }
.mnav { display: none; }
.mnav summary { list-style: none; cursor: pointer; border: 1px solid var(--ink); padding: 0.55rem 0.9rem; font-weight: 600; font-size: 0.9rem; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 3px solid var(--ink); max-height: 75vh; overflow: auto; padding: 1rem var(--gutter) 1.5rem; }
.mnav-panel a { display: block; padding: 0.55rem 0; border-bottom: 1px solid var(--concrete); text-decoration: none; }
.mnav-panel h5 { margin: 1rem 0 0.25rem; font: 700 0.7rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
@media (max-width: 900px) { .mnav { display: block; } .lang { margin-left: 0; } .site-header .wrap { gap: 0.75rem; } .site-header .wrap > .lang { margin-left: auto; } }

/* Sub-page hero */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.85rem; color: var(--slate); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--line); }
.on-dark .crumbs { color: var(--mute-dark); }
.sub .hero-grid { min-height: clamp(480px, 64vh, 640px); }
.sub .hero h1, .sub h1.big { font-size: clamp(2.4rem, 1.4rem + 3.8vw, 4.6rem); font-stretch: 78%; font-weight: 850; line-height: 1.02; }
.sub .about-text { color: var(--ink); max-width: 60ch; }
.tags-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tags-list li, .tags-list a { border: 1px solid var(--line); padding: 0.3rem 0.6rem; font-size: 0.82rem; text-decoration: none; background: #fff; }
.tags-list a:hover { border-color: var(--ink); }
.on-dark .tags-list li, .on-dark .tags-list a { background: transparent; border-color: var(--line-dark); color: #E7ECF2; }
.on-dark .tags-list a:hover { border-color: var(--signal); color: var(--signal); }
.ov-sum { left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); width: min(320px, 80%); }
.ov-sum .ov-row b { color: var(--signal); }

/* Problem → solution pairs */
.pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pair { background: #fff; border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; }
.pair .prob, .pair .solv { padding: 1.35rem 1.4rem; display: grid; gap: 0.5rem; align-content: start; }
.pair .prob { border-bottom: 1px solid var(--line); }
.pair .solv { background: var(--blue-tint); }
.pair .k { font: 700 0.7rem/1 var(--f-display); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; }
.pair .prob .k { color: var(--alert); }
.pair .solv .k { color: var(--blue); }
.pair .prob p { font-weight: 600; font-size: 1.05rem; line-height: 1.4; }
.pair .solv b { font: 800 1.2rem/1.2 var(--f-display); font-stretch: 88%; }
.pair .solv p { color: var(--slate); font-size: 0.92rem; }

/* Specialized solutions grid */
.spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.spec { background: #fff; padding: 1.5rem; display: grid; gap: 0.55rem; align-content: start; }
.spec-top { display: flex; justify-content: space-between; align-items: start; gap: 0.75rem; }
.spec h3 { font-size: 1.22rem; font-stretch: 88%; }
.spec p { color: var(--slate); font-size: 0.93rem; }
.spec.key { box-shadow: inset 4px 0 0 var(--alert); }
.spec .flag { justify-self: start; font: 700 0.62rem/1 var(--f-display); letter-spacing: .06em; background: var(--alert); color: #fff; padding: 0.25rem 0.4rem; }

/* AI list on sub pages */
.ai-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
.ai-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-dark); }
.ai-list .tech { grid-row: span 2; margin-top: 0.15rem; }
.ai-list b { font: 800 1.05rem/1.3 var(--f-display); font-stretch: 90%; }
.ai-list small { color: var(--mute-dark); font-size: 0.86rem; }
.ai-list small a { color: var(--signal); text-decoration: none; border-bottom: 1px solid currentColor; }

/* Group page */
.grp-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; padding-block: clamp(3.5rem, 7vw, 6rem); }
.grp-hero .hero-copy { padding: 0; }
.grp-stats { display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.grp-stats div { background: var(--ink); padding: 1.1rem 1.25rem; display: flex; align-items: baseline; gap: 0.75rem; }
.grp-stats strong { font: 850 2.6rem/1 var(--f-display); font-stretch: 78%; color: var(--signal); }
.grp-stats span { color: var(--mute-dark); font-size: 0.92rem; }
.grp-icon { width: 64px; height: 64px; background: var(--blue); color: #fff; display: grid; place-items: center; }
.grp-icon svg { width: 32px; height: 32px; }
.item-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.item-row { background: #fff; border: 1px solid var(--line); padding: 1.35rem 1.4rem; display: grid; gap: 0.6rem; align-content: start; }
.item-row .spec-top h3 { font-size: 1.2rem; font-stretch: 88%; }
.item-row p { color: var(--slate); font-size: 0.93rem; }
.applies { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; font-size: 0.78rem; color: var(--slate); padding-top: 0.5rem; border-top: 1px solid var(--concrete); }
.applies a, .applies em { font-style: normal; text-decoration: none; border: 1px solid var(--line); padding: 0.12rem 0.45rem; color: var(--ink); }
.applies a:hover { border-color: var(--blue); color: var(--blue); }
.sibling-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sibling-links a { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line); padding: 0.6rem 0.9rem; text-decoration: none; background: #fff; font-weight: 500; }
.sibling-links a svg { width: 18px; height: 18px; color: var(--blue); }
.sibling-links a:hover { border-color: var(--ink); }

/* Shared-group cards on home */
.card-link { text-decoration: none; color: inherit; }
.card h4 a { text-decoration: none; }
.card h4 a:hover { color: var(--blue); }
.card-photo a { display: block; height: 100%; }
.section-foot { margin-top: 2rem; display: flex; justify-content: flex-end; }

/* Generic content */
.page-hero { border-bottom: 1px solid var(--line); }
.page-hero .wrap { padding-block: clamp(3rem, 6vw, 5rem); display: grid; gap: 1rem; }
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 2rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.4rem; margin-top: 1.5em; }

/* Contact Form 7 inside the CTA */
.cta-form { background: #fff; color: var(--ink); padding: clamp(1.25rem, 3vw, 2rem); }
.cta-form .wpcf7-form p { margin: 0 0 1rem; }
.cta-form label { display: grid; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; }
.cta-form label br { display: none; }
.cta-form .wpcf7-form-control-wrap { display: block; }
.cta-form input[type="submit"] { width: auto; min-height: 52px; padding: 0 1.75rem; background: var(--blue); color: #fff; border: 0; font: 600 1rem/1 var(--f-body); cursor: pointer; }
.cta-form input[type="submit"]:hover { background: var(--blue-deep); }
.cta-form .wpcf7-not-valid-tip { color: var(--alert); font-size: 0.8rem; font-weight: 500; margin-top: 0.3rem; }
.cta-form .wpcf7-response-output { margin: 0.5rem 0 0 !important; padding: 0.75rem 1rem !important; font-size: 0.88rem; border-width: 0 0 0 4px !important; background: var(--concrete); }
.cta-form .wpcf7-spinner { margin-left: 0.75rem; }

@media (max-width: 1100px) {
  .pairs, .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega-grid { grid-template-columns: 1fr 1fr; }
  .mega-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .grp-hero .wrap { grid-template-columns: 1fr; }
  .ai-list { grid-template-columns: 1fr; }
  .item-rows { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pairs, .spec-grid { grid-template-columns: 1fr; }
}

/* Language switcher links */
.lang a + a span { border-left: 0; }
.lang a:hover span:not(.on) { color: var(--ink); border-color: var(--ink); }

/* Let the last spec card fill its row instead of leaving grey holes */
.spec-grid > .spec:last-child:nth-child(3n+1) { grid-column: span 3; }
.spec-grid > .spec:last-child:nth-child(3n+2) { grid-column: span 2; }
@media (max-width: 1100px) {
  .spec-grid > .spec:last-child:nth-child(n) { grid-column: auto; }
  .spec-grid > .spec:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 640px) {
  .spec-grid > .spec:last-child:nth-child(odd) { grid-column: auto; }
}