/* Quettio identity layer. Loaded after the original layouts and component demos. */
@font-face {
  font-family: Inter;
  src: url('assets/inter-latin-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/jetbrains-mono-latin-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}
:root {
  --q-orange: #f45f25;
  --q-ink: #121212;
  --q-paper: #f7f6f2;
  --q-sans: Inter, system-ui, sans-serif;
  --q-mono: 'JetBrains Mono', monospace;
  --q-muted: #6b6661;
  --q-line: #dcd8d1;
  --q-orange-soft: #fff0e8;
  --q-radius: 10px;
  --ink: var(--q-ink);
  --paper: var(--q-paper);
  --coral: var(--q-orange);
  --font: var(--q-sans);
  --muted: var(--q-muted);
  --line: var(--q-line);
  --dark-line: #343434;
  --nav-height: 78px;
}
body {
  font-family: var(--q-sans);
  font-size: 16px;
  font-optical-sizing: auto;
  background: var(--q-paper);
  color: var(--q-ink);
}
::selection { background: var(--q-orange); color: var(--q-ink); }
h1, h2, h3 { font-family: var(--q-sans); font-weight: 800; letter-spacing: -.045em; }
.page-intro h1, .dna-hero h1, .contact-intro h1, .method-intro h1 {
  font-weight: 800;
  letter-spacing: -.055em;
}
.page-intro h1 em, .contact-intro h1 em { color: #79736d; font-weight: 600; }
.dna-hero h1 em { color: var(--q-orange); font-weight: 700; }
.manifesto h2, .dna-statement h2, .method-process-intro h2,
.method-roles h2, .dna-faq h2, .dna-uses h2, .dna-example h2 {
  font-weight: 700;
  letter-spacing: -.045em;
}
.closing h2, .section-top h2 { font-weight: 800; letter-spacing: -.045em; }
.service-copy h2 { font-weight: 800; letter-spacing: -.045em; }
.service-copy h3 { font-weight: 700; font-size: 18px; }
.method-mini h3, .principles-grid h3, .uses-list h3, .process-steps h3 {
  font-weight: 700;
  letter-spacing: -.035em;
}
.label, .section-index, .index-note, .service-kicker .label,
.door-num, .breadcrumb, .footer-nav > span, .footer-contact > span {
  font-family: var(--q-mono);
  font-weight: 400;
  letter-spacing: .075em;
}
.label { font-size: 10px; }
.section-index, .index-note, .service-kicker .label { font-size: 10px; }
.breadcrumb { font-size: 11px; }

/* Clear, light navigation; the full-screen mobile menu keeps its dark surface. */
.header {
  height: var(--nav-height);
  color: var(--q-ink);
  background: rgb(247 246 242 / .94);
  border-bottom-color: rgb(18 18 18 / .1);
  backdrop-filter: blur(18px);
}
.nav-desktop { font-size: 13px; font-weight: 700; }
.nav-desktop > a { opacity: .66; }
.nav-desktop > a:hover, .nav-desktop > a[aria-current] { opacity: 1; }
.nav-desktop > a:hover { color: #be3f10; }
.nav-desktop > a[aria-current]:before { top: 9px; }
.header-contact {
  min-height: 42px;
  border-radius: var(--q-radius);
  border-color: var(--q-orange);
  background: var(--q-orange);
  color: var(--q-ink);
  font-size: 12px;
  font-weight: 800;
  padding: 11px 16px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.header-contact > .live-dot { background: var(--q-ink); }
.header-contact:hover, .header-contact[aria-current] {
  color: var(--q-ink);
  border-color: #ff7844;
  background: #ff7844;
}
.header-contact:hover { transform: translateY(-1px); }
.menu-toggle { color: var(--q-ink); }
.menu-toggle > span { font-weight: 700; }
.menu-dialog, .menu-dialog::backdrop { background: var(--q-ink); color: var(--q-paper); }
.menu-dialog .menu-close, .menu-dialog .menu-toggle { color: var(--q-paper); }
.overlay-links > a { font-weight: 800; letter-spacing: -.045em; }
.overlay-links > a:hover { color: var(--q-orange); }
.overlay-links small { font-family: var(--q-mono); }
.menu-bottom a { color: #ff8b5f; }

/* Familiar components, with the orange accent used consistently. */
.button {
  min-height: 50px;
  border-radius: var(--q-radius);
  font-family: var(--q-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.015em;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button-black { background: var(--q-ink); color: white; }
.button-black:hover { background: #32302d; }
.button-coral { background: var(--q-orange); color: var(--q-ink); }
.button-coral:hover { background: #ff7844; }
.button-white { background: var(--q-paper); color: var(--q-ink); }
.button-white:hover { background: white; }
.button-outline-light { border-color: #74716d; border-radius: var(--q-radius); }
.button-outline-light:hover { background: var(--q-orange); border-color: var(--q-orange); color: var(--q-ink); }
.text-link { font-family: var(--q-sans); font-weight: 700; font-size: 13px; letter-spacing: -.015em; }
.text-link:hover { color: #be3f10; }
.dark-section .text-link:hover { color: #ff946d; }
.circle-link:hover { transform: translateY(-2px); }
.circle-link, .round-arrow { transition-duration: .18s; }
.closing > .circle-link { background: var(--q-orange); border-color: var(--q-orange); }
.closing > .circle-link:hover { background: var(--q-ink); border-color: var(--q-ink); }
.solution-jumps { background: rgb(247 246 242 / .96); }
.solution-jumps a { font-size: 12px; font-weight: 600; }
.solution-jumps a[aria-current] { font-weight: 800; }
.solution-jumps a > span { font-family: var(--q-mono); }
.solution-jumps a::after, .reading-progress { background: var(--q-orange); }
.deliverables li::before { color: #be3f10; font-weight: 700; }
.service-section:nth-child(even) { background: #eeece6; }
.dna-example { background: #eeece6; }
.dark-section, .footer { background: var(--q-ink); }
.footer-top > p { font-weight: 700; letter-spacing: -.035em; }
.footer-nav > a { font-size: 13px; }
.footer-contact > a { font-size: 16px; font-weight: 600; }
.footer-nav a:hover, .footer-contact > a:hover, .back-top:hover { color: #ff946d; }
.footer-bottom { font-family: var(--q-mono); }
.dossier-cover { box-shadow: 14px 20px 20px #0005, inset -3px 0 #b54118; }
.dossier-cover > strong { font-weight: 800; letter-spacing: -.045em; }
.dossier-caption { font-family: var(--q-mono); font-size: 9px; }

/* Readable interior copy, without changing the layouts or the embedded demos. */
.manifesto-bottom p, .section-top-split > p, .service-copy > p,
.dna-statement p, .dna-example .split-section > div > p,
.delivery-grid p, .method-mini p, .process-steps p, .principles-grid p,
.method-roles p, .faq-list details > p, .home-dna-copy > p {
  font-size: 14px;
  line-height: 1.85;
}
.dna-hero-grid > div > p, .contact-intro > p { font-size: 15px; line-height: 1.85; }
.deliverables li { font-size: 13px; line-height: 1.8; }
.service-routine { font-size: 12px; line-height: 1.8; }
.uses-list p { font-size: 13px; line-height: 1.85; }
.process-steps small { font-size: 11px; line-height: 1.8; color: #a34220; }
.faq-list summary { font-size: 14px; }
.scope-band p { font-size: 14px; }
.contact-expectation > p { font-size: 13px; }
.brief-panel { border-radius: 14px; border-color: var(--q-line); }
.form-step h2 { font-weight: 700; letter-spacing: -.045em; }
.form-step > p { font-size: 13px; }
.need-options > label { border-radius: 9px; }
.need-options > label:has(input:checked) { background: var(--q-orange-soft); border-color: var(--q-orange); }
.need-options input { accent-color: #d74c16; }
.need-options label > span:nth-child(2) { font-size: 12px; }
.need-options small { font-size: 10px; }
.field-label { font-size: 12px; }
.field-label > input, .field-label > textarea { font-size: 15px; border-radius: 8px; background: #faf9f6; }
.field-label input::placeholder, .field-label textarea::placeholder { color: #807a73; }
.brief-stepper i { font-family: var(--q-mono); }
.form-step .privacy-note { font-size: 11px; line-height: 1.8; }
.summary-status { font-size: 12px; color: #a53b13; }
.summary-tools > button, .back-step { font-size: 11px; font-weight: 600; }
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline-color: var(--q-orange);
}
@media (max-width: 1100px) {
  .header-inner { gap: 25px; }
  .nav-desktop { gap: 24px; font-size: 12px; }
  .header-contact { font-size: 11px; padding-inline: 14px; }
}
@media (max-width: 650px) {
  :root { --nav-height: 73px; }
  .menu-toggle > span { font-size: 11px; }
  .solution-jumps a { font-size: 11px; }
  .manifesto-bottom p, .section-top-split > p, .service-copy > p,
  .dna-statement p, .dna-example .split-section > div > p,
  .delivery-grid p, .method-mini p, .process-steps p, .principles-grid p,
  .method-roles p, .faq-list details > p, .home-dna-copy > p,
  .contact-intro > p { font-size: 14px; line-height: 1.85; }
  .dna-hero-grid > div > p { font-size: 14px; }
  .service-copy h3 { font-size: 18px; }
  .service-routine, .uses-list p { font-size: 13px; }
  .need-options label > span:nth-child(2) { font-size: 12px; }
  .need-options small { font-size: 11px; }
  .field-label > input, .field-label > textarea { font-size: 16px; }
  .form-step > p { font-size: 12px; }
  .footer-contact > a { font-size: 12px; }
  .footer-nav > a { font-size: 13px; }
  .button { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .button:hover, .header-contact, .header-contact:hover,
  .circle-link, .circle-link:hover, .round-arrow, .text-link svg,
  .overlay-links > a, .overlay-links > a:hover { transition: none; transform: none; }
}