@font-face{font-family:'Inter';src:url('../fonts/InterVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('../fonts/SourceSerif4Variable.woff2') format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('../fonts/SourceSerif4Variable-Italic.woff2') format('woff2');font-weight:200 900;font-style:italic;font-display:swap}
:root{--navy:#0b1b33;--navy-deep:#06101f;--teal:#16776f;--teal-bright:#3cd9cb;--amber:#b0741f;--amber-bright:#f2b04e;--ink:#16283f;--body:#33465f;--muted:#6b7d94;--rule:#c8d2dd;--rule-soft:#e3e9ef;--paper:#fff;--tint:#f4f6f8;--on-dark:#c6d3e4;--on-dark-soft:#8299b8;--rule-dark:rgba(255,255,255,.14);--rule-dark-strong:rgba(255,255,255,.5);--serif:'Source Serif 4',Georgia,serif;--sans:'Inter',system-ui,sans-serif;--max:1180px;--gutter:clamp(20px,5vw,72px);--hair:1px solid var(--rule);--strong:2px solid var(--navy)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--sans);color:var(--body);background:var(--paper);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
a{color:var(--teal);text-decoration:none}a:hover{text-decoration:underline}
img,svg{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);color:var(--navy);font-weight:600;letter-spacing:-.012em;line-height:1.1;margin:0}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.kicker{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);margin:0 0 16px;display:flex;align-items:center;gap:12px}
.kicker::before{content:'';width:22px;height:1px;background:var(--amber)}
.lead{font-family:var(--serif);font-size:clamp(1.08rem,1.5vw,1.3rem);color:var(--ink);line-height:1.48;max-width:58ch}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border:1.5px solid var(--navy);border-radius:3px;font-weight:600;color:var(--navy);font-size:.92rem;letter-spacing:.01em;transition:background .18s,color .18s}
.btn:hover{background:var(--navy);color:#fff;text-decoration:none}
.btn--light{border-color:rgba(255,255,255,.55);color:#fff}.btn--light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn--fill{background:var(--teal-bright);border-color:var(--teal-bright);color:var(--navy)}.btn--fill:hover{background:#fff;border-color:#fff;color:var(--navy)}
.btn .arr{font-family:var(--serif);font-size:1.1em;line-height:0}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px}
.wordmark{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none!important}
.wordmark svg{width:38px;height:auto;flex:none}
.wordmark b{font-family:var(--sans);font-weight:800;font-size:1.08rem;letter-spacing:.02em;color:#fff;white-space:nowrap}
.wordmark b span{font-weight:500;color:var(--teal-bright)}
.site-header{position:sticky;top:0;z-index:30;background:rgba(11,27,51,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule-dark)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav{display:flex;gap:30px;align-items:center}
/* wider header logo: keep nav on one line in the 821–980px band */
@media (min-width:821px) and (max-width:980px){.nav{gap:22px}}
.nav a{color:var(--on-dark);font-size:.88rem;font-weight:500;letter-spacing:.02em;position:relative;padding:6px 0}
.nav a:not(.btn)::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--teal-bright);transition:right .2s}
.nav a:not(.btn):hover{color:#fff;text-decoration:none}.nav a:not(.btn):hover::after{right:0}
.nav .btn{padding:10px 16px;font-size:.82rem;margin-left:8px}
.nav-toggle{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:8px;width:44px;height:44px}
.lang-select-wrap{display:none} /* mobile-only language dropdown, shown ≤820px */
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;margin:5px auto;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hero{position:relative;background:var(--navy);color:var(--on-dark);overflow:hidden}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;min-height:min(84vh,760px);padding-top:56px;padding-bottom:56px}
.hero .kicker{color:var(--teal-bright)}.hero .kicker::before{background:var(--amber-bright)}
.hero h1{color:#fff;font-size:clamp(2.2rem,5vw,4rem);max-width:16ch}
.hero .lead{color:#d5dfec;margin-top:24px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
@media (min-width:981px){.hero .actions{flex-wrap:nowrap}.hero .actions .btn{white-space:nowrap}}
.hero-mark{position:relative;justify-self:end;width:min(100%,520px)}
.hero-mark svg{width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))}
.hero-mark .pulse{transform-origin:center;transform-box:fill-box;animation:pulse 3.2s ease-out infinite}
.hero-mark .node{animation:blink 4s ease-in-out infinite}
.hero-mark .node:nth-of-type(2n){animation-delay:.9s}.hero-mark .node:nth-of-type(3n){animation-delay:1.7s}
@keyframes pulse{0%{transform:scale(.55);opacity:.7}100%{transform:scale(1.9);opacity:0}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.hero-caption{margin-top:14px;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-soft);text-align:right}
.hero-caption b{color:var(--amber-bright);font-weight:600}
@media (prefers-reduced-motion:reduce){.hero-mark .pulse,.hero-mark .node{animation:none}}
.seals{background:var(--navy-deep);border-top:1px solid var(--rule-dark)}
.seals .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.seals div{padding:22px 28px 22px 0;font-size:.88rem;color:var(--on-dark);display:flex;gap:12px;align-items:flex-start}
.seals div+div{border-left:1px solid var(--rule-dark);padding-left:28px}
.seals div::before{content:'';flex:none;width:8px;height:8px;margin-top:7px;background:var(--amber-bright)}
.section{padding:clamp(64px,9vw,120px) 0}
.section--tint{background:var(--tint)}
.section--dark{background:var(--navy);color:var(--on-dark)}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark .kicker{color:var(--teal-bright)}.section--dark .kicker::before{background:var(--amber-bright)}
.section--dark .lead{color:#d5dfec}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:48px;align-items:end;padding-bottom:28px;border-bottom:var(--strong)}
.section--dark .section-head{border-bottom-color:var(--rule-dark-strong)}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
.service{display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,1.5fr);gap:40px;padding:56px 0;border-bottom:var(--hair)}
.service .n{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.4rem);color:var(--teal);line-height:1;font-weight:400}
.service h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:14px}
.service .who{font-size:.9rem;color:var(--muted);border-left:2px solid var(--amber);padding-left:14px;margin-top:18px}
.service .cols{display:grid;grid-template-columns:1.2fr 1fr;gap:32px}
.service h4{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin:0 0 8px;padding-bottom:8px;border-bottom:var(--strong)}
.service ul{margin:0;padding:0;list-style:none}
.service li{position:relative;padding:9px 0 9px 20px;border-top:1px solid var(--rule-soft);font-size:.93rem}
.service li::before{content:'';position:absolute;left:0;top:16px;width:6px;height:6px;background:var(--teal)}
.service .no li::before{background:var(--rule)}
.service .diff{margin-top:26px;padding:16px 20px;background:var(--tint);border-left:3px solid var(--teal);font-family:var(--serif);font-size:1rem;color:var(--ink)}
.timeline{display:grid;grid-template-columns:repeat(5,1fr);margin-top:48px;position:relative}
.timeline::before{content:'';position:absolute;left:0;right:0;top:20px;height:2px;background:var(--navy)}
.phase{padding:0 28px 0 0;position:relative}.phase+.phase{padding-left:28px}
.phase .dot{width:42px;height:42px;border-radius:50%;background:var(--tint);border:2px solid var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.1rem;color:var(--navy);position:relative;margin-bottom:22px}
.phase.is-key .dot{background:var(--teal);border-color:var(--teal);color:#fff}
.phase h3{font-family:var(--sans);font-size:.98rem;font-weight:700;margin-bottom:8px}
.phase p{font-size:.9rem;margin:0}
.phase .out{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);font-size:.78rem;color:var(--amber);font-weight:600;letter-spacing:.04em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px}
.stat{padding:8px 32px 8px 0}.stat+.stat{border-left:1px solid var(--rule-dark);padding-left:32px}
.stat b{display:block;font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.8rem);color:var(--teal-bright);font-weight:600;line-height:1;letter-spacing:-.02em}
.stat span{display:block;margin-top:14px;font-size:.92rem;color:#a8bcd6;max-width:26ch}
.stat sup{font-size:.55em;color:var(--amber-bright);margin-left:4px}
.sources{font-size:.76rem;color:var(--on-dark-soft);margin-top:36px;padding-top:16px;border-top:1px solid var(--rule-dark)}
.grid{display:grid}.grid--4{grid-template-columns:repeat(4,1fr)}.grid--2{grid-template-columns:repeat(2,1fr)}
.card{padding:32px 32px 32px 0;border-top:var(--hair)}
.grid .card+.card{border-left:var(--hair);padding-left:32px}
.card h3{font-family:var(--sans);font-size:1rem;font-weight:700;margin-bottom:12px}
.card p{font-size:.95rem;margin:0}
.card .mark{width:28px;height:auto;margin-bottom:18px}
.compare{width:100%;border-collapse:collapse;font-size:.95rem;margin-top:40px}
.compare th,.compare td{text-align:left;vertical-align:top;padding:18px 24px 18px 0;border-top:var(--hair)}
.compare tr:first-child th,.compare tr:first-child td{border-top:var(--strong)}
.compare th{width:28%;font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:var(--hair)}
.compare .us th{color:var(--teal)}.compare .us td{color:var(--ink);font-family:var(--serif);font-size:1.02rem}
.compare .st{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:2px;margin-right:10px;vertical-align:middle}
.st--ok{background:#e4f1ef;color:var(--teal)}.st--part{background:#f6e2d6;color:#c25a2a}.st--pend{background:#f6ecdb;color:var(--amber)}
.section--dark .compare th,.section--dark .compare td{border-top-color:var(--rule-dark);color:var(--on-dark)}
.section--dark .compare th{color:#fff}
.section--dark .compare tr:first-child th,.section--dark .compare tr:first-child td{border-top-color:var(--rule-dark-strong)}
.section--dark .compare tr:last-child th,.section--dark .compare tr:last-child td{border-bottom-color:var(--rule-dark)}
.section--dark .st--ok{background:rgba(60,217,203,.16);color:var(--teal-bright)}.section--dark .st--part{background:rgba(242,176,78,.18);color:var(--amber-bright)}.section--dark .st--pend{background:rgba(255,255,255,.1);color:var(--on-dark)}
.nolist{display:grid;grid-template-columns:repeat(2,1fr);margin-top:40px}
.nolist div{padding:22px 32px 22px 0;border-top:var(--hair);font-size:.95rem;display:flex;gap:14px}
.nolist div:nth-child(even){border-left:var(--hair);padding-left:32px}
.nolist div::before{content:'—';color:var(--amber);font-family:var(--serif);flex:none}
.contact{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:start}
.contact h2{font-size:clamp(1.8rem,3.4vw,2.8rem);color:#fff}
.steps{margin:32px 0 0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--rule-dark);font-size:.97rem;color:#d5dfec}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);font-size:1.4rem;color:var(--teal-bright);line-height:1}
.datalist{margin:0;padding:0;font-size:.93rem}
.datalist div{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:13px 0;border-top:1px solid var(--rule-dark)}
.datalist div:first-child{border-top:1px solid var(--rule-dark-strong)}
.datalist dt{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-soft);margin:0;padding-top:3px}
.datalist dd{margin:0;color:#fff}.datalist a{color:var(--teal-bright)}
.privacy-note{font-size:.8rem;color:var(--on-dark-soft);margin-top:18px}
.contact-mark{width:64px;margin-bottom:28px}
.site-footer{background:var(--navy-deep);color:var(--on-dark-soft);font-size:.86rem}
.site-footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding:56px var(--gutter) 40px}
.site-footer .wordmark{margin-bottom:18px}
.site-footer h4{color:#fff;font-family:var(--sans);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;margin:0 0 14px}
.site-footer ul{list-style:none;margin:0;padding:0}.site-footer li{padding:6px 0}.site-footer a{color:var(--on-dark)}
.site-footer .tag{font-family:var(--serif);font-style:italic;color:var(--on-dark);font-size:1rem;margin-bottom:12px}
.site-footer .legal-bar{border-top:1px solid var(--rule-dark)}
.site-footer .legal-bar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px var(--gutter);font-size:.78rem}
.legal{padding:clamp(56px,8vw,96px) 0}.legal .wrap{max-width:840px}
.legal h1{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:14px}
.legal .meta{font-size:.86rem;color:var(--muted);padding-bottom:22px;border-bottom:var(--strong);margin-bottom:36px}
.legal h2{font-size:1.3rem;margin:40px 0 14px;padding-bottom:8px;border-bottom:var(--hair)}
.legal p,.legal li{font-size:.98rem}.legal ul{padding-left:20px}
.legal table{width:100%;border-collapse:collapse;font-size:.9rem;margin:16px 0}
.legal th,.legal td{text-align:left;vertical-align:top;padding:11px 14px 11px 0;border-top:var(--hair)}
.legal th{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);width:1%;white-space:nowrap;padding-right:28px}
.legal tr:last-child td{border-bottom:var(--hair)}
.legal .box{background:var(--tint);border-left:3px solid var(--teal);padding:16px 20px;margin:22px 0;font-size:.93rem}
@media (max-width:980px){
.hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:48px;padding-bottom:40px}
.hero-mark{justify-self:center;width:min(70vw,360px);order:-1}.hero-caption{text-align:center}
.service{grid-template-columns:56px minmax(0,1fr);gap:24px}.service>div:last-child{grid-column:2}
.timeline{grid-template-columns:1fr 1fr;gap:32px 0}.timeline::before{display:none}
.phase{padding-left:0!important;padding-right:24px}
.grid--4{grid-template-columns:1fr 1fr}.grid--4 .card:nth-child(odd){border-left:0;padding-left:0}
.site-footer .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:820px){
.site-header .wrap{height:64px}
.nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--navy);flex-direction:column;align-items:stretch;padding:12px var(--gutter) 22px;gap:0;border-bottom:1px solid var(--rule-dark)}
.nav.is-open{display:flex}
.nav a{font-size:1.05rem;padding:14px 0;border-top:1px solid var(--rule-dark)}.nav a:not(.btn)::after{display:none}
.nav .btn{margin:14px 0 0;justify-content:center;border-top:1.5px solid rgba(255,255,255,.55)}
.nav-toggle{display:block}
.lang-select-wrap{display:inline-flex;align-items:center;position:relative;margin-left:auto}
.nav .lang{display:none}
.lang-code{color:#fff;font:600 .72rem/1 var(--sans);letter-spacing:.08em;padding:10px 17px 10px 6px}
.lang-select{position:absolute;inset:0;width:100%;height:100%;opacity:0;appearance:none;-webkit-appearance:none;border:0;cursor:pointer}
.lang-select option{color:var(--ink);background:#fff;font-weight:500;letter-spacing:0}
.lang-select-wrap:focus-within{outline:2px solid var(--teal-bright);outline-offset:2px}
.lang-select-wrap::after{content:"";position:absolute;right:5px;top:50%;width:5px;height:5px;
  border-right:1.5px solid var(--teal-bright);border-bottom:1.5px solid var(--teal-bright);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.seals .wrap{grid-template-columns:1fr}.seals div+div{border-left:0;padding-left:0;border-top:1px solid var(--rule-dark)}
.section{padding:56px 0}.section-head{grid-template-columns:1fr;gap:16px;padding-bottom:20px}
.service{padding:36px 0}.service .cols{grid-template-columns:1fr;gap:20px}
.stats{grid-template-columns:1fr}.stat{padding:18px 0}.stat+.stat{border-left:0;padding-left:0;border-top:1px solid var(--rule-dark)}
.compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:100%}
.compare th{padding:16px 0 4px}.compare td{padding:0 0 16px;border-top:0!important}.compare tr:last-child th{border-bottom:0}
.nolist{grid-template-columns:1fr}.nolist div:nth-child(even){border-left:0;padding-left:0}
.contact{grid-template-columns:1fr;gap:40px}.datalist div{grid-template-columns:1fr;gap:4px}
.hero .actions .btn,.contact .actions .btn{width:100%;justify-content:center}
.site-footer .wrap{grid-template-columns:1fr;gap:28px}.site-footer .legal-bar .wrap{flex-direction:column;gap:6px}
.legal table,.legal tbody,.legal tr,.legal th,.legal td{display:block;width:100%}.legal thead{display:none}
.legal th{padding:12px 0 2px}.legal td{padding:0 0 10px;border-top:0}
.legal td::before{content:attr(data-label);display:block;font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin-bottom:2px}
.legal tr{border-top:var(--hair);padding-top:4px}.legal tr:last-child{border-bottom:var(--hair)}.legal tr:last-child td{border-bottom:0}}
@media (max-width:600px){
.timeline{grid-template-columns:1fr}.grid--4,.grid--2{grid-template-columns:1fr}.grid .card+.card{border-left:0;padding-left:0}
.service{grid-template-columns:1fr}.service>div:last-child{grid-column:1}.service .n{font-size:2rem}}
@media (max-width:400px){:root{--gutter:16px}}

/* ================= craft layer ================= */
.seals .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.seal{padding:24px 28px 24px 0;font-size:.9rem;color:var(--on-dark);display:flex;gap:14px;align-items:flex-start;line-height:1.5}
.seal+.seal{border-left:1px solid var(--rule-dark);padding-left:28px}
.seal::before{content:'';flex:none;width:8px;height:8px;margin-top:8px;background:var(--amber-bright)}
.seals div:not(.seal):not(.wrap){display:contents}

/* header: transparent over hero, solid after scroll */
.site-header{background:transparent;border-bottom-color:transparent;transition:background .25s,border-color .25s}
.site-header.is-scrolled{background:rgba(11,27,51,.94);border-bottom-color:var(--rule-dark)}

/* hero */
.hero{min-height:calc(100vh - 76px);display:flex;align-items:center}
.hero .wrap{width:100%;min-height:0;padding-top:72px;padding-bottom:88px;gap:64px;grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}
.hero-field{position:absolute;inset:auto -14% -35% auto;width:min(75vw,1100px);aspect-ratio:1;background:url('../brand/network-dark.svg') center/contain no-repeat;opacity:.14;pointer-events:none;mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 70%);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 70%)}
.hero h1{font-size:clamp(2.3rem,4.4vw,3.7rem);max-width:22ch;line-height:1.08}
.hero h1 em{font-style:italic;font-weight:500;color:var(--teal-bright)}
.hero .lead{max-width:52ch;font-size:clamp(1.05rem,1.35vw,1.22rem)}
.hero-mark{width:min(100%,600px);justify-self:center}
.hero-mark svg{filter:drop-shadow(0 40px 80px rgba(0,0,0,.45))}
.hero-caption{text-align:center;margin-top:22px;display:flex;justify-content:center;gap:18px;align-items:center}
.hero-caption::before,.hero-caption::after{content:'';flex:0 0 40px;height:1px;background:var(--rule-dark-strong)}

/* section signature: ghost numeral */
.section-head{position:relative;padding-top:8px}
.section-head .kicker{position:relative}
.section .wrap{position:relative}
.section--field .wrap::after{content:'';position:absolute;right:-12%;top:-8%;width:520px;height:520px;background:url('../brand/network-dark.svg') center/contain no-repeat;opacity:.06;pointer-events:none;filter:invert(1) hue-rotate(180deg)}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* services: hover lift */
.service{transition:background .2s}
.service .n{font-weight:300;letter-spacing:-.02em}
.service h3{max-width:18ch}
.service .diff{border-left-width:3px}

/* about cards */
.card{transition:border-color .2s}
.card .mark{width:32px;opacity:.9}

/* contact big mail */
.mail-display{display:inline-flex;align-items:baseline;gap:16px;margin-top:32px;font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2.2rem);color:#fff;border-bottom:2px solid var(--teal-bright);padding-bottom:6px;text-decoration:none!important;letter-spacing:-.01em}
.mail-display .arr{color:var(--teal-bright);transition:transform .2s;font-size:.9em}
.mail-display:hover .arr{transform:translateX(6px)}

/* footer tagline */
.site-footer .tag{font-size:1.15rem;color:#fff}

/* stats: refined */
.stat b{font-weight:500}
.sources{letter-spacing:.02em}

@media (max-width:980px){
  .hero{min-height:0}
  .hero .wrap{padding-top:40px;padding-bottom:56px}
  .hero-field{inset:-10% -40% auto auto;width:120vw;opacity:.12}
  .hero-mark{width:min(64vw,340px)}
  .section--field .wrap::after{display:none}
}
@media (max-width:820px){
  .seals .wrap{grid-template-columns:1fr}
  .seal+.seal{border-left:0;padding-left:0;border-top:1px solid var(--rule-dark)}
  .mail-display{font-size:1.25rem;word-break:break-all}
}
/* fixes after render review */
.site-header{background:rgba(11,27,51,.94);border-bottom-color:var(--rule-dark)}
.hero .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px}
.hero h1{font-size:clamp(2.2rem,3.9vw,3.1rem);max-width:24ch}
/* Desktop headline balancing. The old rule was `.hero h1 em{white-space:nowrap}`,
   which forced the italic segment onto one unbreakable line. Short phrases were
   fine, but the longer German italics (ciberseguridad "…Faktor Zeit und Kosten
   beseitigt.", consultoría "KI- und IT-Sicherheitsprojekte.") overflowed the text
   column and ran into the logo mark. `text-wrap:balance` lets the <em> wrap inside
   the column so it never reaches the logo, and evens out line lengths so no single
   word is ever orphaned on the last row (e.g. EN /ia "securely."). Scoped to
   >=981px; phones keep the mobile override below. */
@media (min-width:981px){.hero h1{text-wrap:balance;text-wrap-style:balance}}
.hero-mark{width:min(100%,540px)}
.hero-caption{white-space:nowrap;font-size:.64rem}
.seals .wrap{display:grid;grid-template-columns:repeat(3,1fr);padding-top:0;padding-bottom:0}
.seals .wrap>*{display:block}
.seals .wrap>.seal{display:flex}
.seals .wrap::before,.seals .wrap::after{content:none}
.seals .wrap{padding-top:0;padding-bottom:0}

.contact h2{margin-bottom:18px}
.datalist div{grid-template-columns:150px 1fr}
.datalist dt{letter-spacing:.14em}
.card h3{min-height:2.6em}
/* mobile overrides (must stay last) */
@media (max-width:980px){
  .hero{min-height:0}
  .hero .wrap{grid-template-columns:1fr;gap:28px;padding-top:36px;padding-bottom:48px}
  .hero-mark{width:min(62vw,340px);justify-self:center;order:-1}
  .hero h1{font-size:clamp(1.9rem,7.6vw,2.6rem);max-width:none}
  .hero-caption{white-space:normal;font-size:.62rem;text-align:center;margin-top:12px}
  .hero-caption::before,.hero-caption::after{display:none}
  .hero .actions .btn{width:100%;justify-content:center}
  .seals .wrap{grid-template-columns:1fr}
  .seal+.seal{border-left:0;padding-left:0;border-top:1px solid var(--rule-dark)}
  .seal{padding:16px 0}
  .kicker{letter-spacing:.18em;font-size:.66rem}
  .card h3{min-height:0}
  .datalist div{grid-template-columns:1fr;gap:4px}
}
@media (max-width:980px){.hero-caption{display:block}}

/* ================= graphics layer ================= */
.illu-wrap{background:var(--navy);border-radius:6px;padding:18px 18px 8px;margin-bottom:22px;position:relative;overflow:hidden}
.illu-wrap::before{content:'';position:absolute;inset:0;background:url('../brand/network-dark.svg') 120% -40%/140% no-repeat;opacity:.12}
.illu{width:100%;height:auto;position:relative}
.context-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:40px}
.stats--col{grid-template-columns:1fr;margin-top:0}
.stats--col .stat{padding:22px 0;border-left:0!important;border-top:1px solid var(--rule-dark)}
.stats--col .stat:first-child{border-top:1px solid var(--rule-dark-strong)}
.stats--col .stat b{font-size:clamp(2.2rem,3.6vw,3rem)}
.stats--col .stat span{max-width:40ch;margin-top:8px}
.radar-wrap{text-align:center}
.radar{width:min(100%,320px);height:auto;margin:0 auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
.radar-cap{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-soft);margin-top:14px}
.band-map .map-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.band-map h2{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:16px}
.map-wrap img{width:100%;height:auto}
.regline-wrap{margin:36px 0 8px;padding:24px 20px;background:#fff;border:1px solid var(--rule)}
.regline{width:100%;height:auto}
/* timeline node state is driven by class, so app.js can recolor by today's date.
   default (future) = navy/grey; is-now = amber; is-done (in force) = teal. */
.regline .rn-dot{fill:#c8d2dd;stroke:#fff;stroke-width:2}
.regline .rn-line{stroke:#c8d2dd;stroke-width:1}
.regline .rn.is-now .rn-dot{fill:var(--amber-bright)}
.regline .rn.is-now .rn-line{stroke:var(--amber-bright)}
.regline .rn.is-done .rn-dot{fill:var(--teal-bright)}
.regline .rn.is-done .rn-line{stroke:var(--teal-bright)}
@media (max-width:980px){
  .context-grid{grid-template-columns:1fr;gap:32px}
  .band-map .map-grid{grid-template-columns:1fr;gap:28px}
  .radar{width:min(70vw,280px)}
}
/* desktop/tablet: horizontal SVG timeline; the mobile list is hidden */
.regline-m{display:none}
@media (max-width:820px){
  /* the SVG timeline needs ~640px to be legible; instead of a janky sideways
     scroll on phones, swap it for a native vertical milestone list */
  .regline-wrap{display:none}
  .regline-m{
    display:block;list-style:none;margin:26px 0 8px;padding:0;
    position:relative;counter-reset:none;
  }
  .regline-m li{
    position:relative;display:grid;grid-template-columns:12px 1fr;column-gap:14px;
    padding:0 0 22px;
  }
  .regline-m li:last-child{padding-bottom:0}
  /* connecting rail + node */
  .regline-m li::before{
    content:'';grid-column:1;justify-self:center;margin-top:5px;
    width:11px;height:11px;border-radius:50%;
    background:#fff;border:2px solid var(--rule);z-index:1;
  }
  .regline-m li::after{
    content:'';position:absolute;left:5px;top:14px;bottom:0;width:2px;
    background:var(--rule-soft);
  }
  .regline-m li:last-child::after{display:none}
  .regline-m li.is-done::before{background:var(--teal-bright);border-color:var(--teal-bright)}
  .regline-m li.is-now::before{background:var(--amber-bright);border-color:var(--amber-bright)}
  .regline-m .rm-date{
    grid-column:2;font-family:var(--sans);font-size:.66rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  }
  .regline-m .rm-body{grid-column:2;display:block;margin-top:2px;font-size:.92rem;color:var(--body);line-height:1.4}
  .regline-m .rm-body b{display:block;color:var(--navy);font-family:var(--sans);font-weight:700;font-size:.98rem}
  .illu-wrap{padding:14px 14px 6px}
}
/* no coloured side bars */
.service .who{border-left:0;padding-left:0;padding-top:12px;border-top:1px solid var(--rule);font-size:.9rem}
.service .diff{border-left:0;background:none;padding:18px 0 0;border-top:2px solid var(--navy);font-style:italic}
.legal .box{border-left:0;border-top:2px solid var(--navy);border-bottom:1px solid var(--rule);background:none;padding:16px 0}

/* header with the full logo */
.site-header .wrap{height:88px}
.brand img{height:62px;width:auto;display:block;margin-left:-6px}
html{scroll-padding-top:92px}
/* hero fills the first viewport exactly, no dead space */
.hero{min-height:calc(100vh - 88px);display:flex;align-items:center}
.hero .wrap{padding-top:24px;padding-bottom:40px;align-items:center}
.seals{position:relative}
/* timeline: aligned rows */
.timeline{align-items:stretch}
.phase{display:flex;flex-direction:column}
.phase h3{min-height:2.5em}
.phase p{flex:1 1 auto}
.phase .out{margin-top:16px}
@media (max-width:980px){
  .site-header .wrap{height:72px}
  .brand img{height:48px;margin-left:-4px}
  .nav{top:72px}
  .hero{min-height:0}
  .hero .wrap{padding-top:28px;padding-bottom:44px}
  .phase h3{min-height:0}
}
@media (max-width:480px){.brand img{height:42px}}

.hero{align-items:flex-start;min-height:calc(100vh - 88px)}
.hero .wrap{padding-top:40px;padding-bottom:32px}
.section{padding:clamp(56px,7vw,88px) 0}
.brand img{height:64px}
.hero{min-height:0}
.hero .wrap{padding-top:36px;padding-bottom:36px}
.brand img{height:72px;margin-left:-8px}

/* seals: title + line */
.seal{display:flex;flex-direction:column;gap:4px;padding:26px 28px 26px 0}
.seal::before{content:'';width:22px;height:1px;background:var(--amber-bright);margin:0 0 10px}
.seal b{font-family:var(--sans);font-weight:700;color:#fff;font-size:.92rem;letter-spacing:.01em}
.seal span{font-size:.86rem;color:var(--on-dark-soft);line-height:1.5}
.seals .wrap>.seal{display:flex}
@media (max-width:820px){
  .seals .wrap{grid-template-columns:1fr}
  .seal{padding:16px 0;gap:2px}
  .seal::before{display:none}
  .seal+.seal{border-top:1px solid var(--rule-dark);padding-left:0;border-left:0}
  .seal b{font-size:.9rem}
  .seal span{font-size:.82rem}
}
.seals .wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
.seals .wrap>.seal::before{width:22px;height:1px;margin:0 0 10px;background:var(--amber-bright)}
@media (max-width:820px){.seals .wrap>.seal::before{display:none}}

/* mobile density */
@media (max-width:820px){
  .kicker{font-size:.62rem;letter-spacing:.16em;white-space:nowrap;margin-bottom:10px}
  .kicker::before{width:14px}
  .hero .wrap{padding-top:18px;padding-bottom:28px;gap:16px}
  .hero-mark{width:min(48vw,240px)}
  .hero-caption{font-size:.58rem;letter-spacing:.14em;margin-top:8px}
  /* headline capped so the non-italic clause fits on one line; with the italic
     answer on its own line this yields a clean two-row headline on phones.
     Larger sizes wrapped "…AI," onto its own row, which read badly. */
  .hero h1{font-size:clamp(1.4rem,5.9vw,2rem);line-height:1.12}
  .hero h1 .hero-br{display:none}
  /* italic answer on its own line ONLY on the animated home pages (data-headline);
     inner pages let the italic flow inline so it wraps onto the 2nd row instead
     of getting orphaned on a row of its own. */
  .hero h1[data-headline] em{display:block}
  .hero .lead{font-size:1rem;margin-top:14px;line-height:1.45}
  .hero .actions{margin-top:22px;gap:10px}
  .btn{padding:13px 18px;font-size:.9rem}
  .section{padding:40px 0}
  .section-head{padding-bottom:16px;gap:12px}
  .section-head h2{font-size:clamp(1.5rem,6.4vw,2rem)}
  .lead{font-size:1rem;line-height:1.45}
  .service{padding:28px 0}
  .service h3{font-size:1.3rem}
  .service li{padding:7px 0 7px 18px;font-size:.9rem}
  .card{padding:18px 0}
  .stat{padding:14px 0}
  .stat b{font-size:2.2rem}
  .seal{padding:12px 0}
  .compare th{padding:12px 0 2px}.compare td{padding:0 0 12px;font-size:.92rem}
  .steps li{padding:12px 0}
  .site-footer .wrap{padding-top:36px;padding-bottom:28px}
}

/* ===== spacing: content starts right under the header ===== */
html{scroll-padding-top:88px}
.section{padding:44px 0 56px}
.section-head{padding-top:0;padding-bottom:18px}
.hero .wrap{padding-top:28px;padding-bottom:28px}
.seals .wrap>.seal{padding-top:18px;padding-bottom:18px}
.stats{margin-top:28px}
.sources{margin-top:22px}
.service{padding:36px 0}
.timeline{margin-top:28px}
.compare{margin-top:24px}
.nolist{margin-top:24px}
.contact{gap:48px}
@media (max-width:820px){
  html{scroll-padding-top:72px}
  .section{padding:28px 0 34px}
  .section-head{padding-bottom:12px;gap:8px}
  .section-head h2{font-size:clamp(1.4rem,6vw,1.8rem)}
  .lead{font-size:.95rem;line-height:1.42}
  .stats{margin-top:12px}
  .stat{padding:10px 0}
  .stat b{font-size:1.9rem}
  .stat span{margin-top:6px;font-size:.84rem}
  .sources{margin-top:12px;font-size:.7rem;padding-top:10px}
  .service{padding:22px 0}
  .service .cols{gap:14px}
  .service li{padding:6px 0 6px 16px;font-size:.88rem}
  .service .diff{margin-top:14px;padding-top:12px;font-size:.95rem}
  .service .who{margin-top:10px;padding-top:8px;font-size:.85rem}
  .timeline{gap:18px 0;margin-top:14px}
  .phase .dot{width:32px;height:32px;font-size:.9rem;margin-bottom:10px}
  .phase p{font-size:.86rem}
  .card{padding:14px 0}.card p{font-size:.9rem}
  .compare{margin-top:14px}.compare th{padding:10px 0 2px}.compare td{padding:0 0 10px;font-size:.88rem}
  .nolist{margin-top:14px}.nolist div{padding:12px 0;font-size:.9rem}
  .steps{margin-top:16px}.steps li{padding:10px 0;font-size:.92rem}
  .datalist div{padding:9px 0}
  .mail-display{margin-top:18px}
  .privacy-note{margin-top:12px}
  .hero .wrap{padding-top:14px;padding-bottom:22px}
}
/* mobile: 01 on one screen */
@media (max-width:820px){
  .context-grid{display:block;margin-top:0}
  .radar-wrap{display:none}
  .stats--col{margin-top:0;border-top:0}
  .stats--col .stat{padding:8px 0;border-top:1px solid var(--rule-dark)}
  .stats--col .stat:first-child{border-top:0}
  .stat b{font-size:1.7rem}
  .stat span{font-size:.82rem;margin-top:4px;max-width:none}
  .section-head{margin-bottom:8px}
  .sources{margin-top:10px;padding-top:8px;font-size:.66rem}
}

/* ===== services as three columns: one desktop screen ===== */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:0}
.services .service{display:block;padding:24px 28px 24px 0;border-bottom:0;border-top:0}
.services .service+.service{border-left:var(--hair);padding-left:28px}
.services .service .n{font-size:1.05rem;color:var(--teal);margin-bottom:10px;font-weight:600;letter-spacing:.06em}
.services .service .illu-wrap{margin-bottom:14px;padding:10px 12px 2px}
.services .service h3{font-size:1.25rem;margin-bottom:8px;max-width:none;min-height:2.4em}
.services .service>div>p:not(.who){font-size:.9rem;line-height:1.45;color:var(--body);margin-bottom:8px}
.services .service .who{display:none}
.services .service .cols{display:block}
.services .service .cols>div{margin-top:10px}
.services .service h4{font-size:.68rem;margin-bottom:4px;padding-bottom:5px}
.services .service li{padding:5px 0 5px 16px;font-size:.84rem;line-height:1.35}
.services .service li::before{top:11px;width:5px;height:5px}
.services .service .no{margin-top:12px}
.services .service .no h4{color:var(--muted);border-bottom-color:var(--rule)}
.services .service .no li{font-size:.8rem;color:var(--muted);padding:4px 0 4px 16px}
.services .service .no li::before{background:var(--rule)}
.services .service .diff{margin-top:14px;padding-top:10px;font-size:.9rem}
.section-head .lead{font-size:1.05rem}
@media (max-width:980px){
  .services{grid-template-columns:1fr}
  .services .service+.service{border-left:0;padding-left:0;border-top:var(--hair)}
  .services .service{padding:22px 0}
  .services .service h3{min-height:0}
  .services .service .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
}
@media (max-width:600px){.services .service .cols{grid-template-columns:1fr}}

/* ===== mobile 01: stats + radar side by side ===== */
@media (max-width:820px){
  .context-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px;align-items:center;margin-top:4px}
  .radar-wrap{display:block;text-align:center}
  .radar-wrap .illu{width:100%;max-width:170px;margin:0 auto}
  .radar-cap{font-size:.56rem;letter-spacing:.14em;margin-top:4px}
  .stats--col .stat{padding:7px 0}
  .stat b{font-size:1.5rem}
  .stat span{font-size:.76rem;line-height:1.35}
  .section--dark#contexto .lead{font-size:.92rem}
}

/* anchors: section begins immediately under the header */
.section{padding-top:28px}
.section-head{padding-top:0}
html{scroll-padding-top:96px}
@media (max-width:820px){
  .section{padding-top:20px}
  /* radar integrated behind the stats */
  .context-grid{position:relative;display:block;overflow:hidden}
  .radar-wrap{display:block;position:absolute;right:-8%;top:-4%;width:62%;opacity:.55;pointer-events:none}
  .radar-wrap .radar-cap{display:none}
  .stats--col{position:relative}
  .stats--col .stat span{max-width:22ch}
}
.rv{opacity:.001;transform:translateY(10px)}
.rv.in{opacity:1;transform:none}
@media (max-width:820px){
  .rv{opacity:1;transform:none}
  .radar-wrap{width:54%;right:-6%;top:2%;opacity:.5}
  .stats--col .stat{width:58%}
}

/* compact header + content immediately below */
.site-header .wrap{height:64px}
.brand img{height:52px;margin-left:-6px}
html{scroll-padding-top:64px}
.section{padding-top:20px}
.hero .wrap{padding-top:20px}
@media (max-width:980px){.site-header .wrap{height:60px}.brand img{height:44px}.nav{top:60px}html{scroll-padding-top:60px}}
/* ===== services as independent, full-width blocks ===== */
.services{display:block}
.services .service{display:grid;grid-template-columns:300px minmax(0,1fr) minmax(0,1.35fr);gap:36px;padding:28px 0 32px;border-top:var(--hair);border-left:0!important;padding-left:0!important;align-items:start}
.services .service:first-child{border-top:0}
.services .service .n{grid-column:1/-1;font-size:.72rem;letter-spacing:.24em;color:var(--teal);margin:0 0 4px;font-weight:600}
.services .service .n::before{content:'Línea de servicio · ';color:var(--muted);font-weight:500}
.services .service .illu-wrap{margin:0;padding:12px 14px 4px}
.services .service h3{font-size:1.45rem;margin-bottom:10px;min-height:0;max-width:none}
.services .service>div>p:not(.who){font-size:.95rem;line-height:1.5}
.services .service .who{display:block}
.services .service .cols{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}
.services .service .cols>div{margin-top:0}
.services .service h4{font-size:.72rem}
.services .service li{font-size:.88rem;padding:6px 0 6px 16px}
.services .service .no{margin-top:0}
.services .service .diff{grid-column:2/-1;margin-top:4px}
@media (max-width:980px){
  .services .service{grid-template-columns:1fr;gap:16px}
  .services .service .illu-wrap{max-width:360px}
  .services .service .diff{grid-column:1}
  .services .service .cols{grid-template-columns:1fr;gap:12px}
}
.services .service{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);column-gap:44px;row-gap:10px}
.services .service>div:nth-of-type(1){display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:start}
.services .service>div:nth-of-type(1) .illu-wrap{grid-row:1/4;max-width:200px}
.services .service .diff{grid-column:auto}
.services .service .no h4{white-space:nowrap}
@media (max-width:980px){
  .services .service{grid-template-columns:1fr}
  .services .service>div:nth-of-type(1){grid-template-columns:1fr}
  .services .service>div:nth-of-type(1) .illu-wrap{grid-row:auto;max-width:320px}
}
.services .service .n{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em}
.services .service .n::before{letter-spacing:.2em}
.services .service>div:nth-of-type(1){display:block}
.services .service>div:nth-of-type(1) .illu-wrap{max-width:260px;margin-bottom:12px}
/* service: title first, then illustration, then text */
.services .service>div:nth-of-type(1){display:flex;flex-direction:column}
.services .service>div:nth-of-type(1) h3{order:-1;margin:0 0 14px;padding-top:2px}
.services .service>div:nth-of-type(1) .illu-wrap{max-width:none;margin:0 0 16px}
.services .service .illu{max-height:200px;width:auto;max-width:100%}
.services .service h4{margin-top:2px}
.services .service>div:nth-of-type(1){display:block}
.services .service>.n{display:block;grid-column:1/-1}
.services .service>.n+div{display:flex;flex-direction:column}
.services .service>.n+div h3{order:-1;margin:0 0 14px}
.services .service>.n+div .illu-wrap{margin:0 0 16px}
/* mobile timeline: one row per phase, deliverable attached */
@media (max-width:820px){
  .timeline{display:block;margin-top:10px}
  .phase{display:grid;grid-template-columns:34px 1fr;column-gap:12px;padding:12px 0!important;border-top:1px solid var(--rule)}
  .phase:first-child{border-top:2px solid var(--navy)}
  .phase .dot{width:30px;height:30px;font-size:.85rem;margin:0;grid-row:1/4}
  .phase h3{grid-column:2;min-height:0;margin:5px 0 4px;font-size:.95rem}
  .phase p{grid-column:2;font-size:.86rem;line-height:1.42}
  .phase .out{grid-column:2;margin:6px 0 0;padding:0;border-top:0;font-size:.78rem;color:var(--body);font-weight:500}
  .phase .out::before{content:'Entregable: ';color:var(--amber);font-weight:700;letter-spacing:.02em}
}

.em noscript{font-size:.9em}
.em .em__u::after{content:''}

/* ===== mobile hero: pull the globe up under the header so the primary CTA is
   above the fold on first load (must stay last to win the cascade) ===== */
@media (max-width:820px){
  /* less dead space between the header and the globe */
  .hero .wrap{padding-top:10px;padding-bottom:22px;gap:10px}
  /* smaller globe + tighter gap to the copy = CTA rises into view */
  .hero-mark{width:min(38vw,170px);margin-top:2px}
  .hero .kicker{margin-bottom:6px}
  .hero h1{margin-top:2px}
  .hero .lead{margin-top:10px}
  .hero .actions{margin-top:16px}
}
@media (max-width:480px){
  .hero-mark{width:min(34vw,150px)}
}

/* ===== short landscape phones: the stacked single-column layout (globe on top,
   copy far below) pushes both CTAs well below the fold. Restore a compact
   side-by-side layout — small globe on the right, copy on the left — so the
   whole hero and both CTAs fit in the ~390px of height. ===== */
@media (max-width:980px) and (max-height:520px) and (orientation:landscape){
  .hero .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:18px;align-items:center;min-height:0;padding-top:12px;padding-bottom:12px}
  .hero-mark{order:0;width:min(24vw,150px);justify-self:center;margin:0}
  .hero-caption{display:none}
  .hero .kicker{margin-bottom:6px}
  /* smaller cap + tighter leading so the taller inner-page headlines/leads
     (e.g. /ia) still clear both CTAs within ~390px of landscape height */
  .hero h1{font-size:clamp(1.3rem,3.1vw,1.7rem);line-height:1.12;margin-top:0}
  .hero h1 em{display:block}
  .hero .lead{font-size:.85rem;line-height:1.3;margin-top:6px;margin-bottom:0;max-width:60ch}
  .hero .actions{flex-wrap:nowrap;margin-top:10px}
  .hero .actions .btn{width:auto;justify-content:center}
}

/* ===== mobile hero caption: hide the Barcelona coordinates line entirely on
   phones (it never fit cleanly) and pull the copy up to reclaim the space, so
   both CTAs sit above the fold. Caption stays visible on tablet/desktop.
   (must stay last to win the cascade) ===== */
@media (max-width:820px){
  .hero-caption{display:none}
  .hero-mark{margin-bottom:0}
  .hero .lead{margin-top:8px}
  .hero .actions{margin-top:14px}
}

/* ===== mobile header: the brand logo was reading too small; give it a taller
   cap and a matching header height so it stays balanced with the hamburger.
   (must stay last to win the cascade) ===== */
@media (max-width:820px){
  .site-header .wrap{height:64px}
  .brand img{height:52px;margin-left:-4px}
  .nav{top:64px}
  html{scroll-padding-top:64px}
}
@media (max-width:480px){
  .brand img{height:46px}
  .lang-code{font-size:.66rem;letter-spacing:.04em;padding:10px 15px 10px 4px}
  .header-mail{width:38px}
}
@media (max-width:360px){
  .brand img{height:40px}
}

/* header email quick-action: hidden on desktop (the nav already has "Hablemos"),
   shown on mobile left of the hamburger for one-tap contact. */
.header-mail{display:none}
@media (max-width:820px){
  .header-mail{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-left:2px;color:#fff;
    text-decoration:none!important;border-radius:8px;
  }
  .header-mail:hover{color:var(--teal-bright)}
  .header-mail svg{display:block}
  /* keep the toggle snug to the icon rather than pushed to the far edge */
  .nav-toggle{margin-left:2px}
}

/* ---------------------------------------------------------------------------
   Ex-inline utilities. These three rules replace the last `style=` attributes
   that lived in the markup (ciberseguridad.html), which is what forced
   `style-src 'unsafe-inline'` in the CSP. Keep new one-off spacing here as a
   class — the policy now bans inline style attributes outright
   (`style-src-attr 'none'`), so an inline style would simply not apply.
   --------------------------------------------------------------------------- */
.datalist--gap{margin-top:28px}
.kicker--spaced{margin-top:56px}
.datalist-head{color:#fff;font-family:var(--sans);font-size:.95rem;margin-top:36px;margin-bottom:8px}