/* Shared by clinics.html, consultancies.html and dealerships.html: the same
   tokens and type as index.html, without its 3D hero, so a page found from a
   search for one trade reads as part of the same site. */
:root {
  --paper:   #EFEAE1;
  --paper-2: #E6E0D4;
  --card:    #FBF9F5;
  --ink:     #1B1815;
  --ink-2:   #6E665C;
  --ink-3:   #6E665C;
  --line:    #D9D2C5;
  --accent:  #E2552B;   /* large type, rules, dots */
  --accent-2:#B93B16;
  --accent-text: #B93B16; /* small accent type on paper or card */
  --accent-fill: #C8441C; /* a filled surface with small white type on it */
  --good:    #2E7D5B;
  --shell:   1240px;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; background: var(--paper) }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3 { font-family: "Bebas Neue", Impact, sans-serif; margin: 0; font-weight: 400; line-height: .92; letter-spacing: .005em }
h1 em, h2 em { font-style: normal; color: var(--accent) }
p { margin: 0 } a { color: inherit }
:where(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }
[hidden] { display: none !important }
img { max-width: 100% }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 28px }
.lbl { font-family: "Fragment Mono", monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 }

/* ── nav ── */
.nav { position: sticky; top: 0; z-index: 60; height: 66px; display: flex; align-items: center; background: rgba(239,234,225,.92); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line) }
.nav-in { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 18px }
.mark { font-family: "Bebas Neue", sans-serif; font-size: 25px; letter-spacing: .04em; text-decoration: none }
.mark i { font-style: normal; color: var(--accent) }
.nav-links { display: flex; align-items: center; gap: 24px }
.nav-links > a { color: var(--ink-2); text-decoration: none; font-size: 14px }
.nav-links > a:hover { color: var(--accent) }
.nav-links > a.nav-cta { background: var(--ink); color: var(--paper); padding: 10px 16px; font-family: "Fragment Mono", monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap }
.nav-links > a.nav-cta:hover { background: var(--accent-fill); color: var(--paper) }
.langs { display: flex; align-items: center; gap: 2px }
.langs a { font-family: "Fragment Mono", monospace; font-size: 11px; letter-spacing: .06em; padding: 6px 5px; text-decoration: none; color: var(--ink-3); border-bottom: 2px solid transparent }
.langs a:hover { color: var(--ink) }
.langs a.on { color: var(--accent-text); border-bottom-color: var(--accent) }
@media (max-width: 860px) { .nav-links > a:not(.nav-cta) { display: none } }
@media (max-width: 600px) { .nav-links .langs { display: none } .nav-in { gap: 10px } }

/* ── hero: the pitch on the left, one conversation on the right ── */
.hero { padding: 72px 0 88px; border-bottom: 1px solid var(--line) }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center }
@media (max-width: 960px) { .hero-in { grid-template-columns: 1fr; gap: 44px } .hero { padding: 48px 0 64px } }
.kicker { font-family: "Fragment Mono", monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 18px }
.kicker::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 10px; vertical-align: 1px }
.hero h1 { font-size: clamp(2.8rem, 1.4rem + 3.8vw, 5rem); max-width: 16ch }
.lede { margin-top: 20px; color: var(--ink-2); font-size: 17px; max-width: 50ch }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px }
.btn { display: inline-flex; align-items: center; padding: 13px 21px; font-family: "Fragment Mono", monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; cursor: pointer }
.btn-go { background: var(--accent-fill); color: #fff } .btn-go:hover { background: var(--accent-2) }
.btn-out { border-color: var(--ink); color: var(--ink) } .btn-out:hover { background: var(--ink); color: var(--paper) }

/* the example conversation: the customer's words as written, a translation
   for the team under each, and what NovusAI recorded at the end */
.chat { background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(27,24,21,.06), 0 18px 40px rgba(27,24,21,.10) }
.chat-head { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-family: "Fragment Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3) }
.chat-head b { color: var(--accent-text); font-weight: 400 }
.chat-body { padding: 20px; display: grid; gap: 14px }
.msg { max-width: 86%; display: grid; gap: 6px }
.msg.them { justify-self: start }
.msg.us { justify-self: end }
.bubble { padding: 11px 15px; border-radius: 14px; font-size: 15px; line-height: 1.45 }
.them .bubble { background: var(--paper); border-bottom-left-radius: 4px }
.us .bubble { background: var(--accent-fill); color: #fff; border-bottom-right-radius: 4px }
.bubble[dir="rtl"] { text-align: right }
.gloss { font-size: 12.5px; color: var(--ink-2); line-height: 1.4 }
.us .gloss { text-align: right }
.gloss b { font-family: "Fragment Mono", monospace; font-weight: 400; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px }
.chat-foot { border-top: 1px solid var(--line); padding: 14px 20px; display: flex; flex-wrap: wrap; gap: 8px }
.tag { font-family: "Fragment Mono", monospace; font-size: 11.5px; padding: 5px 10px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; color: var(--ink) }
.tag.good { border-color: rgba(46,125,91,.35); color: var(--good); background: #EAF3EE }

/* ── plain sections ── */
.sec { padding: 96px 0; border-bottom: 1px solid var(--line) }
@media (max-width: 760px) { .sec { padding: 64px 0 } }
.sec-head h2 { font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4rem); margin-top: 12px; max-width: 20ch }
.sec-head p { margin-top: 16px; color: var(--ink-2); max-width: 58ch }

.does { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--line); gap: 1px }
@media (max-width: 1000px) { .does { grid-template-columns: 1fr 1fr } }
@media (max-width: 640px) { .does { grid-template-columns: 1fr } }
.does article { background: var(--card); padding: 28px 26px; display: flex; flex-direction: column; gap: 10px }
.does .k { font-family: "Fragment Mono", monospace; font-size: 11px; letter-spacing: .14em; color: var(--accent-text) }
.does h3 { font-size: 30px }
.does p { color: var(--ink-2); font-size: 15.2px }

/* the trade's own words, from its pack: stages, record, documents, bookings */
.words { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
@media (max-width: 860px) { .words { grid-template-columns: 1fr } }
.words > div { background: var(--card); border: 1px solid var(--line); padding: 26px }
.words .wide { grid-column: 1 / -1 }
.words h3 { font-size: 26px; margin: 8px 0 14px }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.flow .tag + .tag::before { content: "→"; margin-right: 8px; color: var(--accent) }
.flow .tag { border: 0; background: none; padding: 0; font-size: 13px }
.flow .stage { border: 1px solid var(--line); background: var(--paper); padding: 6px 12px; border-radius: 999px }
.list { list-style: none; margin: 0; padding: 0 }
.list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px }
.list li:first-child { border-top: 0 }
.list li span:last-child { color: var(--ink-2); text-align: right; font-family: "Fragment Mono", monospace; font-size: 12.5px }
.words .note { margin-top: 0 }
.note { margin-top: 15px; font-size: 13px; color: var(--ink-3); max-width: 64ch }

.shot { margin: 44px 0 0 }
.shot a { display: block; background: var(--paper-2); border: 1px solid var(--line); padding: clamp(8px, 1.6vw, 18px) }
.shot img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 1px 2px rgba(27,24,21,.08), 0 12px 32px rgba(27,24,21,.12) }
.shot figcaption { margin-top: 14px; color: var(--ink-2); font-size: 15px; max-width: 70ch }

.math { background: var(--ink); color: var(--paper); border-bottom: 0 }
.math .lbl { color: rgba(239,234,225,.6) }
.math-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end }
@media (max-width: 860px) { .math-in { grid-template-columns: 1fr; gap: 28px } }
.math h2 { font-size: clamp(2.2rem, 1.3rem + 3vw, 3.6rem); margin-top: 12px; max-width: 24ch }
.math h2 b { font-weight: 400; color: #FF8A63 }
.math p { margin-top: 16px; color: rgba(239,234,225,.76); max-width: 56ch }
.math .btn-out { border-color: var(--paper); color: var(--paper) } .math .btn-out:hover { background: var(--paper); color: var(--ink) }

.faq { margin-top: 36px; border-top: 1px solid var(--line); max-width: 860px }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-size: 18px; font-weight: 500 }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-family: "Fragment Mono", monospace; font-size: 20px; color: var(--accent) }
.faq details[open] summary::after { content: "−" }
.faq details p { padding: 0 40px 22px 0; color: var(--ink-2); max-width: 70ch }

/* ── footer: the same as the homepage's ── */
.foot { background: var(--paper-2); padding: 52px 0 62px; border-top: 1px solid var(--line) }
.foot-in { display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap }
.foot p { font-size: 13.6px; color: var(--ink-3); max-width: 44ch }
.foot .identity { margin-top: 8px } .foot .identity:empty { display: none }  /* filled from site.json */
.foot a { color: var(--accent-text) }
.foot .btn { text-decoration: none }
.foot .btn-go, .foot .btn-go:hover { color: #fff }
.foot .langs { margin: 14px 0 0 -5px }
.foot .langs a { color: var(--ink-3) }
.foot .langs a.on { color: var(--accent-text) }
.foot-cta { min-width: 260px }
.foot-cta h3 { font-size: 30px; line-height: .95; margin: 0 0 8px; color: var(--ink) }
.foot-cta p { margin: 0 0 14px; color: var(--ink-2); max-width: 30ch }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }