/* Base reset (matches the approved preview) */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
section[id], [id="contact-form"] { scroll-margin-top: 90px; }

/* Layout: light "architecture blueprint" — wide hero with a live-looking org schematic, then calm sections on a cool paper ground */
:root {
  --bg: #f3f5f6;
  --surface: #ffffff;
  --ink: #12171d;
  --muted: #59636e;
  --line: #dde2e6;
  --amber: #e2a300;
  --amber-ink: #7d5900;
  --deep: #12171d;
  --on-deep: #f3f5f6;
  --ok: #1f8a4c;
  --warn: #b26a00;
  --bad: #c0392b;
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1317; --surface: #171c22; --ink: #eef1f3; --muted: #9aa4ae; --line: #262d35;
    --amber: #f2b929; --amber-ink: #f2b929; --deep: #1b2128; --on-deep: #eef1f3; --ok: #3ccf7a; --warn: #f2a93b; --bad: #ff6b5e; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1317; --surface: #171c22; --ink: #eef1f3; --muted: #9aa4ae; --line: #262d35;
  --amber: #f2b929; --amber-ink: #f2b929; --deep: #1b2128; --on-deep: #eef1f3; --ok: #3ccf7a; --warn: #f2a93b; --bad: #ff6b5e; color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--display); font-size: 17px; line-height: 1.6; }
a { color: inherit; }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 20px; }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; max-width: 62ch; }
.label { font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-ink); }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* Header */
header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; }
.mark { width: 26px; height: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; transform: rotate(45deg); }
.mark i { background: var(--amber); border-radius: 2px; }
.mark i:nth-child(2), .mark i:nth-child(3) { background: var(--muted); opacity: .55; }
.logo small { font-weight: 500; font-size: .85rem; color: var(--muted); letter-spacing: 0; }
nav { display: flex; gap: 24px; margin-left: auto; }
nav a { text-decoration: none; font-size: .95rem; color: var(--muted); font-weight: 500; }
nav a:hover { color: var(--ink); }
.btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 6px; font-weight: 600; font-size: .95rem; text-decoration: none; border: 1.5px solid var(--ink); transition: transform .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.amber { background: var(--amber); border-color: var(--amber); color: #12171d; }
.btn.ghost { color: var(--ink); background: transparent; }
.t-short { display: none; }
@media (max-width: 480px) { .t-long { display: none; } .t-short { display: inline; } .logo small { display: none; } }
.hdr-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .15s ease; }
.theme-toggle:hover { border-color: var(--amber); }
.theme-toggle .i-sun { display: none; }
.theme-toggle.is-dark .i-sun { display: block; }
.theme-toggle.is-dark .i-moon { display: none; }
.menu-btn { display: none; width: 38px; height: 38px; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.menu-btn path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: transform .2s ease, opacity .2s ease; transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .l1 { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .l2 { opacity: 0; }
.menu-btn[aria-expanded="true"] .l3 { transform: translateY(-5px) rotate(-45deg); }
nav a[href="#testimonials"], nav a[href="#faq"], nav a[href="#contact"] { display: none; }
@media (max-width: 820px) {
  .bar { position: relative; }
  .menu-btn { display: grid; }
  .hdr-actions { margin-left: auto; gap: 8px; } .hdr-actions .btn { padding: 10px 16px; font-size: .85rem; } .theme-toggle { width: 38px; height: 38px; }
  nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 20px 16px; box-shadow: 0 20px 30px -20px rgba(18,23,29,.3); }
  nav.open { display: flex; }
  nav a, nav a[href="#testimonials"], nav a[href="#faq"], nav a[href="#contact"] { display: block; padding: 14px 0; font-size: 1.05rem; color: var(--ink); border-bottom: 1px solid var(--line); }
  nav a:last-child { border-bottom: 0; }
}

section { padding-block: 88px; }
.head { display: grid; gap: 14px; margin-bottom: 48px; }

/* Hero */
.hero { padding-block: 72px 64px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero > * { min-width: 0; }
.hero .lead { font-size: 1.2rem; color: var(--muted); }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--amber) 45%, transparent) 62%); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 48px; } }

/* Schematic */
.schema { background: var(--deep); color: var(--on-deep); border-radius: 10px; padding: 26px; font-family: var(--mono); font-size: .82rem; box-shadow: 0 30px 60px -30px rgba(18,23,29,.45); }
.schema-top { display: flex; justify-content: space-between; gap: 12px; color: color-mix(in srgb, var(--on-deep) 60%, transparent); margin-bottom: 22px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.dots { display: flex; gap: 6px; } .dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--on-deep) 25%, transparent); }
.node { border: 1px solid color-mix(in srgb, var(--on-deep) 18%, transparent); border-radius: 6px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.node b { font-weight: 500; }
.node span { color: color-mix(in srgb, var(--on-deep) 55%, transparent); font-size: .74rem; white-space: nowrap; }
.node.key { border-color: #f2b929; }
.node.key b { color: #f2b929; }
.link { height: 22px; margin-left: 22px; border-left: 1px dashed color-mix(in srgb, var(--on-deep) 35%, transparent); }
.schema-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--on-deep) 14%, transparent); display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border-radius: 999px; padding: 4px 10px; font-size: .7rem; background: color-mix(in srgb, var(--on-deep) 10%, transparent); }

/* Hero report */
.report { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(18,23,29,.35); }
.report-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.report-top b { font-size: 1.05rem; }
.report-top span { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 3px 8px; border-radius: 4px; }
.report .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 22px; border-bottom: 1px solid var(--line); font-size: .98rem; }
.pill { font-family: var(--mono); font-size: .74rem; font-weight: 500; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.pill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.pill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.pill.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.report-foot { display: block; padding: 15px 22px; font-size: .9rem; font-weight: 600; color: var(--amber-ink); text-decoration: none; }
.report-foot:hover { text-decoration: underline; }
/* Hero portrait */
.hero-portrait { position: relative; margin: 0; justify-self: center; width: 100%; max-width: 400px; }
.hp-img { aspect-ratio: 4/5; border-radius: 200px 200px 12px 12px; overflow: hidden; background: #1a1d21; box-shadow: 0 30px 60px -30px rgba(18,23,29,.5); }
.hp-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.18); display: block; }
.hp-card { position: absolute; left: -20px; bottom: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; display: grid; gap: 2px; box-shadow: 0 12px 30px -16px rgba(18,23,29,.35); }
.hp-card b { font-size: 1rem; }
.hp-card span { font-size: .8rem; color: var(--muted); }
.hp-badge { position: absolute; right: -16px; top: 36px; background: var(--amber); color: #12171d; border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 12px 30px -16px rgba(18,23,29,.35); }
.hp-badge b { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.hp-badge span { font-size: .72rem; font-weight: 600; line-height: 1.2; }
@media (max-width: 900px) { .hero-portrait { max-width: 300px; } .hp-card { left: -8px; } .hp-badge { right: -8px; } }
/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.stats > div { padding: 28px 20px; display: grid; gap: 4px; align-content: start; border-left: 1px solid var(--line); }
.stats > div:first-child { border-left: 0; padding-left: 0; }
.stats b { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stats span { color: var(--muted); font-size: .92rem; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } .stats > div { padding: 20px 14px; } .stats > div:nth-child(3) { border-left: 0; padding-left: 0; } .stats > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* Why */
.why { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.why > div { padding: 28px 22px; display: grid; gap: 10px; align-content: start; border-left: 1px solid var(--line); }
.why > div:first-child { border-left: 0; }
.why .label { color: var(--muted); }
@media (max-width: 980px) { .why { grid-template-columns: 1fr 1fr; } .why > div { border-left: 0; border-top: 1px solid var(--line); } .why > div:nth-child(-n+2) { border-top: 0; } .why > div:nth-child(even) { border-left: 1px solid var(--line); } }
@media (max-width: 560px) { .why { grid-template-columns: 1fr; } .why > div, .why > div:nth-child(even) { border-left: 0; } .why > div:nth-child(2) { border-top: 1px solid var(--line); } }

/* Services */
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.svc { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 32px; display: grid; gap: 16px; align-content: start; }
.svc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-family: var(--mono); font-size: .74rem; padding: 5px 10px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
@media (max-width: 760px) { .services { grid-template-columns: 1fr; } .svc { padding: 24px; } }

/* Process */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.step { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.step .label { color: var(--muted); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* About */
.about { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.about > * { min-width: 0; }
.portrait { width: 100%; max-width: 300px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: #1a1d21; }
.portrait img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); display: block; }
.creds { display: flex; flex-wrap: wrap; gap: 8px; }
.cred { font-size: .84rem; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 500; }
.cred.more { color: var(--muted); }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; } .about p { margin-inline: auto; } .creds { justify-content: center; } .portrait { max-width: 220px; } }

/* Ways to work */
.ways { margin-top: 20px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; align-items: stretch; }
.ways > * { min-width: 0; }
.way { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 28px; display: grid; gap: 14px; align-content: start; grid-template-rows: auto auto auto 1fr auto; }
.featured-way { border: 2px solid var(--ink); }
.way > .tier + .tier { margin-top: -4px; }
.bg-strip { display: grid; gap: 8px; padding: 14px 16px; border-radius: 8px; border: 1px dashed var(--line); align-self: end; }
.bg-strip .label { color: var(--muted); font-size: .68rem; }
.bg-items { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .95rem; }
.bg-items b { font-weight: 700; }
.way-btn { justify-self: start; align-self: end; }
.way > .label { color: var(--amber-ink); }
.way-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; align-content: start; }
.way-list li { padding-left: 18px; position: relative; }
.way-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; align-self: start; }
.tier { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: grid; gap: 8px; align-content: start; }
.tier b { font-size: 1.05rem; }
.tier-time { font-family: var(--mono); font-size: .74rem; color: var(--amber-ink); }
.way-link { font-weight: 600; font-size: .92rem; color: var(--amber-ink); text-decoration: none; align-self: end; }
.way-link:hover { text-decoration: underline; }
@media (max-width: 1000px) { .ways { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .tiers { grid-template-columns: 1fr; } }

.included { border-top: 1px solid var(--line); padding-top: 12px; }
.included summary { cursor: pointer; font-weight: 600; font-size: .92rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.included summary::-webkit-details-marker { display: none; }
.included summary::after { content: "+"; font-size: 1.2rem; color: var(--amber-ink); }
.included[open] summary::after { content: "–"; }
.included .way-list { margin-top: 12px; font-size: .88rem; }
.included .way-list b { font-weight: 600; }
/* Offer */
.offer { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--amber); border-radius: 10px; padding: clamp(28px, 5vw, 56px); }
.offer > * { min-width: 0; }
.offer-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .92rem; color: var(--muted); }
.offer-meta b { color: var(--ink); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.checklist li { display: grid; gap: 2px; padding: 14px 0 14px 32px; border-bottom: 1px solid var(--line); position: relative; }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 14px; height: 8px; border-left: 2px solid var(--amber-ink); border-bottom: 2px solid var(--amber-ink); transform: rotate(-45deg); }
.checklist b { font-size: 1rem; }
.checklist span { font-size: .9rem; color: var(--muted); }
@media (max-width: 860px) { .offer { grid-template-columns: 1fr; gap: 32px; } }

/* Testimonials */
.quote { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 28px; display: grid; gap: 22px; align-content: space-between; min-width: 0; }
.quote blockquote { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.quote figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.who { display: grid; gap: 2px; }
.who span { font-size: .84rem; color: var(--muted); }
.li-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.li-badge svg { color: #0a66c2; }
.quote.featured { background: var(--deep); color: var(--on-deep); border-color: var(--deep); padding: clamp(28px, 5vw, 56px); position: relative; overflow: hidden; }
.quote.featured blockquote { font-size: clamp(1.2rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; max-width: 42ch; }
.qmark { font-size: 6rem; line-height: .6; font-weight: 800; color: #f2b929; height: 2.4rem; }
.quote.featured figcaption { border-color: color-mix(in srgb, var(--on-deep) 18%, transparent); }
.quote.featured .who span { color: color-mix(in srgb, var(--on-deep) 65%, transparent); }
.quote.featured .li-badge { color: color-mix(in srgb, var(--on-deep) 80%, transparent); border-color: color-mix(in srgb, var(--on-deep) 25%, transparent); }
.quote.featured .li-badge svg { color: #4ea1f3; }
.quotes { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) {
  .quotes { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; -webkit-overflow-scrolling: touch; }
  .quotes .quote { flex: 0 0 85%; scroll-snap-align: start; }
}
@media (max-width: 820px) { .about-actions { justify-content: center; } }

/* FAQ */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.faq > * { min-width: 0; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 1.05rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-weight: 500; color: var(--amber-ink); }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 0 20px; color: var(--muted); max-width: 60ch; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; gap: 24px; } }
/* About timeline */
.about .sub { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 8px 0 0; }
.timeline { list-style: none; margin: 0 0 0 7px; padding: 0; border-left: 2px solid var(--line); display: grid; gap: 22px; text-align: left; }
.timeline li { position: relative; padding-left: 24px; display: grid; gap: 4px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--muted); }
.timeline li.now::before { background: var(--amber); border-color: var(--amber); }
.when { font-family: var(--mono); font-size: .76rem; color: var(--amber-ink); font-variant-numeric: tabular-nums; }
.timeline .role { font-weight: 700; font-size: 1.05rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
.timeline .role span { font-weight: 500; color: var(--muted); }
.timeline .desc { font-size: .95rem; color: var(--muted); }
.more-btn { font: inherit; font-size: .84rem; padding: 7px 14px; border-radius: 999px; border: 1.5px dashed var(--amber-ink); background: transparent; color: var(--amber-ink); font-weight: 700; cursor: pointer; }
.more-btn:hover { border-style: solid; background: color-mix(in srgb, var(--amber) 12%, transparent); }
.extra { display: contents; }
.extra[hidden] { display: none; }
.industries { font-size: .98rem; font-weight: 500; color: var(--ink); }
.tr { display: grid; gap: 6px; padding: 12px 14px; border-radius: 8px; background: var(--bg); }
.tr span { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tr p { margin: 0; font-size: .92rem; font-style: italic; color: var(--muted); }
/* Equal-height quote cards, short quotes centered */
.quotes .quote { display: flex; flex-direction: column; gap: 18px; }
.quotes .quote > blockquote { margin-top: auto; }
.quotes .quote > figcaption { margin-top: auto; }
.report-mobile { display: none; }
@media (max-width: 900px) { .report-mobile { display: block; margin-top: 40px; } }
/* hide sample report when stacked */
@media (max-width: 900px) { .hero .report { display: none; } }
/* About: photo on top, centered (all screens) */
@media (min-width: 821px) {
  .about { grid-template-columns: 1fr; gap: 32px; justify-items: center; text-align: center; max-width: 780px; margin-inline: auto; }
  .about p { margin-inline: auto; }
  .creds { justify-content: center; }
  .about-actions { justify-content: center; }
  .portrait { max-width: 240px; }
  .about .sub { max-width: none; width: 100%; text-align: center; }
  .timeline { justify-self: center; max-width: 640px; }
}
/* why title align */
@media (min-width: 981px) and (max-width: 1199px) { .why h3 { min-height: 2.2em; } }
.deliver { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 4px 0 -6px; }
.outcome { margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: .95rem; color: var(--muted); }
.outcome b { color: var(--ink); }
.svc .outcome { margin-top: auto; }
.svc { grid-template-rows: auto auto auto auto 1fr; }
.svc-more { margin: 24px 0 0; color: var(--muted); font-size: .98rem; }
.stats b .yrs, .yrs { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; }
#health-check.offer { border-top: 1px solid var(--line); }
/* way cards: stack naturally, push buttons to the bottom */
.way { display: flex; flex-direction: column; gap: 14px; }
.way > .way-btn { margin-top: auto; align-self: flex-start; }
.featured-way > .bg-strip { margin-top: auto; align-self: stretch; }
.featured-way > .bg-strip + .way-btn { margin-top: 0; }
.way > .tier + .tier { margin-top: 0; }
.nowrap-link { white-space: nowrap; }
/* CTA */
.cta { background: var(--deep); color: var(--on-deep); border-radius: 14px; padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; }
.cta > * { min-width: 0; }
.cta .muted { color: color-mix(in srgb, var(--on-deep) 70%, transparent); }
.cta .label { color: #f2b929; }
.cta .btn.ghost { color: var(--on-deep); border-color: color-mix(in srgb, var(--on-deep) 40%, transparent); }
form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; font-size: .82rem; font-weight: 600; color: color-mix(in srgb, var(--on-deep) 75%, transparent); }
input, textarea { font: inherit; font-size: .95rem; padding: 12px 14px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--on-deep) 20%, transparent); background: color-mix(in srgb, var(--on-deep) 6%, transparent); color: var(--on-deep); width: 100%; }
textarea { min-height: 110px; resize: vertical; }
.note { font-size: .85rem; color: #f2b929; }
@media (max-width: 860px) { .cta { grid-template-columns: 1fr; } }

footer { padding-block: 48px; color: var(--muted); font-size: .9rem; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 28px; }
@media (prefers-reduced-motion: no-preference) {
  .node.key { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(242,185,41,.15); } }
}
/* Long labels (French) */
.way-btn { white-space: normal; text-align: center; max-width: 100%; }
@media (max-width: 1100px) and (min-width: 481px) { .bar .t-long { display: none; } .bar .t-short { display: inline; } }
.t-tiny { display: none; }
.about-actions .btn { white-space: normal; text-align: center; }
/* Language switch */
.lang-switch { height: 42px; min-width: 42px; padding: 0 12px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; }
.lang-switch:hover { border-color: var(--amber); }
nav a.nav-lang { display: none; }
@media (max-width: 820px) { .lang-switch { height: 38px; min-width: 38px; padding: 0 10px; } }
nav .nav-theme { display: none; }
@media (max-width: 480px) {
  .wrap { padding-inline: 16px; }
  .hdr-actions { gap: 6px; }
  .hdr-actions > .theme-toggle, .menu-btn, .lang-switch { width: 44px; min-width: 44px; height: 44px; padding: 0; }
  .hdr-actions svg { width: 20px; height: 20px; }
  .lang-switch { font-size: .84rem; }
  .hdr-actions .btn { height: 44px; padding: 0 13px; font-size: .9rem; align-items: center; }
  .quotes { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .logo { font-size: 1.15rem; gap: 8px; }
  .logo .mark { width: 20px; height: 20px; }
  nav .nav-theme { display: none !important; }
}
@media (max-width: 480px) {
  nav .nav-theme { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 0; font: inherit; font-size: 1.05rem; color: var(--ink); background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; text-align: left; }
  nav .nav-theme span { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
}
/* Quote translation on dark card */
.quote.featured .tr { background: color-mix(in srgb, var(--on-deep) 7%, transparent); }
.quote.featured .tr span, .quote.featured .tr p { color: color-mix(in srgb, var(--on-deep) 70%, transparent); }
@media (max-width: 389px) {
  .hdr-actions { gap: 5px; }
  .hdr-actions > .theme-toggle, .menu-btn, .lang-switch { width: 42px; min-width: 42px; height: 42px; }
  .hdr-actions .btn { height: 42px; padding: 0 11px; font-size: .86rem; }
}
/* Small phones (kept last so they win) */
@media (max-width: 374px) {
  .hdr-actions { gap: 5px; }
  .hdr-actions > .theme-toggle, .menu-btn, .lang-switch { width: 38px; min-width: 38px; height: 38px; }
  .hdr-actions .btn { height: 38px; padding: 0 10px; font-size: .82rem; }
  .hdr-actions svg { width: 18px; height: 18px; }
  .logo { font-size: 1.1rem; }
}
@media (max-width: 349px) {
  .bar .t-short { display: none !important; } .bar .t-tiny { display: inline; }
  .wrap { padding-inline: 16px; }
  .quotes { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .hdr-actions { gap: 4px; }
  .hdr-actions > .theme-toggle, .menu-btn, .lang-switch { width: 34px; min-width: 34px; height: 34px; }
  .hdr-actions .btn { height: 34px; padding: 0 9px; font-size: .78rem; }
  .hdr-actions svg { width: 16px; height: 16px; }
  .logo { font-size: 1.05rem; }
}

/* Real logo: light/dark variants follow the theme */
.logo { display: inline-flex; align-items: center; }
.logo-img { height: 38px; width: auto; display: block; flex: none; }
.logo { flex: none; }
.logo-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-on-light { display: none; }
  :root:not([data-theme="light"]) .logo-on-dark { display: block; }
}
:root[data-theme="dark"] .logo-on-light { display: none; }
:root[data-theme="dark"] .logo-on-dark { display: block; }
@media (max-width: 480px) { .logo-img { height: 32px; } }
@media (max-width: 349px) { .logo-img { height: 28px; } }

/* Spam trap for the contact form (invisible to people) */
.botcheck { display: none !important; }
.form-error { margin: 0; padding: 10px 14px; border-radius: 6px; font-size: .88rem; line-height: 1.45; background: color-mix(in srgb, #e5484d 18%, transparent); color: var(--on-deep); border: 1px solid color-mix(in srgb, #e5484d 55%, transparent); }
#contact-form button[disabled] { opacity: .7; cursor: progress !important; transform: none; }


/* Keyboard users: "Skip to content" link, only visible when focused with Tab */
.skip-link { position: absolute; left: 16px; top: -200px; z-index: 1000; padding: 10px 16px; border-radius: 6px; background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); outline: 2px solid var(--amber); outline-offset: 2px; }
main:focus { outline: none; }

/* French header on narrow phones: "Réserver un appel" does not fit next to the logo, so use "Rendez-vous" */
.t-mid { display: none; }
@media (max-width: 459px) and (min-width: 341px) {
  html:lang(fr) .bar .t-short { display: none; }
  html:lang(fr) .bar .t-mid { display: inline; }
  html:lang(fr) .bar .btn.primary { padding-inline: 8px; }
}

/* Phone header: logo, language, dark mode, booking button and menu all fit inside the 16px side margins */
@media (max-width: 400px) and (min-width: 361px) {
  .hdr-actions { gap: 6px; }
  .hdr-actions > .theme-toggle, .menu-btn, .lang-switch { width: 40px; min-width: 40px; height: 40px; }
  .hdr-actions .btn { height: 40px; }
}
@media (max-width: 360px) and (min-width: 341px) {
  .hdr-actions { gap: 5px; }
  .hdr-actions > .theme-toggle, .menu-btn, .lang-switch { width: 36px; min-width: 36px; height: 36px; }
  .hdr-actions .btn { height: 36px; }
}
@media (max-width: 375px) { .logo-img { height: 28px; } }
@media (max-width: 355px) and (min-width: 341px) {
  html:lang(fr) .bar .t-short, html:lang(fr) .bar .t-mid { display: none; }
  html:lang(fr) .bar .t-tiny { display: inline; }
}

/* Tablets and computers: round header buttons at the recommended 44px tap size */
@media (min-width: 401px) {
  .hdr-actions > .theme-toggle, .hdr-actions > .lang-switch, .menu-btn { width: 44px; min-width: 44px; height: 44px; padding: 0; }
}

/* Tablets (single-column hero): the highlighted phrase starts on its own line, with even line lengths */
@media (min-width: 600px) and (max-width: 979px) {
  .hero-hl { display: block; text-wrap: balance; }
}
.nowrap { white-space: nowrap; }

/* Hero: who you will work with (links to the About section) */
.who-chip { display: inline-flex; align-items: center; gap: 12px; justify-self: start; width: fit-content; max-width: 100%; min-width: 0; padding: 6px 16px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
.who-chip:hover { border-color: var(--amber); }
.who-chip img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.who-chip b { display: block; font-size: .95rem; line-height: 1.2; }
.who-chip > span > span { display: block; font-size: .82rem; line-height: 1.3; color: var(--muted); }
.who-chip i { font-style: normal; font-weight: 700; color: var(--amber-ink); margin-left: 2px; }
@media (max-width: 380px) { .who-chip { border-radius: 16px; } }
.who-chip > span { min-width: 0; }
@media (max-width: 400px) { .who-chip { gap: 10px; padding-right: 14px; } .who-chip > span > span { font-size: .78rem; } }

/* Small labels: easier to read on larger screens (section labels match the hero label) */
@media (min-width: 761px) {
  .label { font-size: .8rem; font-weight: 500; }
  .hero .label, .label:has(+ h2) { font-size: .9rem; letter-spacing: .05em; }
  .offer .label { font-size: .8rem; letter-spacing: .06em; }
  .bg-strip .label { font-size: .76rem; }
  /* Secondary text one step larger on big screens */
  .when { font-size: .86rem; font-weight: 500; }
  .timeline .desc { font-size: 1.02rem; }
  .timeline .role { font-size: 1.1rem; }
  .about .sub, .tag, .tier-time { font-size: .8rem; }
  .about .sub { font-weight: 500; }
  .deliver { font-size: .76rem; }
  .way-list li { font-size: .98rem; }
  .offer li span { font-size: .95rem; }
  #contact-form label { font-size: .88rem; }
}

/* Large monitors: scale the whole page up a little so it doesn't look tiny */
@media (min-width: 1600px) { html { font-size: 17px; } body { font-size: 18px; } .wrap { max-width: 1240px; } }
@media (min-width: 1920px) { html { font-size: 18px; } body { font-size: 19px; } .wrap { max-width: 1320px; } }
@media (min-width: 2400px) { html { font-size: 20px; } body { font-size: 21px; } .wrap { max-width: 1480px; } }

/* Fold long details on phones and small tablets ("See details" / "See what's included") */
.more > summary { display: none; }
@media (max-width: 760px) {
  .more > summary { display: inline-flex; align-items: center; gap: 6px; width: max-content; list-style: none; cursor: pointer; padding: 6px 0; font-size: .9rem; font-weight: 600; color: var(--amber-ink); }
  .more > summary::-webkit-details-marker { display: none; }
  .more > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
  .more .m-close, .more[open] .m-open { display: none; }
  .more[open] .m-close { display: inline; }
}
.more { display: block; min-width: 0; }
.more > :not(summary) + :not(summary) { margin-top: 14px; }
.more > .deliver { margin: 4px 0 0; }
.more > .deliver + .tags { margin-top: 10px; }

/* Back to top */
.to-top { position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); text-decoration: none; font-size: 1.2rem; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(0,0,0,.45); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 761px) { .to-top { right: 24px; bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* Industries strip under the stats */
.ind-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 18px 0 4px; }
.ind-strip .label { margin: 0; color: var(--muted); }
.ind-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ind-strip li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .88rem; font-weight: 500; color: var(--ink); }
@media (max-width: 480px) { .ind-strip { gap: 10px; } .ind-strip li { font-size: .82rem; padding: 5px 10px; } }
.ind-strip-2 { padding-top: 20px; }
.ind-strip { display: block; } .ind-strip .label { display: block; margin-bottom: 10px; }
.ind-strip-2 li { display: inline-flex; align-items: center; gap: 7px; border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.ind-strip-2 li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
@media (min-width: 900px) and (max-width: 1180px) { .ind-strip ul { gap: 6px; } .ind-strip li { padding: 6px 10px; font-size: .84rem; } }
.ind-strip-2 ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 761px) { .ind-strip-2 ul { grid-template-columns: repeat(4, max-content); } }
.cloud-about { padding: 0; }
@media (min-width: 821px) { .cloud-about ul { justify-content: center; } }
.cloud-about ul, .cloud-about ul[class] { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cloud-about li { font-size: .84rem; padding: 7px 12px; gap: 6px; }
.cloud-about li::before { width: 6px; height: 6px; }
@media (max-width: 760px) { .cloud-about ul, .cloud-about ul[class] { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; } }

/* Ways to work: the three offer titles share one size */
#engagements .offer h3, #engagements .way h3 { font-size: clamp(1.45rem, 2.4vw, 1.75rem); letter-spacing: -0.015em; }

/* Hero on computers: a calmer headline size (highlight on its own line) so the buttons stay on the first screen,
   and the sample report lines up with the top of the headline instead of floating lower */
@media (min-width: 980px) {
  .hero { padding-block: 56px; align-items: start; }
  .hero h1 { font-size: clamp(2.8rem, 4.6vw, 3.5rem); }
  .hero-hl { display: block; text-wrap: balance; }
  .hero .report { margin-top: 48px; }
}

/* ---------- Case study: home card and case study page ---------- */
.cs-intro { margin: 0; max-width: 60ch; font-size: 1.05rem; }
.cs-card { display: grid; grid-template-columns: minmax(240px, 360px) 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.cs-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -18px rgba(18,23,29,.35); }
.cs-card:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.cs-stat { background: var(--deep); color: var(--on-deep); padding: 40px 36px; display: grid; gap: 14px; align-content: center; }
.cs-stat b { font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--amber); }
.cs-stat span { font-size: .98rem; line-height: 1.5; opacity: .82; }
.cs-body { padding: 36px 40px; display: grid; gap: 16px; align-content: center; }
.cs-body h3 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); line-height: 1.2; margin: 0; }
.cs-body p { margin: 0; max-width: 62ch; }
.cs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cs-chip { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg); border: 1px solid var(--line); padding: 3px 8px; border-radius: 4px; }
.cs-link { justify-self: start; font-weight: 600; border-bottom: 2px solid var(--amber); padding-bottom: 2px; }
.cs-link i { font-style: normal; display: inline-block; transition: transform .2s ease; }
.cs-card:hover .cs-link i { transform: translateX(3px); }
@media (max-width: 820px) { .cs-card { grid-template-columns: 1fr; } .cs-stat { padding: 28px 24px; } .cs-body { padding: 26px 24px; } }
@media (prefers-reduced-motion: reduce) { .cs-card, .cs-link i { transition: none; } .cs-card:hover { transform: none; } }

.cs-top { border-bottom: 1px solid var(--line); }
.cs-top .wrap { display: flex; align-items: center; gap: 16px; padding-block: 14px; }
.cs-top .back { margin-left: auto; color: var(--muted); text-decoration: none; font-size: .95rem; }
.cs-top .back:hover { color: var(--ink); }
.cs-hero { padding-block: 72px 56px; display: grid; gap: 22px; }
.cs-hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; margin: 0; max-width: 18ch; }
.cs-hero .lead { margin: 0; max-width: 64ch; font-size: 1.12rem; color: var(--muted); }
.cs-facts { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.cs-facts > div { padding: 20px 22px; display: grid; gap: 4px; }
.cs-facts > div + div { border-left: 1px solid var(--line); }
.cs-facts b { font-weight: 600; line-height: 1.4; }
.cs-page section { padding-block: 72px 0; }
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-grid.two { grid-template-columns: 1fr 1fr; }
.cs-grid.four { grid-template-columns: repeat(4, 1fr); }
.cs-box { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 26px; display: grid; gap: 8px; align-content: start; }
.cs-box h3 { margin: 0; font-size: 1.15rem; }
.cs-box p { margin: 0; color: var(--muted); }
.cs-box .num { font-family: var(--mono); font-size: .78rem; color: var(--amber-ink); }
.cs-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.cs-nums > div { background: var(--deep); color: var(--on-deep); border-radius: 10px; padding: 24px; display: grid; gap: 6px; align-content: start; }
.cs-nums b { font-size: 2.8rem; font-weight: 800; line-height: 1; color: var(--amber); }
.cs-nums span { font-size: .92rem; line-height: 1.45; opacity: .82; }
.cs-note { margin: 18px 0 0; color: var(--muted); }
.cs-cta { margin-block: 88px; background: var(--deep); color: var(--on-deep); border-radius: 12px; padding: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cs-cta h2 { margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2rem); }
.cs-cta p { margin: 0; opacity: .82; }
.cs-foot { border-top: 1px solid var(--line); padding-block: 28px; color: var(--muted); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.cs-foot a { color: var(--muted); }
@media (max-width: 980px) { .cs-grid, .cs-grid.four, .cs-nums { grid-template-columns: 1fr 1fr; } .cs-facts { grid-template-columns: 1fr 1fr; } .cs-facts > div:nth-child(3) { border-left: 0; } .cs-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 600px) { .cs-grid, .cs-grid.two, .cs-grid.four, .cs-nums, .cs-facts { grid-template-columns: 1fr; } .cs-facts > div + div { border-left: 0; border-top: 1px solid var(--line); } .cs-cta { padding: 28px 24px; } .cs-top .back { display: none; } }

/* Capability stories: home cards and pages */
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.cap-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 30px 32px; display: grid; gap: 14px; align-content: start; color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.cap-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -18px rgba(18,23,29,.35); }
.cap-card:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.cap-card h3 { margin: 0; font-size: 1.3rem; line-height: 1.25; }
.cap-card p { margin: 0; }
.cap-card:hover .cs-link i { transform: translateX(3px); }
.cs-grid.cap4 { grid-template-columns: 1fr 1fr; }
.cs-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .cap-grid { grid-template-columns: 1fr; } .cap-card { padding: 24px; } }
@media (max-width: 980px) { .cs-grid.three { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cs-grid.cap4 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cap-card { transition: none; } .cap-card:hover { transform: none; } }

/* Sample Health Check report page */
.sr-score { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; max-width: 640px; }
.sr-score .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; }
.sr-score .row + .row { border-top: 1px solid var(--line); }
.sr-list { display: grid; gap: 16px; }
.sr-find { gap: 10px; padding: 28px 30px; }
.sr-find-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sr-find p { max-width: 80ch; }
.sr-find p b { color: var(--ink); font-weight: 600; }
.sr-rec { padding-top: 10px; border-top: 1px solid var(--line); }
.sr-note { margin: -48px 0 40px; font-size: .88rem; color: var(--muted); max-width: 80ch; }
.sr-what { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 10px; padding: 24px 28px; margin-bottom: 24px; display: grid; gap: 10px; justify-items: start; }
.sr-what h2 { margin: 0; font-size: 1.2rem; }
.sr-what p { margin: 0; color: var(--muted); max-width: 75ch; }
.actions .sr-sample { align-self: center; text-decoration: none; color: var(--ink); }
.back-m { display: none; }
@media (max-width: 600px) { .back-m { display: inline-flex; margin-top: 20px; color: var(--muted); text-decoration: none; font-size: .95rem; } .back-m + .cs-hero { padding-top: 28px; } }