/* =====================================================================
   ELETCOL home — ten screens, each within 100svh
   ===================================================================== */
:root {
  --fill: calc(100svh - clamp(64px, 8svh, 88px) - clamp(28px, 4svh, 48px));
  --ink: #0E0B3A; --ink-deep: #07051F; --ink-2: #46456A; --mute: #7C7C99;
  --blue: #1D00F0; --blue-glow: #5B45FF; --blue-soft: #EEEDFF;
  --orange: #F38701; --orange-deep: #DC7800; --green: #7BE6AE;
  --paper: #FFFFFF; --paper-2: #F4F5FA; --line: #E3E4EE;
  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --wrap: 90vw; --gap: clamp(16px, 2vw, 32px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --glass: rgba(255,255,255,.07); --glass-line: rgba(255,255,255,.16); --glass-blur: blur(14px) saturate(1.5);
  --green-ink: var(--green-ink); --mute-2: var(--mute-2); --line-2: #C6C8DA; --red: var(--red); --red-soft: var(--red-soft);
  --r-pill: 999px; --r-chip: 12px; --r-card: 22px; --r-media: 26px;
  --lift: -5px; --shadow-lift: 0 34px 60px -36px rgba(14,11,58,.35); --shadow-lift-dark: 0 24px 50px -28px rgba(0,0,0,.7);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.dark :focus-visible { outline-color: var(--orange); }
.wrap { width: var(--wrap); margin-inline: auto; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Scroll snapping between screens (desktop only) */
@media (min-width: 1024px) and (min-height: 640px) {
  html { scroll-snap-type: y proximity; }
  .screen { scroll-snap-align: start; }
}

/* ---------- Screen frame ---------- */
.screen { position: relative; min-height: 100svh; display: grid; align-content: center; padding-block: clamp(64px, 8svh, 88px) clamp(28px, 4svh, 48px); overflow: hidden; isolation: isolate; }
.screen.dark { color: #fff; background: var(--ink-deep); }
.screen.grey { background: var(--paper-2); }
.bgph { position: absolute; inset: 0; z-index: -2; }
.noimg { background: linear-gradient(135deg, #1A1550, #2A2273 60%, #3B2FA8); position: relative; }
.noimg img { visibility: hidden; }
.noimg::before { content: 'DEMO IMAGE'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 11px; font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.55); z-index: 1; }
.bgph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) contrast(1.05); transform: scale(1.12); will-change: transform; }
.bgph::before { content: ''; position: absolute; inset: 0; background: var(--ink); mix-blend-mode: multiply; opacity: .66; }
.bgph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,5,31,.9), rgba(7,5,31,.5) 55%, rgba(7,5,31,.75)); }
.orb { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(29,0,240,.42) 0%, rgba(29,0,240,0) 66%); animation: drift 22s ease-in-out infinite alternate; }
.orb.o2 { background: radial-gradient(circle, rgba(243,135,1,.22) 0%, rgba(243,135,1,0) 66%); animation-duration: 28s; animation-delay: -9s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, -4vh) scale(1.12); } 100% { transform: translate(-4vw, 5vh) scale(.95); } }
.gridlines { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse at 70% 50%, #000 15%, transparent 72%); animation: gridmove 40s linear infinite; }
@keyframes gridmove { to { background-position: 72px 72px; } }

/* ---------- Shared components ---------- */
.glass { background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.glass-light { background: rgba(255,255,255,.84); border: 1px solid rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: 0 24px 60px -28px rgba(14,11,58,.45), inset 0 1px 0 #fff; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ink-2); }
.eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.dark .eyebrow { color: rgba(255,255,255,.8); }
.title { margin-top: 14px; font-size: clamp(30px, 3.9vw, 78px); line-height: .98; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }
.title .accent { color: var(--blue); }
.dark .title .accent { color: var(--orange); }
.lede { font-size: clamp(15px, 1.2vw, 21px); line-height: 1.5; color: var(--ink-2); }
.dark .lede { color: rgba(255,255,255,.7); }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; margin-bottom: clamp(18px, 3svh, 36px); }
.sec-head > div:first-child { grid-column: 1 / span 7; }
.sec-head > div:last-child { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-weight: 700; font-size: 14.5px; line-height: 1; border: 1px solid transparent; white-space: nowrap; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s, color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--ink); box-shadow: 0 12px 30px -12px rgba(243,135,1,.6); }
.btn-primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); box-shadow: 0 16px 34px -12px rgba(243,135,1,.8); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.dark .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn-sm { padding: 11px 18px; font-size: 13.5px; }
.btn .icon { font-size: 18px; transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(4px); }
.cc { font-size: 11px; font-weight: 800; letter-spacing: .06em; }

/* Word-split titles */
.title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.title .w > span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.in .title .w > span, .title.in .w > span { transform: none; }

/* Reveal variants */
[data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal="up"] { opacity: 0; transform: translateY(24px); }
[data-reveal="scale"] { opacity: 0; transform: scale(.95); }
[data-reveal="left"] { opacity: 0; transform: translateX(-28px); }
[data-reveal="clip"] { clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease); transition-delay: var(--d, 0ms); }
.in [data-reveal], [data-reveal].in { opacity: 1; transform: none; }
.in [data-reveal="clip"], [data-reveal="clip"].in { clip-path: inset(0 0 0 0); }

/* ---------- Global: top bar, dots, menu ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--blue), var(--orange)); z-index: 400; pointer-events: none; }
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 200; transform: translateY(-120%); transition: transform .5s var(--ease); pointer-events: none; }
.topbar.is-on { transform: none; pointer-events: auto; }
.topbar .tb { margin: 12px auto 0; width: var(--wrap); display: flex; align-items: center; gap: 20px; padding: 8px 8px 8px 20px; border-radius: 999px; background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: 0 20px 50px -30px rgba(14,11,58,.45), inset 0 1px 0 #fff; color: var(--ink); }
.logo { display: inline-flex; align-items: center; font-weight: 800; font-size: 22px; letter-spacing: -.045em; line-height: 1; }
.logo .dot { width: .42em; height: .42em; border-radius: 50%; background: var(--orange); margin: 0 .05em; }
.topbar nav { display: flex; gap: 2px; margin-inline: auto; }
.topbar nav a { padding: 10px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: background .2s, color .2s; }
.topbar nav a:hover, .topbar nav a.is-active { background: var(--blue-soft); color: var(--blue); }
.tb-menu, .menu-btn { display: none; width: 44px; height: 44px; position: relative; margin-left: auto; }
.tb-menu span, .menu-btn span { position: absolute; left: 11px; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.tb-menu span:first-child, .menu-btn span:first-child { top: 17px; } .tb-menu span:last-child, .menu-btn span:last-child { top: 25px; }

.dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 210; display: grid; gap: 10px; mix-blend-mode: difference; }
.dots a { position: relative; width: 22px; height: 22px; display: grid; place-items: center; }
.dots a::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .45; transition: transform .35s var(--ease), opacity .35s; }
.dots a.is-active::before { transform: scale(1.8); opacity: 1; }
.dots a span { position: absolute; right: 30px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: #fff; opacity: 0; transition: opacity .25s, transform .35s var(--ease); pointer-events: none; }
.dots a:hover span { opacity: 1; transform: translate(0, -50%); }

.menu { position: fixed; inset: 0; z-index: 300; background: rgba(7,5,31,.88); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); color: #fff; padding: 24px 5vw 40px; display: none; flex-direction: column; overflow-y: auto; }
.menu.is-open { display: flex; animation: rise .4s var(--ease); }
.menu .top { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.menu .close-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.menu nav { display: grid; margin-top: 28px; }
.menu nav a { padding: 16px 0; font-size: 28px; font-weight: 800; letter-spacing: -.035em; border-bottom: 1px solid rgba(255,255,255,.12); }
.menu .mfoot { margin-top: auto; padding-top: 28px; display: grid; gap: 14px; font-size: 15px; color: rgba(255,255,255,.7); }
.menu .mfoot b { display: block; color: #fff; }
body.menu-open { overflow: hidden; }

/* ---------- 01 Hero ---------- */
#hero { padding-top: 0; grid-template-rows: 84px minmax(0, 1fr); align-content: stretch; }
#hero .hero { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding-block: clamp(12px, 2svh, 32px) clamp(120px, 17svh, 150px); min-height: 0; }
#hero .pill { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.85); padding: 9px 16px 9px 12px; border-radius: 999px; }
#hero .pill .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(243,135,1,.6); } 70% { box-shadow: 0 0 0 10px rgba(243,135,1,0); } 100% { box-shadow: 0 0 0 0 rgba(243,135,1,0); } }
#hero h1 { margin-top: clamp(18px, 3svh, 32px); font-size: clamp(40px, 5.2vw, 104px); line-height: .96; letter-spacing: -.045em; font-weight: 800; }
#hero h1 .line { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
#hero h1 .line > span { display: block; }
#hero h1 .accent { color: var(--orange); }
#hero .map { grid-column: 7 / span 6; position: relative; align-self: stretch; min-height: 420px; }
#hero .links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#hero .links line { stroke: rgba(255,255,255,.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
#hero .links .flow { stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 6 14; vector-effect: non-scaling-stroke; animation: flow 2.2s linear infinite; }
#hero .links .flow:nth-child(4) { animation-delay: -.7s; } #hero .links .flow:nth-child(6) { animation-delay: -1.3s; } #hero .links .flow:nth-child(8) { animation-delay: -.4s; }
@keyframes flow { to { stroke-dashoffset: -40; } }
#hero .rings { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#hero .rings i { position: absolute; left: 0; top: 0; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; border: 1px solid rgba(91,69,255,.55); animation: ring 4.5s var(--ease) infinite; }
#hero .rings i:nth-child(2) { animation-delay: 1.5s; } #hero .rings i:nth-child(3) { animation-delay: 3s; }
@keyframes ring { 0% { transform: scale(.15); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
#hero .node { position: absolute; transform: translate(-50%, -50%); border-radius: 16px; padding: 12px 14px 12px 12px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; min-width: clamp(190px, 14vw, 250px); transition: transform .35s var(--ease), background .2s; }
#hero .node:hover { background: rgba(255,255,255,.14); transform: translate(-50%, -50%) translateY(-4px); }
#hero .node .cc { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
#hero .node b { display: block; font-size: clamp(14px, 1vw, 17px); font-weight: 700; }
#hero .node small { display: block; font-size: clamp(12px, .85vw, 13.5px); color: rgba(255,255,255,.62); margin-top: 2px; white-space: nowrap; }
#hero .node .st { position: absolute; top: 10px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
#hero .node-us { left: 30%; top: 14%; } #hero .node-mx { left: 14%; top: 46%; } #hero .node-co { left: 58%; top: 84%; } #hero .node-ve { left: 86%; top: 62%; }
#hero .hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(168px, 12vw, 220px); height: clamp(168px, 12vw, 220px); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; background: rgba(29,0,240,.22); border-color: rgba(120,100,255,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 60px -10px rgba(29,0,240,.8); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 60px -10px rgba(29,0,240,.8); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 90px -6px rgba(29,0,240,1); } }
#hero .hub .logo { font-size: 19px; }
#hero .hub b { font-size: clamp(26px, 2vw, 36px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
#hero .hub small { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.7); letter-spacing: .06em; }
#hero .strip { position: absolute; left: 0; right: 0; bottom: clamp(14px, 3svh, 32px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#hero .strip li { position: relative; overflow: hidden; border-radius: 18px; padding: clamp(14px, 1.8svh, 22px) clamp(16px, 1.4vw, 24px); display: flex; flex-direction: column; gap: 6px; transition: transform .4s var(--ease), background .25s, border-color .25s, box-shadow .4s var(--ease); }
#hero .strip li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
#hero .strip li::after { content: ''; position: absolute; top: -60%; left: -40%; width: 40%; height: 220%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0)); transform: skewX(-18deg) translateX(-120%); transition: transform .9s var(--ease); pointer-events: none; }
#hero .strip li:hover { transform: translateY(-5px); background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); box-shadow: 0 24px 50px -28px rgba(0,0,0,.7); }
#hero .strip li:hover::before { transform: scaleX(1); }
#hero .strip li:hover::after { transform: skewX(-18deg) translateX(420%); }
#hero .strip b { font-size: clamp(24px, 2.2vw, 40px); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
#hero .strip b .up { color: var(--orange); }
#hero .strip span { font-size: 12.5px; color: rgba(255,255,255,.65); font-weight: 600; }
#hero .strip .partners { justify-content: center; }
#hero .strip .partners span { font-size: 11px; letter-spacing: .08em; }
#hero .strip .partners div { display: flex; flex-wrap: wrap; gap: 6px 14px; }
#hero .strip .partners b { font-size: clamp(15px, 1.2vw, 20px); letter-spacing: -.01em; }
@media (prefers-reduced-motion: no-preference) {
  #hero .bgph img { animation: settle 2.4s var(--ease) both; }
  #hero .copy > * { animation: rise .9s var(--ease) both; }
  #hero .copy > :nth-child(1) { animation-delay: .15s; } #hero .copy > :nth-child(3) { animation-delay: .5s; } #hero .copy > :nth-child(4) { animation-delay: .6s; }
  #hero .copy > h1 { animation: none; }
  #hero h1 .line > span { animation: lineUp 1s var(--ease) both; }
  #hero h1 .line:nth-child(1) > span { animation-delay: .25s; } #hero h1 .line:nth-child(2) > span { animation-delay: .33s; } #hero h1 .line:nth-child(3) > span { animation-delay: .41s; }
  #hero .hub { animation: pop .9s var(--ease) .7s both, breathe 5s ease-in-out 1.6s infinite; }
  #hero .node { animation: pop .8s var(--ease) both; }
  #hero .node-us { animation-delay: .95s; } #hero .node-mx { animation-delay: 1.05s; } #hero .node-co { animation-delay: 1.15s; } #hero .node-ve { animation-delay: 1.25s; }
  #hero .links { animation: fade 1.2s var(--ease) 1.1s both; }
  #hero .strip { animation: rise 1s var(--ease) 1.2s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes lineUp { from { transform: translateY(110%); } to { transform: none; } }
@keyframes settle { from { transform: scale(1.22); } to { transform: scale(1.12); } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.85); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 02 Services ---------- */
#services .marquee { position: relative; overflow: hidden; padding: 12px 0; border-block: 1px solid var(--line); margin-bottom: clamp(18px, 3svh, 32px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
#services .marquee ul { display: flex; width: max-content; animation: marquee 34s linear infinite; }
#services .marquee:hover ul { animation-play-state: paused; }
#services .marquee li { display: flex; align-items: center; gap: 14px; margin-right: 56px; font-size: clamp(16px, 1.3vw, 20px); font-weight: 800; letter-spacing: -.03em; color: var(--mute-2); white-space: nowrap; }
#services .marquee li svg { width: 26px; height: 26px; color: var(--ink-2); opacity: .55; }
#services .marquee li.lab { font-size: 11.5px; letter-spacing: .1em; color: var(--mute); }

@keyframes marquee { to { transform: translateX(-50%); } }
#services .body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: stretch; min-height: calc(var(--fill) - 230px); }
#services .index { grid-column: 1 / span 5; position: relative; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
#services .indicator { position: absolute; left: -1px; top: 0; width: 3px; height: 0; background: var(--orange); border-radius: 2px; transition: transform .5s var(--ease), height .5s var(--ease); z-index: 1; }
#services .tab { flex: 1; position: relative; display: grid; grid-template-columns: 40px 1fr auto; column-gap: 14px; align-items: center; padding: clamp(10px, 1.8svh, 20px) 0 clamp(10px, 1.8svh, 20px) 18px; border-bottom: 1px solid var(--line); transition: padding-left .4s var(--ease); }
#services .tab:hover { padding-left: 26px; }
#services .tab .num { font-size: 12px; font-weight: 800; color: var(--mute); letter-spacing: .06em; transition: color .25s; }
#services .tab .t { display: block; font-size: clamp(17px, 1.5vw, 28px); font-weight: 800; letter-spacing: -.03em; transition: color .25s; }
#services .tab .s { display: block; font-size: clamp(13px, .95vw, 15px); color: var(--mute); margin-top: 2px; }
#services .tab .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); transition: background .25s, color .25s, transform .4s var(--ease); }
#services .tab .ic .icon { font-size: 20px; }
#services .tab[aria-selected="true"] .t { color: var(--blue); }
#services .tab[aria-selected="true"] .num { color: var(--orange); }
#services .tab[aria-selected="true"] .ic { background: var(--blue); color: #fff; transform: rotate(-6deg); }
#services .tab .prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; }
#services .tab[aria-selected="true"] .prog { transition: transform var(--auto, 6s) linear; transform: scaleX(1); }
#services.paused .tab[aria-selected="true"] .prog { transition: none; transform: scaleX(0); }
#services .panel { grid-column: 6 / span 7; position: relative; min-height: 0; border-radius: 26px; overflow: hidden; background: var(--paper-2); }
#services .scene { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); }
#services .scene[data-active="true"] { opacity: 1; }
#services .scene img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.03); transform: scale(1.12); transition: transform 8s linear; }
#services .scene[data-active="true"] img { transform: scale(1); }
#services .scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,11,58,.05), rgba(14,11,58,.3)); mix-blend-mode: multiply; pointer-events: none; }
#services .tag-top { position: absolute; z-index: 2; top: 16px; left: 16px; display: flex; gap: 8px; }
#services .tag-top span { padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink); }
#services .card { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; border-radius: 18px; padding: clamp(16px, 1.8vw, 24px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px clamp(16px, 2vw, 32px); align-items: end; }
#services .card h3 { font-size: clamp(20px, 1.9vw, 34px); letter-spacing: -.035em; font-weight: 800; line-height: 1.05; }
#services .card p { margin-top: 8px; font-size: clamp(14px, 1vw, 17px); line-height: 1.5; color: var(--ink-2); }
#services .deliv-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--mute); margin-bottom: 8px; }
#services .deliv { display: grid; gap: 6px; }
#services .deliv li { display: flex; align-items: center; gap: 10px; font-size: clamp(13px, .95vw, 15.5px); font-weight: 600; }
#services .deliv li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D00F0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; flex-shrink: 0; }
#services .card [data-field] { transition: opacity .35s var(--ease), transform .35s var(--ease); }
#services .card.is-swapping [data-field] { opacity: 0; transform: translateY(8px); }

/* ---------- 03 Track record (white, bento + timeline) ---------- */
#record .kpis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(4px, 1svh, 12px); }
#record .stat { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(18px, 2vw, 30px); min-height: clamp(150px, 24svh, 260px); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; background: var(--paper-2); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
#record .stat:hover { transform: translateY(-5px); box-shadow: 0 34px 60px -36px rgba(14,11,58,.35); }
#record .s1 { grid-column: span 4; background: var(--blue-soft); }
#record .s2, #record .s3 { grid-column: span 3; }
#record .s4 { grid-column: span 2; background: var(--ink); color: #fff; }
#record .num { display: flex; align-items: baseline; font-size: clamp(44px, 5vw, 96px); font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
#record .s1 .num { color: var(--blue); }
#record .num .suffix { color: var(--orange); font-size: .55em; margin-left: 2px; }
#record .lab { font-size: clamp(13px, .95vw, 15.5px); color: var(--ink-2); line-height: 1.35; }
#record .lab b { display: block; color: var(--ink); font-weight: 700; font-size: clamp(14px, 1.05vw, 17px); margin-bottom: 2px; }
#record .s4 .lab { color: rgba(255,255,255,.65); } #record .s4 .lab b { color: #fff; }
#record .chips { display: flex; flex-wrap: wrap; gap: 6px; }
#record .chips span { padding: 6px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; background: #fff; color: var(--ink-2); border: 1px solid var(--line); }
#record .s1 .chips span { background: #fff; color: var(--blue); border-color: transparent; }
#record .cc-row { display: flex; gap: 6px; }
#record .cc-row .cc { width: 36px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--ink); }
#record .s3 .years { font-size: 12.5px; font-weight: 700; color: var(--mute); display: inline-flex; align-items: center; gap: 8px; }
#record .s3 .years i { display: block; width: 28px; height: 1px; background: var(--line); }
#record .s4 .shield { position: absolute; right: -14px; top: -14px; width: 96px; height: 96px; color: rgba(255,255,255,.08); }
#record .s4 .shield .icon { width: 100%; height: 100%; stroke-width: 1.2; }
#record .s4 .ok { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--green); letter-spacing: .04em; }
#record .s4 .ok::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }

/* Timeline: years with activity as columns */
#record .tl { position: relative; margin-top: clamp(28px, 5svh, 56px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); padding-top: 12px; }
#record .tl-line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
#record .tl-line i { display: block; height: 100%; width: 0; background: var(--blue); transition: width 2.4s var(--ease); }
#record.in .tl-line i { width: 100%; }
#record .tl-line em { position: absolute; right: 0; top: 50%; width: 10px; height: 10px; margin: -5px -5px 0 0; border-radius: 50%; background: var(--orange); opacity: 0; transition: opacity .3s 2.2s; }
#record.in .tl-line em { opacity: 1; animation: pulse 2.4s ease-out 2.2s infinite; }
#record .yr { position: relative; display: flex; flex-direction: column; gap: 8px; }
#record .yr::before { content: ''; position: absolute; left: 0; top: -12px; width: 2px; height: 12px; background: var(--line-2); }
#record .yr .y { font-size: clamp(14px, 1.1vw, 18px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 6px 0 4px; display: flex; align-items: baseline; gap: 8px; }
#record .yr .y small { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--mute); }
#record .yr.gap .y { color: var(--mute); }
#record .yr.gap::after { content: ''; position: absolute; left: 0; right: 0; top: -13px; height: 0; border-top: 2px dashed var(--paper); }
#record .ev { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 9px 12px 9px 9px; border-radius: 12px; background: var(--paper-2); font-size: clamp(12px, .9vw, 14.5px); font-weight: 600; color: var(--ink); line-height: 1.25; transition: transform .35s var(--ease), background .2s, box-shadow .35s var(--ease); }
#record .ev:hover { transform: translateX(8px); background: #fff; box-shadow: 0 16px 30px -22px rgba(14,11,58,.35); }
#record .ev .cc { width: 30px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 10px; }
#record .ev small { display: block; font-weight: 500; color: var(--mute); font-size: .88em; margin-top: 1px; }
#record .ev.muted { background: transparent; border: 1px dashed var(--line-2); color: var(--ink-2); }
#record .ev.muted .cc { background: var(--paper-2); color: var(--ink-2); }
#record .ev.founded .cc { background: var(--orange); color: var(--ink); }

/* ---------- 04 Projects ---------- */
#projects { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
#projects .pgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: var(--gap); min-height: 0; height: clamp(400px, calc(var(--fill) - 190px), 900px); }
#projects .pcard { position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--paper); isolation: isolate; min-height: 0; transform-style: preserve-3d; transition: box-shadow .5s var(--ease); }
#projects .pcard:hover { box-shadow: 0 40px 70px -40px rgba(14,11,58,.45); }
#projects .ph { position: relative; overflow: hidden; background: var(--paper-2); flex: 1; min-height: 0; }
#projects .ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.03); transform: scale(1.08); transition: transform .4s var(--ease); }
#projects .ph::after { content: ''; position: absolute; inset: 0; background: var(--ink); mix-blend-mode: multiply; opacity: .12; pointer-events: none; }
#projects .tags { position: absolute; z-index: 2; top: 14px; left: 14px; display: flex; gap: 6px; }
#projects .tag { padding: 7px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--ink); }
#projects .tag.cat { background: var(--ink); color: #fff; }
#projects .cc { position: absolute; z-index: 2; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
#projects .large { grid-column: 1 / span 7; grid-row: 1 / span 2; }
#projects .large .ph { position: absolute; inset: 0; }
#projects .large .ph::after { background: linear-gradient(180deg, rgba(14,11,58,0) 40%, rgba(14,11,58,.55) 100%); mix-blend-mode: normal; opacity: 1; }
#projects .large .body { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; border-radius: 16px; padding: clamp(16px, 1.8vw, 24px); display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 12px clamp(16px, 2vw, 32px); align-items: end; }
#projects .large h3 { font-size: clamp(20px, 2.1vw, 40px); letter-spacing: -.035em; line-height: 1.02; font-weight: 800; }
#projects .large p { margin-top: 8px; font-size: clamp(14px, 1vw, 17px); line-height: 1.5; color: var(--ink-2); max-width: 44ch; }
#projects .facts { display: grid; gap: 4px; min-width: 140px; }
#projects .facts div { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; color: var(--mute); font-weight: 600; padding: 5px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
#projects .facts div:last-child { border-bottom: 0; }
#projects .facts b { color: var(--ink); font-weight: 800; } #projects .facts .ok { color: var(--green-ink); }
#projects .go { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--blue); }
#projects .go .icon { transition: transform .25s var(--ease); }
#projects .pcard:hover .go .icon { transform: translateX(4px); }
#projects .small { grid-column: 8 / span 5; flex-direction: row; }
#projects .small .ph { flex: 0 0 44%; }
#projects .small .body { flex: 1; padding: clamp(14px, 1.6vw, 22px); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#projects .small .meta { font-size: 12px; font-weight: 700; color: var(--mute); }
#projects .small h3 { font-size: clamp(16px, 1.45vw, 26px); letter-spacing: -.03em; line-height: 1.1; font-weight: 800; }
#projects .small p { font-size: clamp(13px, .95vw, 16px); line-height: 1.45; color: var(--ink-2); }
#projects .small .go { margin-top: auto; grid-column: auto; }

/* ---------- 05 Process ---------- */
#process .steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); counter-reset: step; min-height: clamp(260px, calc(var(--fill) - 380px), 520px); }
#process .track { position: absolute; left: 28px; right: 28px; top: calc(clamp(56px, 4vw, 76px) / 2 - 1px); height: 2px; background: var(--line); }
#process .track i { display: block; height: 100%; background: var(--blue); width: 0; transition: width 2.2s var(--ease); }
#process.in .track i { width: 100%; }
#process .track em { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); opacity: 0; }
#process.in .track em { animation: travel 6s var(--ease) 2.4s infinite; }
@keyframes travel { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
#process .step { position: relative; display: flex; flex-direction: column; gap: 10px; counter-increment: step; }
#process .dot { width: clamp(56px, 4vw, 76px); height: clamp(56px, 4vw, 76px); border-radius: 50%; background: var(--paper); border: 2px solid var(--line); display: grid; place-items: center; color: var(--ink-2); transition: border-color .4s, color .4s, background .4s, transform .5s var(--ease); }
#process .dot .icon { font-size: clamp(24px, 1.7vw, 32px); }
#process.in .dot { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); transition-delay: calc(var(--i) * .35s); }
#process .step:hover .dot { transform: scale(1.08) rotate(-6deg); background: var(--blue); color: #fff; }
#process .k { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--mute); margin-top: 6px; }
#process .k::before { content: 'STEP ' counter(step, decimal-leading-zero); }
#process h3 { font-size: clamp(18px, 1.5vw, 28px); letter-spacing: -.025em; font-weight: 800; line-height: 1.15; }
#process .step p { font-size: clamp(14px, 1.05vw, 18px); line-height: 1.5; color: var(--ink-2); max-width: 30ch; }
#process .out { margin-top: auto; padding-top: 8px; font-size: clamp(12px, .9vw, 15px); font-weight: 700; color: var(--blue); display: inline-flex; align-items: center; gap: 8px; }
#process .out::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
#process .promise { margin-top: clamp(24px, 4svh, 48px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding-top: clamp(16px, 2.5svh, 28px); border-top: 1px solid var(--line); }
#process .promise p { grid-column: 1 / span 7; font-size: clamp(18px, 1.8vw, 32px); line-height: 1.35; letter-spacing: -.02em; font-weight: 600; }
#process .promise p b { color: var(--blue); }
#process .promise div { grid-column: 9 / span 4; display: flex; justify-content: flex-end; }

/* ---------- 06 Coverage ---------- */
#coverage .cov { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; min-height: calc(var(--fill) - 20px); }
#coverage .mapwrap { grid-column: 1 / span 6; position: relative; width: min(100%, calc((var(--fill) - 20px) * .8)); aspect-ratio: 448 / 560; margin: 0 auto; }
#coverage .map { display: block; width: 100%; height: 100%; overflow: visible; }
#coverage .map circle.d { fill: rgba(255,255,255,.2); transition: fill .3s; }
#coverage .map circle.d.on { fill: rgba(255,255,255,.5); }
#coverage .map circle.d.hot { fill: var(--orange); }
#coverage .map path.arc { fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 4 10; opacity: .8; animation: flow 2.4s linear infinite; }
#coverage .pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; font-size: clamp(12.5px, .95vw, 15px); font-weight: 700; white-space: nowrap; transition: transform .35s var(--ease), background .2s; }
#coverage .pin:hover { transform: translate(-50%, -50%) translateY(-3px); background: rgba(255,255,255,.14); }
#coverage .pin .cc { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: var(--orange); color: var(--ink); }
#coverage .pin .ring { position: absolute; left: 20px; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 1px solid rgba(243,135,1,.7); animation: ring2 2.6s var(--ease) infinite; pointer-events: none; }
@keyframes ring2 { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
#coverage .countries { grid-column: 7 / span 6; }
#coverage .countries .lede { margin-top: 14px; max-width: 46ch; }
#coverage .clist { margin-top: clamp(16px, 3svh, 28px); }
#coverage .clist li { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; padding: clamp(12px, 2.2svh, 24px) 0; border-top: 1px solid rgba(255,255,255,.14); transition: padding-left .35s var(--ease); }
#coverage .clist li:hover { padding-left: 8px; }
#coverage .clist .cc { width: 44px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
#coverage .clist b { display: block; font-size: clamp(16px, 1.25vw, 22px); font-weight: 700; }
#coverage .clist small { display: block; font-size: clamp(12.5px, .95vw, 15px); color: rgba(255,255,255,.62); margin-top: 1px; }
#coverage .clist .svc { font-size: clamp(12px, .9vw, 14.5px); font-weight: 700; color: rgba(255,255,255,.75); text-align: right; }
#coverage .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(14px, 2.5svh, 24px); }
#coverage .kpis div { border-radius: 18px; padding: clamp(14px, 1.6vw, 24px) clamp(18px, 1.6vw, 26px); }
#coverage .kpis b { display: block; font-size: clamp(26px, 2.4vw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
#coverage .kpis span { display: block; font-size: clamp(12.5px, .95vw, 15px); color: rgba(255,255,255,.65); margin-top: 5px; }

/* ---------- 07 Safety ---------- */
#safety .sgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
#safety .sphoto { grid-column: 1 / span 6; position: relative; height: clamp(360px, calc(var(--fill) - 20px), 900px); border-radius: 26px; overflow: hidden; background: var(--paper-2); }
#safety .sphoto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.03); animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2%, 2%); } }
#safety .sphoto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,11,58,.05), rgba(14,11,58,.45)); pointer-events: none; }
#safety .badge { position: absolute; z-index: 2; border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; color: #fff; animation: float 6s ease-in-out infinite; }
#safety .badge .icon { font-size: 22px; color: var(--orange); }
#safety .badge b { display: block; font-size: clamp(22px, 1.8vw, 32px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
#safety .badge span { display: block; font-size: clamp(12px, .9vw, 14px); color: rgba(255,255,255,.7); margin-top: 3px; }
#safety .b1 { left: 18px; top: 18px; } #safety .b2 { right: 18px; bottom: 18px; animation-delay: -2s; } #safety .b3 { left: 18px; bottom: 18px; animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
#safety .stext { grid-column: 8 / span 5; display: flex; flex-direction: column; align-items: flex-start; }
#safety .stext .lede { margin-top: 16px; }
#safety .swa { margin-top: 18px; padding: 16px 20px; border-radius: 16px; background: var(--blue-soft); font-size: clamp(13.5px, 1vw, 16px); line-height: 1.5; max-width: 46ch; }
#safety .swa b { color: var(--blue); }
#safety .certs { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
#safety .certs li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: clamp(12.5px, .95vw, 14.5px); font-weight: 700; transition: border-color .2s, background .2s, transform .3s var(--ease); }
#safety .certs li:hover { border-color: var(--ink); background: var(--paper-2); transform: translateY(-2px); }
#safety .certs .icon { font-size: 15px; color: var(--blue); }
#safety .stext .btn { margin-top: 22px; }

/* ---------- 08 Products ---------- */
#products .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
#products .tile { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: 22px; overflow: hidden; transform-style: preserve-3d; transition: box-shadow .5s var(--ease); }
#products .tile:hover { box-shadow: 0 40px 70px -40px rgba(14,11,58,.4); }
#products .ph { position: relative; height: clamp(160px, calc((var(--fill) - 190px) * .55), 420px); overflow: hidden; background: var(--paper-2); }
#products .ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.03); transform: scale(1.08); transition: transform .4s var(--ease); }
#products .ph::after { content: ''; position: absolute; inset: 0; background: var(--ink); mix-blend-mode: multiply; opacity: .1; }
#products .k { position: absolute; z-index: 2; left: 14px; top: 14px; padding: 7px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--ink); }
#products .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
#products h3 { font-size: clamp(18px, 1.7vw, 30px); letter-spacing: -.03em; font-weight: 800; }
#products .tile li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: clamp(8px, 1.1svh, 14px) 0; border-top: 1px solid var(--line); font-size: clamp(13.5px, 1vw, 16px); color: var(--ink-2); transition: color .2s, padding-left .3s var(--ease); }
#products .tile li:hover { color: var(--ink); padding-left: 8px; }
#products .tile li .icon { font-size: 15px; color: var(--mute); }
#products .go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--blue); }
#products .go .icon { transition: transform .25s var(--ease); }
#products .tile:hover .go .icon { transform: translateX(4px); }

/* ---------- 09 Clients ---------- */
#clients .quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
#clients .quote { position: relative; padding: clamp(24px, 2.8vw, 48px); border-radius: 22px; background: var(--paper-2); display: flex; flex-direction: column; gap: 22px; overflow: hidden; min-height: clamp(260px, calc((var(--fill) - 260px)), 520px); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
#clients .quote:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -40px rgba(14,11,58,.3); }
#clients .quote::before { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(29,0,240,.12), rgba(29,0,240,0) 70%); transition: transform .6s var(--ease); }
#clients .quote:hover::before { transform: scale(1.6); }
#clients .mark { width: 42px; height: 42px; border-radius: 12px; background: var(--ink); color: var(--orange); display: grid; place-items: center; }
#clients .mark .icon { font-size: 22px; }
#clients .quote p { font-size: clamp(17px, 1.55vw, 27px); line-height: 1.45; letter-spacing: -.015em; font-weight: 600; text-wrap: pretty; }
#clients figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
#clients .av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--blue-soft); }
#clients figcaption b { display: block; font-size: 14px; font-weight: 700; }
#clients figcaption small { display: block; font-size: 12.5px; color: var(--mute); margin-top: 2px; }
#clients .co { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--ink-2); padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
#clients .co svg { width: 18px; height: 18px; }
#clients .refs { margin-top: clamp(18px, 3svh, 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
#clients .refs b { color: var(--ink); } #clients .refs a { font-weight: 700; color: var(--blue); }
#clients .refs .marks { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-left: auto; font-weight: 800; letter-spacing: -.02em; color: var(--mute-2); font-size: 16px; }
#clients .refs .marks span { display: inline-flex; align-items: center; gap: 8px; }
#clients .refs .marks svg { width: 20px; height: 20px; }

/* ---------- 10 Contact + footer ---------- */
#contact { padding-bottom: 0; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
#contact .cgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; align-self: center; }
#contact .cinfo { grid-column: 1 / span 5; }
#contact .cinfo .lede { margin-top: 16px; max-width: 42ch; }
.ways { margin-top: 22px; display: grid; gap: 8px; }
.ways a, .ways > li > div { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; padding: 11px 14px; border-radius: 14px; transition: background .2s, transform .35s var(--ease); }
.ways a:hover { background: rgba(255,255,255,.12); transform: translateX(4px); }
.ways .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--orange); }
.ways .ic .icon { font-size: 20px; }
.ways b { display: block; font-size: clamp(15px, 1.1vw, 18px); font-weight: 700; }
.ways small { display: block; font-size: 12.5px; color: rgba(255,255,255,.62); margin-top: 2px; }
.qform { grid-column: 7 / span 6; border-radius: 22px; padding: clamp(18px, 2.4vw, 40px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; position: relative; }
.qform .fhead { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.qform .fhead b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.qform .fhead span { font-size: 12px; color: rgba(255,255,255,.6); display: inline-flex; align-items: center; gap: 8px; }
.qform .fhead span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.qform .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.qform .field.full { grid-column: 1 / -1; }
.qform label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75); }
.qform label .opt { font-weight: 500; color: rgba(255,255,255,.45); }
.qform .input { font: inherit; font-size: clamp(14.5px, 1vw, 16px); width: 100%; color: #fff; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); transition: border-color .2s, background .2s, box-shadow .2s; }
.qform .input::placeholder { color: rgba(255,255,255,.35); }
.qform .input:focus { outline: none; border-color: var(--orange); background: rgba(255,255,255,.12); box-shadow: 0 0 0 4px rgba(243,135,1,.18); }
.qform select.input { appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.qform select.input option { color: var(--ink); }
.qform textarea.input { min-height: clamp(96px, 14svh, 160px); resize: vertical; line-height: 1.5; }
.qform .field.is-invalid .input { border-color: var(--red); box-shadow: 0 0 0 4px rgba(255,122,102,.18); }
.qform .err { display: none; font-size: 12px; font-weight: 600; color: var(--red-soft); }
.qform .field.is-invalid .err { display: block; }
.qform .ffoot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
.qform .ffoot small { font-size: 12px; color: rgba(255,255,255,.5); }
.qform .send.is-loading { color: transparent; pointer-events: none; position: relative; }
.qform .send.is-loading::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(14,11,58,.25); border-top-color: var(--ink); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.qform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.qform .done { grid-column: 1 / -1; display: none; text-align: center; padding: 32px 20px; }
.qform .done .ok { width: 56px; height: 56px; border-radius: 50%; background: rgba(123,230,174,.15); color: var(--green); display: grid; place-items: center; margin: 0 auto 14px; }
.qform .done .ok .icon { font-size: 28px; }
.qform .done h3 { font-size: 22px; letter-spacing: -.03em; }
.qform .done p { margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.7); max-width: 40ch; margin-inline: auto; }
.qform.is-sent .field, .qform.is-sent .ffoot, .qform.is-sent .fhead { display: none; }
.qform.is-sent .done { display: block; animation: rise .6s var(--ease); }

#contact .footer , .footer-only .footer { margin-top: clamp(28px, 5svh, 56px); padding: clamp(18px, 3svh, 28px) 0 18px; border-top: 1px solid rgba(255,255,255,.12); }
#contact .fgrid , .footer-only .fgrid { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: 13px; color: rgba(255,255,255,.6); }
#contact .fgrid .logo , .footer-only .fgrid .logo { color: #fff; font-size: 20px; }
#contact .fgrid .tag , .footer-only .fgrid .tag { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: var(--orange); }
#contact .fgrid nav , .footer-only .fgrid nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-inline: auto; }
#contact .fgrid nav a , .footer-only .fgrid nav a { transition: color .2s; } #contact .fgrid nav a:hover { color: #fff; }
#contact .fgrid .right , .footer-only .fgrid .right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
#contact .lang , .footer-only .lang { display: inline-flex; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; overflow: hidden; }
#contact .lang a , .footer-only .lang a { padding: 5px 11px; font-size: 11.5px; font-weight: 700; }
#contact .lang a[aria-current="true"] , .footer-only .lang a[aria-current="true"] { background: #fff; color: var(--ink); }
#contact .soc , .footer-only .soc { display: inline-flex; gap: 6px; }
#contact .soc a , .footer-only .soc a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.75); transition: background .2s, color .2s; }
#contact .soc a:hover , .footer-only .soc a:hover { background: #fff; color: var(--ink); }
#contact .soc svg , .footer-only .soc svg { width: 18px; height: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sec-head > div:first-child, .sec-head > div:last-child { grid-column: 1 / -1; }
  .sec-head > div:last-child { margin-top: 16px; }
  .dots { display: none; }
  #hero .hero { grid-template-columns: 1fr; row-gap: 28px; align-items: start; padding-bottom: 24px; }
  #hero .copy, #hero .map { grid-column: 1 / -1; }
  #hero .map { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #hero .links, #hero .rings, #hero .hub { display: none; }
  #hero .node { position: static; transform: none; min-width: 0; animation: rise .8s var(--ease) both; }
  #hero .node:hover { transform: translateY(-4px); }
  #hero .strip { position: static; margin-top: 24px; grid-template-columns: 1fr 1fr; }
  #services .index { grid-column: 1 / -1; flex-direction: row; overflow-x: auto; border-top: 0; gap: 8px; padding-bottom: 16px; scrollbar-width: none; }
  #services .index::-webkit-scrollbar { display: none; }
  #services .indicator, #services .tab .prog { display: none; }
  #services .tab { grid-template-columns: auto auto; padding: 10px 14px 10px 12px !important; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
  #services .tab .num, #services .tab .s { display: none; }
  #services .tab .t { font-size: 14px; }
  #services .tab .ic { width: 30px; height: 30px; border-radius: 50%; order: -1; }
  #services .tab .ic .icon { font-size: 15px; }
  #services .tab[aria-selected="true"] { border-color: var(--blue); background: var(--blue-soft); }
  #services .tab[aria-selected="true"] .ic { transform: none; }
  #services .panel { grid-column: 1 / -1; min-height: 480px; }
  #record .s1, #record .s2, #record .s3, #record .s4 { grid-column: span 6; }
  #record .tl { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  #record .tl-line { display: none; }
  #projects .pgrid { height: auto; grid-template-rows: auto; }
  #projects .large { grid-column: 1 / -1; grid-row: auto; min-height: 460px; }
  #projects .small { grid-column: span 6; }
  #process .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  #process .track { display: none; }
  #process .promise p, #process .promise div { grid-column: 1 / -1; }
  #process .promise div { justify-content: flex-start; margin-top: 16px; }
  #coverage .mapwrap, #coverage .countries { grid-column: 1 / -1; }
  #coverage .mapwrap { width: min(100%, calc(60svh * .8)); margin-bottom: 32px; }
  #safety .sphoto, #safety .stext { grid-column: 1 / -1; }
  #safety .sphoto { height: 52svh; } #safety .stext { margin-top: 28px; }
  #products .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #contact .cinfo, .qform { grid-column: 1 / -1; }
  .qform { margin-top: 32px; }
}
@media (max-width: 760px) {
  :root { --fill: 640px; }
  .screen { min-height: 0; padding-block: 64px 48px; }
  #hero { min-height: 100svh; }
  #hero .nav, .topbar nav, .head-cta { display: none; }
  .menu-btn, .tb-menu { display: block; }
  #hero h1 { font-size: clamp(38px, 11vw, 56px); }
  #hero .map { grid-template-columns: 1fr; }
  #hero .strip { grid-template-columns: 1fr; }
  #services .card { grid-template-columns: 1fr; left: 10px; right: 10px; bottom: 10px; padding: 16px; }
  #services .deliv { grid-template-columns: 1fr 1fr; }
  #record .s1, #record .s2, #record .s3, #record .s4 { grid-column: 1 / -1; } #record .stat { min-height: 0; }
  #record .tl { grid-template-columns: 1fr; }
  #projects .small { grid-column: 1 / -1; flex-direction: column; } #projects .small .ph { flex: 0 0 180px; }
  #projects .large .body { grid-template-columns: 1fr; }
  #process .steps { grid-template-columns: 1fr; }
  #coverage .clist li { grid-template-columns: 44px 1fr; } #coverage .clist .svc { grid-column: 2; text-align: left; } #coverage .kpis { grid-template-columns: 1fr; }
  #products .tiles, #clients .quotes { grid-template-columns: 1fr; }
  #clients .refs .marks { margin-left: 0; }
  .qform { grid-template-columns: 1fr; }
  #contact .fgrid { flex-direction: column; align-items: flex-start; }
  #contact .fgrid nav { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .title .w > span { transform: none !important; }
  #process .track i { width: 100%; } #record .tl-line i { width: 100%; }
}

/* ---------- Services page ---------- */
#svc-hero { padding-top: 0; grid-template-rows: 84px minmax(0, 1fr); align-content: stretch; }
.pg-hero .vcard3 { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; border-radius: 18px; padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.pg-hero .vcard3 div { display: flex; flex-direction: column; gap: 4px; }
.pg-hero .vcard3 b { font-size: clamp(20px, 1.8vw, 30px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pg-hero .vcard3 span { font-size: 12px; color: rgba(255,255,255,.65); font-weight: 600; }

.svc { }
.svc .sg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; min-height: calc(var(--fill) - 16px); }
.svc .text { grid-column: 1 / span 6; display: flex; flex-direction: column; align-items: flex-start; }
.svc .media { grid-column: 8 / span 5; position: relative; height: clamp(360px, calc(var(--fill) - 16px), 900px); border-radius: 26px; overflow: hidden; background: var(--paper-2); }
.svc.flip .text { grid-column: 7 / span 6; order: 2; }
.svc.flip .media { grid-column: 1 / span 5; order: 1; }
.svc .media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.03); animation: kenburns 26s ease-in-out infinite alternate; }
.svc .media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,11,58,.04), rgba(14,11,58,.5)); pointer-events: none; }
.svc .mtag { position: absolute; z-index: 2; top: 16px; left: 16px; display: flex; gap: 8px; }
.svc .mtag span { padding: 8px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: #fff; }
.svc .mcard { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; border-radius: 18px; padding: 18px 20px; color: #fff; }
.svc .mcard .mh { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: rgba(255,255,255,.55); margin-bottom: 10px; }
.svc .mcard ul { display: grid; gap: 8px; }
.svc .mcard li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; font-size: clamp(12.5px, .95vw, 14.5px); font-weight: 600; }
.svc .mcard li .cc { width: 30px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: rgba(255,255,255,.14); font-size: 10px; }
.svc .mcard li b { font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc h2 { margin-top: 12px; }
.svc .lede { margin-top: 16px; max-width: 52ch; }
.svc .spec { margin-top: clamp(18px, 3svh, 28px); display: grid; grid-template-columns: 110px 1fr; gap: 10px 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: clamp(14px, 1vw, 16.5px); width: 100%; max-width: 62ch; }
.svc.dark .spec { border-color: rgba(255,255,255,.14); }
.svc .spec dt { font-weight: 700; color: var(--ink); }
.svc.dark .spec dt { color: #fff; }
.svc .spec dd { color: var(--ink-2); }
.svc.dark .spec dd { color: rgba(255,255,255,.7); }
.svc .deliv { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(14px, 2.5svh, 22px); }
.svc .deliv li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px; background: var(--paper-2); font-size: clamp(12.5px, .9vw, 14px); font-weight: 700; color: var(--ink); transition: transform .3s var(--ease), background .2s; }
.svc .deliv li:hover { transform: translateY(-2px); background: var(--blue-soft); color: var(--blue); }
.svc.dark .deliv li { background: rgba(255,255,255,.1); color: #fff; }
.svc.dark .deliv li:hover { background: rgba(255,255,255,.18); color: #fff; }
.svc .deliv li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.svc .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3svh, 28px); }
.svc .link { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--blue); padding: 14px 4px; }
.svc.dark .link { color: #fff; }
.svc .link .icon { transition: transform .25s var(--ease); } .svc .link:hover .icon { transform: translateX(4px); }
.svc .bgph::before { opacity: .72; }

@media (max-width: 1100px) {
  .svc .sg { min-height: 0; }
  .svc .text, .svc .media, .svc.flip .text, .svc.flip .media { grid-column: 1 / -1; order: 0; }
  .svc .media { height: 48svh; margin-top: 24px; order: 1; }
  .svc .text { order: 0; }
}
@media (max-width: 760px) {
  .pg-hero .vcard3 { grid-template-columns: 1fr; }
  .svc .spec { grid-template-columns: 1fr; gap: 4px 0; } .svc .spec dd { margin-bottom: 8px; }
  .svc .media { height: 56svh; }
}

/* ---------- Projects page ---------- */
#pj-hero { padding-top: 0; grid-template-rows: 84px minmax(0, 1fr); align-content: stretch; }
#pj-hero .collage { grid-column: 7 / span 6; position: relative; align-self: stretch; min-height: 460px; }
#pj-hero .shot { position: absolute; width: 60%; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.16); transition: transform .6s var(--ease), z-index 0s; }
#pj-hero .shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.04); transition: transform 1.2s var(--ease); }
#pj-hero .shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,5,31,0) 45%, rgba(7,5,31,.7)); }
#pj-hero .shot .tg { position: absolute; z-index: 2; left: 14px; bottom: 14px; right: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; color: #fff; }
#pj-hero .shot .tg b { display: block; font-size: clamp(14px, 1.1vw, 18px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
#pj-hero .shot .tg small { display: block; font-size: 11.5px; color: rgba(255,255,255,.7); margin-top: 3px; }
#pj-hero .shot .tg .cc { padding: 6px 9px; border-radius: 8px; }
#pj-hero .shot.a { left: 0; top: 4%; transform: rotate(-6deg); z-index: 1; }
#pj-hero .shot.b { right: 0; top: 14%; transform: rotate(5deg); z-index: 2; }
#pj-hero .shot.c { left: 18%; bottom: 2%; transform: rotate(-2deg); z-index: 3; }
#pj-hero .shot:hover { transform: rotate(0) scale(1.05); z-index: 5; }
#pj-hero .shot:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: no-preference) {
  #pj-hero .shot { animation: fan .9s var(--ease) both; }
  #pj-hero .shot.a { animation-delay: .5s; } #pj-hero .shot.b { animation-delay: .65s; } #pj-hero .shot.c { animation-delay: .8s; }
}
@keyframes fan { from { opacity: 0; transform: translateY(40px) rotate(0) scale(.92); } }

#featured .fg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; min-height: calc(var(--fill) - 16px); }
#featured .media { grid-column: 1 / span 7; position: relative; height: clamp(360px, calc(var(--fill) - 16px), 900px); border-radius: 26px; overflow: hidden; background: var(--paper-2); }
#featured .media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.03); animation: kenburns 26s ease-in-out infinite alternate; }
#featured .media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,11,58,.04), rgba(14,11,58,.5)); pointer-events: none; }
#featured .mtag { position: absolute; z-index: 2; top: 16px; left: 16px; display: flex; gap: 8px; }
#featured .mtag span { padding: 8px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: #fff; }
#featured .mtag .cat { background: var(--orange); color: var(--ink); border-color: var(--orange); }
#featured .mquote { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; border-radius: 18px; padding: 18px 20px; color: #fff; display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
#featured .mquote .mark { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.12); color: var(--orange); display: grid; place-items: center; }
#featured .mquote p { font-size: clamp(14px, 1.05vw, 17px); font-weight: 600; line-height: 1.4; }
#featured .mquote small { display: block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.62); font-weight: 600; }
#featured .text { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; }
#featured .text .lede { margin-top: 16px; }
#featured .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: clamp(18px, 3svh, 28px); width: 100%; }
#featured .facts li { border-radius: 16px; padding: 14px 16px; background: var(--paper); display: flex; flex-direction: column; gap: 4px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
#featured .facts li:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -30px rgba(14,11,58,.35); }
#featured .facts b { font-size: clamp(22px, 2vw, 34px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--blue); }
#featured .facts b.ok { color: var(--green-ink); }
#featured .facts span { font-size: 12.5px; color: var(--mute); font-weight: 600; }
#featured .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3svh, 28px); }

#archive { grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; }
#archive .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 12px 0 clamp(14px, 2.5svh, 22px); border-bottom: 1px solid var(--line); margin-bottom: clamp(14px, 2.5svh, 22px); }
#archive .fg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#archive .fg > span { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--mute); margin-right: 6px; }
#archive .chip { padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border: 1px solid transparent; transition: background .2s, color .2s, transform .3s var(--ease); }
#archive .chip:hover { background: var(--blue-soft); color: var(--blue); transform: translateY(-2px); }
#archive .chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
#archive .status { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--mute); font-weight: 600; }
#archive .status a { color: var(--blue); font-weight: 700; }
#archive .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--gap); min-height: 0; height: clamp(540px, calc(var(--fill) - 250px), 820px); }
#archive .pc { display: flex; border-radius: 20px; overflow: hidden; background: var(--paper-2); min-height: 0; color: inherit; transition: transform .45s var(--ease), box-shadow .45s var(--ease); animation: popin .5s var(--ease) both; }
#archive .pc:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(14,11,58,.4); background: #fff; }
#archive .pc.is-hidden { display: none; }
@keyframes popin { from { opacity: 0; transform: scale(.96) translateY(10px); } }
#archive .pc .ph { position: relative; flex: 0 0 40%; overflow: hidden; background: var(--paper-2); }
#archive .pc .ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.03); transform: scale(1.06); transition: transform .8s var(--ease); }
#archive .pc:hover .ph img { transform: scale(1.12); }
#archive .pc .ph::after { content: ''; position: absolute; inset: 0; background: var(--ink); mix-blend-mode: multiply; opacity: .12; }
#archive .pc .cc { position: absolute; z-index: 2; top: 10px; left: 10px; width: 32px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
#archive .pc .body { flex: 1; min-width: 0; padding: clamp(12px, 1.3vw, 20px); display: flex; flex-direction: column; gap: 6px; }
#archive .pc .meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--mute); }
#archive .pc .meta .cat { padding: 5px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); }
#archive .pc h3 { font-size: clamp(15px, 1.25vw, 22px); letter-spacing: -.03em; line-height: 1.12; font-weight: 800; }
#archive .pc p { font-size: clamp(12.5px, .9vw, 14.5px); line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#archive .pc .go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--blue); }
#archive .pc .go .icon { transition: transform .25s var(--ease); } #archive .pc:hover .go .icon { transform: translateX(4px); }
#archive .empty { display: none; grid-column: 1 / -1; align-self: center; text-align: center; padding: 40px; border: 1.5px dashed var(--line); border-radius: 20px; }
#archive .empty.is-shown { display: block; }
#archive .empty h3 { font-size: 20px; } #archive .empty p { margin-top: 8px; color: var(--ink-2); } #archive .empty a { color: var(--blue); font-weight: 700; }

@media (max-width: 1100px) {
  #pj-hero .copy, #pj-hero .collage { grid-column: 1 / -1; }
  #pj-hero .collage { min-height: 0; height: 48svh; }
  #featured .fg { min-height: 0; }
  #featured .media, #featured .text { grid-column: 1 / -1; }
  #featured .media { height: 48svh; } #featured .text { margin-top: 24px; }
  #archive .grid { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  #archive .pc .ph { flex-basis: 38%; min-height: 150px; }
}
@media (max-width: 760px) {
  #pj-hero .shot { width: 70%; }
  #featured .facts { grid-template-columns: 1fr 1fr; }
  #archive .grid { grid-template-columns: 1fr; }
  #archive .status { margin-left: 0; }
}

/* ---------- Shared page-hero pattern ---------- */
.pg-hero { padding-top: 0; grid-template-rows: 84px minmax(0, 1fr); align-content: stretch; }
.pg-hero .head { display: flex; align-items: center; gap: 24px; height: 84px; }
.pg-hero .nav { display: flex; gap: 4px; margin-inline: auto; padding: 6px; border-radius: 999px; }
.pg-hero .nav a { padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.78); transition: background .2s, color .2s; }
.pg-hero .nav a:hover, .pg-hero .nav a[aria-current="page"] { background: rgba(255,255,255,.12); color: #fff; }
.pg-hero .ph-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding-block: clamp(12px, 2svh, 32px) clamp(28px, 4svh, 48px); }
.pg-hero .copy { grid-column: 1 / span 6; display: flex; flex-direction: column; align-items: flex-start; }
.pg-hero h1 { margin-top: 14px; font-size: clamp(40px, 5.2vw, 104px); line-height: .96; letter-spacing: -.045em; font-weight: 800; }
.pg-hero h1 .accent { color: var(--orange); }
.pg-hero .lede { margin-top: clamp(14px, 2.5svh, 26px); max-width: 48ch; }
.pg-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3.4svh, 36px); }
.pg-hero .kp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(20px, 3.5svh, 36px); width: 100%; }
.pg-hero .kp li { border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; transition: transform .35s var(--ease), background .2s; }
.pg-hero .kp li:hover { transform: translateY(-3px); background: rgba(255,255,255,.13); }
.pg-hero .kp b { font-size: clamp(20px, 1.8vw, 32px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pg-hero .kp b .up { color: var(--orange); }
.pg-hero .kp span { font-size: 12.5px; color: rgba(255,255,255,.65); font-weight: 600; }
.pg-hero .chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pg-hero .chiprow span { padding: 8px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; }
.pg-hero .visual { grid-column: 8 / span 5; position: relative; align-self: stretch; min-height: 420px; border-radius: 26px; overflow: hidden; }
.pg-hero .visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.05); transform: scale(1.06); }
.pg-hero .visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,5,31,0) 30%, rgba(7,5,31,.72)); }
.pg-hero .vtag { position: absolute; z-index: 2; top: 16px; left: 16px; display: flex; gap: 8px; }
.pg-hero .vtag span { padding: 8px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; }
.pg-hero .vcard { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; border-radius: 18px; padding: 16px 18px; color: #fff; }
.pg-hero .vcard dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.pg-hero .vcard dt { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: rgba(255,255,255,.55); }
.pg-hero .vcard dd { font-size: clamp(13px, 1vw, 15.5px); font-weight: 700; margin-top: 2px; }
.pg-hero .vcard dd.ok { color: var(--green); }
.pg-hero .badge { position: absolute; z-index: 2; border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; color: #fff; animation: float 6s ease-in-out infinite; }
.pg-hero .badge .icon { font-size: 22px; color: var(--orange); }
.pg-hero .badge b { display: block; font-size: clamp(20px, 1.6vw, 28px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pg-hero .badge span { display: block; font-size: 12px; color: rgba(255,255,255,.7); margin-top: 3px; }
.pg-hero .b1 { left: 16px; top: 16px; } .pg-hero .b2 { right: 16px; top: 16px; animation-delay: -2s; } .pg-hero .b3 { left: 16px; bottom: 16px; animation-delay: -4s; }

/* Generic 2-col screen: text + media */
.split2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; min-height: calc(var(--fill) - 16px); }
.split2 .text { grid-column: 1 / span 6; display: flex; flex-direction: column; align-items: flex-start; }
.split2 .media { grid-column: 8 / span 5; position: relative; height: clamp(360px, calc(var(--fill) - 16px), 900px); border-radius: 26px; overflow: hidden; background: var(--paper-2); }
.split2.flip .text { grid-column: 7 / span 6; order: 2; } .split2.flip .media { grid-column: 1 / span 5; order: 1; }
.split2 .media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.03); animation: kenburns 26s ease-in-out infinite alternate; }
.split2 .media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,11,58,.04), rgba(14,11,58,.5)); pointer-events: none; }
.split2 .mtag { position: absolute; z-index: 2; top: 16px; left: 16px; display: flex; gap: 8px; }
.split2 .mtag span { padding: 8px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: #fff; }
.split2 .mcard { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; border-radius: 18px; padding: 18px 20px; color: #fff; }
.split2 .text .lede { margin-top: 16px; }
.split2 .text .lede + .lede { margin-top: 12px; }
.prose { display: grid; gap: 12px; margin-top: 16px; max-width: 60ch; }
.prose p { font-size: clamp(15px, 1.05vw, 18px); line-height: 1.6; color: var(--ink-2); }
.dark .prose p { color: rgba(255,255,255,.72); }

/* Card grids used by several pages */
.cgrid { display: grid; gap: var(--gap); }
.cgrid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cgrid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 1.8vw, 28px); border-radius: 20px; background: var(--paper-2); transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .2s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 34px 60px -36px rgba(14,11,58,.35); background: #fff; }
.grey .card { background: #fff; } .grey .card:hover { background: #fff; }
.dark .card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; }
.dark .card:hover { background: rgba(255,255,255,.12); }
.card .ci { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.card .ci .icon { font-size: 22px; }
.dark .card .ci { background: rgba(255,255,255,.12); color: var(--orange); }
.card .k { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--mute); }
.card h3 { font-size: clamp(16px, 1.3vw, 22px); letter-spacing: -.03em; line-height: 1.15; font-weight: 800; }
.card p { font-size: clamp(13px, .95vw, 15.5px); line-height: 1.5; color: var(--ink-2); }
.dark .card p { color: rgba(255,255,255,.7); }
.card .big { font-size: clamp(26px, 2.4vw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--blue); }
.dark .card .big { color: #fff; }

/* ---------- Project page ---------- */
#pr-scope .steps3 { grid-column: 8 / span 5; display: grid; gap: 12px; }
#pr-scope .steps3 .card { flex-direction: row; align-items: flex-start; gap: 16px; }
#pr-scope .steps3 .n { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--ink); color: var(--orange); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
#pr-scope .split2 .text { grid-column: 1 / span 6; }
#pr-ch .ch { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: stretch; min-height: calc(var(--fill) - 200px); }
#pr-ch .ph { grid-column: 1 / span 4; position: relative; border-radius: 22px; overflow: hidden; background: var(--paper-2); min-height: 320px; }
#pr-ch .ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.03); animation: kenburns 26s ease-in-out infinite alternate; }
#pr-ch .ph::after { content: ''; position: absolute; inset: 0; background: var(--ink); mix-blend-mode: multiply; opacity: .15; }
#pr-ch .list { grid-column: 5 / span 8; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
#pr-ch .card { justify-content: flex-start; }
#pr-ch .card .sol { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
#pr-ch .card .sol .k { color: var(--blue); }
#pr-res .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(8px, 2svh, 20px); }
#pr-res .facts li { border-radius: 20px; padding: clamp(18px, 2vw, 30px); display: flex; flex-direction: column; gap: 8px; min-height: clamp(140px, 22svh, 240px); justify-content: space-between; transition: transform .4s var(--ease), background .2s; }
#pr-res .facts li:hover { transform: translateY(-4px); background: rgba(255,255,255,.12); }
#pr-res .facts b { font-size: clamp(40px, 4.4vw, 84px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
#pr-res .facts b .up { color: var(--orange); }
#pr-res .facts span { font-size: clamp(13px, .95vw, 15px); color: rgba(255,255,255,.68); font-weight: 600; }
#pr-res .gal { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gap); margin-top: var(--gap); height: clamp(180px, 28svh, 360px); }
#pr-res .gal div { position: relative; border-radius: 18px; overflow: hidden; }
#pr-res .gal img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(1.05); transition: transform .8s var(--ease); }
#pr-res .gal div:hover img { transform: scale(1.06); }
#pr-res .gal span { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
#pr-rel .rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
#pr-rel .rc { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--paper-2); color: inherit; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
#pr-rel .rc:hover { transform: translateY(-5px); box-shadow: 0 34px 60px -36px rgba(14,11,58,.35); }
#pr-rel .rc .ph { position: relative; height: clamp(160px, 30svh, 340px); overflow: hidden; }
#pr-rel .rc .ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.03); transform: scale(1.06); transition: transform .8s var(--ease); }
#pr-rel .rc:hover .ph img { transform: scale(1.12); }
#pr-rel .rc .cc { position: absolute; top: 12px; left: 12px; width: 34px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
#pr-rel .rc .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
#pr-rel .rc .meta { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--mute); }
#pr-rel .rc h3 { font-size: clamp(16px, 1.35vw, 24px); letter-spacing: -.03em; font-weight: 800; line-height: 1.12; }
#pr-rel .rc .go { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--blue); }

/* ---------- Safety page ---------- */
#sf-pillars .cgrid { grid-auto-rows: minmax(0, 1fr); min-height: clamp(520px, calc(var(--fill) - 190px), 860px); }
#sf-pillars .card { min-height: 0; }
#sf-pillars .card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#sf-std .cgrid.c4 { margin-top: 0; }
#sf-std .card { text-align: left; }
#sf-std .card .code { font-size: clamp(20px, 1.9vw, 32px); font-weight: 800; letter-spacing: -.035em; color: var(--blue); }
#sf-std .card .ci { width: 38px; height: 38px; }
#sf-swa .list { display: grid; gap: 10px; margin-top: 18px; width: 100%; max-width: 60ch; }
#sf-swa .list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.45; color: rgba(255,255,255,.8); }
#sf-swa .list .n { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.12); color: var(--orange); display: grid; place-items: center; font-size: 12px; font-weight: 800; }

/* ---------- Products page ---------- */
.pgroup .cgrid { grid-auto-rows: minmax(0, 1fr); min-height: clamp(520px, calc(var(--fill) - 190px), 900px); }
.pgroup .prod { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--paper-2); min-height: 0; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.pgroup.grey .prod { background: #fff; }
.pgroup .prod:hover { transform: translateY(-5px); box-shadow: 0 34px 60px -36px rgba(14,11,58,.35); }
.pgroup .prod .ph { position: relative; flex: 1 1 45%; min-height: 110px; overflow: hidden; }
.pgroup .prod .ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.03); transform: scale(1.06); transition: transform .8s var(--ease); }
.pgroup .prod:hover .ph img { transform: scale(1.12); }
.pgroup .prod .ph::after { content: ''; position: absolute; inset: 0; background: var(--ink); mix-blend-mode: multiply; opacity: .12; }
.pgroup .prod .k { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--ink); }
.pgroup .prod .body { padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.3vw, 20px); display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }
.pgroup .prod h3 { font-size: clamp(15px, 1.25vw, 21px); letter-spacing: -.03em; font-weight: 800; line-height: 1.12; }
.pgroup .prod p { font-size: clamp(12.5px, .9vw, 14.5px); line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pgroup .prod .go { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--blue); }
.pgroup .prod .go .icon { transition: transform .25s var(--ease); } .pgroup .prod:hover .go .icon { transform: translateX(4px); }
.pg-hero .jump { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: clamp(20px, 3.5svh, 36px); width: 100%; }
.pg-hero .jump a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; font-size: clamp(13px, .95vw, 15px); font-weight: 700; transition: background .2s, transform .35s var(--ease); }
.pg-hero .jump a:hover { background: rgba(255,255,255,.14); transform: translateY(-3px); }
.pg-hero .jump .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--orange); flex-shrink: 0; }
.pg-hero .jump .ic .icon { font-size: 18px; }
.pg-hero .jump small { display: block; font-weight: 500; color: rgba(255,255,255,.55); font-size: .85em; }

/* ---------- Contact page ---------- */
#ct-hero .ph-grid { align-items: center; }
#ct-hero .copy { grid-column: 1 / span 5; }
#ct-cov .cov2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; min-height: calc(var(--fill) - 190px); }
#ct-cov .countries { grid-column: 1 / span 7; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
#ct-cov .countries .card { flex-direction: row; align-items: center; gap: 16px; }
#ct-cov .countries .cc { width: 50px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 12px; flex-shrink: 0; }
#ct-cov .countries small { display: block; font-size: 13px; color: var(--mute); margin-top: 2px; }
#ct-cov .hours { grid-column: 9 / span 4; display: grid; gap: var(--gap); }
#ct-cov .hours .card { gap: 6px; }
#ct-faq .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px var(--gap); }
#ct-faq details { border-radius: 16px; background: #fff; padding: 0 20px; transition: box-shadow .35s var(--ease); }
#ct-faq details[open] { box-shadow: 0 24px 40px -30px rgba(14,11,58,.3); }
#ct-faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; font-weight: 800; font-size: clamp(15px, 1.1vw, 18px); letter-spacing: -.01em; position: relative; }
#ct-faq summary::-webkit-details-marker { display: none; }
#ct-faq summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease); }
#ct-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
#ct-faq details p { padding: 0 0 20px; color: var(--ink-2); font-size: clamp(14px, 1vw, 16px); line-height: 1.55; animation: rise .4s var(--ease); }
#ct-faq details p a { color: var(--blue); font-weight: 700; }
.footer-only { min-height: 0 !important; padding-block: clamp(28px, 4svh, 48px) 18px !important; color: #fff; background: var(--ink-deep); }
.footer-only .footer { margin-top: 0; border-top: 0; padding: 0; }

@media (max-width: 1100px) {
  .pg-hero .ph-grid { grid-template-columns: 1fr; row-gap: 28px; align-items: start; }
  .pg-hero .copy, .pg-hero .visual, #ct-hero .copy, #ct-hero .form { grid-column: 1 / -1; }
  .pg-hero .visual { min-height: 0; height: 46svh; }
  .pg-hero .jump { grid-template-columns: 1fr 1fr; }
  .split2 { min-height: 0; }
  .split2 .text, .split2 .media, .split2.flip .text, .split2.flip .media, #pr-scope .steps3, #pr-scope .split2 .text { grid-column: 1 / -1; order: 0; }
  .split2 .media { height: 48svh; margin-top: 24px; order: 1; }
  .cgrid.c3, .cgrid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #sf-pillars .cgrid, .pgroup .cgrid { height: auto; grid-auto-rows: auto; }
  .pgroup .prod .ph { min-height: 160px; }
  #pr-ch .ch { min-height: 0; } #pr-ch .ph, #pr-ch .list { grid-column: 1 / -1; } #pr-ch .ph { height: 40svh; margin-bottom: 20px; }
  #pr-res .facts { grid-template-columns: 1fr 1fr; } #pr-res .gal { grid-template-columns: 1fr 1fr; height: auto; } #pr-res .gal div { aspect-ratio: 4 / 3; }
  #pr-rel .rel { grid-template-columns: 1fr 1fr; }
  #ct-cov .cov2 { min-height: 0; } #ct-cov .countries, #ct-cov .hours { grid-column: 1 / -1; } #ct-cov .hours { margin-top: 20px; grid-template-columns: 1fr 1fr; }
  #ct-faq .faq { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pg-hero .nav { display: none; }
  .pg-hero .kp, .pg-hero .jump, .cgrid.c3, .cgrid.c4, #ct-cov .countries, #ct-cov .hours, #pr-ch .list, #pr-rel .rel, #pr-res .facts { grid-template-columns: 1fr; }
  .pg-hero .vcard dl { grid-template-columns: 1fr; }
  .split2 .media { height: 56svh; }
}

/* =====================================================================
   Design-system layer: shared values enforced across every page
   ===================================================================== */
.card, .stat, #record .stat, .tile, .pcard, .pc, .prod, .rc, .quote, .kp li, #hero .strip li, #featured .facts li, #pr-res .facts li, #coverage .kpis div, .glass.node, #services .panel, #services .card, #projects .large .body, .qform, #hero .log { border-radius: var(--r-card); }
.pg-hero .visual, .split2 .media, .svc .media, #featured .media, #safety .sphoto, #pr-ch .ph, #projects .pcard, .pgroup .prod { border-radius: var(--r-media); }
.ev, .qform .input, .contact-list .icon, .ways a, .ways > li > div, #record .ev, .card .ci, .jump .ic, .ways .ic, .hub .cc, #hero .node .cc { border-radius: var(--r-chip); }
.card:hover, #record .stat:hover, .tile:hover, .pc:hover, .prod:hover, .rc:hover, .quote:hover, #featured .facts li:hover, .certs li:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-lift); }
.dark .card:hover, .kp li:hover, #hero .strip li:hover, #pr-res .facts li:hover, #coverage .kpis div:hover, .pg-hero .jump a:hover, .stat.glass:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-lift-dark); }
#projects .pcard:hover, #products .tile:hover { box-shadow: var(--shadow-lift); }
.tag, .mtag span, .vtag span, #services .tag-top span, .chiprow span, .pgroup .prod .k, #products .k, #record .chips span, #pr-res .gal span, .pg-hero .vtag, #pj-hero .shot .tg .cc, .shot .cc { border-radius: var(--r-pill); padding: 8px 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; line-height: 1; }
.eyebrow, .card .k, #services .deliv-label, .strip .partners span, #record .yr .y small { font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.glass, .glass-light, .topbar .tb, .menu { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.qform .send { position: relative; }

/* ---------- Type scale, revised: lower caps and gentler viewport scaling ---------- */
.pg-hero h1, #hero h1 { font-size: clamp(36px, 4.4vw, 84px); }
.title, .svc h2 { font-size: clamp(28px, 3.1vw, 60px); }
.lede, .pg-hero .lede, #hero .lede { font-size: clamp(15px, 1.02vw, 18.5px); }
.prose p { font-size: clamp(15px, .98vw, 17px); }
.card h3 { font-size: clamp(15px, 1.15vw, 20px); }
.card p { font-size: clamp(13px, .9vw, 14.5px); }
.card .big { font-size: clamp(24px, 2.1vw, 38px); }
.pg-hero .kp b, #hero .strip b { font-size: clamp(20px, 1.6vw, 30px); }
.pg-hero .badge b, #safety .badge b { font-size: clamp(20px, 1.5vw, 26px); }
.pg-hero .vcard3 b { font-size: clamp(18px, 1.5vw, 26px); }
#hero .hub b { font-size: clamp(24px, 1.8vw, 32px); }
#services .tab .t { font-size: clamp(16px, 1.3vw, 24px); }
#services .card h3 { font-size: clamp(18px, 1.6vw, 28px); }
#record .num { font-size: clamp(40px, 4.4vw, 80px); }
#record .yr .y { font-size: clamp(14px, 1vw, 17px); }
#projects .large h3 { font-size: clamp(20px, 1.8vw, 34px); }
#projects .small h3 { font-size: clamp(15px, 1.25vw, 22px); }
#process h3 { font-size: clamp(17px, 1.35vw, 24px); }
#process .step p { font-size: clamp(13.5px, .95vw, 16px); }
#process .promise p { font-size: clamp(17px, 1.6vw, 27px); }
#coverage .clist b { font-size: clamp(15px, 1.1vw, 19px); }
#coverage .kpis b { font-size: clamp(24px, 2vw, 36px); }
#products h3 { font-size: clamp(17px, 1.5vw, 26px); }
#clients .quote p { font-size: clamp(16px, 1.35vw, 23px); }
#pr-res .facts b { font-size: clamp(36px, 3.8vw, 72px); }
#featured .facts b { font-size: clamp(20px, 1.8vw, 30px); }
#archive .pc h3 { font-size: clamp(15px, 1.15vw, 20px); }
#pr-rel .rc h3 { font-size: clamp(16px, 1.25vw, 22px); }
#sf-std .card .code { font-size: clamp(18px, 1.7vw, 28px); }
.pgroup .prod h3 { font-size: clamp(15px, 1.15vw, 20px); }
@media (max-width: 760px) { .pg-hero h1, #hero h1 { font-size: clamp(34px, 10vw, 52px); } }

/* ---------- Card typography: lighter weights, smaller sizes (800 reserved for page and section titles) ---------- */
.card h3, .pcard h3, .pc h3, .prod h3, .rc h3, .tile h3, .pgroup .prod h3, #archive .pc h3, #pr-rel .rc h3, #products h3, #projects .small h3, #record .lab b, .kp li b, .ways b, .contact-list b, #hero .node b, .log-name, #coverage .clist b, .svc .mcard li, #process h3, .quote figcaption b, #featured .facts li, .pg-hero .vcard dd, #ct-cov .countries h3 { font-weight: 700; }
.card h3, .pcard h3, .pc h3, .prod h3, .rc h3, .tile h3, .pgroup .prod h3, #archive .pc h3, #pr-rel .rc h3, #products h3, #projects .small h3, #ct-cov .countries h3 { font-size: clamp(14.5px, 1.05vw, 18px); letter-spacing: -.02em; }
#projects .large h3 { font-size: clamp(18px, 1.5vw, 28px); font-weight: 700; letter-spacing: -.03em; }
#services .card h3 { font-size: clamp(17px, 1.4vw, 24px); font-weight: 700; letter-spacing: -.03em; }
#services .tab .t { font-size: clamp(15px, 1.15vw, 20px); font-weight: 700; letter-spacing: -.02em; }
#process h3 { font-size: clamp(16px, 1.2vw, 20px); }
#process .step p, .card p, .pcard p, .pc p, .prod p, .pgroup .prod p, #archive .pc p, #projects .small p, #projects .large p, #services .card p, #coverage .clist small, .svc .mcard li, .quote figcaption small { font-size: clamp(13px, .88vw, 14.5px); }
#record .num, #pr-res .facts b, .pg-hero .kp b, #hero .strip b, #hero .hub b, .pg-hero .badge b, #safety .badge b, .pg-hero .vcard3 b, #coverage .kpis b, #featured .facts b, .card .big, #sf-std .card .code { font-weight: 700; letter-spacing: -.04em; }
#record .num { font-size: clamp(36px, 4vw, 72px); }
#pr-res .facts b { font-size: clamp(32px, 3.4vw, 64px); }
.pg-hero .kp b, #hero .strip b { font-size: clamp(18px, 1.4vw, 26px); }
#featured .facts b, #coverage .kpis b { font-size: clamp(18px, 1.5vw, 26px); }
#sf-std .card .code { font-size: clamp(16px, 1.4vw, 24px); }
#clients .quote p { font-size: clamp(15px, 1.2vw, 20px); font-weight: 500; }
.svc .deliv li, #record .chips span, .certs li, #safety .certs li, .pg-hero .chiprow span, #services .deliv li, .facts-inline b { font-weight: 600; }
.tag, .mtag span, .vtag span, #services .tag-top span, .chiprow span, .pgroup .prod .k, #products .k, #record .chips span, #pr-res .gal span, .pg-hero .vtag span, .shot .cc, .cc, #record .ev .cc, .kp span, .card .k, #services .deliv-label, .strip .partners span, #record .yr .y small, .eyebrow { font-weight: 700; }
.pg-hero .kp span, #hero .strip span, .card .k, .kp span, #record .lab, #coverage .kpis span, #featured .facts span, .pg-hero .badge span, #safety .badge span, .pg-hero .vcard dt, .svc .mcard .mh, #services .deliv-label { font-weight: 600; }
.ways small, .contact-list a, #hero .node small, .log-name small, #coverage .clist small, .quote figcaption small, #archive .pc .meta, #pr-rel .rc .meta, .pgroup .prod .go, #archive .pc .go, #pr-rel .rc .go, .card .go, .go { font-weight: 600; }
#record .ev { font-weight: 600; } #record .ev small { font-weight: 500; }
#record .yr .y { font-weight: 700; }
.step .k, #process .k { font-weight: 700; }

/* ---------- Logo: vector wordmark, inherits the text colour of its context ---------- */
.logo { display: inline-flex; align-items: center; color: inherit; }
.logo .lg { display: block; height: 24px; width: auto; fill: currentColor; }
.logo .lg-full { height: 40px; }
.topbar .logo .lg { height: 20px; }
.menu .logo .lg { height: 22px; }
#hero .hub .logo .lg { height: 13px; }
#contact .fgrid .logo .lg, .footer-only .fgrid .logo .lg { height: 38px; }
.logo .dot { display: none; }