/* Palette sampled from oasiselectrical.com.au + the Oasis logo:
     navy #073763/#0B5394 · cyan #29ABE2/#3D85C6 · orange #F15A31 · green #39B54A */
  :root {
    --navy-900: #05233d; --navy-800: #073763; --navy-700: #0b5394;
    --cyan: #29abe2; --blue: #3d85c6; --orange: #f15a31; --green: #39b54a;
    --ground: var(--navy-900); --panel: #0a2c4b; --panel-2: #0e3557;
    --text: #eaf2f8; --muted: #9db6c9; --faint: #6b8aa3;
    --hair: rgba(157,182,201,.20); --hair-strong: rgba(157,182,201,.34);
    --accent: var(--cyan); --hot: var(--orange);
    --sans: "PT Sans", "Segoe UI", "Trebuchet MS", Tahoma, Verdana, sans-serif;
    --narrow: "PT Sans Narrow", "PT Sans", "Segoe UI", Tahoma, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
    --maxw: 1160px;
  }
  @media (prefers-color-scheme: light) {
    :root { --ground:#f4f7fa; --panel:#fff; --panel-2:#eef4f9; --text:#07243f; --muted:#4d6b85; --faint:#7e97ac;
            --hair:rgba(7,55,99,.14); --hair-strong:rgba(7,55,99,.26); --accent:#0b5394; --hot:#d94a22; }
  }
  :root[data-theme="dark"] {
    --ground: var(--navy-900); --panel:#0a2c4b; --panel-2:#0e3557; --text:#eaf2f8; --muted:#9db6c9; --faint:#6b8aa3;
    --hair:rgba(157,182,201,.20); --hair-strong:rgba(157,182,201,.34); --accent:var(--cyan); --hot:var(--orange);
  }
  :root[data-theme="light"] {
    --ground:#f4f7fa; --panel:#fff; --panel-2:#eef4f9; --text:#07243f; --muted:#4d6b85; --faint:#7e97ac;
    --hair:rgba(7,55,99,.14); --hair-strong:rgba(7,55,99,.26); --accent:#0b5394; --hot:#d94a22;
  }

  * { box-sizing: border-box; }
  body { margin: 0; }
  /* overflow-x: clip (not hidden) stops sideways scroll WITHOUT making .site a scroll container —
     'hidden' would, which silently breaks the sticky header inside it. */
  .site { background: var(--ground); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
  a { color: inherit; }
  h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.015em; font-weight: 700; line-height: 1.08; }
  p { margin: 0; }

  .eyebrow { font-family: var(--narrow); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: .6em; font-weight: 700; }
  .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--accent); }
  .eyebrow.hot { color: var(--hot); } .eyebrow.hot::before { background: var(--hot); }
  .eyebrow.green { color: var(--green); } .eyebrow.green::before { background: var(--green); }

  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .brand svg.mark { width: 40px; height: 30px; display: block; flex: none; }
  .brand .wordmark { display: flex; flex-direction: column; line-height: 1; }
  .brand .wordmark b { font-weight: 700; font-size: 1.16rem; letter-spacing: .04em; color: var(--text); }
  .brand .wordmark i { font-family: var(--narrow); font-style: normal; font-size: .62rem; letter-spacing: .3em; color: var(--muted); margin-top: 2px; }

  /* The header is sticky, so an anchor jump lands the target underneath it. Offset every anchor
     target by a bit more than the header's height — applies to #services, #work, #gallery,
     #contact-form and the rest, not just one of them. */
  [id] { scroll-margin-top: 96px; }
  header.top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); }
  .topbar { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }
  nav.links { display: flex; gap: 24px; align-items: center; }
  nav.links a { font-family: var(--narrow); font-size: .94rem; letter-spacing: .04em; text-decoration: none; color: var(--muted); transition: color .15s; }
  nav.links a:hover { color: var(--accent); }
  .nav-toggle { display: none; background: transparent; border: 1px solid var(--hair-strong); color: var(--text); width: 44px; height: 40px; border-radius: 3px; cursor: pointer; align-items: center; justify-content: center; flex: none; }
  .nav-toggle svg { width: 22px; height: 22px; display: block; }
  @media (max-width: 1020px){
    nav.links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--ground); border-bottom: 1px solid var(--hair); box-shadow: 0 12px 30px rgba(0,0,0,.28); padding: 4px 0; }
    nav.links.open { display: flex; }
    nav.links a { padding: 13px 28px; font-size: 1rem; border-top: 1px solid var(--hair); }
    nav.links a:first-child { border-top: 0; }
    .nav-toggle { display: inline-flex; }
    .topbar .btn-primary { padding: 9px 14px; }
  }

  /* Dropdown groups in the primary nav. Desktop: hover or keyboard focus opens.
     Mobile: the whole group is expanded inline, because a hover menu inside a
     tap-to-open panel is a trap on a phone. */
  nav.links .group { position: relative; }
  nav.links .group > .grp-btn { font-family: var(--narrow); font-size: .94rem; letter-spacing: .04em; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .35em; transition: color .15s; }
  nav.links .group > .grp-btn:hover, nav.links .group[data-open="1"] > .grp-btn { color: var(--accent); }
  nav.links .group > .grp-btn svg { width: 11px; height: 11px; opacity: .7; }
  nav.links .menu { position: absolute; top: calc(100% + 14px); left: -16px; min-width: 232px; background: var(--panel); border: 1px solid var(--hair-strong); border-radius: 3px; box-shadow: 0 16px 38px rgba(0,0,0,.34); padding: 6px 0; display: none; flex-direction: column; gap: 0; }
  nav.links .group:hover .menu, nav.links .group:focus-within .menu { display: flex; }
  nav.links .group.open .menu { display: flex; }
  nav.links .menu a { padding: 10px 18px; white-space: nowrap; }
  @media (max-width: 1020px){
    nav.links .group { display: flex; flex-direction: column; }
    nav.links .group > .grp-btn { padding: 13px 28px; border-top: 1px solid var(--hair); justify-content: flex-start; font-size: 1rem; }
    nav.links .group > .grp-btn svg { display: none; }
    nav.links .menu { display: flex; position: static; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 0; }
    nav.links .menu a { padding-left: 44px; color: var(--faint); }
  }

  /* Links from the homepage to every service page. The homepage carries whatever
     authority this site has; before this it linked to none of them, so none of it
     reached the pages we want ranking. Generated by build-site.mjs. */
  .svc-index { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--hair); }
  .svc-index h3 { font-family: var(--narrow); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin: 0 0 16px; }
  .svc-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
  .svc-index a { color: var(--muted); text-decoration: none; font-size: .96rem; border-bottom: 1px solid transparent; transition: .15s; }
  .svc-index a:hover { color: var(--accent); border-bottom-color: var(--accent); }

  .btn { font-size: .86rem; font-weight: 700; padding: 11px 18px; border-radius: 2px; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5em; border: 1px solid transparent; transition: .16s; }
  .btn-primary { background: var(--accent); color: #04223c; }
  :root[data-theme="light"] .btn-primary { color: #fff; }
  @media (prefers-color-scheme: light) { :root:not([data-theme]) .btn-primary { color: #fff; } }
  .btn-primary:hover { filter: brightness(1.1); }
  .btn-ghost { border-color: var(--hair-strong); color: var(--text); }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

  /* The Facade Oasis footage drops in here on deploy as a muted, looping <video> layer. */
  .hero { padding: 92px 0 74px; border-bottom: 1px solid var(--hair); }
  .hero-grid { display: grid; grid-template-columns: 1.3fr .95fr; gap: 54px; align-items: end; }
  @media (max-width: 900px){ .hero-grid { grid-template-columns: 1fr; gap: 34px; } }
  .hero h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); margin: 22px 0 0; }
  .hero h1 .hl { color: var(--hot); }
  .lede { color: var(--muted); font-size: 1.1rem; max-width: 36ch; }
  .hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
  .facts { border-left: 2px solid var(--accent); padding-left: 24px; margin-top: 26px; display: grid; gap: 14px; }
  .facts .k { font-family: var(--narrow); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
  .facts .v { font-weight: 700; font-size: .98rem; margin-top: 2px; }

  section { padding: 78px 0; border-bottom: 1px solid var(--hair); }
  .sec-head { max-width: 64ch; margin-bottom: 42px; }
  .sec-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-top: 16px; }
  .sec-head p { color: var(--muted); margin-top: 16px; font-size: 1.05rem; }

  .spec { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--hair); background: var(--panel); }
  @media (max-width: 860px){ .spec { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 560px){ .spec { grid-template-columns: 1fr; } }
  .cell { padding: 26px 24px 30px; border-right: 1px solid var(--hair); border-top: 1px solid var(--hair); transition: background .18s; }
  .cell:hover { background: var(--panel-2); }
  .spec .cell:nth-child(-n+3){ border-top: 0; }
  .cell .idx { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--accent); }
  .cell h3 { font-size: 1.12rem; margin: 0 0 8px; }
  .cell p { color: var(--muted); font-size: .93rem; }

  .index { columns: 3; column-gap: 44px; }
  @media (max-width: 860px){ .index { columns: 2; } }
  @media (max-width: 520px){ .index { columns: 1; } }
  .index .i { break-inside: avoid; padding: 10px 0 10px 16px; border-left: 2px solid var(--hair); font-size: .95rem; margin-bottom: 2px; transition: border-color .15s; }
  .index .i:hover { border-left-color: var(--accent); }

  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
  @media (max-width: 880px){ .split { grid-template-columns: 1fr; gap: 34px; } }

  .cases { display: grid; gap: 20px; }
  .case { border: 1px solid var(--hair); background: var(--panel); display: grid; grid-template-columns: 1fr 1fr; }
  @media (max-width: 880px){ .case { grid-template-columns: 1fr; } }
  /* Optional full-width photo banner across the top of a case study (first child spans both columns). */
  .case-img { grid-column: 1 / -1; height: 200px; overflow: hidden; border-bottom: 1px solid var(--hair); margin: 0; }
  .case-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .case-main { padding: 32px; }
  .case-side { padding: 32px; border-left: 1px solid var(--hair); background: var(--panel-2); }
  @media (max-width: 880px){ .case-side { border-left: 0; border-top: 1px solid var(--hair); } }
  .case .tag { font-family: var(--narrow); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hot); font-weight: 700; }
  .case h3 { font-size: 1.5rem; margin: 10px 0 4px; }
  .case .sub { font-family: var(--mono); font-size: .68rem; color: var(--faint); letter-spacing: .04em; }
  .case .q { font-family: var(--narrow); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 22px 0 8px; font-weight: 700; }
  .case p { color: var(--muted); font-size: .95rem; }
  .case ul { list-style: none; padding: 0; margin: 0; }
  .case li { padding: 11px 0; border-top: 1px solid var(--hair); font-size: .92rem; display: flex; justify-content: space-between; gap: 12px; }
  .case li:first-child { border-top: 0; }
  .case li span { font-family: var(--mono); font-size: .66rem; color: var(--faint); align-self: center; text-align: right; }
  .outcome { margin-top: 22px; padding: 16px 18px; border-left: 3px solid var(--green); background: rgba(57,181,74,.07); }
  .outcome .k { font-family: var(--narrow); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); font-weight: 700; }
  .outcome p { color: var(--text); font-size: .94rem; margin-top: 5px; }

  .clients { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--hair); }
  @media (max-width: 900px){ .clients { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 480px){ .clients { grid-template-columns: 1fr; } }
  .client { padding: 20px; border-right: 1px solid var(--hair); border-top: 1px solid var(--hair); transition: background .16s; }
  .client:hover { background: var(--panel-2); }
  .clients .client:nth-child(-n+4){ border-top: 0; }
  .client b { font-size: .95rem; font-weight: 700; display: block; }
  .client span { font-family: var(--mono); font-size: .64rem; color: var(--faint); }

  .band { background: var(--panel); }
  .band .split { align-items: center; }
  .cobrand { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
  .badge { font-family: var(--narrow); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--hair-strong); padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; }
  .badge b { font-family: var(--sans); font-size: .96rem; letter-spacing: 0; color: var(--text); text-transform: none; }
  .kv { list-style: none; padding: 0; margin: 0; }
  .kv li { padding: 11px 0; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; font-size: .92rem; gap: 12px; }
  .kv li span { font-family: var(--mono); font-size: .66rem; color: var(--faint); align-self: center; }

  .sectors { display: grid; grid-template-columns: repeat(6,1fr); border: 1px solid var(--hair); }
  @media (max-width: 980px){ .sectors { grid-template-columns: repeat(3,1fr); } }
  @media (max-width: 620px){ .sectors { grid-template-columns: repeat(2,1fr); } }
  .sector { padding: 22px 18px; border-right: 1px solid var(--hair); border-top: 1px solid var(--hair); }
  .sectors .sector:nth-child(-n+6){ border-top: 0; }
  .sector .t { font-weight: 700; font-size: .94rem; }
  .sector .d { color: var(--muted); font-size: .8rem; margin-top: 6px; }

  .cta-card { border: 1px solid var(--hair); background: var(--panel); padding: 30px; }
  .cta-card .k { font-family: var(--narrow); font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; color: var(--faint); }
  .cta-card .big { font-size: 1.2rem; font-weight: 700; margin: 6px 0 18px; }
  .cta-card a.mail { color: var(--accent); text-decoration: none; }
  .cta-card a.mail:hover { text-decoration: underline; }
  .cta-row { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
  .contact h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
  .contact .lead-line { color: var(--muted); font-size: 1.06rem; margin-top: 18px; max-width: 36ch; }

  /* ---------- callback form ---------- */
  .field { margin-bottom: 14px; }
  .field label { display: block; font-family: var(--narrow); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
  .field label .req { color: var(--hot); }
  .field input, .field textarea {
    width: 100%; font-family: var(--sans); font-size: .95rem; color: var(--text);
    background: var(--ground); border: 1px solid var(--hair-strong); border-radius: 2px;
    padding: 10px 12px; transition: border-color .15s;
  }
  .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
  .field textarea { resize: vertical; min-height: 84px; }
  .field.invalid input, .field.invalid textarea { border-color: var(--hot); }
  .field .err { color: var(--hot); font-size: .78rem; margin-top: 4px; display: none; }
  .field.invalid .err { display: block; }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 520px){ .row2 { grid-template-columns: 1fr; } }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form-note { font-size: .78rem; color: var(--faint); margin-top: 12px; }
  .form-msg { font-size: .86rem; margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--hot); background: rgba(241,90,49,.08); color: var(--text); display: none; }
  .form-msg.show { display: block; }
  .done { text-align: left; }
  .done .tick { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--green); color: var(--green); display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 16px; }
  .done h3 { font-size: 1.3rem; margin-bottom: 8px; }
  .done p { color: var(--muted); font-size: .95rem; }
  .preview-tag { margin-top: 14px; font-family: var(--mono); font-size: .68rem; color: var(--faint); border-top: 1px solid var(--hair); padding-top: 12px; }

  /* ---------- process strip (numbering encodes a real sequence) ---------- */
  .steps { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--hair); background: var(--panel); }
  @media (max-width: 980px){ .steps { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 560px){ .steps { grid-template-columns: 1fr; } }
  .step { padding: 26px 22px 30px; border-right: 1px solid var(--hair); border-top: 1px solid var(--hair); position: relative; }
  .steps .step:nth-child(-n+5){ border-top: 0; }
  .step .n { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--accent); }
  .step h3 { font-size: 1.04rem; margin: 12px 0 8px; }
  .step p { color: var(--muted); font-size: .88rem; }
  .step .flag { display: inline-block; margin-top: 12px; font-family: var(--narrow); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green); border: 1px solid var(--green); padding: 3px 8px; }

  /* ---------- FAQ ---------- */
  .faq { border-top: 1px solid var(--hair); max-width: 74ch; }
  .faq-item { padding: 22px 0; border-bottom: 1px solid var(--hair); }
  .faq-item dt { font-size: 1.02rem; font-weight: 700; }
  .faq-item dd { margin: 8px 0 0; color: var(--muted); font-size: .93rem; }

  /* ---------- specialisms ---------- */
  .specialisms { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
  @media (max-width: 940px){ .specialisms { grid-template-columns: 1fr; } }
  .sp { border: 1px solid var(--hair); background: var(--panel); padding: 28px; display: flex; flex-direction: column; }
  .sp h3 { font-size: 1.24rem; margin: 12px 0 8px; }
  .sp > p { color: var(--muted); font-size: .93rem; }
  .sp ul { list-style: none; padding: 0; margin: 16px 0 0; }
  .sp li { padding: 9px 0; border-top: 1px solid var(--hair); font-size: .9rem; color: var(--muted); }
  .sp .partners { margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { font-family: var(--narrow); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--hair-strong); padding: 7px 10px; color: var(--muted); }
  .chip b { font-family: var(--sans); text-transform: none; letter-spacing: 0; color: var(--text); font-size: .84rem; }
  .sp .link { margin-top: 14px; font-size: .88rem; }
  .sp .link a { color: var(--accent); text-decoration: none; font-weight: 700; }
  .sp .link a:hover { text-decoration: underline; }

  /* ---------- gallery ---------- */
  .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
  .filter { font-family: var(--narrow); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--hair-strong); background: transparent; color: var(--muted); cursor: pointer; border-radius: 2px; transition: .15s; }
  .filter:hover { border-color: var(--accent); color: var(--accent); }
  .filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #04223c; font-weight: 700; }
  :root[data-theme="light"] .filter[aria-pressed="true"] { color: #fff; }
  @media (prefers-color-scheme: light) { :root:not([data-theme]) .filter[aria-pressed="true"] { color: #fff; } }
  /* Fixed row height rather than per-tile aspect-ratio: a double-width tile would otherwise be
     twice as tall as its neighbours and leave ragged holes in every row it appears in. Wide tiles
     take 2x2 so they stay roughly 4:3 and the rows always fill. */
  .grid-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; grid-auto-rows: 208px; }
  @media (max-width: 940px){ .grid-g { grid-template-columns: repeat(2,1fr); grid-auto-rows: 190px; } }
  @media (max-width: 520px){ .grid-g { grid-template-columns: 1fr; grid-auto-rows: 240px; } }
  .tile { position: relative; height: 100%; border: 1px solid var(--hair); background: var(--panel-2); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
  /* Uniform tiles — an even grid reads tidier than a mosaic, especially in the "All" view where
     mixed-size tiles from different categories interleave. (.wide kept as a no-op so the markup and
     any category-only future use still parse.) */
  .tile.wide { grid-column: auto; grid-row: auto; }
  .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Placeholder shown until the real photo is dropped in on deploy. */
  .tile .ph { position: absolute; inset: 0; display: grid; place-items: center;
    background-image: linear-gradient(135deg, var(--hair) 25%, transparent 25%, transparent 50%, var(--hair) 50%, var(--hair) 75%, transparent 75%);
    background-size: 12px 12px; opacity: .5; }
  .tile .cap { position: relative; padding: 14px; background: linear-gradient(to top, var(--panel) 60%, transparent); }
  .tile .cap b { display: block; font-size: .9rem; font-weight: 700; }
  .tile .cap span { font-family: var(--mono); font-size: .64rem; color: var(--faint); }
  .gal-note { font-size: .8rem; color: var(--faint); margin-top: 18px; font-family: var(--mono); }

  footer.foot { padding: 40px 0; }
  .foot-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
  .foot-in .c { font-family: var(--mono); font-size: .7rem; color: var(--faint); }
  .socials { display: flex; gap: 8px; }
  .socials a { width: 36px; height: 36px; border: 1px solid var(--hair-strong); display: grid; place-items: center; color: var(--muted); transition: .15s; border-radius: 2px; }
  .socials a:hover { border-color: var(--accent); color: var(--accent); }
  .socials svg { width: 17px; height: 17px; fill: currentColor; }

  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; transition: none; } }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* ---------- chat assistant widget ---------- */
  .chat-fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 9px;
    background: var(--accent); color: #04223c; border: none; border-radius: 999px; padding: 13px 18px; cursor: pointer;
    font-family: var(--narrow); font-size: .95rem; font-weight: 700; letter-spacing: .03em; box-shadow: 0 8px 24px rgba(0,0,0,.28); transition: transform .15s, box-shadow .15s; }
  :root[data-theme="light"] .chat-fab { color: #fff; }
  @media (prefers-color-scheme: light){ :root:not([data-theme]) .chat-fab { color: #fff; } }
  .chat-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.34); }
  .chat-fab svg { width: 20px; height: 20px; fill: currentColor; }
  .chat-fab[hidden] { display: none; }

  .chat-panel { position: fixed; right: 20px; bottom: 20px; z-index: 91; width: min(380px, calc(100vw - 32px));
    height: min(560px, calc(100vh - 40px)); background: var(--panel); border: 1px solid var(--hair-strong);
    border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.4); display: flex; flex-direction: column; overflow: hidden; }
  .chat-panel[hidden] { display: none; }
  .chat-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: var(--panel-2); border-bottom: 1px solid var(--hair); }
  .chat-head .dot { width: 9px; height: 9px; border-radius: 50%; background: #39b54a; flex: none; }
  .chat-head b { font-size: .95rem; }
  .chat-head .sub { display: block; font-family: var(--mono); font-size: .62rem; color: var(--faint); letter-spacing: .04em; text-transform: uppercase; }
  .chat-head .x { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 0 4px; }
  .chat-head .x:hover { color: var(--text); }
  .chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
  .chat-msg { max-width: 84%; padding: 10px 13px; border-radius: 13px; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
  .chat-msg.bot { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--hair); border-bottom-left-radius: 4px; }
  .chat-msg.me { align-self: flex-end; background: var(--accent); color: #04223c; border-bottom-right-radius: 4px; }
  :root[data-theme="light"] .chat-msg.me { color: #fff; }
  @media (prefers-color-scheme: light){ :root:not([data-theme]) .chat-msg.me { color: #fff; } }
  .chat-msg.typing { color: var(--faint); font-style: italic; }
  .chat-foot { border-top: 1px solid var(--hair); padding: 10px; display: flex; gap: 8px; align-items: flex-end; }
  .chat-foot textarea { flex: 1; resize: none; background: var(--ground); color: var(--text); border: 1px solid var(--hair-strong);
    border-radius: 9px; padding: 9px 11px; font: inherit; font-size: .9rem; max-height: 96px; }
  .chat-foot button { flex: none; background: var(--accent); color: #04223c; border: none; border-radius: 9px; padding: 0 15px; height: 38px; font-weight: 700; cursor: pointer; }
  :root[data-theme="light"] .chat-foot button { color: #fff; }
  @media (prefers-color-scheme: light){ :root:not([data-theme]) .chat-foot button { color: #fff; } }
  .chat-foot button:disabled { opacity: .5; cursor: default; }
  .chat-note { padding: 0 16px 10px; font-size: .68rem; color: var(--faint); font-family: var(--mono); }
  @media (prefers-reduced-motion: reduce){ .chat-fab { transition: none; } }

  .partner-strip { margin-top:44px; display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; }
  .partner-logos { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:22px; padding-top:22px; border-top:1px solid var(--hair); }
  @media (max-width: 760px) { .partner-strip { grid-template-columns:1fr; } }
  .related-card { margin-top:34px; padding:22px 24px; border:1px solid var(--hair-strong); border-left:3px solid var(--accent); }
  .related-card .k { font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
  .related-card p { color:var(--muted); margin-top:10px; }
  .related-card .btn { margin-top:16px; }
  .crumb { font-family: var(--mono); font-size: .74rem; color: var(--faint); margin-bottom: 14px; }
  .crumb a { color: var(--faint); text-decoration: none; } .crumb a:hover { color: var(--accent); }