@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; src: url(/fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; src: url(/fonts/archivo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Type system: display = Archivo 125 %, sub-display = 112 %, text = 100 %.
   Sizes: 15 / 18 / 24 / 58 / 89.
   Radius: chrome (nav, buttons) 12px, editorial surfaces 0, product fragments keep their own 8px. */
:root { --bg: #121315; --panel: #1C1D20; --fg: #ECECEA; --muted: #A2A4A8; --paper: #ECECEA; --paper-ink: #121315; --paper-muted: #55575C;
        --accent: #6FA8C8; --accent-text: #6FA8C8; --accent-ink: #121315;
        --m: clamp(16px, 2.4vw, 40px); --gut: clamp(16px, 2vw, 32px); --maxw: 1440px; --r: 12px;
        --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-expo: cubic-bezier(.16, 1, .3, 1); color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Archivo", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
p { text-wrap: pretty; }
.label, .plan h3 small, .plan .hold b, .nav .lang, .burger { font: 500 15px/1.4 "Archivo", sans-serif; letter-spacing: 0; }
.kick { font: 600 16px/1.4 "Archivo", sans-serif; color: var(--fg); text-shadow: 0 1px 16px rgba(0,0,0,.8); }
.kick b { font-weight: 800; }
.board .label, .keep { /* kept for screen readers, the layout carries the meaning */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 20; padding: 10px 14px; background: var(--fg); color: var(--bg); border-radius: var(--r); }

/* ---------- glass menu (owner's wish), adapts to the section under it ---------- */
.nav { position: fixed; z-index: 10; top: 12px; left: 50%; transform: translateX(-50%); width: min(var(--maxw), calc(100% - 2 * var(--m)));
       display: flex; align-items: center; gap: 24px; padding: 8px 8px 8px 20px; border-radius: var(--r); color: var(--fg);
       background: rgba(22, 23, 26, .55); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 32px rgba(0, 0, 0, .22);
       transition: background-color 240ms ease, color 240ms ease, box-shadow 240ms ease; }
.nav[data-on="light"] { background: rgba(236, 236, 234, .74); color: var(--paper-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 32px rgba(0,0,0,.08); }
.nav[data-on="accent"] { background: rgba(18, 19, 21, .78); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 32px rgba(0,0,0,.18); }
.nav .logo { font-weight: 800; font-stretch: 125%; font-size: 18px; letter-spacing: -.01em; text-decoration: none; margin-right: auto; }
.nav .logo span { color: var(--accent); transition: color 240ms ease; }
.nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav ul a { text-decoration: none; font-size: 15px; }
.nav ul a, .nav .lang { opacity: .72; transition: opacity 160ms ease; }
.nav ul a:focus-visible, .nav .lang:focus-visible { opacity: 1; }
.nav .lang { text-decoration: none; padding: 8px 4px; }
.cta { display: inline-block; padding: 10px 16px; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 500; font-size: 14px; white-space: nowrap; }
.burger { display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 14px 10px; transition: transform 140ms var(--ease-out); }
.burger:active { transform: scale(.97); }
@media (max-width: 820px) {
  .nav { flex-wrap: wrap; gap: 0 8px; padding-left: 16px; }
  .nav ul { order: 9; width: 100%; flex-direction: column; gap: 4px; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; padding-block: 0;
            transition: max-height 200ms var(--ease-out), padding 200ms var(--ease-out), opacity 120ms ease, visibility 0s 200ms; }
  .nav.open ul { max-height: 240px; padding-block: 8px 6px; opacity: 1; visibility: visible;
                 transition: max-height 280ms cubic-bezier(.32, .72, 0, 1), padding 280ms cubic-bezier(.32, .72, 0, 1), opacity 200ms ease 60ms, visibility 0s; }
  .nav ul a { display: block; padding: 10px 2px; font-size: 17px; }
  .nav .lang { padding: 14px 8px; }
  .burger { display: block; }
  .nav > .cta { display: none; }
}

/* ---------- flight ---------- */
#top { height: 640vh; position: relative; }
#stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); }
.scene, .cloud, #fog, #bloom, #scrim, #outro { position: absolute; inset: 0; will-change: transform, opacity; }
.scene { width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.cloud { background: center / contain no-repeat; mix-blend-mode: screen; opacity: 0; }
#fog { background: radial-gradient(ellipse at center, #cfd5dc 0%, #98a1ab 55%, #5d646d 100%); opacity: 0; }
#bloom { background: radial-gradient(circle at center, #fff 0%, #fff 6%, var(--accent) 22%, transparent 55%); opacity: 0; mix-blend-mode: screen; }
#scrim { background: linear-gradient(to top, rgba(18,19,21,.82) 0%, rgba(18,19,21,.5) 45%, transparent 72%), radial-gradient(ellipse 70% 60% at 0% 100%, rgba(18,19,21,.5), transparent 75%); pointer-events: none; }
#outro { background: var(--bg); opacity: 0; }
/* left edge = section content edge (.page padding + centred .wrap) */
.copy { position: absolute; left: max(var(--m), (100% - var(--maxw)) / 2); bottom: clamp(24px, 8vh, 96px); right: 16px; opacity: 0; pointer-events: none; }
.copy h1, .copy h2 { margin: .2em 0 0; max-width: 13ch; font: 800 clamp(40px, 6.4vw, 108px)/.95 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 2px 40px rgba(0,0,0,.5); }
.copy p { margin: .8em 0 0; max-width: 36ch; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.45; text-shadow: 0 1px 20px rgba(0,0,0,.8); }
#hint { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); opacity: .7; }
@media (max-width: 820px) { .copy h1, .copy h2 { font-size: 9.6vw; } }

/* ---------- sections ---------- */
.page { padding: clamp(96px, 13vh, 160px) var(--m); scroll-margin-top: 64px; }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.page h2 { font: 800 clamp(40px, 6.2vw, 100px)/.92 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -.035em; margin: 0 0 0 -.04em; text-wrap: balance; hyphens: auto; }
.lead { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.42; margin: 0; max-width: 40ch; }
.head { align-items: end; row-gap: 28px; margin-bottom: clamp(80px, 12vh, 144px); }
.head h2 { grid-column: 1 / span 7; }
.head .lead { grid-column: 8 / -1; }
#approach .head h2, #trust .head h2 { grid-column: 1 / -1; }

/* entry offer: Copilot readiness */
.entry { margin-bottom: clamp(112px, 16vh, 192px); padding-top: 28px; border-top: 4px solid var(--fg); align-items: start; row-gap: 40px; }
.entry .txt { grid-column: 1 / span 6; }
.entry h3 { font: 800 clamp(36px, 4vw, 58px)/.95 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: -.03em; margin: 16px 0 22px; text-wrap: balance; }

/* services: one chapter per layer of the flight, three different compositions; 01–05 behind each chapter */
.layers { display: grid; gap: clamp(112px, 16vh, 192px); counter-reset: ch; }
.layer { align-items: center; row-gap: 40px; }
.layer .txt { grid-column: 1 / span 5; position: relative; isolation: isolate; }
.layer .txt::before { counter-increment: ch; content: counter(ch, decimal-leading-zero) / ""; position: absolute; z-index: -1; top: -.5em; left: -.06em; pointer-events: none;
                      font: 800 clamp(120px, 14vw, 240px)/1 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -.05em; color: #1E2024; }
.layer .fig { grid-column: 7 / -1; z-index: 1; } /* the chapter number tucks behind the photo */
.layer.flip .txt { grid-column: 8 / -1; grid-row: 1; }
.layer.flip .fig { grid-column: 1 / span 6; grid-row: 1; }
.layer.wide .fig { grid-column: 1 / -1; grid-row: 1; }
.layer.wide .txt { grid-column: 1 / span 7; grid-row: 2; }
.layer.wide .more { grid-column: 9 / -1; grid-row: 2; align-self: end; }
.layer.wide .shot { aspect-ratio: 21 / 9; }
.layer.bleed { margin-inline: calc(-1 * var(--m)); }
.layer.bleed .fig { grid-column: 1 / -1; }
.layer.bleed .shot { aspect-ratio: auto; height: min(88vh, 900px); }
.layer.bleed .txt { grid-column: 1 / span 5; padding-left: var(--m); }
.layer.bleed .txt::before { left: var(--m); }
.layer.bleed .more { grid-column: 7 / span 5; }
.layer h3 { font: 800 clamp(36px, 4vw, 58px)/.95 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: -.03em; margin: 0 0 22px; text-wrap: balance; }
/* the one-line summary is the standfirst; the explanation below it is quieter */
.board { margin: 0 0 28px; max-width: 26ch; font: 600 clamp(22px, 1.9vw, 28px)/1.25 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: -.01em; }
.entry .lead, .layer .lead { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 58ch; }
.gets { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; font-size: 18px; line-height: 1.5; }
.gets li { position: relative; padding-left: 20px; }
.gets li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--fg); }
.honest { margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 46ch; }
.fig { position: relative; margin: 0; }
.shot { position: relative; aspect-ratio: 5 / 4; overflow: clip; background: var(--panel); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.66) saturate(.9); }

/* approach: the one light field */
#approach { background: var(--paper); color: var(--paper-ink); }
#approach .lead { color: var(--paper-ink); }
.plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: step; }
.plan li { align-items: start; row-gap: 14px; padding: 36px 0 40px; border-top: 4px solid var(--paper-ink); }
.plan h3 { grid-column: 1 / span 4; margin: 0; font: 800 clamp(30px, 3.2vw, 48px)/1 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: -.03em; }
.plan h3::before { counter-increment: step; content: counter(step, decimal-leading-zero) / ""; display: block; margin-bottom: 14px; font: 600 15px/1 "Archivo", sans-serif; letter-spacing: 0; color: var(--paper-muted); }
.plan h3 small { display: block; margin-top: 14px; color: var(--paper-muted); }
.plan .do { grid-column: 5 / span 4; margin: 0; font-size: 18px; line-height: 1.5; }
.plan .hold { grid-column: 9 / -1; margin: 0; font-size: 18px; line-height: 1.5; padding-left: 16px; border-left: 2px solid var(--paper-ink); }
.plan .hold b { display: block; margin-bottom: 4px; font-weight: 700; }

/* trust: its own panel field, the papers as rows */
#trust { background: var(--panel); }
.vows { column-gap: var(--gut); row-gap: 48px; }
.vows > div { grid-column: span 6; }
.vows h3, .papers h3 { margin: 0 0 24px; font: 800 clamp(36px, 4vw, 58px)/1 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: -.025em; text-wrap: balance; }
.vows ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; font-size: 18px; line-height: 1.45; }
.vows .not li { color: var(--muted); }
.vows .not li b { color: var(--fg); font-weight: 500; }
.papers { margin-top: clamp(96px, 14vh, 160px); row-gap: 28px; }
.papers > h3 { grid-column: 1 / -1; }
.papers > div { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); padding-top: 28px; border-top: 4px solid var(--bg); }
.papers b { grid-column: 1 / span 4; font: 800 clamp(26px, 2.4vw, 36px)/1 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: -.02em; }
.papers p { grid-column: 5 / span 6; margin: 0; font-size: 18px; line-height: 1.5; }

/* contact: the accent field; the portrait stands on its bottom edge */
#contact { padding-bottom: 0; overflow: clip; background: var(--accent); color: var(--accent-ink); }
#contact .row { grid-template-rows: auto 1fr; align-items: start; }
#contact h2 { grid-column: 7 / -1; grid-row: 1; margin-bottom: 40px; }
#contact .who { grid-column: 1 / span 5; grid-row: 1 / span 2; align-self: end; }
#contact .who img { width: 100%; max-width: 560px; height: auto; display: block; }
#contact .side { grid-column: 7 / -1; grid-row: 2; padding-bottom: clamp(96px, 13vh, 160px); }
#contact .side p { margin: 0 0 20px; font-size: 18px; line-height: 1.5; }
#contact .side p:first-child { margin-bottom: 40px; }
#contact .side .label { display: block; }
#contact .side ul { margin: 0 0 32px; padding: 0 0 0 1.1em; font-size: 18px; line-height: 1.5; display: grid; gap: 8px; }
.cta-big { display: inline-block; padding: 20px 28px; border-radius: var(--r); background: var(--bg); color: var(--fg); text-decoration: none; font-weight: 500; font-size: 18px; }
#contact .mail { display: inline-block; margin-left: 20px; font-size: 18px; text-underline-offset: .2em; }

footer { padding: clamp(56px, 10vh, 112px) var(--m) 32px; overflow: clip; }
footer .name { display: block; font: 800 15.6vw/.8 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -.045em; margin: 0 0 0 -.04em; white-space: nowrap; }
footer .name span { color: var(--accent); }
footer .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(40px, 5vw, 72px); color: var(--muted); font-size: 14px; }
footer .legal nav { display: flex; gap: 20px; }

/* legal pages */
.doc { max-width: 72ch; margin: 0 auto; padding: 140px var(--m) 96px; font-size: 17px; line-height: 1.6; }
.doc h1 { font: 800 clamp(40px, 6vw, 72px)/.95 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -.03em; margin: 0 0 40px; }
.doc h2 { font: 800 24px/1.2 "Archivo", sans-serif; font-stretch: 112%; margin: 40px 0 10px; }
.doc p, .doc ul { margin: 0 0 14px; }
.doc .label { color: var(--muted); }

/* motion: entrances only under js + no-preference, finished state otherwise */
.cta, .cta-big { transition: transform 140ms var(--ease-out), background-color 240ms ease, color 240ms ease, filter 180ms ease; }
.cta:active, .cta-big:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .nav ul a:hover, .nav .lang:hover { opacity: 1; }
  .cta:hover { filter: brightness(1.12); }
  .cta-big:hover { background-color: #2B2D32; }
}
/* two worlds: doors right after the flight */
.doors { padding-bottom: 0; }
.doors .row { row-gap: 56px; }
.door { grid-column: span 6; display: block; padding-top: 28px; border-top: 4px solid var(--fg); color: var(--fg); text-decoration: none; }
.door h2 { font-size: clamp(40px, 5vw, 80px); }
.door p { margin: 24px 0 28px; max-width: 44ch; font-size: 18px; line-height: 1.55; color: var(--muted); }
.door .go { font-weight: 600; font-size: 18px; transition: color 240ms ease; }
.door .go::after { content: " \2193"; display: inline-block; transition: transform 240ms var(--ease-out); }
.door:hover .go, .door:focus-visible .go { color: var(--accent); }
.door:hover .go::after { transform: translateY(4px); }
.entry .more { grid-column: 8 / -1; align-self: end; }
.entry .more .gets { margin-top: 0; }

/* showroom: real screenshots, never dimmed */
.showroom { margin-bottom: clamp(112px, 16vh, 192px); }
.showroom .head { margin-bottom: 48px; }
.showroom h3 { grid-column: 1 / span 7; margin: 0; font: 800 clamp(36px, 4vw, 58px)/.95 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: -.03em; }
.apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px var(--gut); }
.app .shot { aspect-ratio: 16 / 10; border-radius: var(--r); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 28px 64px -24px rgba(0, 0, 0, .7); }
.app .shot img, .shot.ui img { filter: none; object-position: top left; }
.shot.ui img { height: auto; }
.shot.ui { aspect-ratio: auto; border-radius: var(--r); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 28px 64px -24px rgba(0, 0, 0, .7); }
.app h4 { margin: 24px 0 8px; font: 700 24px/1.2 "Archivo", sans-serif; font-stretch: 112%; }
.app p { margin: 0; max-width: 52ch; font-size: 18px; line-height: 1.5; color: var(--muted); }
.app .stack { margin-top: 10px; font-size: 15px; color: var(--fg); }
.app.feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--gut); grid-template-rows: 1fr auto auto; }
.app.feature h4 { align-self: end; }
.app.feature .shot { grid-row: 1 / span 3; }
@media (max-width: 900px) { .app.feature { display: block; } }

/* Power Platform chapter: three products side by side instead of a photo */
.layer.platform .txt { grid-column: 1 / span 7; }
.trio { grid-column: 1 / -1; list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.trio li { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .18); }
.trio h4 { margin: 0 0 12px; font: 700 24px/1.2 "Archivo", sans-serif; font-stretch: 112%; }
.trio p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--muted); }

/* agent harness diagram (replaces a photo in the AI chapter) */
.harness { padding: clamp(24px, 4vw, 64px) var(--m); }
.harness svg { display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto; }
.harness .h-tall { display: none; max-width: 420px; }
@media (max-width: 700px) { .harness .h-wide { display: none; } .harness .h-tall { display: block; } }
.harness .hf { fill: rgba(111, 168, 200, .04); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 6; }
.harness .hl { fill: var(--accent); font: 700 22px "Archivo", sans-serif; font-stretch: 112%; letter-spacing: .02em; }
.harness .hc line, .harness .hg { stroke: var(--accent); stroke-width: 1.5; opacity: .55; }
.harness .hm { fill: var(--panel); stroke: var(--accent); stroke-width: 2; }
.harness .hmt { fill: var(--fg); font: 800 28px "Archivo", sans-serif; font-stretch: 112%; }
.harness .hn rect { fill: var(--panel); stroke: rgba(255, 255, 255, .14); }
.harness .he rect { stroke: var(--accent); }
.harness .hn text { fill: var(--fg); font: 700 22px "Archivo", sans-serif; font-stretch: 112%; }
.harness text.s { fill: var(--muted); font: 400 17px "Archivo", sans-serif; font-stretch: 100%; }

:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
#contact :focus-visible, .nav[data-on="light"] :focus-visible { outline-color: var(--paper-ink); }
::selection { background: var(--accent); color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); transition-delay: calc(var(--d, 0) * 80ms); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  .js .shot img { transform: scale(1.06); transition: transform 1600ms var(--ease-expo); }
  .js .in .shot img, .js .shot.in img { transform: none; }
}

@media (min-width: 901px) {
  #approach .head .lead { grid-column: 5 / span 6; }
  #trust .head .lead { grid-column: 1 / span 6; }
}
@media (max-width: 900px) {
  .head h2, .head .lead, .entry .txt, .layer .txt, .layer .fig, .layer.flip .txt, .layer.flip .fig, .layer .more,
  .layer.wide .txt, .layer.wide .more, .layer.bleed .txt, .layer.bleed .more,
  .plan h3, .plan .do, .plan .hold, .vows > div, .papers b, .papers p, #contact h2, #contact .who, #contact .side { grid-column: 1 / -1; grid-row: auto; }
  .shot, .layer.wide .shot { aspect-ratio: 4 / 5; margin-inline: calc(-1 * var(--m)); }
  .door, .entry .more, .showroom h3 { grid-column: 1 / -1; }
  .apps { grid-template-columns: 1fr; gap: 56px; }
  .app .shot { margin-inline: 0; aspect-ratio: 16 / 10; }
  .shot.ui { margin-inline: 0; aspect-ratio: auto; }
  .layer.bleed { margin-inline: 0; }
  .layer.bleed .shot { height: auto; }
  .layer.bleed .txt { padding-left: 0; }
  .layer.bleed .txt::before { left: -.06em; }
  .plan li { padding: 28px 0 32px; }
  .papers b { margin-bottom: 12px; }
  #contact .side { padding-bottom: 0; }
  #contact .who { order: 9; width: 78%; margin-top: 8px; }
  #contact .mail { display: block; width: fit-content; margin: 16px 0 0; }
}
@media (max-width: 820px) { #approach h2, #trust h2 { font-size: 9vw; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 0; transition: opacity 400ms ease; }
  .js [data-reveal].in { opacity: 1; }
  .nav ul, .nav.open ul { transition: none; }
}

/* Swiss map: real border (Natural Earth 10m, LV95 projection), the two Azure regions */
.map { display: grid; place-items: center; padding: clamp(24px, 5%, 64px); }
.map svg { width: 100%; height: auto; overflow: visible; }
.map .ch { fill: rgba(111, 168, 200, .05); stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map .dc circle { fill: var(--accent); }
.map .dc .halo { fill: rgba(111, 168, 200, .18); }
.map .dc text { fill: var(--fg); font: 700 26px "Archivo", sans-serif; font-stretch: 112%; }
.map .dc text.sub { fill: var(--muted); font: 400 18px "Archivo", sans-serif; }
@media (prefers-reduced-motion: no-preference) {
  .map .dc .halo { transform-box: fill-box; transform-origin: center; animation: dcPulse 3.2s var(--ease-out) infinite; }
  .map .dc + .dc .halo { animation-delay: 1.6s; }
}
@keyframes dcPulse { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }