:root {
  --ink:#081422;
  --ink2:#0d1d30;
  --paper:#f4f1e9;
  --white:#fffdfa;
  --muted:#536071;
  --orange:#b6401d;
  --orange-light:#ff8962;
  --blue:#315fcf;
  --line:rgba(8,20,34,.17);
  --shell:min(1180px,calc(100vw - 48px));
  --radius:16px
}

/* V4 — editorial depth, insight navigation and useful error state */
.insight-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.insight-card{display:flex;flex-direction:column;min-height:22rem;padding:2rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);text-decoration:none;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.insight-card:hover,.insight-card:focus-visible{transform:translateY(-4px);border-color:var(--orange);box-shadow:0 20px 48px rgba(8,20,34,.1)}
.insight-card span{color:var(--orange);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.insight-card h2{margin:2rem 0 1rem;font-size:clamp(1.55rem,2vw,2.15rem)}
.insight-card p{margin:0 0 2rem;color:var(--muted);line-height:1.65}
.insight-card b{margin-top:auto}
.insight-article .article-grid>div>section{margin:0 0 3rem}
.table-wrap{overflow-x:auto;margin:3rem 0;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;background:var(--paper)}
th,td{padding:1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{background:var(--ink);color:#fff}
tbody th{width:38%}
.source-card>a:not(.button){display:block;padding:.85rem 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.not-found{min-height:calc(100vh - 6rem);display:grid;align-items:center;padding:clamp(5rem,12vw,10rem) 0;background:linear-gradient(135deg,var(--paper),#fff)}
.not-found h1{max-width:14ch;margin:.4rem 0 1rem;font-size:clamp(3rem,8vw,7rem);line-height:.92;letter-spacing:-.055em}
.not-found>div>p:not(.eyebrow){max-width:40rem;font-size:1.25rem;line-height:1.6}
.language-shortcuts{display:flex;gap:1rem;margin-top:3rem}
.language-shortcuts a{font-weight:700}
.trust-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.trust-grid article{padding:clamp(1.5rem,3vw,2.5rem);background:var(--white)}
.trust-grid h3{margin-bottom:.75rem}
.trust-grid p{margin:0;color:var(--muted)}
@media(max-width:900px){.insight-cards,.trust-grid{grid-template-columns:1fr}.insight-card{min-height:0}.not-found .hero-actions{align-items:flex-start}}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit
}
h1,h2,h3,p {
  margin-top:0;
  text-wrap:pretty
}
h1,h2,h3 {
  line-height:1.04;
  letter-spacing:-.04em
}
h1 {
  max-width:1040px;
  margin-bottom:24px;
  font-size:clamp(46px,6.3vw,84px)
}
h1 em {
  color:var(--orange-light);
  font-style:normal
}
h2 {
  font-size:clamp(32px,4.2vw,58px)
}
h3 {
  font-size:25px
}
.shell {
  width:var(--shell);
  margin-inline:auto
}
.skip {
  position:fixed;
  top:-80px;
  left:18px;
  z-index:200;
  padding:12px 18px;
  background:var(--orange);
  color:#fff
}
.skip:focus {
  top:12px
}
.header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(8,20,34,.96);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(16px)
}
.nav {
  min-height:72px;
  display:flex;
  align-items:center;
  gap:28px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#fff;
  text-decoration:none;
  font-size:18px;
  font-weight:820
}
.brand b {
  color:var(--orange-light)
}
.mark {
  width:27px;
  height:27px;
  padding:5px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  background:#16273d;
  border:1px solid rgba(255,255,255,.15);
  border-radius:7px
}
.mark i {
  background:var(--blue)
}
.mark i:nth-child(2) {
  background:var(--white)
}
.mark i:nth-child(3) {
  grid-column:2;
  background:var(--orange-light)
}
nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:25px
}
nav a,.langs a {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:#d8dee7;
  text-decoration:none;
  font-size:14px;
  font-weight:750
}
nav a:hover,nav a:focus-visible,.langs a:hover,.langs a:focus-visible {
  color:#fff
}
.langs {
  display:flex;
  gap:2px;
  padding-left:12px;
  border-left:1px solid rgba(255,255,255,.15)
}
.langs a {
  min-width:38px;
  justify-content:center;
  font-size:11px;
  color:#aab4c1
}
.langs a[aria-current] {
  color:#fff;
  text-decoration:underline;
  text-underline-offset:5px
}
.menu {
  display:none;
  background:none;
  border:1px solid rgba(255,255,255,.3);
  border-radius:8px;
  padding:10px;
  min-width:44px;
  min-height:44px
}
.menu span {
  display:block;
  width:20px;
  height:2px;
  margin:4px;
  background:#fff
}
.breadcrumb {
  display:flex;
  gap:10px;
  align-items:center;
  padding-top:16px;
  font-size:13px;
  color:var(--muted)
}
.breadcrumb a {
  min-height:36px;
  display:inline-flex;
  align-items:center
}
.hero {
  position:relative;
  overflow:hidden;
  padding:105px 0 82px;
  color:#fff;
  background:var(--ink)
}
.hero:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),radial-gradient(circle at 84% 28%,rgba(49,95,207,.3),transparent 27%);
  background-size:64px 64px,64px 64px,auto
}
.hero.compact {
  padding:82px 0 66px
}
.hero-inner {
  position:relative
}
.eyebrow {
  margin-bottom:20px;
  color:var(--orange-light);
  font-size:12px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase
}
.lead {
  max-width:840px;
  margin:0;
  color:#d0d7e1;
  font-size:clamp(19px,2.1vw,26px);
  line-height:1.46
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px
}
.hero-actions .button {
  margin:0
}
.button {
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:20px;
  padding:12px 20px;
  border:2px solid var(--ink);
  border-radius:10px;
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  font-weight:820;
  cursor:pointer
}
.button.primary {
  background:var(--orange-light);
  border-color:var(--orange-light);
  color:var(--ink)
}
.button.secondary {
  background:transparent;
  border-color:#8491a1;
  color:#fff
}
.button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid #78a1ff;
  outline-offset:3px
}
.button:disabled {
  opacity:.55;
  cursor:wait
}
.microcopy {
  margin:12px 0 0;
  color:#aeb9c7;
  font-size:13px
}
.proof {
  background:var(--ink2);
  color:#fff
}
.proof-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr)
}
.proof-grid div {
  padding:28px 0;
  border-right:1px solid rgba(255,255,255,.1);
  display:flex;
  gap:18px
}
.proof-grid div+div {
  padding-left:28px
}
.proof-grid span {
  color:var(--orange-light);
  font-size:12px
}
.statement,.section,.faq,.policy {
  padding:92px 0
}
.split {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:86px;
  align-items:start
}
.split>p {
  font-size:21px;
  color:var(--muted)
}
.section-head {
  max-width:880px;
  margin-bottom:42px
}
.section-head h2 {
  margin-bottom:0
}
.services {
  background:#e9e5da
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}
.card {
  min-height:290px;
  padding:28px;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-decoration:none;
  transition:.2s ease
}
.card:hover {
  background:var(--white);
  transform:translateY(-3px)
}
.card span {
  color:var(--orange);
  font-size:12px;
  font-weight:850
}
.card h3 {
  margin:48px 0 12px
}
.card p {
  color:var(--muted)
}
.card b {
  margin-top:auto;
  font-size:13px
}
.text-link {
  display:inline-block;
  margin-top:32px;
  color:var(--orange);
  font-weight:820;
  text-decoration:none
}
.dark {
  background:var(--ink);
  color:#fff
}
.dark .split>p,.dark article p {
  color:#bcc5d1
}
.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:58px;
  border-top:1px solid rgba(255,255,255,.16)
}
.steps article {
  padding:28px 25px;
  border-right:1px solid rgba(255,255,255,.12)
}
.steps span {
  color:var(--orange-light);
  font-size:12px
}
.steps h3 {
  margin-top:38px
}
.cta {
  padding:82px 0;
  background:var(--orange);
  color:#fff
}
.cta p {
  font-weight:800
}
.cta h2 {
  max-width:900px
}
.intro {
  margin-bottom:56px
}
.answer {
  padding:34px 0;
  background:#dce4f0
}
.answer strong {
  display:block;
  max-width:980px;
  font-size:clamp(21px,2.7vw,32px);
  line-height:1.35
}
.article-grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:86px
}
.article-grid article section+section {
  margin-top:62px
}
.article-grid article h2 {
  font-size:38px
}
.article-grid article p {
  color:#414e5f;
  font-size:18px
}
.outcomes {
  position:sticky;
  top:105px;
  padding:28px;
  background:#e6e1d6;
  border-top:4px solid var(--orange);
  align-self:start
}
.outcomes h2 {
  font-size:29px
}
.outcomes ul {
  list-style:none;
  padding:0;
  margin:24px 0
}
.outcomes li {
  padding:11px 0;
  border-top:1px solid var(--line);
  font-weight:700
}
.note {
  margin-top:44px;
  padding:22px;
  border-left:4px solid var(--blue);
  background:#e1e7f0
}
.fit-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line)
}
.fit-grid article {
  padding:26px;
  background:var(--paper)
}
.fit-grid h3 {
  margin-bottom:12px
}
.context-line {
  margin-top:26px;
  padding:18px 22px;
  background:#e0e6ef;
  border-left:4px solid var(--blue)
}
.service-depth {
  margin-top:60px;
  padding-top:52px;
  border-top:1px solid var(--line)
}
.service-depth .depth-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px
}
.service-depth li {
  margin:9px 0
}
.sources {
  margin-top:35px;
  padding:20px;
  border:1px solid var(--line);
  background:var(--white)
}
.sources a {
  color:#8e3016;
  font-weight:750
}
.faq {
  background:#e8e4d9
}
.faq .shell {
  max-width:900px
}
.faq details {
  border-top:1px solid var(--line);
  padding:20px 0
}
.faq summary {
  cursor:pointer;
  font-size:20px;
  font-weight:820;
  min-height:44px
}
.faq details p {
  max-width:780px;
  margin:14px 0 0;
  color:var(--muted)
}
.contact-grid {
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:76px
}
.contact-aside {
  position:sticky;
  top:110px;
  align-self:start
}
.contact-grid h2 {
  font-size:34px;
  overflow-wrap:anywhere
}
.contact-aside ol {
  padding-left:22px
}
.contact-grid form {
  display:grid;
  gap:18px
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.contact-grid label {
  display:grid;
  gap:6px;
  font-weight:760
}
.contact-grid input,.contact-grid textarea,.contact-grid select {
  width:100%;
  min-height:48px;
  padding:12px 13px;
  border:1px solid #8f9aa8;
  border-radius:8px;
  background:var(--white);
  color:var(--ink);
  font:inherit
}
.contact-grid textarea {
  min-height:145px;
  resize:vertical
}
.contact-grid [aria-invalid=true] {
  border-color:#a12020;
  box-shadow:0 0 0 2px rgba(161,32,32,.15)
}
.contact-grid small[data-error] {
  min-height:0;
  color:#961f1f;
  font-weight:650
}
.check {
  grid-template-columns:22px 1fr!important;
  align-items:start;
  font-weight:500!important
}
.check input {
  width:20px;
  min-height:20px;
  margin-top:3px
}
.hp {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important
}
.form-submit {
  justify-self:start;
  margin-top:4px;
  border:0;
  background:var(--orange)
}
.form-status {
  min-height:28px;
  padding:0;
  font-weight:750
}
.form-status.success,.form-status.failure {
  padding:14px;
  border-left:4px solid
}
.form-status.success {
  background:#dcebdd;
  border-color:#267233;
  color:#174c21
}
.form-status.failure {
  background:#f4dddd;
  border-color:#a12020;
  color:#781616
}
.policy article {
  max-width:850px
}
.policy h2 {
  margin-top:48px;
  font-size:32px
}
.policy p {
  color:#414e5f
}
.policy a {
  color:#8f3016
}
footer {
  padding:70px 0 24px;
  background:#06101c;
  color:#fff
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:58px
}
.footer-grid p {
  max-width:320px;
  margin-top:20px;
  color:#a7b1bf
}
.footer-grid>div {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px
}
.footer-grid strong {
  margin-bottom:9px;
  font-size:13px
}
.footer-grid a:not(.brand) {
  min-height:35px;
  display:flex;
  align-items:center;
  color:#b6c0cc;
  text-decoration:none;
  font-size:14px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  margin-top:56px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  color:#98a3b0;
  font-size:12px
}
.js .reveal {
  opacity:0;
  transform:translateY(16px);
  transition:.5s ease
}
.js .reveal.visible {
  opacity:1;
  transform:none
}
@media(max-width:980px) {
  .nav {
  min-height:68px
}
.menu {
  display:block;
  margin-left:auto
}
nav {
  display:none;
  position:absolute;
  top:68px;
  left:0;
  right:0;
  padding:20px 24px;
  background:var(--ink);
  flex-direction:column;
  align-items:stretch;
  gap:4px
}
nav.open {
  display:flex
}
nav a {
  min-height:48px
}
.langs {
  padding-left:0;
  border:0
}
.hero {
  padding:84px 0 66px
}
.proof-grid,.cards,.steps {
  grid-template-columns:1fr 1fr
}
.split,.article-grid,.contact-grid {
  grid-template-columns:1fr;
  gap:42px
}
.outcomes,.contact-aside {
  position:static
}
.footer-grid {
  grid-template-columns:1fr 1fr
}
}
@media(max-width:640px) {
  :root {
  --shell:calc(100vw - 32px)
}
body {
  font-size:16px
}
h1 {
  font-size:clamp(39px,12vw,54px)
}
.langs a {
  min-width:34px
}
.hero-actions {
  align-items:stretch;
  flex-direction:column
}
.hero-actions .button {
  width:100%
}
.proof-grid,.cards,.steps,.footer-grid,.fit-grid,.service-depth .depth-grid,.form-row {
  grid-template-columns:1fr
}
.proof-grid div,.proof-grid div+div {
  padding:20px 0;
  border-right:0
}
.statement,.section,.faq,.policy {
  padding:66px 0
}
.card {
  min-height:235px
}
.steps article {
  border-right:0
}
.footer-bottom {
  gap:14px;
  flex-direction:column
}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
.js .reveal,.card {
  opacity:1;
  transform:none;
  transition:none
}
}
.proof-box {
  margin-top:34px;
  padding:25px;
  background:#e1e7f0;
  border-left:4px solid var(--blue)
}
.proof-box h3 {
  margin-bottom:8px
}
.proof-box p {
  margin:0
}
.source-card {
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  align-items:center;
  margin-top:20px;
  padding:20px;
  background:var(--white);
  border:1px solid var(--line)
}
.source-card strong {
  width:100%
}
.source-card a {
  color:#8e3016;
  font-weight:750
}

/* Visual system v3 — verified desktop and mobile */
:root {
  --paper:#f6f3ec;
  --surface:#fffdf8;
  --ink:#071522;
  --ink2:#0c1d2e;
  --orange:#b74421;
  --orange-light:#ff8a63;
  --blue:#2f64d8;
  --line:rgba(7,21,34,.14);
  --shadow:0 18px 50px rgba(7,21,34,.08)
}
body {
  line-height:1.58
}
h1,h2,h3 {
  letter-spacing:-.045em
}
h1 {
  max-width:880px;
  font-size:clamp(48px,5.7vw,78px);
  line-height:.98
}
h2 {
  font-size:clamp(34px,3.7vw,54px);
  line-height:1.02
}
.header {
  background:rgba(7,21,34,.97)
}
.nav {
  min-height:70px
}
.hero {
  padding:92px 0 78px;
  background:linear-gradient(135deg,#071522 0%,#0b1c2e 65%,#102946 100%)
}
.hero:before {
  opacity:.72;
  background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px
}
.hero:not(.compact) .hero-inner {
  min-height:510px;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(330px,.55fr);
  gap:70px;
  align-items:center
}
.hero-copy {
  position:relative;
  z-index:2
}
.hero .lead {
  max-width:735px;
  color:#cad3de;
  font-size:clamp(19px,1.7vw,24px)
}
.hero-actions {
  margin-top:30px
}
.hero-actions .button {
  min-height:52px
}
.hero-actions .primary {
  box-shadow:0 12px 30px rgba(0,0,0,.22)
}
.hero-visual {
  position:relative;
  width:min(390px,100%);
  aspect-ratio:1;
  justify-self:end
}
.hero-visual:before {
  content:"";
  position:absolute;
  inset:12%;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  box-shadow:inset 0 0 70px rgba(47,100,216,.11)
}
.hero-visual:after {
  content:"";
  position:absolute;
  inset:34%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,138,99,.55) 0 3%,rgba(255,138,99,.08) 4% 40%,transparent 42%);
  border:1px solid rgba(255,138,99,.28)
}
.orbit {
  position:absolute;
  border:1px solid rgba(120,161,255,.28);
  border-radius:50%;
  transform:rotate(-22deg)
}
.orbit-a {
  inset:2% 20%
}
.orbit-b {
  inset:20% 2%;
  transform:rotate(30deg)
}
.signal {
  position:absolute;
  z-index:2;
  width:138px;
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(7,21,34,.82);
  backdrop-filter:blur(10px);
  box-shadow:0 16px 35px rgba(0,0,0,.22)
}
.signal span {
  display:block;
  margin-bottom:4px;
  color:var(--orange-light);
  font-size:10px;
  font-weight:850;
  letter-spacing:.14em
}
.signal strong {
  font-size:15px
}
.signal-a {
  top:10%;
  right:3%
}
.signal-b {
  top:47%;
  left:-2%
}
.signal-c {
  right:3%;
  bottom:8%
}
.proof-grid div {
  min-height:82px;
  align-items:center
}
.proof-grid strong {
  font-size:14px;
  line-height:1.35
}
.statement,.section,.faq,.policy {
  padding:82px 0
}
.section-head {
  max-width:900px;
  margin-bottom:38px
}
.section-head>p:last-child {
  max-width:760px;
  color:var(--muted);
  font-size:19px
}
.fit {
  background:#ece8df
}
.fit-head {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  column-gap:70px;
  align-items:end
}
.fit-head .eyebrow {
  grid-column:1/-1
}
.fit-head h2,.fit-head>p:last-child {
  margin-bottom:0
}
.fit-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  border:0;
  background:transparent
}
.fit-grid article {
  min-height:170px;
  display:grid;
  grid-template-columns:44px 1fr;
  gap:18px;
  padding:28px;
  background:var(--surface);
  border:1px solid rgba(7,21,34,.11);
  box-shadow:0 1px 0 rgba(255,255,255,.8);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease
}
.fit-grid article:hover {
  transform:translateY(-3px);
  border-color:rgba(47,100,216,.38);
  box-shadow:var(--shadow)
}
.fit-index {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--ink);
  border-radius:50%;
  font-size:11px;
  font-weight:850
}
.fit-grid h3 {
  margin:4px 0 10px;
  font-size:24px
}
.fit-grid p {
  margin:0;
  color:var(--muted)
}
.context-line {
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:24px 0 0;
  padding:0;
  color:#475466;
  background:transparent;
  border:0;
  font-size:14px
}
.context-line span {
  width:8px;
  height:8px;
  flex:0 0 auto;
  margin-top:7px;
  border-radius:50%;
  background:var(--blue)
}
.split {
  gap:72px
}
.services {
  background:#f2efe7
}
.cards {
  gap:14px;
  border:0;
  background:transparent
}
.card {
  min-height:270px;
  border:1px solid var(--line);
  background:var(--surface)
}
.card:hover {
  border-color:rgba(47,100,216,.3);
  box-shadow:var(--shadow)
}
.dark .steps {
  gap:1px;
  background:rgba(255,255,255,.12)
}
.dark .steps article {
  background:var(--ink)
}
.cta {
  position:relative;
  overflow:hidden;
  padding:78px 0;
  color:#fff;
  background:var(--ink2)
}
.cta:after {
  content:"";
  position:absolute;
  width:430px;
  height:430px;
  right:-160px;
  top:-210px;
  border-radius:50%;
  border:70px solid rgba(255,138,99,.13)
}
.cta .shell {
  position:relative;
  z-index:1
}
.cta .button {
  color:var(--ink);
  background:var(--orange-light);
  border-color:var(--orange-light)
}

@media(max-width:980px) {
  .hero:not(.compact) .hero-inner {
    grid-template-columns:minmax(0,1fr) 280px;
    gap:28px
  }
  .hero-visual {
    width:280px
  }
  .signal {
    width:118px;
    padding:10px 12px
  }
  .fit-head {
    grid-template-columns:1fr;
    gap:12px
  }
  .fit-head .eyebrow {
    grid-column:auto
  }
  .fit-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:720px) {
  :root {
    --shell:calc(100vw - 36px)
  }
  body {
    font-size:16px
  }
  .nav {
    min-height:64px
  }
  .brand {
    font-size:17px
  }
  .menu {
    display:block;
    margin-left:auto
  }
  nav {
    top:64px;
    gap:2px;
    padding:18px 18px 82px
  }
  .langs a {
    min-width:46px;
    min-height:42px
  }
  .hero {
    padding:54px 0 46px
  }
  .hero.compact {
    padding:52px 0 44px
  }
  .hero:not(.compact) .hero-inner {
    min-height:0;
    display:block
  }
  .hero-visual {
    display:none
  }
  .hero h1 {
    margin-bottom:20px;
    font-size:clamp(38px,11.2vw,46px);
    line-height:1.01
  }
  .hero .lead {
    font-size:18px;
    line-height:1.48
  }
  .eyebrow {
    margin-bottom:15px;
    font-size:10px
  }
  .hero-actions {
    display:grid;
    gap:9px;
    margin-top:24px
  }
  .hero-actions .button {
    width:100%;
    min-height:49px;
    margin:0
  }
  .hero-actions .secondary {
    min-height:42px;
    border-color:rgba(255,255,255,.35);
    font-size:14px
  }
  .microcopy {
    margin-top:10px;
    line-height:1.4
  }
  .proof-grid {
    grid-template-columns:1fr
  }
  .proof-grid div,.proof-grid div+div {
    min-height:0;
    padding:15px 0;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.1)
  }
  .proof-grid div:last-child {
    border-bottom:0
  }
  .statement,.section,.faq,.policy {
    padding:56px 0
  }
  h2 {
    font-size:clamp(31px,9vw,40px)
  }
  h3 {
    font-size:22px
  }
  .section-head {
    margin-bottom:28px
  }
  .section-head>p:last-child {
    font-size:17px
  }
  .fit-grid {
    grid-template-columns:1fr;
    gap:10px
  }
  .fit-grid article {
    min-height:0;
    grid-template-columns:36px 1fr;
    gap:14px;
    padding:21px 18px
  }
  .fit-index {
    width:34px;
    height:34px
  }
  .fit-grid h3 {
    margin:2px 0 7px;
    font-size:21px
  }
  .fit-grid p {
    font-size:15px
  }
  .context-line {
    margin-top:18px;
    font-size:13px
  }
  .split {
    gap:20px
  }
  .split>p {
    font-size:17px
  }
  .cards {
    grid-template-columns:1fr;
    gap:10px
  }
  .card {
    min-height:0;
    padding:22px
  }
  .card h3 {
    margin:24px 0 9px
  }
  .steps {
    margin-top:34px
  }
  .steps article {
    padding:22px 4px
  }
  .steps h3 {
    margin:14px 0 8px
  }
  .answer {
    padding:24px 0
  }
  .article-grid {
    gap:32px
  }
  .article-grid article section+section {
    margin-top:42px
  }
  .article-grid article h2 {
    font-size:31px
  }
  .outcomes {
    padding:22px
  }
  .contact-grid {
    gap:32px
  }
  .contact-grid h2 {
    font-size:27px
  }
  .contact-grid input,.contact-grid textarea,.contact-grid select {
    font-size:16px
  }
  .cta {
    padding:58px 0
  }
  .cta .button {
    width:100%
  }
  footer {
    padding-top:52px
  }
  .footer-grid {
    grid-template-columns:1fr;
    gap:34px
  }
  .footer-bottom {
    margin-top:38px
  }
}



/* ==================================================================
   V5 — form accessibile e misurazione
   ================================================================== */

/* La label non avvolge più il campo: è collegata con for/id e il
   messaggio di errore è collegato con aria-describedby. Il contenitore
   .form-field ricostruisce la spaziatura verticale che prima veniva
   dalla label-wrapper. */
.form-field {
  display:grid;
  gap:6px;
  /* Senza questo il contenuto si distribuisce sull'altezza della riga
     e il campo piu' corto viene stirato per pareggiare quello accanto. */
  align-content:start
}
/* La label NON deve essere una griglia: lo era per eredita' da quando
   avvolgeva il campo, e quella regola mandava l'asterisco a capo su una
   riga propria. Escluso il consenso privacy, che avvolge la casella e
   la griglia a due colonne gli serve davvero. */
.contact-grid .form-field>label:not(.check) {
  display:flex;
  align-items:baseline;
  gap:.3rem;
  font-weight:760
}
/* Le due colonne partono dall'alto: campi con nota o errore piu' lungo
   non allungano il campo accanto. */
.form-row {
  align-items:start
}
/* Stessa altezza per input e select affiancati, a prescindere da cosa
   c'e' sotto. */
.contact-grid input,
.contact-grid select {
  height:52px
}

/* Asterisco dei campi obbligatori: decorativo (aria-hidden), la
   semantica la porta l'attributo required. */
.req {
  color:var(--orange)
}
.form-legend {
  margin:0;
  color:var(--muted);
  font-size:14px
}

/* L'errore vuoto non deve occupare spazio né essere annunciato. */
.field-error:empty {
  display:none
}
.field-error {
  color:#961f1f;
  font-weight:650;
  font-size:14px
}

/* Impegno sul tempo di risposta, accanto al bottone: è il punto di
   massimo attrito ed è lì che va la rassicurazione, non a fondo pagina. */
.form-sla {
  margin:0;
  color:var(--muted);
  font-size:14px
}

/* ==================================================================
   V5 — Team, recapiti e identità
   ================================================================== */

.team-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
  margin-top:2.5rem
}
.member {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
  box-shadow:0 1px 2px rgba(8,20,34,.05),0 14px 30px rgba(8,20,34,.06)
}

/* Il rapporto d'aspetto sta QUI, su un normale elemento di blocco.
   Metterlo sull'<img> non funziona in modo affidabile: un elemento
   rimpiazzato dentro un flex container viene dimensionato dal contesto
   e la foto si allunga insieme alla card. Il contenitore detta la
   forma, l'immagine lo riempie in posizione assoluta. */
.member-media {
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#e6e2d8;
  /* Le tre card sono elementi di griglia e vengono portate tutte
     all'altezza della più alta. Senza flex:none il riquadro della foto
     assorbirebbe parte di quello spazio e la proporzione salterebbe:
     l'eccedenza deve andare tutta al corpo di testo. */
  flex:none
}
.member-photo,
.member-monogram {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.member-photo {
  display:block;
  object-fit:cover;
  object-position:center 20%
}
/* Ripiego quando la fotografia non è presente in img/. */
.member-monogram {
  display:grid;
  place-items:center;
  background:var(--ink2);
  color:var(--orange-light);
  font-size:3rem;
  font-weight:820;
  letter-spacing:.04em
}
.member-body {
  display:flex;
  flex-direction:column;
  flex:1;
  padding:1.6rem 1.4rem 1.7rem;
  text-align:center
}
.member-body h3 {
  margin:0 0 .3rem;
  font-size:1.2rem
}
.member-role {
  margin:0 0 .9rem;
  color:var(--orange);
  font-size:.875rem;
  font-weight:800
}
.member-area {
  margin:0;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.6
}
.member-link {
  margin-top:auto;
  padding-top:1.2rem;
  font-weight:750
}

/* Recapiti nella pagina contatti: lista di descrizione, non paragrafi,
   perché sono coppie etichetta/valore e come tali vanno annunciate. */
.contact-details {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.4rem 1.1rem;
  margin:1.25rem 0 1.5rem
}
.contact-details dt {
  color:var(--muted);
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}
.contact-details dd {
  margin:0
}
.contact-details address,
.footer-address {
  font-style:normal
}
.footer-address {
  margin-top:1rem;
  color:#aab4c1;
  font-size:14px;
  line-height:1.6
}

/* Elenco degli estremi societari nelle note legali. */
.identity {
  margin:1.25rem 0;
  padding:0;
  list-style:none
}
.identity li {
  padding:.6rem 0;
  border-bottom:1px solid var(--line)
}

/* Testo riservato alle tecnologie assistive. */
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}

@media(max-width:980px) {
  .team-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:640px) {
  .team-grid {
    grid-template-columns:1fr;
    gap:1.25rem
  }
  /* A colonna singola una foto quadrata occuperebbe uno schermo intero:
     si passa a un taglio orizzontale, che resta leggibile e non
     costringe a scorrere tre volte per vedere il team. */
  .member-media {
    aspect-ratio:3/2
  }
  .member-monogram {
    font-size:2.25rem
  }
}

/* Sette voci di menu: la barra deve poter andare a capo su schermi
   intermedi invece di comprimere le etichette o farle uscire. */
nav {
  flex-wrap:wrap;
  row-gap:0;
  column-gap:22px
}
.cases-empty {
  margin:0 0 1.5rem;
  color:var(--muted);
  line-height:1.65
}


/* ==================================================================
   V5 — Recapiti a schede e mappa su richiesta
   ================================================================== */

.contact-title {
  margin:0 0 .75rem;
  font-size:clamp(28px,3vw,38px)
}
.contact-intro {
  margin:0 0 1.75rem;
  color:var(--muted);
  line-height:1.65
}
.contact-cards {
  display:grid;
  gap:.9rem;
  margin:0 0 1.75rem;
  padding:0;
  list-style:none
}
.contact-card {
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.15rem 1.25rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
  box-shadow:0 1px 2px rgba(8,20,34,.04),0 10px 24px rgba(8,20,34,.05)
}
.contact-icon {
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  height:44px;
  border-radius:12px;
  background:rgba(182,64,29,.09);
  color:var(--orange)
}
.contact-text {
  display:grid;
  gap:.15rem;
  min-width:0
}
.contact-label {
  color:var(--muted);
  font-size:12px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase
}
.contact-value {
  color:var(--ink);
  font-size:1.05rem;
  font-weight:800;
  text-decoration:none;
  overflow-wrap:anywhere
}
.contact-value:hover,
.contact-value:focus-visible {
  color:var(--orange);
  text-decoration:underline;
  text-underline-offset:4px
}
.contact-note {
  margin:1.5rem 0 0;
  color:var(--muted)
}

/* Mappa: al caricamento c'è solo un segnaposto disegnato in CSS.
   L'iframe di Google arriva soltanto se la persona lo chiede, quindi
   nessun dato lascia il sito senza una scelta esplicita.
   Il fondo simula una pianta urbana con soli gradienti: nessuna
   immagine da scaricare, nessuna richiesta in più, e il segnaposto si
   legge come una mappa invece che come un riquadro vuoto. */
.map {
  position:relative;
  margin-top:.5rem;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 20%,rgba(104,150,96,.18) 0 54px,transparent 55px),
    radial-gradient(circle at 10% 84%,rgba(104,150,96,.15) 0 40px,transparent 41px),
    linear-gradient(115deg,transparent 0 47%,rgba(255,255,255,.9) 47% 50%,transparent 50%),
    repeating-linear-gradient(90deg,transparent 0 88px,rgba(255,255,255,.9) 88px 96px),
    repeating-linear-gradient(0deg,transparent 0 76px,rgba(255,255,255,.9) 76px 84px),
    repeating-linear-gradient(90deg,rgba(8,20,34,.035) 0 44px,transparent 44px 88px),
    #ece7db
}
.map-placeholder {
  display:grid;
  justify-items:center;
  gap:.85rem;
  padding:2.75rem 1.5rem;
  text-align:center
}
.map-pin {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--white);
  border:1px solid var(--line);
  color:var(--orange)
}
.map-address {
  margin:0;
  font-weight:800
}
.map-placeholder .button {
  margin:0
}
.map-note {
  margin:0;
  max-width:32ch;
  color:var(--muted);
  font-size:13px;
  line-height:1.5
}
.map iframe {
  display:block;
  width:100%;
  height:340px;
  border:0
}
@media(max-width:640px) {
  .contact-card {
    padding:1rem
  }
  .map-placeholder {
    padding:2rem 1.1rem
  }
  .map iframe {
    height:260px
  }
}

/* ==================================================================
   V5 — Profondità delle pagine servizio
   ================================================================== */

.depth-method {
  background:var(--white)
}
.phases {
  display:grid;
  gap:1px;
  margin:0;
  padding:0;
  list-style:none;
  background:var(--line);
  border:1px solid var(--line)
}
.phase {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.5rem;
  padding:clamp(1.5rem,3vw,2.25rem);
  background:var(--white)
}
.phase-index {
  color:var(--orange);
  font-size:.95rem;
  font-weight:850;
  letter-spacing:.1em
}
.phase h3 {
  margin:0 0 .3rem;
  font-size:1.35rem
}
.phase-time {
  margin:0 0 .8rem;
  color:var(--muted);
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}
.phase p:last-child {
  margin:0;
  color:var(--muted);
  line-height:1.7
}

.deliverables {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem
}
.deliverables article {
  padding:1.6rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white)
}
.deliverables h3 {
  margin:0 0 .6rem;
  font-size:1.2rem;
  color:var(--orange)
}
.deliverables p {
  margin:0;
  color:var(--muted);
  line-height:1.65
}

/* Le decisioni sono domande: vanno lette come tali, quindi corpo più
   grande e niente pallini che le trasformerebbero in un elenco della
   spesa. */
.decisions-block {
  background:var(--ink);
  color:#fff
}
.decisions-block .section-head h2 {
  color:#fff
}
.decisions-block .section-head p {
  color:#c3ccd8
}
.decisions {
  display:grid;
  gap:1px;
  margin:0;
  padding:0;
  list-style:none;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12)
}
.decisions li {
  padding:clamp(1.25rem,2.5vw,1.75rem);
  background:var(--ink);
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.5
}

.indicators {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
  margin:0
}
.indicators dt {
  margin-bottom:.5rem;
  padding-top:1rem;
  border-top:2px solid var(--orange);
  font-size:1.1rem;
  font-weight:820
}
.indicators dd {
  margin:0;
  color:var(--muted);
  line-height:1.65
}

@media(max-width:820px) {
  .deliverables,
  .indicators {
    grid-template-columns:1fr
  }
  .phase {
    grid-template-columns:1fr;
    gap:.5rem
  }
}

/* ==================================================================
   V5 — Prova sociale (numeri, citazioni, casi)
   I blocchi compaiono solo quando gli array in generate-site.mjs
   contengono materiale reale.
   ================================================================== */

.numbers {
  background:var(--ink);
  color:#fff
}
.numbers .section-head .eyebrow {
  color:var(--orange-light)
}
.numbers-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2rem;
  margin:0
}
.numbers-grid dt {
  font-size:clamp(2.75rem,6vw,4.25rem);
  font-weight:850;
  line-height:1;
  letter-spacing:-.045em;
  color:var(--orange-light)
}
.numbers-grid dd {
  margin:1rem 0 0
}
.numbers-grid dd strong {
  display:block;
  margin-bottom:.4rem;
  font-size:1.1rem
}
.numbers-grid dd span {
  color:#aeb9c7;
  font-size:.9rem;
  line-height:1.6
}

.quotes .shell {
  display:grid;
  gap:1.5rem
}
.quote {
  margin:0;
  padding:clamp(1.75rem,3vw,2.5rem);
  border-left:3px solid var(--orange);
  background:var(--white)
}
.quote blockquote {
  margin:0
}
.quote blockquote p {
  margin:0;
  font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.55
}
.quote figcaption {
  margin-top:1.25rem;
  color:var(--muted);
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase
}

.cases-grid {
  display:grid;
  gap:1.5rem
}
.case {
  padding:clamp(1.75rem,3vw,2.25rem);
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white)
}
.case h3 {
  margin:0 0 1.5rem;
  font-size:clamp(1.35rem,2.2vw,1.75rem)
}
/* I sei campi di un caso: contesto, vincolo, decisione, punto di
   partenza, risultato, periodo. Un caso senza il punto di partenza non
   dimostra nulla, quindi la griglia li mostra tutti allo stesso peso. */
.case-fields {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem 2rem;
  margin:0
}
.case-fields dt {
  margin-bottom:.35rem;
  color:var(--orange);
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase
}
.case-fields dd {
  margin:0;
  color:var(--muted);
  line-height:1.65
}
.case-note {
  margin:1.5rem 0 0;
  padding-top:1rem;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.85rem
}

@media(max-width:820px) {
  .numbers-grid,
  .case-fields {
    grid-template-columns:1fr
  }
}

/* Bio estesa: esperienza verificabile e certificazioni.
   Le card restano allineate anche se una sola persona ha già il
   materiale completo: la griglia le porta alla stessa altezza e il
   testo parte comunque dall'alto. */
.member-experience {
  margin:.9rem 0 0;
  color:var(--muted);
  line-height:1.6;
  font-size:.95rem
}
.member-credentials {
  margin-top:1.2rem;
  padding-top:1.1rem;
  border-top:1px solid var(--line);
  text-align:left
}
.member-credentials h4 {
  margin:0 0 .6rem;
  color:var(--muted);
  font-size:11px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase
}
.member-credentials ul {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.35rem
}
.member-credentials li {
  padding-left:1rem;
  position:relative;
  color:var(--ink);
  font-size:.88rem;
  line-height:1.45
}
.member-credentials li::before {
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--orange)
}
.member-training {
  margin:.7rem 0 0;
  color:var(--muted);
  font-size:.82rem;
  font-style:italic
}
.member-links {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-top:auto;
  padding-top:1.2rem
}
.member-links .member-link {
  margin:0;
  padding:0
}

/* ==================================================================
   V5 — CORREZIONI MOBILE
   Scritte per ultime, quindi vincono sulle regole precedenti senza
   doverle riscrivere. Due problemi di fondo, non uno:

   1. Il menu a tendina posizionava il selettore di lingua con un
      "top" fisso a 224px, calibrato su tre voci. Ora le voci sono
      sette e il selettore finiva sopra i link. Torna nel flusso.

   2. Diverse griglie avevano un numero di colonne fisso, corretto
      solo entro certi contenitori. Le media query però misurano il
      viewport, non il contenitore: una griglia a due colonne dentro
      una colonna laterale da 300px resta a due colonne anche su
      desktop, ed è così che le schede caso mostravano una parola per
      riga. Con auto-fit le colonne si contano sullo spazio davvero
      disponibile, ovunque il blocco venga inserito.
   ================================================================== */

/* --- Griglie che si adattano al contenitore, non al viewport --- */
.cases-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr))
}
.case-fields {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))
}
.deliverables {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))
}
.indicators {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))
}
.numbers-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))
}
.team-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))
}
.trust-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))
}
.contact-cards {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))
}

/* Titoli lunghi: su schermi stretti una parola lunga non deve
   allargare il riquadro oltre lo schermo. */
.case h3,
.member-body h3,
.deliverables h3,
.phase h3 {
  overflow-wrap:break-word;
  hyphens:auto
}

@media(max-width:980px) {
  /* Il selettore di lingua torna in fondo al menu aperto, dentro il
     flusso: nessun "top" da ricalibrare quando cambiano le voci. */
  nav {
    padding-bottom:0
  }
}

@media(max-width:720px) {
  /* Sette voci in colonna: righe più compatte per restare in una
     schermata senza dover scorrere il menu. */
  nav a {
    min-height:46px
  }

  /* Su telefono il caso si legge come una sequenza, non come una
     tabella a due colonne. */
  .case-fields {
    grid-template-columns:1fr;
    gap:1rem
  }
  .case {
    padding:1.35rem 1.15rem
  }
  .case h3 {
    font-size:1.3rem;
    line-height:1.2
  }
  .case-fields dt {
    font-size:.72rem
  }

  /* Le decisioni restano leggibili senza diventare titoli. */
  .decisions li {
    padding:1.1rem;
    font-size:1.02rem
  }
  .phase {
    padding:1.35rem 1.15rem
  }
  .deliverables article {
    padding:1.35rem
  }
  .numbers-grid dt {
    font-size:2.75rem
  }
  .indicators {
    gap:1.75rem
  }

  /* Il modulo: una colonna sola, campi a piena larghezza. */
  .form-row {
    grid-template-columns:1fr
  }
  .contact-details {
    grid-template-columns:1fr;
    gap:.15rem 0
  }
  .contact-details dt {
    margin-top:.75rem
  }
}

/* Nessun elemento deve poter allargare la pagina in orizzontale:
   su telefono lo scorrimento laterale è il difetto che si nota di
   più e quello che nessuno segnala. */
body {
  overflow-x:hidden
}
img,
table,
pre {
  max-width:100%
}

/* --- Selettore di lingua dentro la navigazione ------------------- */
/* Su schermo largo resta l'ultimo elemento della barra, separato da
   una linea verticale: identico a prima. */
#nav .langs {
  margin-left:.5rem;
  padding-left:.9rem;
  border-left:1px solid rgba(255,255,255,.15)
}

@media(max-width:980px) {
  /* Nella tendina diventa l'ultima riga, separata da una linea
     orizzontale. Nessuna coordinata da ricalibrare quando cambiano
     le voci di menu. */
  #nav .langs {
    justify-content:flex-start;
    gap:.25rem;
    margin:.75rem 0 0;
    padding:.9rem 0 .25rem;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.14)
  }
  #nav .langs a {
    min-width:3rem;
    min-height:2.75rem;
    font-size:.8rem
  }
}