/* H Capital website. Design system v3: white ground, petroleum, one blue accent, Karla. */

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

:root {
  --petrol: #083B44;
  --blue: #025785;
  --body: #565654;
  --line: #DDDDDC;
  --tint: #DFEBEC;
  --on-dark: #BFDCE0;
  --route: #A1CBD3;
  --white: #FFFFFF;
  --gutter: max(100px, calc((100% - 1240px) / 2));
  --header: 96px;
  --section: 120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--petrol);
  font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--petrol); text-decoration: none; }
a:hover { color: var(--blue); }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  padding: 10px 16px; background: var(--petrol); color: var(--white);
  font-size: 14px; font-weight: 700;
}
.skip-link:focus { top: 16px; color: var(--white); }

/* Shared type */
.label {
  font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 0;
  text-transform: uppercase; color: var(--blue);
}
.rule { width: 48px; height: 2px; background: var(--blue); }
.h1 { font-size: 48px; font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; color: var(--petrol); text-wrap: balance; }
.h2 { font-size: 48px; font-weight: 300; line-height: 1.12; letter-spacing: -0.02em; color: var(--petrol); text-wrap: balance; }
.h2-sm { font-size: 40px; font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; color: var(--petrol); text-wrap: balance; }
.lead { font-size: 19px; line-height: 1.75; color: var(--body); text-wrap: pretty; }
.muted { color: var(--body); }
.num { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--blue); }

.btn {
  display: inline-block; padding: 16px 32px; border: 1px solid var(--petrol);
  font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--petrol);
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--petrol); color: var(--white); }
.btn-light { border-color: var(--white); color: var(--white); }
.btn-light:hover { background: var(--white); color: var(--petrol); }

/* Header and navigation */
.site-header {
  position: relative; z-index: 20; height: var(--header);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.site-header.ruled { border-bottom: 1px solid var(--line); }
.site-header.overlay { position: absolute; top: 0; left: 0; right: 0; }
.brand { display: block; line-height: 0; }
.brand img { width: 196px; height: 24px; }
.nav { display: flex; align-items: center; gap: 20px; margin-right: -14px; }
.nav-list { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 2px solid transparent;
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: uppercase; color: var(--body);
  transition: background-color .15s ease, color .15s ease;
}
.nav-link svg { width: 9px; height: 6px; }
.nav-link[aria-current="page"], .nav-link.is-section { border-bottom-color: var(--blue); font-weight: 700; color: var(--petrol); }
.nav-link:hover, .nav-item:hover > .nav-link, .nav-item:focus-within > .nav-link {
  background: var(--petrol); color: var(--white); border-bottom-color: var(--petrol);
}
.menu {
  position: absolute; top: 100%; left: -10px; padding-top: 30px;
  visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.nav-item:hover > .menu, .nav-item:focus-within > .menu {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .15s ease, transform .15s ease;
}
.menu ul {
  width: 260px; margin: 0; padding: 12px 0; list-style: none;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(8, 59, 68, 0.08);
}
.menu a {
  display: block; padding: 11px 24px; font-size: 15px; font-weight: 400; color: var(--petrol);
  transition: background-color .15s ease, color .15s ease;
}
.menu a[aria-current="page"] { font-weight: 600; color: var(--blue); }
.menu a:hover { background: var(--petrol); color: var(--white); }

.nav-toggle {
  display: none; align-items: center; gap: 10px;
  padding: 10px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--petrol);
}
.nav-toggle-bars { position: relative; width: 20px; height: 12px; }
.nav-toggle-bars::before, .nav-toggle-bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
  transition: transform .2s ease, top .2s ease;
}
.nav-toggle-bars::before { top: 1px; }
.nav-toggle-bars::after { top: 9px; }
.nav-open .nav-toggle-bars::before { top: 5px; transform: rotate(45deg); }
.nav-open .nav-toggle-bars::after { top: 5px; transform: rotate(-45deg); }

/* Footer */
.site-footer { background: var(--petrol); color: var(--white); padding: 44px var(--gutter) 40px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.footer-top img { width: 163px; height: 20px; }
.footer-links { display: flex; align-items: center; gap: 40px; margin: 0; padding: 0; list-style: none; }
.footer-links a { font-size: 13px; font-weight: 500; color: var(--white); }
.footer-links a:hover { color: var(--on-dark); }
.footer-legal {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px;
  font-size: 13px; color: var(--on-dark);
}
.footer-legal p { max-width: 640px; }
.footer-company { display: flex; flex-wrap: wrap; gap: 4px 24px; }

/* Home: hero */
.hero { position: relative; z-index: 2; height: 100vh; height: 100svh; min-height: 680px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.hero-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-art-sink { position: absolute; inset: 0; }
.hero-art img { position: absolute; right: -100px; bottom: 0; height: min(48%, 520px); width: auto; aspect-ratio: 1521.58 / 1146.23; max-width: none; }
.hero-main { position: relative; flex: 1; padding: var(--header) var(--gutter) 96px; display: flex; flex-direction: column; justify-content: center; }
.hero-title { max-width: 640px; font-size: 54px; font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.hero-main .rule { margin-top: 36px; }
.hero-sub { margin-top: 32px; max-width: 460px; font-size: 19px; line-height: 1.7; color: var(--body); }
.hero-cta { margin-top: 44px; }

/* Home: coverage */
.coverage { position: relative; padding: 220px var(--gutter); display: flex; gap: 96px; align-items: flex-start; }
.coverage-text { position: sticky; top: 160px; width: 460px; flex-shrink: 0; }
.coverage-text .h2 { margin-top: 24px; }
.coverage-text .rule { margin-top: 32px; }
.coverage-text p { margin-top: 32px; font-size: 18px; line-height: 1.75; color: var(--body); text-wrap: pretty; }
.legend { margin-top: 40px; display: flex; gap: 36px; }
.legend span { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.legend i { display: block; width: 12px; height: 12px; border-radius: 50%; }
.legend .office { color: var(--petrol); }
.legend .office i { background: var(--petrol); }
.legend .market { color: var(--blue); }
.legend .market i { border: 2px solid var(--blue); }
.coverage-visual { flex: 1; min-width: 0; padding-top: 180px; display: flex; flex-direction: column; gap: 88px; }
.coverage-map { width: 100%; max-width: 620px; height: auto; }
.coverage-map text { font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.countries { max-width: 620px; margin: 0; padding: 0; list-style: none; }
.countries li { padding: 24px 0; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.countries li:first-child { border-top-color: var(--petrol); }
.countries li:last-child { border-bottom: 1px solid var(--line); }
.countries strong { font-size: 24px; font-weight: 300; color: var(--petrol); }
.countries span { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--blue); }
.countries span.cov { color: var(--body); }

/* Home: approach */
.approach { padding: 220px var(--gutter) 200px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 120px; }
.split { display: flex; gap: 96px; align-items: flex-start; }
.split-head { width: 460px; flex-shrink: 0; }
.split-head .h2, .split-head .h2-sm, .split-head .h1 { margin-top: 24px; }
.split-head .rule { margin-top: 32px; }
.split-body { flex: 1; max-width: 680px; display: flex; flex-direction: column; gap: 20px; }
.approach .split-body { padding-top: 44px; }
.statement { font-size: 22px; line-height: 1.65; color: var(--petrol); text-wrap: pretty; }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; margin: 0; padding: 0; list-style: none; }
.pillar { display: flex; flex-direction: column; gap: 14px; }
.pillar-line { height: 1px; margin-bottom: 14px; background: var(--petrol); transform-origin: left center; }
.pillar h3, .card-title { font-size: 20px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; color: var(--petrol); }
.pillar p, .card p { font-size: 16px; line-height: 1.75; color: var(--body); }

/* About */
.about-hero { position: relative; z-index: 2; height: 100vh; height: 100svh; min-height: 720px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.about-hero .hero-art img { right: -60px; bottom: 180px; height: auto; width: 560px; }
.about-main { position: relative; flex: 1; padding: var(--header) var(--gutter) 0; display: flex; flex-direction: column; justify-content: center; }
.about-main .h1 { margin-top: 24px; max-width: 760px; }
.about-main .rule { margin-top: 32px; }
.about-main .lead { margin-top: 32px; max-width: 640px; }
.facts { position: relative; height: 180px; flex-shrink: 0; padding: 0 var(--gutter); border-top: 1px solid var(--line); background: var(--white); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 64px; }
.facts dt, .facts dd { margin: 0; }
.fact { display: flex; flex-direction: column; gap: 10px; }
.fact + .fact { padding-left: 64px; border-left: 1px solid var(--line); }
.fact strong { font-size: 24px; font-weight: 300; color: var(--petrol); }
.history { margin: 0 var(--gutter); padding: 120px 0 96px; display: flex; gap: 96px; }
.side-label { width: 220px; flex-shrink: 0; }
.history-body { flex: 1; max-width: 860px; display: flex; flex-direction: column; gap: 28px; }
.history-body .big { font-size: 28px; font-weight: 300; line-height: 1.45; letter-spacing: -0.01em; color: var(--petrol); text-wrap: pretty; }
.history-body p + p { font-size: 17px; line-height: 1.8; color: var(--body); }
.edge { padding: 0 var(--gutter) 120px; display: flex; gap: 96px; }
.edge-grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; margin: 0; padding: 0; list-style: none; }
.edge-grid li { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--petrol); padding-top: 24px; }
.edge-grid p { font-size: 16px; line-height: 1.75; color: var(--body); }
.numbers { padding: 112px var(--gutter); background: var(--petrol); color: var(--white); display: flex; flex-direction: column; gap: 56px; }
.numbers .label { color: var(--white); }
.numbers-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; margin: 0; padding: 0; list-style: none; }
.numbers-grid li { display: flex; flex-direction: column; gap: 18px; }
.numbers-grid strong { font-size: 56px; font-weight: 200; letter-spacing: -0.03em; line-height: 1; color: var(--white); }
.numbers-grid i { display: block; height: 1px; background: rgba(255, 255, 255, 0.24); }
.numbers-grid span { font-size: 15px; line-height: 1.6; color: var(--on-dark); }
.partnership { margin: 0 var(--gutter); padding: 120px 0; }
.partnership .split-body p:first-child { font-size: 18px; line-height: 1.75; color: var(--petrol); }
.partnership .split-body p + p { font-size: 16px; line-height: 1.8; color: var(--body); }
.partnership .split-body a { border-bottom: 1px solid var(--blue); }
.table-wrap { margin-top: 72px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.platform { width: 100%; min-width: 760px; border-collapse: collapse; }
.platform th, .platform td { padding: 20px 24px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 16px; line-height: 1.5; color: var(--body); font-weight: 400; }
.platform thead th, .platform thead td { border-top: 0; padding-top: 0; }
.platform .group { padding: 0 24px 14px; border-bottom: 1px solid var(--petrol); text-align: center; font-size: 13px; font-weight: 700; color: var(--petrol); }
.platform .rowhead { width: 220px; padding-left: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--body); }
.platform .ours { font-weight: 500; color: var(--petrol); }
.platform .tag { font-size: 12px; font-weight: 700; text-transform: uppercase; }
.platform .tag.ours { color: var(--blue); }
.platform tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.platform .profile td, .platform .profile th { vertical-align: middle; }
.platform .profile img { width: 131px; height: 16px; }
.platform .brandname { font-size: 18px; font-weight: 500; }
.platform sup { font-size: 10px; }
.footnote { margin-top: 20px; font-size: 12px; line-height: 1.6; color: var(--body); }

/* Inner pages */
.page-head { padding: 88px var(--gutter) 72px; display: flex; gap: 96px; align-items: flex-end; }
.page-head.ruled { border-bottom: 1px solid var(--line); }
.page-head .split-head { align-self: flex-start; }
.page-head .lead { flex: 1; max-width: 680px; }
.page-body { padding: 80px var(--gutter) 120px; }
.back { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--blue); }
.team-intro { padding: 88px var(--gutter) 80px; }
.team-intro .lead { font-size: 18px; line-height: 1.8; }
.team { padding: 0 var(--gutter) 120px; }
.team .label { padding-bottom: 28px; }
.person { border-top: 1px solid var(--line); padding: 36px 0; display: flex; gap: 48px; align-items: flex-start; }
.person:first-of-type { border-top-color: var(--petrol); }
.person:last-of-type { border-bottom: 1px solid var(--line); }
.initials { width: 112px; height: 112px; flex-shrink: 0; background: var(--tint); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 300; color: var(--petrol); }
.person-meta { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.person-meta h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.role { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--blue); }
.country { margin-top: 6px; align-self: flex-start; padding: 4px 10px; border: 1px solid var(--petrol); font-size: 11px; font-weight: 700; line-height: 1.4; }
.person > p { flex: 1; font-size: 15px; line-height: 1.8; color: var(--body); }
.focus-grid { padding: 0 var(--gutter) 120px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; }
.focus-card { border-top: 1px solid var(--petrol); padding-top: 36px; display: flex; flex-direction: column; color: var(--petrol); }
.focus-card:hover { color: var(--petrol); }
.focus-card:hover .more { text-decoration: underline; text-underline-offset: 4px; }
.focus-name { display: flex; align-items: baseline; gap: 20px; }
.focus-name strong { font-size: 40px; font-weight: 300; letter-spacing: -0.02em; }
.focus-card p { margin-top: 24px; font-size: 17px; line-height: 1.75; color: var(--body); }
.focus-list { margin: 32px 0 0; padding: 0; list-style: none; flex: 1; }
.focus-list li { padding: 16px 0; border-top: 1px solid var(--line); font-size: 16px; font-weight: 500; }
.focus-list li:last-child { border-bottom: 1px solid var(--line); }
.more { margin-top: 32px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--blue); }
.strategy { padding: 80px var(--gutter) 120px; }
.strategy-list { flex: 1; margin: 0; padding: 0; list-style: none; }
.strategy-list li { display: flex; gap: 32px; border-top: 1px solid var(--line); padding: 28px 0 32px; }
.strategy-list li:first-child { border-top-color: var(--petrol); }
.strategy-list li:last-child { border-bottom: 1px solid var(--line); }
.strategy-list .num { width: 40px; flex-shrink: 0; }
.strategy-list h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.strategy-list p { margin-top: 14px; font-size: 16px; line-height: 1.8; color: var(--body); }
.cta-band { padding: 44px var(--gutter); background: var(--petrol); color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cta-band p { font-size: 20px; font-weight: 300; }
.cta-band + .site-footer .footer-top { padding-top: 0; }
.cta-band + .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.contact { flex: 1; padding: 96px var(--gutter); display: flex; gap: 96px; align-items: center; }
.contact-main { width: 560px; flex-shrink: 0; }
.contact-main .h1 { margin-top: 24px; }
.contact-main .rule { margin-top: 28px; }
.contact-main .lead { margin-top: 32px; }
.contact-mail { margin-top: 28px; display: inline-block; padding-bottom: 6px; border-bottom: 1px solid var(--blue); font-size: 24px; letter-spacing: -0.01em; }
.offices { flex: 1; }
.office { padding: 28px 0; border-top: 1px solid var(--line); }
.office:first-child { border-top-color: var(--petrol); }
.office:last-child { border-bottom: 1px solid var(--line); }
.office address { margin-top: 12px; font-style: normal; font-size: 18px; line-height: 1.6; }
.office .phone { margin-top: 8px; color: var(--body); }
.prose { max-width: 760px; }
.prose h2 { margin-top: 48px; font-size: 24px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.prose p, .prose li { margin-top: 16px; font-size: 17px; line-height: 1.8; color: var(--body); }
.prose ul { padding-left: 20px; }
.prose a { border-bottom: 1px solid var(--blue); }
.fill { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.fill > main { flex: 1; }
.notfound { flex: 1; padding: 120px var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.notfound .h1 { margin-top: 24px; }
.notfound .lead { margin-top: 28px; }
.notfound .btn { margin-top: 40px; align-self: flex-start; }

/* Motion (home page). Off by default, switched on by site.js. */
.pin { transform-box: fill-box; transform-origin: center; }
@keyframes hc-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hc-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hc-up { from { opacity: 0; transform: translateY(64px); } to { opacity: 1; transform: none; } }
@keyframes hc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hc-sink { from { transform: none; } to { transform: translateY(18%); } }
@keyframes hc-lift { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-72px); } }
@keyframes hc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hc-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes hc-line { from { transform: scaleX(0); } to { transform: none; } }

.motion .rise { animation: hc-rise 1.8s cubic-bezier(.22, .7, .2, 1) .2s both; }
.motion .in { animation: hc-in .9s cubic-bezier(.22, .7, .2, 1) both; }
.motion .in2 { animation-delay: .12s; }
.motion .in3 { animation-delay: .24s; }
.motion .in4 { animation-delay: .36s; }

/* Scroll-linked version for browsers with scroll-driven animations */
.motion.sda .hero { view-timeline-name: --hero; }
.motion.sda .coverage-map { view-timeline-name: --map; }
.motion.sda .hero-art-sink { animation: hc-sink linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
.motion.sda .hero-main { animation: hc-lift linear both; animation-timeline: --hero; animation-range: exit 5% exit 70%; }
.motion.sda .up { animation: hc-up linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
.motion.sda .d1 { animation-range: entry 10% cover 32%; }
.motion.sda .d2 { animation-range: entry 20% cover 36%; }
.motion.sda .d3 { animation-range: entry 30% cover 40%; }
.motion.sda .map-grid { animation: hc-fade linear both; animation-timeline: --map; animation-range: entry 0% cover 30%; }
.motion.sda .route { stroke-dasharray: 1; animation: hc-draw linear both; animation-timeline: --map; animation-range: cover 12% cover 46%; }
.motion.sda .pin { animation: hc-pop linear both; animation-timeline: --map; }
.motion.sda .pin1 { animation-range: cover 8% cover 18%; }
.motion.sda .pin2 { animation-range: cover 20% cover 30%; }
.motion.sda .pin3 { animation-range: cover 30% cover 40%; }
.motion.sda .pin4 { animation-range: cover 40% cover 50%; }
.motion.sda .pillar-line { animation: hc-line linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }

/* Fallback for other browsers: reveal once when an element comes into view */
.motion.io .up { opacity: 0; transform: translateY(48px); transition: opacity .9s cubic-bezier(.22, .7, .2, 1), transform .9s cubic-bezier(.22, .7, .2, 1); }
.motion.io .d1 { transition-delay: .1s; }
.motion.io .d2 { transition-delay: .2s; }
.motion.io .d3 { transition-delay: .3s; }
.motion.io .up.seen { opacity: 1; transform: none; }
.motion.io .pillar-line { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.22, .7, .2, 1) .2s; }
.motion.io .seen .pillar-line { transform: none; }
.motion.io .map-grid { opacity: 0; transition: opacity 1s ease; }
.motion.io .route { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1) .5s; }
.motion.io .pin { opacity: 0; transform: scale(.3); transition: opacity .5s ease, transform .5s cubic-bezier(.22, .7, .2, 1); }
.motion.io .pin1 { transition-delay: .3s; }
.motion.io .pin2 { transition-delay: .8s; }
.motion.io .pin3 { transition-delay: 1.3s; }
.motion.io .pin4 { transition-delay: 1.8s; }
.motion.io .coverage-map.seen .map-grid { opacity: 1; }
.motion.io .coverage-map.seen .route { stroke-dashoffset: 0; }
.motion.io .coverage-map.seen .pin { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .motion *, .motion *::before, .motion *::after { animation: none !important; transition: none !important; }
  .motion.io .up, .motion.io .pin, .motion.io .map-grid { opacity: 1 !important; transform: none !important; }
  .motion.io .route { stroke-dashoffset: 0 !important; }
  .motion.io .pillar-line { transform: none !important; }
}

/* Tablet */
@media (max-width: 1199px) {
  :root { --gutter: 48px; --section: 96px; }
  .coverage, .approach { padding-top: 160px; padding-bottom: 160px; }
  .coverage { gap: 56px; }
  .coverage-text { width: 380px; }
  .split, .page-head, .history, .edge, .contact { gap: 56px; }
  .split-head { width: 360px; }
  .side-label { width: 160px; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; }
  .numbers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
  .person-meta { width: 240px; }
  .contact-main { width: 440px; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-links { flex-wrap: wrap; gap: 16px 32px; }
}

/* Small tablet and phone: one column, menu button */
@media (max-width: 959px) {
  :root { --header: 80px; }
  .brand img { width: 163px; height: 20px; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    padding: 8px var(--gutter) 32px; background: var(--white); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px rgba(8, 59, 68, 0.08);
    display: none;
  }
  .js .nav-open .nav { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { display: block; border-top: 1px solid var(--line); }
  .nav-item:first-child { border-top: 0; }
  .nav-link { padding: 16px 0; border-bottom: 0; font-size: 13px; }
  .nav-link svg { display: none; }
  .nav-link[aria-current="page"], .nav-link.is-section { border-bottom: 0; }
  .nav-link:hover, .nav-item:hover > .nav-link, .nav-item:focus-within > .nav-link { background: none; color: var(--blue); }
  .menu { position: static; padding: 0 0 12px; visibility: visible; opacity: 1; transform: none; }
  .menu ul { width: auto; padding: 0; border: 0; box-shadow: none; background: none; }
  .menu a { padding: 8px 0 8px 16px; font-size: 16px; }
  .menu a:hover { background: none; color: var(--blue); }

  .h1, .h2 { font-size: 40px; }
  .h2-sm { font-size: 34px; }
  .hero-title { font-size: 44px; }
  .split, .page-head, .history, .edge, .contact { flex-direction: column; align-items: stretch; gap: 32px; }
  .split-head, .side-label, .contact-main { width: auto; }
  .approach .split-body { padding-top: 0; }
  .coverage { flex-direction: column; gap: 64px; }
  .coverage-text { position: static; width: auto; max-width: 560px; }
  .coverage-visual { padding-top: 0; gap: 56px; width: 100%; }
  .person { flex-wrap: wrap; gap: 24px 32px; }
  .person > p { flex-basis: 100%; }
  .person-meta { width: auto; flex: 1; }
  .focus-grid { grid-template-columns: 1fr; gap: 64px; }
  .facts { height: auto; padding-top: 32px; padding-bottom: 32px; grid-template-columns: 1fr; gap: 20px; }
  .fact + .fact { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid var(--line); }
  .about-hero { height: auto; min-height: 100svh; }
  .about-hero .hero-art { display: none; }
  .about-main { padding-top: calc(var(--header) + 56px); padding-bottom: 64px; }
  .edge-grid { grid-template-columns: 1fr; gap: 40px; }
  .cta-band { flex-direction: column; align-items: flex-start; }
}

/* Phone */
@media (max-width: 599px) {
  :root { --gutter: 24px; }
  .h1, .h2 { font-size: 34px; }
  .h2-sm { font-size: 30px; }
  .lead { font-size: 17px; }
  .hero { min-height: 600px; }
  .hero-main { justify-content: flex-start; padding-top: calc(var(--header) + 8vh); padding-bottom: 40%; }
  .hero-title { font-size: 36px; }
  .hero-main .rule { margin-top: 28px; }
  .hero-sub { margin-top: 24px; font-size: 17px; }
  .hero-cta { margin-top: 32px; }
  .hero-art img { height: 34%; right: -56px; }
  .coverage, .approach { padding-top: 112px; padding-bottom: 112px; }
  .approach { gap: 64px; }
  .statement { font-size: 19px; }
  .pillars { grid-template-columns: 1fr; gap: 40px; }
  .countries strong { font-size: 20px; }
  .coverage-map .ctry { display: none; }
  .coverage-map .city { font-size: 28px; }
  .countries li { flex-direction: column; gap: 4px; padding: 18px 0; }
  .history { padding: 88px 0 72px; }
  .history-body .big { font-size: 22px; }
  .edge { padding-bottom: 88px; }
  .numbers { padding: 80px var(--gutter); gap: 40px; }
  .numbers-grid { grid-template-columns: 1fr; gap: 32px; }
  .numbers-grid strong { font-size: 44px; }
  .partnership { padding: 88px 0; }
  .table-wrap { margin-top: 48px; margin-right: calc(-1 * var(--gutter)); }
  .page-head, .team-intro { padding-top: 56px; padding-bottom: 48px; }
  .page-body, .strategy { padding-top: 56px; padding-bottom: 88px; }
  .person { gap: 20px; }
  .initials { width: 72px; height: 72px; font-size: 22px; }
  .focus-name strong { font-size: 32px; }
  .strategy-list li { gap: 16px; }
  .strategy-list .num { width: 24px; }
  .strategy-list h3 { font-size: 19px; }
  .contact { padding-top: 56px; padding-bottom: 72px; }
  .contact-mail { font-size: 20px; word-break: break-all; }
  .site-footer { padding-top: 40px; }
  .footer-links { flex-direction: column; align-items: flex-start; gap: 14px; }
}