/* ============ TOKENS ============ */
:root {
  color-scheme: light;      /* native controls (checkbox, dropdown lists, scrollbars) follow the chosen theme */
  /* light theme (default) */
  --bg: #EBEDF1;
  --bg-2: #F5F7FA;
  --aura-a: rgba(243, 132, 11, 0.26);
  --aura-b: rgba(45, 127, 224, 0.20);
  --text: #141A24;
  --muted: #4B5567;
  --faint: #5F6878;

  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-2: rgba(255, 255, 255, 0.40);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-hi: rgba(255, 255, 255, 0.9);
  --glass-shadow: rgba(18, 26, 40, 0.15);

  --accent: #A65208;         /* deep brand orange, readable on light ground */
  --accent-ink: #8F4706;     /* accent text sitting on an accent tint */
  --accent-soft: rgba(243, 132, 11, 0.13);
  --accent-line: rgba(243, 132, 11, 0.32);
  --blue: #1F63C8;
  --blue-ink: #1B5AB8;      /* blue text sitting on a blue tint */
  --on-accent: #FFF6EC;
  --band-blue: #1F63C8;      /* deep brand colours for bands that carry white text; not redefined for dark mode */
  --band-orange: #A65208;
  --field-bg: rgba(255, 255, 255, 0.82);   /* form fields: a clear edge (3:1 against the card) and a lighter fill than the card */
  --field-border: #7D8696;
  --field-border-hover: #5F6878;

  --hairline: rgba(18, 26, 40, 0.12);
  --ring: rgba(45, 127, 224, 0.55);

  --shadow-lg: 0 30px 60px -24px var(--glass-shadow), 0 8px 20px -12px var(--glass-shadow);
  --viz-1: #A65208;         /* chart colours, validated against the light surface */
  --viz-2: #1F63C8;
  --viz-muted: #858E9C;
  --radius: 22px;
  --radius-sm: 14px;
  --maxw: 1760px;          /* wide screens still get a centred layout rather than lines that run edge to edge */
  --gutter: clamp(16px, 3.5vw, 56px);  /* side space scales with the screen: 16px on a phone, 56px on a desktop */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080B12;
  --bg-2: #0D121C;
  --aura-a: rgba(243, 132, 11, 0.22);
  --aura-b: rgba(45, 127, 224, 0.18);
  --text: #EEF2F8;
  --muted: #A7B2C4;
  --faint: #76819A;

  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-bg-2: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-hi: rgba(255, 255, 255, 0.22);
  --glass-shadow: rgba(0, 0, 0, 0.55);

  --accent: #FB9A2E;
  --accent-ink: #FB9A2E;
  --accent-soft: rgba(251, 154, 46, 0.12);
  --accent-line: rgba(251, 154, 46, 0.32);
  --blue: #5AA0FF;
  --blue-ink: #5AA0FF;
  --on-accent: #1B1205;

  --hairline: rgba(255, 255, 255, 0.10);
  --ring: rgba(90, 160, 255, 0.6);
  --shadow-lg: 0 40px 80px -30px rgba(0,0,0,0.75), 0 10px 30px -18px rgba(0,0,0,0.6);
  --viz-1: #D9760F;
  --viz-2: #4A8FEA;
  --viz-muted: #5A6475;
  --field-bg: rgba(255, 255, 255, 0.04);
  --field-border: #667085;
  --field-border-hover: #8A93A6;
}

/* ============ BASE ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 104px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  word-spacing: 0.04em;
  text-wrap: balance;   /* lines of even length, so a heading never ends on one word alone */
  overflow-wrap: break-word;   /* a long word on the narrowest phones wraps instead of running off the screen */
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent-line);
}

.lead { color: var(--muted); font-size: 1.12rem; line-height: 1.7; }

section { position: relative; z-index: 1; }

/* ============ AMBIENT AURA ============ */
.aura {
  position: fixed;
  inset: -20vh -10vw;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.blob {
  position: absolute;
  width: 62vw; height: 62vw;
  max-width: 820px; max-height: 820px;
  border-radius: 50%;
  opacity: 0.9;
  will-change: transform;
}
.blob.a { top: -14vh; left: -8vw; background: radial-gradient(circle, var(--aura-a), transparent 70%); animation: drift1 26s ease-in-out infinite; }
.blob.b { bottom: -18vh; right: -10vw; background: radial-gradient(circle, var(--aura-b), transparent 70%); animation: drift2 32s ease-in-out infinite; }
.blob.c { top: 44%; left: 46%; width: 46vw; height: 46vw; background: radial-gradient(circle at 50% 50%, var(--aura-a), transparent 70%); opacity: 0.6; animation: drift1 38s ease-in-out infinite reverse; }

@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw, 5vh) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-5vw, -4vh) scale(0.94); } }
@media (prefers-reduced-motion: reduce) { .blob { animation: none !important; } }

/* ============ GLASS ============ */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi);
}

/* ============ NAV ============ */
header.nav {
  position: sticky; top: 0; z-index: 50;
  padding: 14px 0;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 12px 14px 12px 22px;
  border-radius: 100px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--glass-border);
  box-shadow: 0 14px 34px -22px var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -0.01em; font-size: 1.12rem; }
.brand .mark {
  width: 44px; height: 31px; flex: none;
  display: grid; place-items: center;
}
.brand .mark-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand .mark-on-dark { display: none; }
.foot-tagline {
  margin: 14px 0 0; font-size: 0.64rem; font-weight: 600; white-space: nowrap;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
}
.foot-tagline i { font-style: normal; color: var(--accent); padding: 0 5px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 0.95rem; color: var(--muted); font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 8px; }

.btn {
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
  border: none; cursor: pointer;
  padding: 12px 22px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 9px;
  transition: transform .18s ease, box-shadow .25s ease, background .2s;
  text-align: center; white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #fff));
  color: var(--on-accent);
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255,255,255,0.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255,255,255,0.6); }
.btn-ghost {
  background: var(--glass-bg-2); color: var(--text);
  border: 1px solid var(--glass-border);

}
.btn-ghost:hover { transform: translateY(-2px); background: var(--glass-bg); }
.btn svg { width: 16px; height: 16px; }

.theme-toggle {
  position: relative;
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: var(--glass-bg-2); border: 1px solid var(--glass-border); color: var(--text);
  transition: transform .2s, background .2s;
}
.theme-toggle:hover { transform: translateY(-2px); background: var(--glass-bg); }
.theme-toggle svg { width: 18px; height: 18px; }
.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
:root[data-theme="dark"] .brand .mark-on-light { display: none; }
:root[data-theme="dark"] .brand .mark-on-dark { display: block; }


/* ============ HERO ============ */
.hero { padding: 58px 0 44px; }
.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 54px; align-items: center; }
.hero-rating { display: inline-flex; align-items: center; gap: 11px; padding: 8px 16px; border-radius: 100px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-hi); font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.hero h1 { font-size: clamp(2.6rem, 5vw, 4.3rem); line-height: 1.05; letter-spacing: -0.03em; margin: 24px 0 24px; }
.hero h1 .em { font-style: normal; background: linear-gradient(104deg, var(--accent), var(--blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero h1 .em2 { position: relative; white-space: nowrap; }
.hero h1 .em2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 0.14em; border-radius: 4px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 10%, transparent)); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-cta .btn { padding: 15px 28px; font-size: 1rem; }
.hero-note { margin-top: 26px; display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 0.92rem; }
.dot-live { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 22%, transparent); flex: none; }

/* hero glass composition */
.hero-panel { position: relative; }
.panel-main { padding: 40px 26px; position: relative; z-index: 2; }
.panel-main .ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.panel-main .ph .ph-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; line-height: 1.08; font-size: 1.3rem; }
.panel-badge { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-ink); background: color-mix(in srgb, var(--blue) 14%, transparent); padding: 6px 12px; border-radius: 100px; }
.prow { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-top: 1px solid var(--hairline); }
.ph + .prow { border-top: none; }
.prow .pi { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.prow .pi svg { width: 20px; height: 20px; }
.prow .pt { font-weight: 600; font-size: 0.98rem; }
.prow .ps { color: var(--faint); font-size: 0.86rem; }
.prow .pv { margin-left: auto; font-weight: 700; font-family: "Plus Jakarta Sans", sans-serif; color: var(--text); font-size: 1.15rem; }

.panel-float {
  position: absolute; z-index: 3;
  padding: 16px 20px; border-radius: 18px;
  display: flex; align-items: center; gap: 13px;
  background: var(--bg-2);

  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi);
}
.panel-float.f1 { top: -60px; right: 0; animation: floaty 7s ease-in-out infinite; }
.panel-float.f2 { bottom: -60px; left: -18px; animation: floaty 8.5s ease-in-out infinite reverse; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .panel-float { animation: none; } }
.panel-float .ring { width: 40px; height: 40px; flex: none; }
.panel-float b { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 1.05rem; display: block; }
.panel-float span { font-size: 0.78rem; color: var(--faint); }

/* ============ TRUST STRIP ============ */
.trust { margin-top: 30px; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; padding: 6px; }
.trust-cell { text-align: center; padding: 26px 18px; }
.trust-cell .n { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.trust-cell .n em { font-style: normal; color: var(--accent); }
.trust-cell .l { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }
.trust-cell + .trust-cell { border-left: 1px solid var(--hairline); }

/* ============ SECTION HEAD ============ */
.sec { padding: 92px 0; }
.sec-head { max-width: none; margin-bottom: 48px; }
.sec-head h2 { white-space: nowrap; }
@media (max-width: 940px) { .sec-head h2 { white-space: normal; } }
.sec-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 18px 0 18px; }

/* ============ SERVICES ============ */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc { padding: 28px; transition: transform .25s ease, box-shadow .3s ease; }
.svc:hover { transform: translateY(-5px); }
.svc .si { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 18px; }
.svc .si svg { width: 24px; height: 24px; }
.svc h3 { font-size: 1.32rem; margin-bottom: 10px; }
.svc p { color: var(--muted); font-size: 0.98rem; }
.svc.feature { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; background: linear-gradient(135deg, var(--glass-bg), var(--glass-bg-2)); }
.svc.feature .fbody h3 { font-size: 1.7rem; }
.svc.feature .fbody p { font-size: 1.03rem; }
/* the feature card's right half is a photo, not a second card */
.svc.feature { align-items: stretch; }
.svc.feature .fbody { align-self: center; }
.svc.feature .fphoto { position: relative; margin: -12px -12px -12px 0; border-radius: var(--radius-sm); overflow: hidden; min-height: 240px; }
.svc.feature .fphoto picture, .svc.feature .fphoto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.svc.feature:hover .fphoto { --pz: 1.14; }
@media (max-width: 940px) { .svc.feature .fphoto { margin: 0 -12px -12px; aspect-ratio: 16 / 10; min-height: 0; } }

.flist { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; }
.flist li { display: flex; align-items: center; gap: 11px; font-size: 0.96rem; color: var(--muted); }
.flist li svg { width: 17px; height: 17px; color: var(--blue); flex: none; }

/* ============ PROCESS ============ */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: step; }
.step { padding: 26px 22px; position: relative; }
.step .sn { font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--accent); letter-spacing: 0.1em; }
.step h3 { font-size: 1.15rem; margin: 14px 0 8px; }
.step p { color: var(--muted); font-size: 0.9rem; }
.step .line { position: absolute; top: 40px; right: -8px; width: 16px; height: 1px; background: var(--accent-line); }

/* ============ WORLDWIDE ============ */
.world-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 54px; align-items: center; }
.globe-wrap { position: relative; display: grid; place-items: center; padding: 20px; overflow: hidden; }
.globe-canvas { display: none; width: 100%; max-width: 460px; aspect-ratio: 1; }
.globe-wrap.is-live .globe-canvas { display: block; }
.globe-wrap.is-live > svg.globe { display: none; }
.globe-wrap.is-live::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 65%); pointer-events: none; }
.globe { width: 100%; max-width: 400px; height: auto; }
.globe .g-line { stroke: var(--hairline); fill: none; }
.globe .g-orbit { stroke: var(--accent-line); fill: none; }
.globe .g-core { fill: var(--blue); }
.globe .g-dot { fill: var(--accent); }
.region-list { display: grid; gap: 12px; }
.region { padding: 18px 22px; display: flex; align-items: center; gap: 18px; }
.region .rn { font-weight: 600; font-size: 1.02rem; min-width: 148px; }
.region .rl { color: var(--faint); font-size: 0.88rem; }
.region .rt { margin-left: auto; font-size: 0.78rem; font-weight: 600; color: var(--blue-ink); background: color-mix(in srgb, var(--blue) 13%, transparent); padding: 5px 11px; border-radius: 100px; white-space: nowrap; }

/* ============ WHY US ============ */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why { padding: 26px; }
.why.is-row { display: flex; gap: 16px; align-items: flex-start; }
.why .wi { color: var(--accent); margin-bottom: 16px; }
.why .wi svg { width: 26px; height: 26px; }
.why h3 { font-size: 1.2rem; margin-bottom: 9px; }
.why p { color: var(--muted); font-size: 0.95rem; }

/* ============ QUOTE ============ */
.quote { padding: 56px; text-align: center; }
.quote .qm { font-size: 2.4rem; color: var(--accent); font-family: "Plus Jakarta Sans", sans-serif; line-height: 1; }
.quote blockquote { margin: 14px auto 26px; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; line-height: 1.3; color: var(--text); }
.quote .qa { color: var(--muted); font-size: 0.95rem; }
.quote .qa b { color: var(--text); font-weight: 600; }

/* ============ CONTACT ============ */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; }
.contact-info { position: sticky; top: 104px; padding: 40px; display: flex; flex-direction: column; }  /* natural height, and stays in view beside the longer form */
.contact-info h2 { font-size: clamp(1.6rem, 2.6vw, 1.9rem); margin: 16px 0 16px; }
.contact-info p { color: var(--muted); }
.ci-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 20px; }
.ci-list li { display: flex; gap: 15px; align-items: flex-start; }
.ci-list .cii { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.ci-list .cii svg { width: 20px; height: 20px; }
.ci-list .ct { font-size: 0.8rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.1em; }
.ci-list .cv { font-weight: 600; font-size: 1rem; }
.ci-foot { padding-top: 30px; display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 0.88rem; }

form.contact-form { padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field.row2 > div { display: flex; flex-direction: column; gap: 7px; }
label { font-size: 0.82rem; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
input, select, textarea {
  font-family: inherit; font-size: 1rem; color: var(--text);
  background-color: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 12px; padding: 13px 15px;
  transition: border-color .2s, box-shadow .2s, background .2s;
  width: 100%;
}
textarea { resize: vertical; min-height: 118px; }
input:hover, select:hover, textarea:hover { border-color: var(--field-border-hover); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
.check-row { flex-direction: row; align-items: flex-start; gap: 10px; }
.check-row input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin-top: 2px; padding: 0; border-radius: 5px; accent-color: var(--accent); }
.check-row label { font-size: 0.9rem; color: var(--muted); line-height: 1.45; }
.form-submit { margin-top: 6px; }
.form-submit .btn { width: 100%; justify-content: center; padding: 15px; font-size: 1rem; }
.form-fine { font-size: 0.8rem; color: var(--faint); text-align: center; }
.form-note { font-size: 0.9rem; color: var(--muted); text-align: center; line-height: 1.6; }
.form-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.form-success { padding: 40px; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; min-height: 420px; }
.form-success.show { display: flex; }
.form-success .sc { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.form-success .sc svg { width: 34px; height: 34px; }
.form-success .sc-pending { display: none; }
.form-success.is-pending .sc-done { display: none; }
.form-success.is-pending .sc-pending { display: block; }
.form-success.is-pending .sc { background: var(--accent-soft); color: var(--accent-ink); }
.form-success h3:focus-visible { outline: 2px solid var(--ring); outline-offset: 6px; border-radius: 8px; }
.form-success h3 { font-size: 1.7rem; }
.form-success p { color: var(--muted); }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 6px; }

/* ============ FOOTER ============ */
footer.foot { padding: 30px 0 34px; margin-top: 30px; }
/* the whole footer is one glass panel: an invitation to get in touch, the site map, then contact and legal lines */
.foot-panel { padding: 0 40px; overflow: hidden; }
.foot-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.foot-cta-h { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--text); }
.foot-cta-t { margin-top: 6px; color: var(--muted); font-size: 0.95rem; }
.foot-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.foot-cta-actions .btn svg { width: 17px; height: 17px; }
/* each column is as wide as its longest line, and the space left over is shared out evenly, so the gaps
   between columns match and the last column ends on the panel's right edge. On a wide screen the brand is
   the first column, at least 300px wide, and the description wraps inside it. */
.foot-grid { display: grid; grid-template-columns: minmax(300px, max-content) repeat(4, max-content); justify-content: space-between; gap: 22px 34px; padding: 30px 0 24px; }
.foot-brand .foot-tagline { margin-top: 12px; }
.foot-brand p { color: var(--muted); font-size: 0.9rem; }
.foot-brand p:not(.foot-tagline) { width: 0; min-width: 100%; margin: 14px 0 0; line-height: 1.6; text-wrap: pretty; }
.foot-col summary { list-style: none; display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; cursor: default; }
.foot-col summary::-webkit-details-marker { display: none; }
.foot-col .foot-h { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); margin: 0; font-family: "Inter", sans-serif; font-weight: 600; }
.foot-chev { display: none; color: var(--faint); }
.foot-chev svg { width: 18px; height: 18px; transition: transform .2s; }
.foot-col a { display: block; color: var(--muted); font-size: 0.92rem; padding: 3px 0; transition: color .2s; }
.foot-col a:hover { color: var(--accent); }
/* contact details on one line, wrapping as needed */
.foot-contact { list-style: none; margin: 0; padding: 16px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; border-top: 1px solid var(--hairline); font-size: 0.9rem; color: var(--muted); }
.foot-contact li { display: flex; align-items: center; gap: 9px; min-width: 0; }
.foot-contact li > svg { width: 17px; height: 17px; flex: none; color: var(--accent); }
.foot-contact a { color: var(--text); font-weight: 600; }
.foot-contact a:hover { color: var(--accent); }
.ci-list .sep { color: var(--accent); margin: 0 4px; font-weight: 400; }
/* the contact page list: phone numbers one per line */
.ci-list.details .cv a { display: block; }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 14px 0 16px; border-top: 1px solid var(--hairline); color: var(--faint); font-size: 0.84rem; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-legal a { color: var(--faint); }
.foot-legal a:hover { color: var(--accent); }
/* too narrow for five columns: the brand takes the row above the links, with the description under it */
@media (max-width: 1250px) {
  .foot-grid { grid-template-columns: repeat(4, max-content); }
  .foot-brand { grid-column: 1 / -1; contain: inline-size; }   /* its own width must not widen the columns */
  .foot-brand p:not(.foot-tagline) { width: auto; min-width: 0; }
}
/* the contact details two by two, so none is left alone on a second line */
@media (max-width: 1200px) and (min-width: 761px) {
  .foot-contact { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 48px; }
}
/* tablets and phones: each group of links folds away behind its heading */
@media (max-width: 1000px) {
  .foot-grid { grid-template-columns: 1fr; gap: 0; padding: 22px 0 10px; }
  .foot-brand { padding-bottom: 16px; }
  .foot-brand p:not(.foot-tagline) { font-size: 0.82rem; }   /* still two lines on a small tablet */
  .foot-col { border-top: 1px solid var(--hairline); }
  .foot-col summary { margin: 0; padding: 14px 0; cursor: pointer; }
  .foot-col[open] summary { padding-bottom: 6px; }
  .foot-col[open] { padding-bottom: 10px; }
  .foot-chev { display: block; }
  .foot-col[open] .foot-chev svg { transform: rotate(180deg); }
}
@media (max-width: 760px) {
  .foot-panel { padding: 0 22px; }
  .foot-cta-actions { width: 100%; }
  .foot-cta-actions .btn { flex: 1 1 auto; justify-content: center; }
  .foot-cta-actions .btn-primary { flex-basis: 100%; }
  .foot-contact { flex-direction: column; gap: 10px; }
  .foot-brand p:not(.foot-tagline) { display: none; }   /* on a phone the tagline is enough; the page above already says what we do */
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .foot-legal { gap: 8px 18px; }
  /* room under the panel for the back to top button, so it never sits on the last line */
  footer.foot { padding-bottom: 96px; }
}

/* ============ INDUSTRIES STRIP ============ */
.industries { margin-top: 26px; padding: 26px 30px; }
.ind-label { text-align: center; font-size: 0.82rem; color: var(--faint); margin-bottom: 20px; }
.ind-label a { color: var(--accent); font-weight: 600; margin-left: 4px; }
/* the industries page strip: one tile per sector, each opening that sector's page */
.ind-jump { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--glass-border); font-weight: 600; font-size: 0.92rem; color: var(--text); transition: border-color .2s ease; }
.ind-jump:hover { border-color: var(--accent-line); }
.ind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ind-tile { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--glass-bg-2); border: 1px solid var(--glass-border); color: var(--text); font-weight: 600; font-size: 0.92rem; line-height: 1.25; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.ind-tile:hover { transform: translateY(-2px); border-color: var(--accent-line); background: var(--glass-bg); }
.ind-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: var(--accent-soft); transition: background .2s ease, color .2s ease; }
.ind-ic svg { width: 19px; height: 19px; }
.ind-tile:hover .ind-ic { background: var(--accent); color: var(--on-accent); }
.ind-name { min-width: 0; }
.ind-go { margin-left: auto; flex: none; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; }
.ind-go svg { width: 15px; height: 15px; display: block; }
.ind-tile:hover .ind-go, .ind-tile:focus-visible .ind-go { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ind-tile { flex-direction: column; justify-content: center; gap: 8px; padding: 14px 8px; text-align: center; font-size: 0.86rem; }
  .ind-go { display: none; }
}

/* ============ RESULTS / CASE STUDIES ============ */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case { padding: 30px; display: flex; flex-direction: column; }
.case .ctag { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin-bottom: 20px; }
.case .metric { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.case .metric em { font-style: normal; color: var(--accent); }
.case .msub { color: var(--muted); font-size: 0.95rem; margin-top: 6px; margin-bottom: 22px; }
.case .cline { border-top: 1px solid var(--hairline); padding-top: 18px; margin-top: auto; display: grid; gap: 12px; }
.case .cpt { display: flex; gap: 10px; font-size: 0.9rem; color: var(--muted); }
.case .cpt b { color: var(--text); font-weight: 600; min-width: 66px; flex: none; font-family: "Inter", sans-serif; }
.case .case-go { margin-top: 18px; font-size: 0.94rem; }

/* ============ ENGAGEMENT MODELS ============ */
.eng-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.eng { padding: 30px; display: flex; flex-direction: column; }
.eng.pick { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, var(--glass-bg)), var(--glass-bg-2)); border-color: var(--accent-line); }
.eng .etop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.eng h3 { font-size: 1.3rem; }
.eng .edesc { color: var(--muted); font-size: 0.95rem; margin-bottom: 20px; }
.eng .efit { font-size: 0.82rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.eng ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 11px; }
.eng ul li { display: flex; gap: 10px; font-size: 0.94rem; color: var(--muted); }
.eng ul li svg { width: 16px; height: 16px; color: var(--blue); flex: none; margin-top: 3px; }
.eng .ecta { margin-top: auto; }
.eng .ecta a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; color: var(--accent); }
.eng .ecta svg { width: 15px; height: 15px; }

/* ============ GUARANTEE ============ */
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.promise-item { padding: 24px 26px; display: flex; gap: 15px; align-items: flex-start; }
.promise-item .pmi { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.promise-item .pmi svg { width: 20px; height: 20px; }
.promise-item b { display: block; font-size: 1rem; margin-bottom: 3px; }
.promise-item span { color: var(--muted); font-size: 0.9rem; }

/* ============ FAQ ============ */
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }  /* opening one question must not stretch the one beside it */
.faq-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }  /* an odd last question takes the whole row instead of leaving half of it empty */
@media (min-width: 941px) { .faq-grid .faq-q { min-height: 91px; } }  /* room for a two line question, so closed cards in a row match without being stretched */
.faq-item { padding: 4px 24px; overflow: hidden; }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--text); font-family: "Inter", sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.4; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-q .fi { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: var(--accent); transition: transform .3s ease; }
.faq-q .fi svg { width: 18px; height: 18px; }
.faq-item[data-open="true"] .faq-q .fi { transform: rotate(45deg); }
/* The open answer is not height capped. The row grows from 0fr to 1fr, so an answer of any
   length animates open and none is ever silently clipped by a fixed max-height. */
.faq-a { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; padding: 0; transition: grid-template-rows .35s ease, opacity .3s ease, padding .3s ease, visibility 0s linear .35s; }
.faq-a > p { overflow: hidden; min-height: 0; }
.faq-item[data-open="true"] .faq-a { grid-template-rows: 1fr; opacity: 1; visibility: visible; padding: 0 0 22px; transition: grid-template-rows .35s ease, opacity .3s ease, padding .3s ease, visibility 0s; }
.faq-a p { color: var(--muted); font-size: 0.96rem; line-height: 1.65; }

/* ============ PORTFOLIO ============ */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.work-card { border-radius: var(--radius); overflow: hidden; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi); transition: transform .3s ease, box-shadow .3s ease; display: flex; flex-direction: column; }
.work-card:hover { transform: translateY(-6px); }
.work-thumb { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
:root[data-theme="dark"] .work-thumb { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.28); }   /* softer banners on a dark page; the label and icon sit above it */
.work-thumb > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.work-thumb .wtex { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px); background-size: 15px 15px; opacity: 0.14; }
.work-thumb .wglyph { position: absolute; inset: 0; display: grid; place-items: center; }
.work-thumb .wglyph svg { position: static; inset: auto; width: 66px; height: 66px; color: #fff; opacity: 0.94; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.28)); transition: transform .35s ease; }
.work-card:hover .work-thumb .wglyph svg { transform: translateY(-4px) scale(1.05); }
.work-thumb .wsheen { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 70%); top: -70px; right: -40px; pointer-events: none; }
.work-thumb .wcat { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.32); padding: 6px 12px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.25); }
.work-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.work-body h3 { font-size: 1.28rem; margin-bottom: 8px; }
.work-body p { color: var(--muted); font-size: 0.93rem; }
.work-res { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); display: flex; align-items: baseline; gap: 10px; }
.work-res .wn { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 1.5rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.work-res .wl { font-size: 0.86rem; color: var(--faint); }
.work-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.work-tag { font-size: 0.75rem; color: var(--muted); background: var(--glass-bg-2); border: 1px solid var(--glass-border); padding: 4px 11px; border-radius: 100px; }
/* each card shares five rows with its neighbours (picture, title, text, result, tags), so results and tags line up across a row */
.work-grid { row-gap: 0; }
.work-grid > .work-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 22px; }
.work-grid > .work-card .work-body { display: contents; }
.work-grid > .work-card .work-body > * { margin-left: 24px; margin-right: 24px; }
.work-grid > .work-card .work-body > h3 { margin-top: 22px; }
.work-grid > .work-card .work-tags { align-self: start; margin-bottom: 24px; }

/* ============ SCROLL PROGRESS ============ */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--accent), var(--blue)); z-index: 100; }

/* ============ FILM GRAIN ============ */
.grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .grain { opacity: 0.06; }

/* ============ TECH MARQUEE ============ */
.marquee-sec { padding: 34px 0 8px; }
.marquee-label { text-align: center; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 22px; }
.marquee-mask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 12px; animation: marquee 38s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-sec:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } .marquee-mask { -webkit-mask-image: none; mask-image: none; } }
.tech-pill { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 11px 20px; border-radius: 100px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-hi); font-size: 0.94rem; font-weight: 500; color: var(--muted); }
.tech-pill .d { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--blue)); flex: none; }

/* ============ SERVICE TECH TAGS ============ */
.svc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.svc-tag { font-size: 0.75rem; color: var(--muted); background: var(--glass-bg-2); border: 1px solid var(--glass-border); padding: 4px 11px; border-radius: 100px; }

/* ============ CARD HOVER ACCENT ============ */
.svc:hover, .case:hover, .work-card:hover, .eng:hover, .why:hover, .region:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi), 0 0 0 1px var(--accent-line);
}

/* ============ BUTTON SHEEN ============ */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform: translateX(-160%); transition: transform .7s cubic-bezier(0.16,1,0.3,1); pointer-events: none; }
.btn-primary:hover::after { transform: translateX(320%); }
@media (prefers-reduced-motion: reduce) { .btn-primary::after { display: none; } }

/* ============ CLOSING CTA BAND ============ */
/* the band carries white text, so it uses the deep --band colours in both themes (the theme tokens go pale in dark mode) */
.cta-band { position: relative; overflow: hidden; border-radius: 28px; padding: 68px 40px; text-align: center; background: linear-gradient(135deg, var(--band-blue), color-mix(in srgb, var(--band-orange) 88%, #000)); box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--band-blue) 55%, transparent); }
.cta-band .cb-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.4; pointer-events: none; }
.cta-band .cb-blob.one { width: 320px; height: 320px; background: #fff; top: -120px; left: -60px; opacity: 0.16; }
.cta-band .cb-blob.two { width: 360px; height: 360px; background: var(--band-orange); bottom: -160px; right: -60px; opacity: 0.4; }
.cta-band .cb-inner { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); color: #fff; margin: 0 auto 18px; }
.cta-band p { color: rgba(255,255,255,0.9); font-size: 1.08rem; margin: 0 auto 32px; }
.cta-band .cb-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta-band .cb-actions .btn { padding: 15px 30px; font-size: 1rem; }
.cb-white { background: #fff; color: #171D28; box-shadow: 0 12px 26px -12px rgba(0,0,0,0.35); }
.cb-white:hover { transform: translateY(-2px); }
.cb-outline { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.45); }
.cb-outline:hover { transform: translateY(-2px); background: rgba(255,255,255,0.18); }

/* ============ RESPONSIVE ============ */
@media (max-width: 940px) {
  .nav-links { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-cell:nth-child(3), .trust-cell:nth-child(4) { border-top: 1px solid var(--hairline); }
  .trust-cell + .trust-cell:nth-child(3) { border-left: none; }
  .svc-grid, .why-grid { grid-template-columns: 1fr 1fr; }
  .svc.feature { grid-column: span 2; grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step .line { display: none; }
  .world-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { position: static; }
  .case-grid, .eng-grid { grid-template-columns: 1fr; }
  .promise { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .sec { padding: 68px 0; }
  .svc-grid, .why-grid, .steps, .work-grid { grid-template-columns: 1fr; }
  .trust-cell { padding: 20px 10px; }   /* the headline numbers stay two across, as set for tablets */
  .svc.feature { grid-column: auto; }
  .case, .eng, .industries { padding: 24px; }
  .field.row2 { grid-template-columns: 1fr; }
  .contact-info, form.contact-form, .form-success, .quote { padding: 28px; }
  .cta-band { padding: 48px 24px; }
  .nav-inner { gap: 12px; padding: 10px 10px 10px 14px; }
  .nav .brand-name { display: none; }
  .nav-actions .btn { padding: 11px 18px; font-size: 0.9rem; }
  .cta-band .cb-actions, .hero-cta { flex-direction: column; align-items: stretch; }
  .cta-band .cb-actions .btn, .hero-cta .btn, .card > .btn { width: 100%; justify-content: center; }
}

/* ======================================================================
   MULTI-PAGE COMPONENTS
   ====================================================================== */

/* ---------- utilities ---------- */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }

/* ---------- nav: active link and mobile menu ---------- */
.nav-links a[aria-current="page"] { color: var(--text); position: relative; }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--accent); }
body.menu-open { overflow: hidden; }
.menu-btn { display: none; width: 42px; height: 42px; border-radius: 50%; flex: none; place-items: center; cursor: pointer; background: var(--glass-bg-2); border: 1px solid var(--glass-border); color: var(--text); }
.menu-btn svg { width: 18px; height: 18px; }
.menu-btn .icon-close { display: none; }
.nav[data-menu="open"] .menu-btn .icon-open { display: none; }
.nav[data-menu="open"] .menu-btn .icon-close { display: block; }
.mobile-menu { display: none; }
@media (max-width: 1080px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 0.9rem; }
}
@media (max-width: 940px) {
  .menu-btn { display: grid; }
  .nav[data-menu="open"] .mobile-menu { display: block; }
  .mobile-menu { margin-top: 10px; padding: 14px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg); max-height: calc(100vh - 110px); overflow-y: auto; }
  .mobile-menu a { display: block; padding: 12px 14px; border-radius: 12px; font-weight: 600; color: var(--muted); }
  .mobile-menu a:hover, .mobile-menu a[aria-current="page"] { background: var(--accent-soft); color: var(--text); }
  .mobile-menu a.mobile-cta,
  .mobile-menu a.mobile-cta:hover { display: flex; justify-content: center; margin-top: 10px; color: var(--on-accent); background: var(--accent); }
  .mobile-menu a.mobile-cta svg { width: 18px; height: 18px; }
  .mobile-menu a.mobile-cta-alt { display: flex; justify-content: center; margin-top: 10px; color: var(--text); background: transparent; border: 1px solid var(--field-border); }
}
@media (max-width: 560px) {
  .nav-actions .btn-primary { display: none; }
}

/* ---------- page hero (inner pages) ---------- */
.page-hero { padding: 40px 0 16px; }
.page-hero h1 { font-size: clamp(2.2rem, 4.1vw, 3.3rem); line-height: 1.08; letter-spacing: -0.028em; margin: 20px 0 20px; }
.page-hero h1 .em { font-style: normal; background: linear-gradient(104deg, var(--accent), var(--blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.page-hero .lead { max-width: none; }
.page-hero .hero-cta { margin-top: 28px; }
.page-hero .crumbs { margin-bottom: 26px; }

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: 0.85rem; color: var(--faint); }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--faint); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--text); }

/* ---------- generic card grids ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* four cards are too narrow for their titles on a laptop screen */
@media (max-width: 1100px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
.card { padding: 28px; display: flex; flex-direction: column; }
.card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.97rem; }
.card p + p { margin-top: 10px; }
.card .si { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 18px; }
.card .si svg { width: 24px; height: 24px; }
.card .more { margin-top: auto; padding-top: 18px; display: block; font-weight: 600; font-size: 0.95rem; color: var(--accent); }
.card > .btn { align-self: flex-start; }   /* a card lays its content out in a column, which would stretch the button into a bar */
.card .more svg { width: 15px; height: 15px; transition: transform .2s; }
.card .kicker { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
a.card { transition: transform .25s ease, border-color .3s; }
a.card:hover { transform: translateY(-5px); border-color: var(--accent-line); }
a.card:hover .more svg { transform: translateX(4px); }

/* ---------- split layout (content + aside) ---------- */
.split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.split.even { grid-template-columns: 1fr 1fr; align-items: start; }  /* two text columns start level */
.split.even:has(> figure) { align-items: center; }  /* text beside a picture sits centred on it */
.split:not(.even) > .prose:first-child { align-self: center; }  /* short text beside a tall side card sits centred on it; long text is unaffected */
.aside-card { padding: 30px; position: sticky; top: 104px; }
.aside-card h3 { font-size: 1.25rem; margin-bottom: 12px; }
.aside-card p { color: var(--muted); font-size: 0.95rem; }
.aside-card .btn { width: 100%; justify-content: center; margin-top: 20px; }
.aside-card .facts { margin-top: 18px; }

/* ---------- check list ---------- */
.checks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.checks.is-tight { margin-top: 4px; gap: 8px; }
.checks li { position: relative; padding-left: 30px; color: var(--muted); }
/* the circle and the tick are separate layers so the tick takes the theme blue (a fixed colour inside the image vanished on dark cards) */
.checks li::before, .checks li::after { content: ""; position: absolute; left: 0; top: 0.3em; width: 18px; height: 18px; }
.checks li::before { border-radius: 50%; background: color-mix(in srgb, var(--blue) 16%, transparent); }
.checks li::after { background: var(--blue-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
:root[data-theme="dark"] .checks li::before { background: var(--blue); }  /* on dark cards a solid disc with a dark tick reads clearly */
:root[data-theme="dark"] .checks li::after { background: var(--bg); }
.checks li b { color: var(--text); }

/* ---------- prose (articles, legal, long copy) ---------- */
.prose { max-width: none; }
.prose h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin: 48px 0 16px; }
.prose .eyebrow + h2 { margin-top: 18px; }  /* a heading right under its label sits as close as it does in a section head */
.prose h3 { font-size: 1.3rem; margin: 32px 0 12px; }
.prose p, .prose li { color: var(--muted); }
.prose p + p { margin-top: 16px; }
.prose ul, .prose ol { padding-left: 22px; margin: 16px 0; display: grid; gap: 8px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); }
.prose blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.3rem; line-height: 1.4; color: var(--text); }
.prose > :first-child { margin-top: 0; }
.note { margin: 24px 0; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text); font-size: 0.95rem; }
.note a { color: var(--accent-ink); }
.split > .note { margin: 0; }  /* as a column of its own, the layout gap already spaces it */

/* ---------- stat row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { padding: 26px; }
.stat .n { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .n em { font-style: normal; color: var(--accent); }
.stat .l { color: var(--muted); font-size: 0.9rem; margin-top: 8px; }

/* ---------- numbered timeline ---------- */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: tl; }
.timeline > li { counter-increment: tl; position: relative; padding: 26px 28px 26px 92px; }
.timeline > li::before { content: counter(tl, decimal-leading-zero); position: absolute; left: 28px; top: 24px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.6rem; font-weight: 600; color: var(--accent); }
.timeline h3 { font-size: 1.25rem; margin-bottom: 6px; }
.timeline p { color: var(--muted); }
.timeline .meta { display: inline-block; margin-top: 12px; font-size: 0.8rem; font-weight: 600; color: var(--blue-ink); background: color-mix(in srgb, var(--blue) 13%, transparent); padding: 4px 11px; border-radius: 100px; }

/* Marks content standing in until the real thing exists. Remove the note and its
   data-placeholder attribute together once real people or figures are published;
   src/check.py lists every page that still carries one. */
.placeholder-note {
  margin: 0 0 22px; padding: 12px 16px;
  border: 1px dashed var(--accent-line); border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--muted);
  font-size: 0.88rem; line-height: 1.55;
}
.placeholder-note b { color: var(--text); }

/* ---------- key/value facts ---------- */
.facts { display: grid; margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.facts div:first-child { border-top: none; }
/* The label keeps its natural width so short ones such as "Check ins" are not broken
   across lines; long ones still wrap rather than push the value off the card. */
.facts dt { color: var(--faint); font-size: 0.88rem; flex: 0 0 auto; max-width: 45%; }
.facts dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- list rows (jobs, articles) ---------- */
.rows { display: grid; gap: 12px; }
.row-link { padding: 22px 26px; display: flex; align-items: center; gap: 20px; transition: transform .2s, border-color .3s; }
.row-link:hover { transform: translateX(4px); border-color: var(--accent-line); }
.row-link h3 { font-size: 1.15rem; }
.row-link .rmeta { color: var(--faint); font-size: 0.88rem; margin-top: 4px; }
.row-link > div:first-child { flex: 1 1 auto; min-width: 0; }   /* the title takes the free space, so pills line up by the arrow */
.row-link .pill { flex: none; }
.row-link .rgo { margin-left: auto; color: var(--accent); flex: none; }
.row-link .rgo svg { width: 20px; height: 20px; }
.pill { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--blue-ink); background: color-mix(in srgb, var(--blue) 13%, transparent); padding: 4px 11px; border-radius: 100px; white-space: nowrap; }

/* ---------- filter chips (work page) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter-count { margin: -18px 0 22px; font-size: 0.88rem; color: var(--faint); }
.filter-empty { margin: 0 0 24px; font-size: 0.95rem; color: var(--muted); }
.filter-empty a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.filter-empty[hidden] { display: none; }
.filter { font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 9px 16px; border-radius: 100px; background: var(--glass-bg-2); border: 1px solid var(--glass-border); color: var(--muted); }
.filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.work-card[hidden] { display: none; }
.work-grid > .is-folded { display: none; }   /* cards past the first few on a phone, until "Show more" */
.show-more { display: flex; width: fit-content; margin: 8px auto 0; }
.show-more[hidden] { display: none; }
a.work-card { color: inherit; }

/* ---------- article ---------- */
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; color: var(--faint); font-size: 0.9rem; }
.cover { border-radius: var(--radius); position: relative; overflow: hidden; display: grid; place-items: center; }
.cover svg { width: 84px; height: 84px; color: #fff; opacity: 0.94; }
.article-cover { aspect-ratio: 21 / 8; margin: 12px 0 44px; }
.post-thumb { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); margin: -8px -8px 20px; }
.post-thumb svg { width: 52px; height: 52px; }

/* ---------- comparison table ---------- */
.table-wrap { overflow-x: auto; padding: 8px; }
table.compare { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 620px; }
table.compare th, table.compare td { padding: 14px 18px; text-align: left; border-top: 1px solid var(--hairline); vertical-align: top; }
table.compare thead th { border-top: none; font-family: "Inter", sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
table.compare tbody th { font-weight: 600; }
table.compare td { color: var(--muted); }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 60px 0; }
.notfound .big { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(6rem, 18vw, 11rem); line-height: 1; background: linear-gradient(104deg, var(--accent), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound .hero-cta { justify-content: center; }

/* ---------- form status ---------- */
.form-error { display: none; color: #C0392B; font-size: 0.9rem; text-align: center; }
.form-error.show { display: block; }
:root[data-theme="dark"] .form-error { color: #FF8A80; }   /* the light red is too dark to read on a dark card */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* a long label in a narrow side card wraps inside the button instead of spilling out */
.aside-card .btn { white-space: normal; text-align: center; justify-content: center; }

@media (max-width: 940px) {
  .grid-3, .grid-4, .stats { grid-template-columns: 1fr 1fr; }
  .split, .split.even { grid-template-columns: 1fr; gap: 32px; }
  .aside-card { position: static; }
  .split > .article-toc { order: -1; }  /* on one column the article contents come before the article, where they help */
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats { gap: 12px; }
  .stat { padding: 20px 18px; }
  .timeline > li { padding: 68px 22px 22px; }
  .timeline > li::before { left: 22px; top: 20px; }
  .row-link { padding: 18px; }
  .row-link:has(.pill) { flex-wrap: wrap; row-gap: 10px; }
  .row-link:has(.pill) > div:first-child { flex-basis: 100%; }   /* on a phone the pill and arrow move under the title */
  .card { padding: 24px; }
}

/* ---------- inline arrow link ---------- */
.ecta-link { display: inline; font-weight: 600; color: var(--accent); }   /* inline, so a wrapped label keeps its arrow after the last word */
.eng-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ecta-link svg, .card .more svg { display: inline-block; vertical-align: -2px; margin-left: 8px; }
.nw { white-space: nowrap; }  /* keeps a link arrow on the same line as the last word */
.ecta-link svg { width: 15px; height: 15px; transition: transform .2s; }
.ecta-link:hover svg { transform: translateX(4px); }
.hero-cta .btn svg, .btn-ghost svg { width: 16px; height: 16px; }
.work-grid + .hero-cta { margin-top: 34px; }
.cv a:hover { color: var(--accent); }

/* ---------- grid children may shrink below their content width ---------- */
.split > *, .world-grid > *, .hero-grid > *, .contact-grid > * { min-width: 0; }
@media (max-width: 560px) {
  .region { flex-wrap: wrap; gap: 6px 14px; }
  .region .rn { min-width: 0; flex-basis: 100%; }
  .region .rt { margin-left: 0; }
}

/* ---------- links inside running text ---------- */
.text-link, .lead a:not(.btn), .faq-a a, .card p a:not(.ecta-link), .checks a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover, .lead a:not(.btn):hover, .faq-a a:hover, .card p a:not(.ecta-link):hover, .checks a:hover { text-decoration-thickness: 2px; }

/* ======================================================================
   VISUALS: illustrations, diagrams and small charts
   ====================================================================== */

/* ---------- page hero with an illustration ---------- */
.hero-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero-split h1 { max-width: none; }
.hero-split .lead { max-width: none; }

/* ---------- illustration frame (the SVG carries its own dark background) ---------- */
.illo { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg); background: #0b1b2e; }
.illo img { display: block; width: 100%; height: auto; }
.illo.is-plain { box-shadow: none; }
.illo.is-bleed { margin: -8px -8px 20px; border-radius: var(--radius-sm); }
.illo-caption { margin-top: 12px; font-size: 0.86rem; color: var(--faint); text-align: center; }

/* ---------- figure panel for diagrams and charts ---------- */
.figure { margin: 0; padding: 28px; }
.fig-title { font-family: "Inter", sans-serif; font-weight: 600; font-size: 1rem; color: var(--text); margin: 0 0 20px; }
.fig-note { margin-top: 18px; font-size: 0.86rem; color: var(--faint); }
.figure + .figure, .sec-head + .figure { margin-top: 0; }
.stack-lg > * + * { margin-top: 28px; }

/* ---------- flow: numbered steps joined by arrows ---------- */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px; counter-reset: flow; }
.flow > li { position: relative; counter-increment: flow; padding: 22px 16px 20px; text-align: center; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--glass-border); }
.flow > li::before { content: counter(flow, decimal-leading-zero); position: absolute; top: 10px; left: 12px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.flow > li:not(:last-child)::after { content: ""; position: absolute; top: 46px; right: -14px; width: 9px; height: 9px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg); }
.flow .fl-ic { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; background: var(--accent-soft); color: var(--accent); }
.flow .fl-ic svg { width: 22px; height: 22px; }
.flow b { display: block; font-size: 0.97rem; line-height: 1.3; color: var(--text); }
.flow .fl-t { display: block; margin-top: 6px; font-size: 0.84rem; line-height: 1.5; color: var(--muted); }
.flow .fl-when { display: inline-block; margin-top: 10px; font-size: 0.72rem; font-weight: 600; color: var(--blue-ink); background: color-mix(in srgb, var(--blue) 13%, transparent); padding: 3px 9px; border-radius: 100px; }
.flow > li.is-key { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* answers to one question, side by side: a situation and the model it points to, with no order implied */
.choices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.choices li { padding: 18px 20px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--glass-border); }
.choices b { display: block; font-size: 0.97rem; line-height: 1.3; color: var(--text); }
.choices span { display: block; margin-top: 8px; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
.choices span::before { content: "\2192"; margin-right: 8px; font-weight: 700; color: var(--accent); }
.choices li.is-open { border: 1px dashed var(--accent); }
@media (max-width: 940px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .choices { grid-template-columns: 1fr; } }

/* ---------- project estimator (engagement page): three questions, a rough guide beside them ---------- */
.est { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.est-form { padding: 28px; display: grid; gap: 28px; }
.est-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.est-q legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 14px; font-weight: 600; font-size: 1.02rem; color: var(--text); }
.est-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); }
.est-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.est-opt { position: relative; min-width: 0; }
/* the radio stays in the page for keyboards and screen readers; the label is what you see and press */
.est-opt input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; }
.est-opt label { display: block; height: 100%; cursor: pointer; padding: 14px 40px 14px 16px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--glass-border); letter-spacing: 0; transition: border-color .2s, box-shadow .2s; }
.est-opt label b { display: block; font-size: 0.95rem; line-height: 1.3; color: var(--text); }
.est-opt label small { display: block; margin-top: 4px; font-size: 0.82rem; font-weight: 400; line-height: 1.45; color: var(--muted); }
.est-opt label::after { content: ""; position: absolute; top: 15px; right: 14px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--field-border); box-sizing: border-box; }
.est-opt label:hover { border-color: var(--field-border-hover); }
.est-opt input:checked + label { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.est-opt input:checked + label::after { border: 5px solid var(--accent); }
.est-opt input:focus-visible + label { outline: 2px solid var(--ring); outline-offset: 3px; }
.est-out { padding: 28px; position: sticky; top: 104px; }
.est-title { font-size: 1.35rem; line-height: 1.25; margin: 16px 0 8px; }
.est-actions { display: grid; gap: 10px; margin-top: 22px; }
.est-actions .btn { justify-content: center; }
.est-fine { margin-top: 14px; font-size: 0.84rem; color: var(--faint); }
@media (max-width: 1240px) { .est-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 940px) { .est { grid-template-columns: 1fr; } .est-out { position: static; } .est-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .est-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .est-form, .est-out { padding: 22px; } }
@media (max-width: 420px) { .est-opts { grid-template-columns: 1fr; } }

/* ---------- questions to ask any software company (FAQ page), each with a short answer ---------- */
.ask-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; counter-reset: ask; }
.ask-list li { counter-increment: ask; padding: 22px 26px; border-top: 1px solid var(--hairline); }
.ask-list li:nth-child(-n+2) { border-top: 0; }
.ask-list li:nth-child(odd) { border-right: 1px solid var(--hairline); }
.ask-list li::before { content: "Question " counter(ask); display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.ask-list h3 { font-size: 1.06rem; line-height: 1.35; margin: 6px 0 6px; }
.ask-list p { font-size: 0.94rem; color: var(--muted); }
.ask-list p b { color: var(--accent-ink); }
@media (max-width: 760px) {
  .ask-list { grid-template-columns: 1fr; }
  .ask-list li:nth-child(2) { border-top: 1px solid var(--hairline); }
  .ask-list li:nth-child(odd) { border-right: 0; }
  .ask-list li { padding: 20px 22px; }
}

/* loop bracket under a flow: "this repeats" */
.flow-loop { position: relative; margin: 14px 8% 0; height: 26px; border: 2px dashed var(--accent-line); border-top: none; border-radius: 0 0 18px 18px; }
/* the label is drawn from data-label, so the page text holds the sentence once: in .flow-loop-text */
.flow-loop::after { content: attr(data-label); position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); padding: 2px 12px; font-size: 0.78rem; font-weight: 600; color: var(--accent); background: var(--bg-2); border: 1px solid var(--accent-line); border-radius: 100px; white-space: nowrap; }
.figure .flow-loop::after { background: var(--bg); }

/* ---------- arch: layered system diagram ---------- */
.arch { display: grid; gap: 30px; }
.arch-layer { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.arch-layer + .arch-layer::before { content: ""; position: absolute; top: -28px; left: calc(166px + (100% - 166px) / 2); width: 2px; height: 20px; background: var(--accent-line); }
.arch-layer + .arch-layer::after { content: ""; position: absolute; top: -13px; left: calc(166px + (100% - 166px) / 2 - 4px); width: 8px; height: 8px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); }
.arch-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.arch-label small { display: block; margin-top: 4px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); }
.arch-nodes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 14px; border-radius: 16px; border: 1px dashed var(--hairline); background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
.arch-node { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--glass-border); font-weight: 600; font-size: 0.9rem; line-height: 1.25; text-align: left; }
.arch-node svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.arch-node small { display: block; font-weight: 500; font-size: 0.76rem; color: var(--faint); }
.arch-node.is-key { position: relative; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* the highlighted step or part says why it stands out: a small tag sitting on its top edge */
.key-tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 3px 10px; border-radius: 100px; background: var(--accent); color: var(--on-accent); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3; white-space: nowrap; }
.arch-node.is-alt svg { color: var(--blue); }

/* ---------- cmp: before and after bars (one measure, indexed) ---------- */
.cmp { display: grid; gap: 14px; }
.cmp-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 72px; gap: 12px; align-items: center; font-size: 0.9rem; border-radius: 8px; }
.cmp-l { color: var(--muted); }
.cmp-track { position: relative; height: 16px; border-left: 1px solid var(--hairline); }
.cmp-bar { display: block; height: 100%; width: var(--v); border-radius: 0 4px 4px 0; background: var(--viz-1); }
.cmp-bar.is-base { background: var(--viz-muted); }
.cmp-v { text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: 0.8rem; color: var(--muted); }
.cmp-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--viz-1); }
.cmp-legend i.is-base { background: var(--viz-muted); }

/* ---------- rate: ordinal dot rating with a text label ---------- */
.rate { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rate i { width: 10px; height: 10px; border-radius: 50%; background: var(--viz-muted); }
.rate i.on { background: var(--viz-1); }
.rate em { margin-left: 8px; font-style: normal; font-size: 0.82rem; color: var(--muted); }

/* ---------- gantt: bars on a shared scale (weeks, months or hours) ---------- */
.gantt { display: grid; gap: 10px; --cols: 12; }
.g-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 0.88rem; border-radius: 6px; }
.g-l { color: var(--muted); line-height: 1.3; }
.g-track { position: relative; height: 18px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px calc(100% / var(--cols))); }
.g-bar { position: absolute; top: 0; bottom: 0; left: calc(var(--s) / var(--cols) * 100%); width: calc((var(--e) - var(--s)) / var(--cols) * 100%); border-radius: 4px; background: var(--viz-1); box-shadow: 0 0 0 1px var(--bg-2); }
.g-bar.is-alt { background: var(--viz-2); }
.g-bar.is-base { background: var(--viz-muted); }
.g-axis { font-size: 0.72rem; color: var(--faint); }
.g-ticks { display: flex; justify-content: space-between; }
.g-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: 0.8rem; color: var(--muted); }
.g-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--viz-1); }
.g-legend i.is-alt { background: var(--viz-2); }
.g-legend i.is-base { background: var(--viz-muted); }

/* ---------- hover tooltips for chart rows ---------- */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus::after { content: attr(data-tip); content: attr(data-tip) / ""; position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 260px; padding: 8px 12px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 0.8rem; font-weight: 500; line-height: 1.4; pointer-events: none; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5); }
.cmp-row:hover, .g-row:hover { background: var(--accent-soft); }

/* ---------- icon feature strip (compact icon + label items) ---------- */
/* tiles wrap and a short last row grows to fill the width, so no row is left half empty */
.icon-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.icon-strip > * { flex: 1 1 170px; min-width: 0; }
.icon-strip:has(> :nth-child(6):last-child) > * { flex-basis: max(170px, calc((100% - 24px) / 3)); }   /* six: two rows of three */
/* four and five: one row when there is room (about 220px and 170px a tile), otherwise balanced rows; the clamp switches at that width */
.icon-strip:has(> :nth-child(4):last-child) > * { flex-basis: clamp(calc((100% - 36px) / 4), calc((916px - 100%) * 999), calc((100% - 12px) / 2)); }
.icon-strip:has(> :nth-child(5):last-child) > * { flex-basis: clamp(calc((100% - 48px) / 5), calc((898px - 100%) * 999), calc((100% - 24px) / 3)); }
.icon-strip > div { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--glass-border); font-weight: 600; font-size: 0.92rem; }
.icon-strip .si-sm { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.icon-strip .si-sm svg { width: 19px; height: 19px; }

@media (max-width: 1080px) {
  .flow { grid-auto-flow: row; grid-auto-columns: auto; gap: 16px; }
  .flow > li { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 16px; text-align: left; padding: 18px 18px 18px 18px; }
  .flow > li::before { position: static; grid-column: 2; grid-row: 1; margin-bottom: 2px; }   /* the number sits just above its title */
  .flow > li > b, .flow .fl-t, .flow .fl-when { grid-column: 2; }
  .flow .fl-ic { grid-row: span 3; margin: 0; }
  .flow .fl-when { justify-self: start; }
  .flow > li:not(:last-child)::after { top: auto; bottom: -13px; right: auto; left: 38px; transform: rotate(135deg); }
  .flow-loop { display: none; }
  .flow-loop-text { display: block; }
}
@media (min-width: 1081px) { .flow-loop-text { display: none; } }
@media (max-width: 940px) {
  .hero-split { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .figure { padding: 22px 18px; }
  .arch-layer { grid-template-columns: 1fr; gap: 8px; }
  .arch-layer + .arch-layer::before { left: 50%; }
  .arch-layer + .arch-layer::after { left: calc(50% - 4px); }
  .arch-label { text-align: center; }
  .g-row { grid-template-columns: 1fr; gap: 4px; }
  .g-axis .g-l { display: none; }
  .cmp-row { grid-template-columns: 58px minmax(0, 1fr) 56px; gap: 8px; }
}

/* ---------- rating list: label on the left, dots on the right ---------- */
ul.rate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rate-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; border-top: 1px solid var(--hairline); font-size: 0.93rem; }
.rate-list li:first-child { border-top: none; }
.rate-list li > span:first-child { color: var(--text); font-weight: 500; }
@media (max-width: 560px) { .rate-list li { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* ---------- any link inside running text or table cells looks like a link ---------- */
main p a:not(.btn):not(.ecta-link), main td a, main li > a:not(.btn):not(.card):not(.row-link):not(.crumbs a), .fig-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- alignment fixes ---------- */
.rate em { min-width: 4.8em; }
@media (min-width: 941px) { .svc-grid .svc.feature { grid-row: span 2; } }

.icon-strip > a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--glass-border); font-weight: 600; font-size: 0.92rem; color: var(--text); transition: border-color .2s; }
.icon-strip > a:hover { border-color: var(--accent-line); }

/* ---------- visuals inside article prose ---------- */
.prose .figure { margin: 28px 0; }
.prose .figure .fig-title { margin: 0 0 18px; font-size: 1rem; }
.prose .flow, .prose .rate-list, .prose .checks { padding-left: 0; margin: 0; }
.prose .checks { margin-top: 16px; }               /* a checklist keeps the same gap from the text around it as paragraphs do */
.prose .checks.is-tight { margin-top: 4px; }
.prose .checks + p { margin-top: 16px; }
.prose .flow > li, .prose .rate-list li { color: inherit; }
.prose .illo { margin: 28px 0; }
.grid-2 > *, .grid-3 > *, .grid-4 > *, .eng-grid > *, .svc-grid > *, .case-grid > * { min-width: 0; }
.rate-list li { flex-wrap: wrap; row-gap: 4px; }

/* ======================================================================
   TEAM PAGE
   ====================================================================== */
/* cards share the full row however many there are, so a short row never leaves an empty gap */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1080px) { .team-grid:not(.is-lead) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .team-grid:not(.is-lead) { grid-template-columns: 1fr; } }
.team-grid.is-lead { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.member { padding: 26px 22px 22px; display: flex; flex-direction: column; text-align: center; transition: transform .25s ease, border-color .3s; }
.member:hover { transform: translateY(-4px); border-color: var(--accent-line); }
.member[hidden] { display: none; }
.avatar { width: 128px; height: 128px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-family: "Plus Jakarta Sans", sans-serif; font-size: 2.5rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--a1, #2d7fe0), var(--a2, #102c52)); box-shadow: 0 0 0 4px var(--bg-2), 0 0 0 5px var(--glass-border); letter-spacing: 0.02em; }
.is-lead .avatar { width: 152px; height: 152px; font-size: 3rem; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* leaders read as a tier above the team: a warm tint and an accent line along the top */
.is-lead .member { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--accent-soft), transparent 55%), var(--glass-bg); border-color: var(--accent-line); }
.is-lead .member::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--blue)); }
.member h3 { font-size: 1.15rem; margin-bottom: 4px; }
.member .m-role { font-size: 0.86rem; font-weight: 600; color: var(--accent); }
.member .m-where { margin-top: 6px; font-size: 0.8rem; color: var(--faint); }
.member .m-bio { margin-top: 12px; font-size: 0.88rem; color: var(--muted); line-height: 1.55; }
.member .m-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: auto; padding-top: 16px; }
.member .m-tags span { font-size: 0.72rem; color: var(--muted); background: var(--glass-bg-2); border: 1px solid var(--glass-border); padding: 3px 10px; border-radius: 100px; }
.team-count.filter-count { margin: -12px 0 24px; }

@media (max-width: 460px) { .team-grid, .team-grid.is-lead { grid-template-columns: 1fr; } }

/* ---------- section intros use the full width, so short ones stay on one line ---------- */
.sec-head .lead { max-width: none; text-wrap: pretty; }

/* ---------- cookie consent banner (only shown when analytics is configured) ---------- */
.consent { position: fixed; z-index: 150; left: 16px; right: 16px; bottom: 16px; max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg); }
.consent[hidden] { display: none; }
.consent p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.consent p b { color: var(--text); }
.consent p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 8px; flex: none; }
.consent-actions .btn { padding: 10px 16px; font-size: 0.88rem; }
.foot-link-btn { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.foot-link-btn[hidden] { display: none; }
@media (max-width: 640px) {
  .consent { flex-direction: column; align-items: stretch; }
  .consent-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- shared layout helpers ---------- */
/* Each of these replaces an inline style attribute, which outranked every selector. Inside a
   card or a prose block, component rules such as ".ind-tile p" or ".card p + p" are more
   specific than a class, so the ones that sit inside components are marked important. That is
   what makes them behave like the inline styles they replace. The two section helpers need no
   such help: nothing else targets ".sec" with more weight. */
.sec.tight { padding-top: 0; }           /* a section stacked under another, no double gap */
.sec.after-hero { padding-top: 56px; }   /* the first section below a page hero */
p.note-sm { margin-top: 14px !important; font-size: 0.88rem !important; }   /* short note under a block */
p.push-foot { margin-top: auto !important; padding-top: 14px !important; }  /* last line pinned to the foot of a card */
small.cap { display: block; font-weight: 500 !important; font-size: 0.78rem !important; color: var(--faint) !important; }
ul.plain-list { list-style: none; padding: 0 !important; margin: 14px 0 0 !important; display: grid; gap: 10px !important; }

/* ---------- at a glance: one screen summary under a page hero (built by src/summaries.py) ---------- */
.summary { overflow: hidden; }
.sum-head, .sum-block { margin: 0 48px; }
.sum-head { padding-top: 44px; }
.sum-head.has-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.sum-head h2 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.06; }
.sum-sub { margin-top: 14px; font-size: 1.12rem; line-height: 1.55; color: var(--muted); }
.sum-stat { text-align: right; }
.sum-stat .v { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(3.2rem, 6vw, 4.8rem); font-weight: 600; line-height: 1; background: linear-gradient(104deg, var(--accent), var(--blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-variant-numeric: tabular-nums; }
.sum-stat .l { display: block; margin-top: 8px; font-weight: 600; }
.sum-stat small { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--faint); }
.sum-block { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.sum-block h3 { font-family: "Inter", sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.sum-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.sum-grid { gap: 18px 36px; }
.sum-grid b { display: block; font-weight: 600; line-height: 1.3; }
.sum-grid span { display: block; margin-top: 3px; font-size: 0.95rem; line-height: 1.45; color: var(--muted); }
.sum-foot { position: relative; margin-top: 40px; padding: 26px 48px; background: linear-gradient(135deg, var(--band-blue), color-mix(in srgb, var(--band-orange) 88%, #000)); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.sum-promises { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 0.95rem; color: rgba(255,255,255,0.92); }
.sum-promises li { position: relative; padding-left: 16px; }
.sum-promises li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
@media (max-width: 940px) {
  .sum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sum-head.has-stat { grid-template-columns: 1fr; gap: 20px; }
  .sum-stat { text-align: left; }
}
@media (max-width: 560px) {
  .sum-head, .sum-block { margin: 0 22px; }
  .sum-head { padding-top: 28px; }
  .sum-block { margin-top: 28px; }
  .sum-grid { grid-template-columns: 1fr; }
  .sum-foot { padding: 22px; }
  .sum-foot .btn { width: 100%; justify-content: center; }
}

/* ============ TOPIC CARDS ============ */
/* the Insights topics: icon beside the title, a short line, and a link to the guide */
.topic-grid .topic { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; padding: 24px; }
.topic-grid .topic .si { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); transition: transform .45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color .3s ease, color .3s ease; }
.topic-grid .topic .si svg { width: 22px; height: 22px; }
.topic-grid .topic h3 { font-size: 1.15rem; margin: 0; }
.topic-grid .topic p, .topic-grid .topic .more { grid-column: 1 / -1; }
.topic-grid .topic p { margin-top: 14px; color: var(--muted); font-size: 0.94rem; }
.topic-grid .topic .more { padding-top: 14px; }
.topic-grid .topic:hover .si { background: var(--accent); color: var(--on-accent); transform: rotate(-6deg) scale(1.06); }
@media (max-width: 940px) { .topic-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .topic-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .topic-grid .topic:hover .si { transform: none; } }

/* ============ SMALL SCREEN FIXES ============ */
/* footer columns may shrink below their longest word, and the tagline wraps on the narrowest phones */
.foot-grid > * { min-width: 0; }
@media (max-width: 420px) { .foot-brand .foot-tagline { font-size: 0.84rem; letter-spacing: 0.04em; } .foot-tagline i { padding: 0 3px; } }
/* the smallest phones: large headings step down so single long words still fit */
@media (max-width: 360px) {
  .sec-head h2, .sum-head h2 { font-size: 1.75rem; }
  .cta-band h2 { font-size: 1.85rem; }
  .page-hero h1 { font-size: 2rem; }
}
@media (max-width: 340px) { .foot-brand .foot-tagline { display: flex; flex-wrap: wrap; white-space: normal; line-height: 1.8; } }
/* the top menu links on tablets get a taller tap area */
.nav-links a { padding-top: 8px; padding-bottom: 8px; }
/* the header stays one line on tablets: labels never wrap, and spacing tightens before the phone menu takes over */
.nav-links a, .brand, .nav-actions .btn { white-space: nowrap; }
@media (min-width: 941px) and (max-width: 1180px) { .nav-links { gap: 16px; } .nav-links a { font-size: 0.86rem; } .nav-actions .btn { padding-left: 16px; padding-right: 16px; font-size: 0.86rem; } .nav-inner { gap: 14px; } }
@media (min-width: 941px) and (max-width: 1040px) { .brand > span:not(.mark) { display: none; } }
small.muted { font-size: max(12px, 0.72rem); }
/* the FAQ topic links fill their tile, so the whole tile is the tap target */
nav.icon-strip a { display: inline-block; padding: 10px 0; margin: -10px 0; }
/* breadcrumb links get a finger sized tap area without moving the layout */
.crumbs a { display: inline-block; padding: 10px 2px; margin: -10px -2px; }
/* labels and chart axes never drop below 12px */
.eyebrow, .card .kicker, .ci-list .ct, .flow .fl-when, .arch-label, .panel-badge,
.key-tag, .g-axis, .g-ticks span, .member .m-tags span { font-size: max(12px, 0.72rem); }

/* ============ ROLE CARDS ============ */
/* Careers: each open role opens in place to show the work, what we look for and how to apply */
.roles { display: grid; gap: 14px; }
.role { border-radius: var(--radius); overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease; }
.role[open], .role:hover { border-color: var(--accent-line); }
.role summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; cursor: pointer; }
.role summary::-webkit-details-marker { display: none; }
.role summary h3 { font-size: 1.15rem; margin: 0 0 4px; }
.role summary .rmeta { color: var(--muted); font-size: 0.92rem; }
.role summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.role-tog { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); transition: transform .3s ease, background-color .3s ease, color .3s ease; }
.role-tog svg { width: 18px; height: 18px; }
.role[open] .role-tog { transform: rotate(180deg); background: var(--accent); color: var(--on-accent); }
.role-body { padding: 4px 26px 26px; border-top: 1px solid var(--hairline); }
.role-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 22px; }
.role-cols h4 { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; }
.role-cols .checks { margin: 0; }
.role-apply { margin-top: 24px; padding: 18px 20px; border-radius: 14px; background: var(--accent-soft); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.role-apply p { margin: 0; color: var(--text); font-size: 0.95rem; }
.role-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.role-actions .btn { padding: 11px 18px; font-size: 0.9rem; }
@media (max-width: 700px) {
  .role summary { padding: 18px 18px; }
  .role-body { padding: 4px 18px 20px; }
  .role-cols { grid-template-columns: 1fr; gap: 18px; }
  .role-actions, .role-actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .role-tog { transition: none; } }
@media print { .role-body { display: block !important; } .role-tog, .role-actions { display: none !important; } }

/* ============ POST CARDS ============ */
/* compact article cards for "Keep reading": three across so each title fits on one line, a small photo, two lines of summary */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.post-grid.is-3 { grid-template-columns: repeat(3, 1fr); }
.post-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* eight cards: two even rows of four */
.post-grid .post { padding: 12px 12px 18px; }
.post-grid .post .illo.is-bleed { margin: 0 0 14px; border-radius: 12px; }
.post-grid .post .illo.is-bleed > picture { aspect-ratio: 16 / 10; }
.post-grid .post .article-meta { margin: 0 6px 8px; font-size: 0.78rem; gap: 10px; }
.post-grid .post h3 { font-size: 1.02rem; line-height: 1.3; margin: 0 6px 8px; }
.post-grid .post p { margin: 0 6px; font-size: 0.87rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-grid .post .more { margin: 0 6px; padding-top: 12px; font-size: 0.88rem; }
@media (max-width: 1420px) { .post-grid, .post-grid.is-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1420px) { .post-grid.is-4 { gap: 14px; } }
@media (max-width: 1080px) { .post-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .post-grid, .post-grid.is-3, .post-grid.is-4 { grid-template-columns: 1fr; }
  .post-grid .post .illo.is-bleed > picture { aspect-ratio: 21 / 9; }  /* one card per row: a wide, shorter photo */
}

/* ============ PHOTO TREATMENT ============ */
/* Photos are set into the design rather than pasted on: an offset outline frame behind the
   large ones, a light brand tint and edge shading over every photo, one shared colour grade,
   and a slow drift on scroll (site.js sets --py) so each reads as a window, not a print. */
.illo:has(> picture) { position: relative; overflow: visible; border: none; box-shadow: none; background: none; isolation: isolate; }
.illo:has(> picture) > picture { position: relative; display: block; overflow: hidden; border-radius: inherit; background: #0b1b2e; box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--blue) 55%, transparent), 0 20px 40px -28px color-mix(in srgb, var(--accent) 55%, transparent); }
.illo:has(> picture) > picture img, .fphoto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.04); transform: translate3d(0, var(--py, 0%), 0) scale(var(--pz, 1.1)); transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
/* tint and edge shading, drawn over the photo */
.illo:has(> picture) > picture::after, .fphoto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%, transparent 58%, color-mix(in srgb, var(--blue) 24%, transparent));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 -90px 90px -60px rgba(8, 11, 18, 0.38); }
:root[data-theme="dark"] .illo:has(> picture) > picture img, :root[data-theme="dark"] .fphoto img { filter: saturate(0.85) contrast(1.05) brightness(0.88); }
/* the offset frame behind a large photo; the figure keeps room for it so nothing spills off a phone screen */
.illo:not(.is-bleed):has(> picture) { margin: 22px 22px 22px 0; }
.illo:not(.is-bleed):has(> picture)::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: -1; border-radius: inherit; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--blue) 20%, transparent)); }
/* a dot pattern peeking out from behind the top corner */
.illo:not(.is-bleed):has(> picture)::after { content: ""; position: absolute; top: -22px; left: -22px; width: 120px; height: 120px; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 70%, transparent) 1.6px, transparent 1.8px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(135deg, #000 30%, transparent 75%); mask-image: linear-gradient(135deg, #000 30%, transparent 75%); }
/* photos inside cards lose the frame and zoom a little on hover instead */
.illo.is-bleed:has(> picture) > picture { box-shadow: none; }
.card:hover .illo.is-bleed > picture img { --pz: 1.16; }
.illo.is-bleed > picture img { --pz: 1.06; }
/* a photo filling one side of a card, edge to edge, as tall as the text beside it */
.illo.is-fill:has(> picture) { margin: 0; height: 100%; }
.illo.is-fill:has(> picture)::before, .illo.is-fill:has(> picture)::after { content: none; }
.illo.is-fill:has(> picture) > picture { height: 100%; border-radius: 0; box-shadow: none; }
.illo.is-fill > picture img { --pz: 1.06; }
.card:hover .illo.is-fill > picture img { --pz: 1.12; }
@media (max-width: 560px) {
  .illo:not(.is-bleed):has(> picture) { margin: 14px 12px 12px 0; }
  .illo:not(.is-bleed):has(> picture)::after { top: -14px; left: 0; width: 90px; height: 90px; }
  .illo:not(.is-bleed):has(> picture)::before { inset: 12px -12px -12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .illo:has(> picture) > picture img, .fphoto img { transform: none; transition: none; }
}

/* ============ BACK TO TOP ============ */
/* a round button whose outline fills as the page is read: empty at the top, a full ring at the footer */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--text); background: var(--glass-bg); border: none; box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); transition: transform .25s ease, color .25s ease, background-color .3s ease, opacity .25s ease, visibility .25s; }
.to-top:hover { transform: translateY(-3px); color: var(--accent); }
/* hidden at the top of the page, where there is nowhere to go back to */
.to-top:not(.is-shown) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); }
@media (max-width: 560px) { .to-top { right: 14px; bottom: 14px; width: 46px; height: 46px; } }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.to-top .tt-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.to-top .tt-ring circle { fill: none; stroke-width: 2.5; }
.to-top .tt-track { stroke: color-mix(in srgb, var(--accent) 28%, transparent); }
.to-top .tt-fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .12s linear; }
.to-top.is-full .tt-fill { stroke-dasharray: none; }
.to-top.is-empty .tt-fill { stroke-opacity: 0; }
.to-top .tt-arrow { width: 20px; height: 20px; position: relative; transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.to-top:hover .tt-arrow { transform: translateY(-2px); }
@media (max-width: 560px) { .to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top .tt-fill, .to-top .tt-arrow { transition: none; } .to-top:hover, .to-top:hover .tt-arrow { transform: none; } }

/* ============ HERO MEDIA ============ */
/* a live animated backdrop behind the home hero; the page reads the same without it */
.hero.has-media { position: relative; isolation: isolate; }
.hero.has-media > .wrap { position: relative; z-index: 1; }
.hero-media { position: absolute; inset: 0 0 -40px; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.hero-canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; }
.hero-canvas.is-on { opacity: 1; }
@media (min-width: 941px) {
  .hero.has-media { min-height: calc(100svh - 84px); display: flex; flex-direction: column; justify-content: center; padding-bottom: 84px; }
}
.scroll-cue { position: absolute; left: 50%; bottom: 18px; z-index: 1; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-hi); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: cue-bounce 2.4s ease-in-out infinite; }
.scroll-cue:hover { color: var(--accent); border-color: var(--accent-line); }
.scroll-cue svg { width: 18px; height: 18px; }
@keyframes cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (max-width: 940px) { .scroll-cue { display: none; } }

/* ============ TECH MARQUEE: LOGOS AND TWO ROWS ============ */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.marquee-mask { display: grid; gap: 14px; }
.marquee-track.is-reverse { animation-direction: reverse; animation-duration: 44s; }
.tech-pill .tl { width: 18px; height: 18px; flex: none; fill: currentColor; opacity: 0.85; transition: opacity .25s ease, transform .35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tech-pill { transition: color .25s ease, border-color .25s ease; }
.tech-pill:hover { color: var(--text); border-color: var(--accent-line); }
.tech-pill:hover .tl { opacity: 1; transform: scale(1.18); }

/* ============ SLIDER ============ */
/* the home portfolio: a sideways strip that snaps card by card, with buttons and a progress bar */
.slider { position: relative; }
.work-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; padding: 12px 2px 48px; margin: -12px -2px -30px; scrollbar-width: none; }
.work-track::-webkit-scrollbar { display: none; }
.work-track > .work-card { scroll-snap-align: start; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.work-track > .work-card .work-body { flex: 1; }
.work-track > .work-card .work-tags { margin-top: auto; padding-top: 16px; }
.work-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.work-track.is-dragging .work-card { pointer-events: none; }
.work-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.slider-ctrl { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.slider-btn { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-hi); transition: transform .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
.slider-btn svg { width: 18px; height: 18px; }
.slider-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-line); transform: translateY(-2px); }
.slider-btn:disabled { opacity: 0.4; cursor: default; }
.slider-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--hairline); overflow: hidden; }
.slider-bar > span { display: block; height: 100%; width: var(--p, 33%); margin-left: var(--o, 0%); border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--blue)); transition: margin-left .15s linear; }
@media (max-width: 940px) { .work-track { grid-auto-columns: calc((100% - 22px) / 2); } }
@media (max-width: 560px) { .work-track { grid-auto-columns: 86%; gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .work-track { scroll-behavior: auto; } }

/* ============ CURSOR ============ */
/* a soft ring that trails the pointer and swells over anything clickable. The system cursor
   stays, so text fields and links keep their usual pointer. Mouse and trackpad only. */
.cursor-ring, .cursor-dot { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s ease; }
.cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1.5px solid var(--accent); transition: opacity .3s ease, width .25s ease, height .25s ease, margin .25s ease, background-color .25s ease, border-color .25s ease; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); }
.has-cursor .cursor-ring, .has-cursor .cursor-dot { opacity: 1; }
.has-cursor .cursor-ring.is-link { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent-line); }
.has-cursor .cursor-ring.is-down { width: 28px; height: 28px; margin: -14px 0 0 -14px; }

/* ============ SMALL MOTION ============ */
/* icons give a little bounce when their card is hovered */
.svc .si, .why .wi, .prow .pi { transition: transform .45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.svc:hover .si { animation: icon-bounce .7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.why:hover .wi, .prow:hover .pi { animation: icon-bounce .7s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes icon-bounce { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-7px) scale(1.08); } 65% { transform: translateY(1px) scale(0.98); } 100% { transform: translateY(0) scale(1); } }
.why, .step, .member { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.why:hover, .step:hover, .member:hover { transform: translateY(-5px); }
/* the phone menu drops open instead of appearing at once */
@media (max-width: 940px) {
  .nav[data-menu="open"] .mobile-menu { animation: menu-drop .35s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: top center; }
  .nav[data-menu="open"] .mobile-menu a { animation: menu-item .4s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .nav[data-menu="open"] .mobile-menu a:nth-child(2) { animation-delay: .03s; }
  .nav[data-menu="open"] .mobile-menu a:nth-child(3) { animation-delay: .06s; }
  .nav[data-menu="open"] .mobile-menu a:nth-child(4) { animation-delay: .09s; }
  .nav[data-menu="open"] .mobile-menu a:nth-child(5) { animation-delay: .12s; }
  .nav[data-menu="open"] .mobile-menu a:nth-child(6) { animation-delay: .15s; }
  .nav[data-menu="open"] .mobile-menu a:nth-child(n+7) { animation-delay: .18s; }
}
@keyframes menu-drop { from { opacity: 0; transform: translateY(-10px) scaleY(0.96); } to { opacity: 1; transform: none; } }
@keyframes menu-item { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .scroll-cue, .svc:hover .si, .why:hover .wi, .prow:hover .pi,
  .nav[data-menu="open"] .mobile-menu, .nav[data-menu="open"] .mobile-menu a { animation: none; }
  .why:hover, .step:hover, .member:hover { transform: none; }
}

/* ============ HIGH CONTRAST, FORCED COLOURS AND PRINT ============ */

/* Readers who ask for more contrast get solid borders and full strength body text. */
@media (prefers-contrast: more) {
  :root, :root[data-theme="light"], :root[data-theme="dark"] {
    --muted: var(--text);
    --faint: var(--text);
    --hairline: currentColor;
  }
  .glass, .card, .filter, .faq-item, .work-card, .member, .arch-node, .flow > li,
  input, select, textarea { border-width: 2px; }
  main p a:not(.btn), main li > a:not(.btn):not(.card) { text-decoration-thickness: 2px; }
}

/* Windows High Contrast and similar modes replace every colour, so anything that carries
   meaning through colour alone needs a second signal: a border, an underline or a shape. */
/* ---------- phone and tablet fixes ---------- */
@media (max-width: 1080px) {
  /* steps with no icon (question and answer flows) put the question above its answer */
  .flow > li > b:first-child, .flow > li > b:first-child ~ * { grid-column: 1 / -1; }
  .flow > li:has(> b:first-child)::before { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  /* long button labels wrap onto a second line instead of running into the edges */
  .btn { white-space: normal; line-height: 1.3; }
  /* hero cards: float inside the screen edge and leave room above and below */
  .hero-panel { margin-block: 52px 44px; }
  .panel-float { padding: 12px 16px; gap: 10px; }
  .panel-float.f1 { top: -52px; right: 0; }
  .panel-float.f2 { bottom: -46px; left: 0; }
  .panel-float .ring { width: 32px; height: 32px; }
  .prow .pv { font-size: 1rem; white-space: nowrap; }
  /* icon tiles: items with a caption get the full row, short ones stay two across */
  .icon-strip:has(> :nth-child(5):last-child) > * { flex-basis: calc((100% - 12px) / 2); }   /* five on a phone: two, two, one */
  .icon-strip:has(.cap) > *:nth-child(n) { flex-basis: 100%; }   /* tiles with a caption stay one per row */
  .icon-strip > div { padding: 12px; gap: 10px; }
  .icon-strip .si-sm { width: 32px; height: 32px; }
  /* work cards: the banner becomes a slim strip, label on the left and icon on the right */
  .work-thumb { aspect-ratio: auto; height: 96px; }
  .work-thumb .wglyph { justify-items: end; padding-right: 22px; }
  .work-thumb .wglyph svg { width: 40px; height: 40px; }
  .work-thumb .wcat { top: 50%; transform: translateY(-50%); }
  /* "at a glance" facts: label above value, both left aligned, so long values wrap cleanly */
  .facts div { flex-direction: column; gap: 2px; }
  .facts dt { max-width: none; }
  .facts dd { text-align: left; }
  /* comparison tables become one card per row: the row name as a title, each cell under its column name */
  .table-wrap { overflow: visible; padding: 0; }
  table.compare { min-width: 0; font-size: 0.93rem; }
  table.compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.compare, table.compare tbody, table.compare tr, table.compare th, table.compare td { display: block; width: 100%; }
  table.compare tbody tr { padding: 16px 18px; border-top: 1px solid var(--hairline); }
  table.compare tbody tr:first-child { border-top: none; }
  table.compare tbody th { padding: 0 0 4px; border: none; font-size: 1rem; color: var(--text); }
  table.compare td { padding: 8px 0 0; border: none; }
  table.compare td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
}

@media (forced-colors: active) {
  .aura, .grain, .scroll-progress, .cb-blob, .wtex, .wsheen, .qm, .hero-media, .cursor-ring, .cursor-dot { display: none; }
  .glass, .card, .filter, .faq-item, .work-card, .member, .arch-node, .arch-nodes,
  .flow > li, .cmp-track, .g-track, input, select, textarea { border: 1px solid CanvasText; }
  /* the pressed filter is otherwise only an orange background */
  .filter[aria-pressed="true"] { border-width: 3px; text-decoration: underline; }
  /* chart series are told apart by fill colour, which the system flattens to one colour.
     Bars and their legend swatches get the same shapes, so the key still matches the chart. */
  .cmp-bar, .g-bar, .cmp-legend i, .g-legend i { border: 1px solid CanvasText; }
  .cmp-bar.is-base, .g-bar.is-base, .cmp-legend i.is-base, .g-legend i.is-base { background: transparent; border-style: dashed; }
  .g-bar.is-alt, .g-legend i.is-alt { border-width: 3px; }
  /* dot ratings: an unfilled dot becomes an outline rather than a paler fill */
  .rate i { border: 1px solid CanvasText; }
  .rate i:not(.on) { background: transparent; }
  .skip-link:focus, :focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }
}

/* Printing: drop the furniture and the decoration, open every answer, and keep cards whole. */
@media print {
  .nav, .foot, .aura, .grain, .scroll-progress, .consent, .skip-link, .to-top,
  .hero-cta, .cta-band, .filters, .filter-count, .filter-empty, .contact-form, .form-success,
  .faq-q .fi, .rgo, .more, nav.icon-strip, .hero-media, .scroll-cue, .slider-ctrl, .cursor-ring, .cursor-dot { display: none !important; }
  .work-track { grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; }
  :root, :root:not([data-theme="light"]), :root[data-theme="light"], :root[data-theme="dark"] {
    --bg: #fff; --bg-2: #fff; --text: #000; --muted: #222; --faint: #333;
    --glass-bg: transparent; --glass-bg-2: transparent; --glass-border: #999;
    --hairline: #999; --shadow-lg: none; --glass-shadow: transparent;
  }
  @page { margin: 18mm; }
  body { background: #fff; color: #000; }
  .glass, .card, .work-card, .member, .faq-item { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .sum-foot { background: none; color: #000; border-top: 1px solid #999; }
  .sum-foot .btn { display: none; }
  .sum-promises { color: #000; }
  .sum-stat .v { -webkit-text-fill-color: #000; color: #000; background: none; }
  .sec { padding: 18px 0; }
  h1, h2, h3 { break-after: avoid; }
  figure, .illo, table, .flow > li, .arch-layer { break-inside: avoid; }
  /* answers are collapsed on screen; on paper they belong with their questions */
  .faq-a { grid-template-rows: 1fr !important; opacity: 1 !important; visibility: visible !important; padding: 0 0 12px !important; }
  /* a printed page cannot be clicked, so spell out the targets it can reach */
  main a[href^="http"]::after, main a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
}