/* =========================================================================
Kova — Studio Site Template
Global stylesheet (framework-free: plain HTML + CSS + vanilla JS)
Fonts: Manrope (headings + body) · JetBrains Mono (labels)
Design rule: headings AND paragraphs use Manrope. --font-display is kept as a
semantic alias for heading-scale type but now resolves to Manrope.
CUSTOMIZE: brand colors and spacing live in :root below. Swap --accent and
the --bg/--elevated greys to re-skin the whole site.
========================================================================= */
:root {
--bg: #10322f;
--bg-deep: #0b2624;
--elevated: #0a1f1d;
--elevated-hover: #0f2a27;
--line: rgba(255, 255, 255, 0.08);
--line-soft: rgba(255, 255, 255, 0.06);
--text: #ffffff;
--muted: #c8d0c4;
--muted-2: rgba(200, 208, 196, 0.80);
--accent: #ac5e2a;
--accent-bright: #c47a3e;
/* Copper bright enough to clear WCAG AA 4.5:1 on the dark-green bg (4.67:1).
Use for small / body-size copper TEXT (labels, units, the required *).
Large accent fills and borders keep --accent. */
--accent-text: #d4824a;
/* Error/validation red, brightened to clear WCAG AA 4.5:1 on the page bg (4.98:1). */
--danger: #ee7a59;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--maxw: 1560px;
--nav-h: 92px;
/* Native cursor by default. JS sets this to `none` (by adding
.has-custom-cursor to ) only once the custom cursor is actually
running, so if JS fails the OS cursor stays visible. (WCAG 2.4.7) */
--cursor: auto;
/* Distance from each viewport edge to the grid's vertical divider lines
(grid inner width is min(95vw, --maxw), so the side gutter is this). */
--grid-gutter: max(2.5vw, calc((100vw - var(--maxw)) / 2));
--gutter: clamp(16px, 1.7vw, 30px);
--font-display: "Manrope", system-ui, -apple-system, sans-serif;
--font-ui: "Manrope", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Always reserve the scrollbar's gutter so hiding it during the preloader
lock (overflow:hidden / Lenis's overflow:clip) doesn't shift the layout. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) var(--bg); }
/* ---------- Lenis smooth scroll ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
cursor: var(--cursor);
line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
input, textarea { font-family: inherit; }
em { font-style: normal; } /* design rule: no italics anywhere */
::selection { background: var(--accent); color: #08080a; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.30); }
/* Firefox parity (no ::-webkit pseudo support) */
html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) var(--bg); }
/* ---------- Accessibility ---------- */
/* Skip link: the first thing a keyboard user reaches. Hidden off-screen until
focused, then it drops into view so they can jump past the nav straight to
the page content. (WCAG 2.4.1) */
.skip-link {
position: fixed; top: 0; left: 0; z-index: 10001;
transform: translateY(-130%);
margin: 10px; padding: 12px 18px;
background: var(--accent-bright); color: #08080a;
font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
border-radius: 2px; text-decoration: none;
transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }
/* Visible keyboard focus ring for every interactive element that doesn't set
its own. Shows only for keyboard users (:focus-visible), not on mouse click.
(WCAG 2.4.7) */
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
/* ---------- Layout helpers ---------- */
.wrap {
/* Span the same column as the grid-overlay vertical dividers
(min(95vw, --maxw)), so the --gutter padding always sits INSIDE those
lines. Without this, on viewports narrower than --maxw the content ran
full-width with only --gutter (< --grid-gutter) and spilled past the
dividers. Wide screens are unchanged: min() collapses to --maxw. */
width: min(95vw, var(--maxw));
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--gutter);
}
.section { padding: clamp(80px, 11vw, 150px) 0; }
/* ---------- Type helpers ---------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
}
.eyebrow .mark { color: var(--accent-text); }
.display {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.0;
margin: 0;
}
.display em { font-style: normal; color: rgba(255, 255, 255, 0.58); }
/* ---------- Custom cursor ---------- */
/* JS adds this class to once the custom cursor is live; only then do we
hide the native cursor. No JS = native cursor stays. */
html.has-custom-cursor { --cursor: none; }
.cursor-dot, .cursor-ring {
position: fixed; top: 0; left: 0;
z-index: 10000; pointer-events: none;
opacity: 0;
}
.cursor-dot {
width: 6px; height: 6px;
background: var(--accent);
}
.cursor-ring {
width: 34px; height: 34px;
overflow: visible;
}
.cursor-ring rect {
fill: none;
stroke-width: 1;
}
.cursor-ring__base {
stroke: rgba(255, 255, 255, 0.45);
}
.cursor-ring__draw {
stroke: var(--accent);
stroke-dasharray: 128;
stroke-dashoffset: 128;
transform: rotate(-90deg);
transform-origin: 50% 50%;
transition: stroke-dashoffset 0.5s ease;
}
.cursor-ring.is-hover .cursor-ring__draw {
stroke-dashoffset: 0;
}
/* ---------- Preloader ---------- */
/* While the curtain is up, lock scrolling and pin to the top (covers the
native / reduced-motion path where Lenis isn't running). */
html.is-loading, html.is-loading body {
overflow: hidden !important;
height: 100%;
touch-action: none;
overscroll-behavior: none;
}
/* Skip the intro preloader (class set pre-paint by js/preloader-init.js) so it
never flashes when navigating to an already-seen page in the same session. */
html.preloader-off .preloader { display: none !important; }
.preloader {
position: fixed; inset: 0; z-index: 9000;
background: var(--bg-deep);
display: flex; flex-direction: column; justify-content: space-between;
padding: clamp(28px, 5vw, 56px);
}
.preloader__top { display: flex; align-items: center; gap: 13px; }
.preloader__bottom {
display: flex; align-items: flex-end; justify-content: flex-end;
gap: 24px; flex-wrap: wrap;
}
.preloader__meta {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--muted); line-height: 1.7;
}
.preloader__count { display: flex; align-items: baseline; gap: 6px; line-height: 0.9; }
.preloader__num {
font-family: var(--font-display); font-size: clamp(64px, 13vw, 150px); letter-spacing: -0.02em;
}
.preloader__pct { font-family: var(--font-mono); font-size: 14px; color: var(--muted); }
.preloader__bar-track {
position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: rgba(255, 255, 255, 0.07);
}
.preloader__bar { height: 100%; width: 0%; background: var(--accent); transition: width 0.25s ease; }
/* ---------- Grid overlay ---------- */
.grid-overlay { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.grid-overlay__inner {
position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
width: min(95vw, var(--maxw));
}
.grid-overlay__v { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft); }
.grid-overlay__v.left { left: 0; }
.grid-overlay__v.right { right: 0; }
.grid-overlay__h { position: absolute; left: -50vw; right: -50vw; top: var(--nav-h); height: 1px; background: rgba(255,255,255,0.05); }
.grid-overlay__node {
position: absolute; top: var(--nav-h); width: 5px; height: 5px; border-radius: 50%;
background: rgba(255, 255, 255, 0.32);
}
.grid-overlay__node.left { left: 0; transform: translate(-50%, -50%); }
.grid-overlay__node.right { right: 0; transform: translate(50%, -50%); }
/* ---------- Navigation ---------- */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
height: var(--nav-h); display: flex; align-items: center;
backdrop-filter: blur(10px);
background: linear-gradient(180deg, rgba(16,50,47,0.82), rgba(16,50,47,0));
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo { display: flex; align-items: center; gap: 12px; }
/* Brand wordmark image (replaces the dot-matrix mark + "Kova" text lockup) */
.brand-logo { display: block; width: auto; height: 30px; }
.preloader__top .brand-logo { height: 26px; }
/* The white wordmark PNG carries ~19% transparent padding on its left; at 48px
tall that's ~26px. Pull it left so the visible "K" aligns with the motto. */
.footer__brand-row .brand-logo { height: 48px; margin-left: -26px; }
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); }
.nav__link {
position: relative; font-size: 14px; font-weight: 500;
color: rgba(255, 255, 255, 0.78); padding: 6px 0;
transition: color 0.3s ease;
}
.nav__link:hover { color: var(--text); }
.nav__link.active { color: var(--text); }
.nav__link.active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent);
}
.nav__burger { display: none; }
/* "Book a call" button with a single employee avatar inside it that
crossfades through the team (JS swaps .is-active on a timer). The avatar is
a flex child of the .btn, so it reads as one unified button. */
.nav__avatar { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; overflow: hidden; margin-left: -4px; background: var(--elevated); }
.nav__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s var(--ease); }
.nav__avatar img.is-active { opacity: 1; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
font-size: 14.5px; font-weight: 600; border-radius: 2px;
padding: 15px 28px; cursor: var(--cursor); border: 1px solid transparent;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.btn .arr { font-size: 16px; }
.btn--solid { background: var(--accent); color: #fff; }
.btn--solid:hover { background: var(--accent-bright); transform: translateY(-2px); box-shadow: 0 16px 40px -16px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn--ghost { border-color: rgba(255, 255, 255, 0.16); color: var(--text); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.4); }
.btn--sm { padding: 10px 20px; font-size: 13.5px; background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.16); }
.btn--sm:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 80px; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,50,47,0.92) 0%, rgba(16,50,47,0.72) 45%, rgba(16,50,47,0.45) 100%); }
.hero__content { position: relative; }
.hero__title { font-size: clamp(46px, 8vw, 116px); max-width: 16ch; }
.hero__title span { display: block; }
.hero__title em { color: var(--accent); }
.hero__sub { margin: 36px 0 0; max-width: 54ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--muted); }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 42px; }
.hero__scroll {
position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 8px;
color: var(--muted-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
}
.hero__scroll .line { width: 1px; height: 30px; background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); animation: bob 2s ease-in-out infinite; }
/* ---------- Marquee ---------- */
/* ============================================================================
MARQUEES — not used on any live page right now (removed from index & about).
The full markup for all three (logo / model / team) is saved in
marquees-archive.html; these styles are kept so that archive page renders and
so a marquee can be pasted back into a page to restore it.
============================================================================ */
.marquee-band { position: relative; padding: 46px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--bg); }
.marquee-band__label { margin-bottom: 26px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2); }
.marquee-viewport { overflow: hidden; }
.marquee { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee__group { display: flex; align-items: center; gap: 72px; padding-right: 72px; }
.marquee__group span { font-size: 22px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
/* Model strip variant (home band): uniform words + copper separators */
.marquee--model .marquee__group { gap: clamp(26px, 3.4vw, 52px); padding-right: clamp(26px, 3.4vw, 52px); }
.marquee--model .marquee__group span { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.01em; color: var(--muted); }
.marquee--model .marquee__sep { color: var(--accent); font-weight: 400; }
/* ---------- Statement ---------- */
.statement__label { margin-bottom: 42px; }
.statement__text { max-width: 24ch; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4.4vw, 64px); line-height: 1.12; letter-spacing: -0.01em; margin: 0; }
.statement__text em { font-style: normal; color: rgba(255, 255, 255, 0.5); }
/* Scroll-driven glow sweep — words illuminate in reading order (JS sets per-word color/glow) */
.statement__text.is-sweep .word { color: rgba(255, 255, 255, 0.34); will-change: color, text-shadow; }
.statement__cta { margin-top: clamp(32px, 4vw, 48px); }
/* Mobile: the headline was bottoming out at ~30px, too small next to the button.
Raise the floor so it stays the dominant element on phones. */
@media (max-width: 600px) { .statement__text { font-size: clamp(40px, 11vw, 56px); } }
/* ---------- Services ---------- */
.services__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 34px; margin-bottom: 48px; }
.services__head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.01em; }
.services__head p { margin: 0; font-size: 15px; color: var(--muted); max-width: 36ch; line-height: 1.55; }
/* Rail prev/next arrows live in the head only on the mobile Industries rail. */
.services__controls { display: none; }
/* Index "Industries we serve" head mirrors the References head: title + intro
stacked on the left with the same 14px rhythm and bottom margin. Scoped to
#services so the shared .services__head on other pages keeps its own layout. */
#services .services__head { margin-bottom: clamp(32px, 4vw, 56px); }
#services .services__head-text h2 { margin: 14px 0 0; }
#services .services__head-text p { margin: 14px 0 0; max-width: 54ch; }
/* Industries section reuses the connect-item card markup; force 3 per row
(6 cards => 3x2). All other card styling is inherited from .connect-item so
these cards match the "Explore more about us" cards exactly. */
#services .connect__grid { grid-template-columns: repeat(3, 1fr); }
.service-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 64px; }
.service-card__idx { font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); letter-spacing: 0.1em; }
.service-card__arr { font-size: 22px; color: var(--muted-2); }
/* ---------- Join & Connect (image + text cards) ----------
Each card is one link: image on top, text below, as a single unit. So they
pair correctly at every width — 3-up on desktop, and on mobile they stack
image-then-text per card (not all images first, then all text). */
.connect__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.connect-item { display: flex; flex-direction: column; background: var(--elevated); text-decoration: none; color: inherit; transition: background 0.4s ease; }
.connect-item:hover { background: var(--elevated-hover); }
.connect-item__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-deep); }
.connect-item__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.connect-item:hover .connect-item__photo img { transform: scale(1.045); }
.connect-item__body { display: flex; flex-direction: column; flex: 1; padding: clamp(28px, 3vw, 44px); }
.connect-item__body .service-card__top { margin-bottom: clamp(24px, 3vw, 40px); }
.connect-item__body h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.01em; }
.connect-item__body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.connect-item .service-card__arr { transition: transform 0.4s ease, color 0.4s ease; }
.connect-item:hover .service-card__arr { transform: translate(3px, -3px); color: var(--accent); }
/* Team page: section divider rules span the full viewport width instead of the
content wrapper. Keep the original border for spacing but hide it, then draw a
100vw line via a pseudo-element pinned where the border used to sit. */
.page-team .team__head,
.page-team .services__head,
.page-team .cta--split .inner { position: relative; border-top-color: transparent; }
.page-team .team__head::before,
.page-team .services__head::before,
.page-team .cta--split .inner::before {
content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
width: 100vw; height: 1px; background: var(--line); pointer-events: none;
}
/* ---------- Image placeholder (TEMPLATE) ----------
Drop inside any fixed-ratio photo
container (e.g. .team-card__photo, .connect-item__photo) to show a labeled
placeholder. Replace the whole .ph div with 
when
you have real assets — the surrounding container already crops to size. */
.ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: var(--elevated); color: var(--muted-2);
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.ph::after { content: attr(data-label); }
/* ---------- How we work — scroll-pinned full-bleed slider ----------
.ss is a tall scroll track (one viewport of scroll per slide). Inside,
.ss__stage pins to the top and fills the viewport while the JS maps scroll
progress to the active slide. */
.ss { position: relative; height: 400vh; background: var(--bg-deep); }
.ss__stage {
position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* Stacked background images, crossfade + gentle zoom on the active one */
.ss__bgs { position: absolute; inset: 0; z-index: 0; }
.ss__bg {
position: absolute; inset: 0; background-size: cover; background-position: center;
opacity: 0; transform: scale(1.06); will-change: opacity, transform;
transition: opacity 1s var(--ease), transform 1.4s var(--ease);
}
.ss__bg.is-active { opacity: 1; transform: scale(1.12); }
/* Teal gradient overlay — heaviest at bottom-left where the copy sits */
.ss__overlay {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(to top, rgba(6, 22, 20, 0.94) 0%, rgba(8, 28, 26, 0.55) 42%, rgba(16, 50, 47, 0.30) 100%),
linear-gradient(to right, rgba(6, 22, 20, 0.86) 0%, rgba(6, 22, 20, 0.12) 58%, transparent 100%);
}
.ss__inner {
position: relative; z-index: 2; height: 100%;
display: flex; flex-direction: column;
padding-top: clamp(110px, 15vh, 168px); padding-bottom: clamp(36px, 5vh, 60px);
}
.ss__eyebrow { margin-bottom: auto; }
/* Stacked text slides (occupy the same grid cell so the box sizes to the tallest) */
.ss__slides { display: grid; margin-bottom: clamp(36px, 5vh, 64px); }
.ss__slide {
grid-area: 1 / 1; opacity: 0; visibility: hidden;
transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.ss__slide.is-active { opacity: 1; visibility: visible; }
.ss__slide > * { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.ss__slide.is-active > * { opacity: 1; transform: none; }
.ss__slide.is-active .ss__title { transition-delay: 0.06s; }
.ss__slide.is-active .ss__desc { transition-delay: 0.14s; }
.ss__index { display: flex; align-items: baseline; gap: 12px; margin-bottom: clamp(14px, 1.6vw, 22px); font-family: var(--font-mono); }
.ss__num { font-size: clamp(28px, 3.4vw, 44px); line-height: 1; color: var(--accent); letter-spacing: 0.02em; }
.ss__total { font-size: 14px; color: var(--muted-2); letter-spacing: 0.1em; }
.ss__title { margin: 0 0 clamp(14px, 1.6vw, 22px); font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.01em; color: var(--text); }
.ss__desc { margin: 0; max-width: 54ch; font-size: 15px; line-height: 1.55; color: var(--muted); }
/* Right-side phase nav — vertical progress lines track scroll position within
each slide. No labels: just the lines. */
.ss__nav {
position: absolute; z-index: 2; top: 50%; right: var(--gutter);
transform: translateY(-50%);
display: flex; flex-direction: column; gap: clamp(12px, 1.6vh, 20px);
}
.ss__tab {
appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
}
.ss__bar { position: relative; display: block; width: 2px; height: clamp(40px, 7vh, 70px); background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.ss__bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform 0.12s linear; }
@media (max-width: 700px) {
.ss__nav { right: 16px; gap: 10px; }
.ss__bar { height: clamp(32px, 6vh, 56px); }
}
/* Phones: clean crossfade hand-off — the outgoing slide fades out fast, and
the incoming slide waits until it's gone before fading in, so the old and
new copy are never visible in the same spot at once. */
@media (max-width: 820px) {
.ss { height: 550vh; }
/* Container hand-off: outgoing block fades out fast, incoming waits for it. */
.ss__slide { transition: opacity 0.15s linear, visibility 0.15s linear; }
.ss__slide.is-active { transition-delay: 0.16s; }
/* The text elements (number/title/desc) default to a slow 0.7s fade, which is
what leaves the OLD copy lingering on top of the new block. On phones the
outgoing copy now snaps out in 0.15s; only the INCOMING copy animates in
(after the old is gone), so the two never overlap. */
.ss__slide > * { transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); }
.ss__slide.is-active > * { transition-duration: 0.45s; transition-delay: 0.18s; }
.ss__slide.is-active .ss__title { transition-delay: 0.24s; }
.ss__slide.is-active .ss__desc { transition-delay: 0.3s; }
}
/* Tablet: keep the Industries grid two-up (below 701px it becomes the swipe rail). */
@media (min-width: 701px) and (max-width: 1024px) {
#services .connect__grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile: Industries becomes a horizontal swipe rail — same pattern as
Selected projects / Latest news; the shared rules live in the combined
@media (max-width: 700px) rail block further down. */
/* ---------- References — horizontal project rail ----------
Header sits in .wrap; the track scrolls horizontally within the framed
column and is driven by arrows, drag, or wheel-over-the-rail. */
.refs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 34px; margin-bottom: clamp(32px, 4vw, 56px); }
.refs__head h2 { margin: 14px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.01em; }
.refs__head p { margin: 14px 0 0; font-size: 15px; color: var(--muted); max-width: 54ch; line-height: 1.55; }
.refs__controls { display: flex; gap: 12px; }
.refs__arrow {
appearance: none; width: 52px; height: 52px; border-radius: 2px;
border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.03);
color: var(--text); font-size: 18px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.refs__arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.refs__arrow[disabled] { opacity: 0.28; pointer-events: none; }
/* The track shares the same centered content column as the section header
(.wrap), so the first card's left edge lines up exactly with the title.
scroll-padding-left keeps snapping aligned to that same edge. */
.refs__track {
/* Match .wrap's column exactly so the first card lines up with the title. */
width: min(95vw, var(--maxw)); max-width: var(--maxw); margin: 0 auto;
display: flex; gap: clamp(8px, 0.7vw, 12px);
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x proximity;
padding: 4px var(--gutter); scroll-padding-left: var(--gutter);
-ms-overflow-style: none; scrollbar-width: none; cursor: grab;
}
.refs__track::-webkit-scrollbar { display: none; }
.refs__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.refs__track.is-dragging .ref-card { pointer-events: none; }
/* Full-bleed photo cards in the horizontal rail: the image is the card
background and the title/description sit over a bottom gradient. The first
card is larger (hero) and widths vary down the rail. */
.ref-card {
position: relative; display: block; overflow: hidden;
flex: 0 0 clamp(260px, 24vw, 400px);
height: clamp(420px, 48vw, 580px);
scroll-snap-align: start; border: 1px solid var(--line);
color: #fff; text-decoration: none;
}
.ref-card--md { flex-basis: clamp(320px, 32vw, 520px); }
.ref-card--lg { flex-basis: clamp(360px, 40vw, 660px); }
/* KOVA signature accent: a 4px copper line down the left edge of each card. */
.ref-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--accent); z-index: 2; }
.ref-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.ref-card:hover .ref-card__img { transform: scale(1.05); }
.ref-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,20,18,0.9) 0%, rgba(8,20,18,0.45) 38%, rgba(8,20,18,0) 68%); }
.ref-card__arr { position: absolute; top: clamp(18px, 1.6vw, 26px); right: clamp(18px, 1.6vw, 26px); font-size: 22px; color: #fff; transition: transform 0.4s ease, color 0.4s ease; }
.ref-card:hover .ref-card__arr { transform: translate(3px, -3px); color: var(--accent); }
.ref-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(22px, 2vw, 34px); display: flex; flex-direction: column; gap: 5px; }
.ref-card__loc { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
.ref-card__body h3 { margin: 2px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.01em; line-height: 1.1; color: #fff; }
.ref-card__meta { font-size: 13px; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.6); }
.ref-card__meta strong { font-weight: 500; color: rgba(255, 255, 255, 0.92); }
@media (max-width: 700px) {
.ref-card, .ref-card--md, .ref-card--lg { flex-basis: 80vw; height: clamp(420px, 100vw, 540px); }
/* Phones: mandatory snap so a swipe always settles flush on a card (proximity
let momentum park half-way between two cards), and snap-stop so one swipe
advances exactly one card instead of flying past several. */
.refs__track { scroll-snap-type: x mandatory; }
.ref-card { scroll-snap-stop: always; }
}
/* Phones: Latest news AND Industries we serve trade their stacked grids for
the same swipeable rail as Selected projects. Negative margins pull the
scrollport out to the .wrap column edges so cards glide edge-to-edge like
the refs rail; the hairline grid chrome (1px gap + shared background)
becomes per-card borders. */
@media (max-width: 700px) {
#news .connect__grid,
#services .connect__grid {
display: flex; gap: clamp(8px, 0.7vw, 12px);
background: none; border: none;
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory;
margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter);
scroll-padding-left: var(--gutter);
-ms-overflow-style: none; scrollbar-width: none;
}
#news .connect__grid::-webkit-scrollbar,
#services .connect__grid::-webkit-scrollbar { display: none; }
#news .connect-item,
#services .connect-item {
flex: 0 0 80vw; border: 1px solid var(--line);
scroll-snap-align: start; scroll-snap-stop: always;
}
/* Industries rail: prev/next arrows in the head, left-aligned on their own
line below the title. */
#services .services__controls { display: flex; width: 100%; justify-content: flex-start; }
/* Auto-highlight the card currently centered in the rail to the darker teal —
the tap-darken effect, but following your swipe instead of a tap. JS toggles
.is-active as you scroll (initRefTrack in main.js). */
#services .connect-item { transition: background 0.4s ease; }
#services .connect-item.is-active { background: var(--elevated-hover); }
/* Make the News cards the same size as the Industries cards. Both are already
80vw wide with the same 4/3 photo; here we give both bodies one fixed height
so a News card (heading + teaser + footer) ends up the exact height of an
Industries card, and clamp the News heading/teaser so they fit. */
#news .connect-item__body,
#services .connect-item__body { height: clamp(244px, 60vw, 288px); overflow: hidden; }
#news .connect-item__body { padding: clamp(16px, 4vw, 22px); }
#news .connect-item__body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Whitespace below the 2-line teaser so the footer divider isn't tight against
the text. A margin here (rather than the footer's margin-top:auto, which the
tallest stretched card leaves no room for) guarantees the gap on every card. */
#news .connect-item__body p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: clamp(14px, 4vw, 18px); }
/* News rail: same auto-highlight as Industries — the card centered in the
rail darkens to teal and follows your swipe (JS toggles .is-active). */
#news .connect-item { transition: background 0.4s ease; }
#news .connect-item.is-active { background: var(--bg-deep); }
}
/* ---------- News cards (home teaser) ----------
Same visual language as the Industries cards: copper accent line under the
photo ("the middle copper thing") and a toned-down image. Each card body ends
in a footer pinned to the bottom — date · read time on the left, "Read more"
on the right, split by a hairline — so the meta has real structure. */
/* Same teal as the Industries cards: flush with the page bg, darken on hover. */
#news .connect-item { background: var(--bg); }
#news .connect-item:hover { background: var(--bg-deep); }
#news .connect-item__photo { border-bottom: 4px solid var(--accent); }
#news .connect-item__photo img { filter: brightness(0.82); transition: transform 0.7s var(--ease), filter 0.4s ease; }
#news .connect-item:hover .connect-item__photo img { filter: brightness(0.95); }
.news-card__foot {
margin-top: auto; /* pin to the bottom of the card body */
padding-top: 16px;
border-top: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.news-card__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted-2); white-space: nowrap; }
.news-card__more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.news-card__more .arr { transition: transform 0.4s var(--ease); }
#news .connect-item:hover .news-card__more .arr { transform: translateX(3px); }
/* ---------- Why KOVA — image-backed reasons ----------
Section header uses the same full-width top divider as the other section
heads, so it "closes" the band and sits directly under References. Each
reason is a full-width row: number + media (image or video) + text, with
divider lines that close top and bottom. */
.why__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 34px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.why__head h2 { margin: 14px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.01em; }
.why__intro { margin: 14px 0 0; font-size: 15px; color: var(--muted); max-width: 42ch; line-height: 1.55; }
/* The Why KOVA and News heads sit inside .wrap (gutter-inset), so their plain
border-top stops short of the grid-overlay vertical frame lines at
min(95vw, maxw). Draw the divider as a centered pseudo-element spanning that
same column so it closes neatly into the vertical lines. */
.why__head, .refs__head { position: relative; border-top-color: transparent; }
.why__head::before, .refs__head::before {
content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
width: min(95vw, var(--maxw)); height: 1px; background: var(--line); pointer-events: none;
}
/* Bento: 6-col grid of varying-size tiles. The photo fills the whole tile
(absolute) with a gradient scrim, and the text is overlaid at the bottom —
so coverage is height-independent and single-row tiles aren't squashed. */
.why__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(168px, 17vw, 224px); gap: clamp(10px, 1vw, 16px); }
.why-box { grid-column: span 2; grid-row: span 2; overflow: hidden; }
.why-box--feature { grid-column: span 4; grid-row: span 2; flex-direction: row; align-items: stretch; }
/* Feature card: image on the left (~half), text on the right, vertically centered. */
.why-box--feature .connect-item__photo { flex: 2 1 0; height: 100%; }
.why-box--feature .connect-item__body { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; }
.why-box--tall { grid-column: span 2; grid-row: span 2; }
/* Image fills the top of the card; the text sits in a solid block below it. */
.why-box .connect-item__photo { position: relative; flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.why-box .connect-item__body { background: var(--elevated); padding: clamp(16px, 1.5vw, 24px); }
.why-box .connect-item__body .service-card__top { margin-bottom: clamp(10px, 1vw, 14px); }
.why-box .connect-item__body h3 { font-size: clamp(18px, 1.9vw, 23px); }
.why-box .connect-item__body p { font-size: 13.5px; line-height: 1.5; }
.why-box--feature .connect-item__body h3 { font-size: clamp(22px, 2.4vw, 30px); }
/* Text-only tile (image removed): center the copy in the solid block */
.why-box--plain .connect-item__body { justify-content: center; }
@media (max-width: 820px) {
.why__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(280px, 60vw, 340px); }
.why-box, .why-box--feature, .why-box--tall { grid-column: span 1; grid-row: span 1; }
.why-box--feature { flex-direction: column; }
.why-box--feature .connect-item__photo { flex: 1 1 auto; height: auto; }
}
/* Phones: one card per row, kept compact — image on the left, text on the right. */
@media (max-width: 560px) {
.why__grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
.why-box, .why-box--feature, .why-box--tall { grid-column: span 1; grid-row: span 1; }
.why-box, .why-box--feature { flex-direction: row; align-items: stretch; }
.why-box .connect-item__photo,
.why-box--feature .connect-item__photo { flex: 0 0 38%; height: auto; min-height: 100%; aspect-ratio: auto; }
.why-box .connect-item__body,
.why-box--feature .connect-item__body { flex: 1 1 0; justify-content: center; }
.why-box .connect-item__body h3,
.why-box--feature .connect-item__body h3 { font-size: 17px; }
.why-box .connect-item__body p { font-size: 13px; }
/* Card 05 has no image — keep it a simple full-width text block. */
.why-box--plain { flex-direction: column; }
}
/* ---------- Stats ---------- */
.stats { padding: clamp(20px, 3vw, 40px) 0 clamp(70px, 9vw, 120px); border-bottom: 1px solid var(--line-soft); }
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 48px; }
/* KOVA signature accent: 4px copper line on the left of each stat. */
.stats__grid > * { border-left: 2px solid var(--accent); padding-left: clamp(16px, 1.4vw, 24px); }
/* Phones: "ledger" layout — one stat per full-width hairline row, big number
left, label right, descriptions hidden. Quick single-swipe scan (~half a
screen) instead of 1.5 screens of dense text. Count-up + reveal stagger
(data-delay on each cell) carry over unchanged. */
@media (max-width: 700px) {
.stats__grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.stats__grid > * {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
border-left: 0; padding: 18px 2px;
border-bottom: 1px solid var(--line);
}
.stat__value { font-size: 44px; }
.stat__label { margin-top: 0; font-size: 13.5px; line-height: 1.35; text-align: right; max-width: 16ch; }
.stat__desc { display: none; }
}
.stat__value { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-display); font-size: clamp(48px, 6vw, 82px); line-height: 0.9; letter-spacing: -0.02em; }
.stat__value .plus { font-size: clamp(28px, 3.4vw, 46px); color: var(--accent); }
.stat__value .pct { color: var(--accent); }
.stat__value .unit { font-size: clamp(18px, 2.2vw, 28px); color: var(--accent-text); align-self: center; margin-left: 8px; letter-spacing: 0.02em; }
.stat__label { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: 0.02em; }
.stat__desc { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 34ch; }
/* ---------- CTA ---------- */
.cta { text-align: center; }
/* CTA with a full-bleed photo background + dark overlay for legibility */
/* TEMPLATE: image-free CTA background. To use a photo, add it to the
background-image stack, e.g.
background-image: linear-gradient(rgba(6,6,8,.7), rgba(6,6,8,.82)), url("../Photos/your-image.jpg"); */
.cta--photo {
position: relative;
background-image: linear-gradient(rgba(11, 38, 36, 0.7), rgba(11, 38, 36, 0.82)), radial-gradient(120% 140% at 70% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), url("../Photos/kova-1.webp");
background-color: var(--bg-deep);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.cta h2 { margin: 0 auto; max-width: 18ch; font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 6.4vw, 92px); line-height: 1.03; letter-spacing: -0.015em; }
.cta h2 em { font-style: normal; color: rgba(255, 255, 255, 0.55); }
.cta p { margin: 20px auto 0; max-width: 52ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--muted); }
.cta__btns { margin-top: 38px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cta--split { text-align: left; }
.cta--split .inner { border-top: 1px solid var(--line); padding-top: clamp(50px, 7vw, 90px); display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta--split h2 { margin: 0; max-width: 14ch; font-size: clamp(34px, 5.4vw, 76px); line-height: 1.02; }
/* ---------- About ---------- */
.page-hero { padding: clamp(150px, 18vw, 230px) 0 clamp(60px, 8vw, 100px); }
.page-hero .eyebrow { margin-bottom: 32px; }
.page-hero h1 { font-size: clamp(40px, 6.6vw, 98px); max-width: 18ch; }
.page-hero h1 span { display: block; }
/* Larger about-hero headline on phones. The global clamp pins it at 40px below ~600px;
bump it to fill the width while keeping the three editorial lines intact. Ceiling is set
by the widest line ("wastes nothing." ≈ 7.13em) so it never overflows: ~43px @360w → ~53px @430w. */
@media (max-width: 600px) { .page-hero--about h1 { font-size: clamp(42px, 11.5vw, 52px); } }
.about-story { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(40px, 6vw, 90px); align-items: start; }
.about-story__lead { margin: 0 0 26px; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; color: rgba(255, 255, 255, 0.92); }
.about-story__lead em { font-style: normal; }
.about-story p { margin: 0 0 22px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.about-story p:last-child { margin-bottom: 0; }
/* ---------- Legal / policy pages ---------- */
.legal { max-width: 780px; }
.legal__updated { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 36px; }
.legal__lead { font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 25px); line-height: 1.5; color: rgba(255, 255, 255, 0.9); margin: 0 0 16px; }
.legal h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(21px, 2.8vw, 29px); letter-spacing: -0.01em; line-height: 1.2; margin: 52px 0 16px; color: var(--text); }
.legal h3 { font-size: 17px; font-weight: 600; margin: 28px 0 10px; color: rgba(255, 255, 255, 0.9); }
.legal p, .legal li { font-size: 16px; line-height: 1.75; color: var(--muted); }
.legal p { margin: 0 0 18px; }
.legal ul { margin: 0 0 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.legal li::marker { color: var(--muted-2); }
.legal a { color: var(--accent-text); transition: color 0.3s ease; }
.legal a:hover { color: var(--text); }
.legal strong { color: rgba(255, 255, 255, 0.92); font-weight: 600; }
.values { border-top: 1px solid var(--line-soft); }
.values h2 { margin: 0 0 56px; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -0.01em; }
.values__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
/* Photo-paired variant (Careers "Why work at 1040"): fixed 3 columns so the
image + text pairs stay aligned, collapsing to 2 then 1 on smaller screens. */
.values__grid--media { grid-template-columns: repeat(3, 1fr); }
.value-pair { display: flex; flex-direction: column; background: var(--line); gap: 1px; }
.value-pair__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--elevated); }
.value-pair__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.value-pair .value { flex: 1; }
@media (max-width: 900px) {
.values__grid--media { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.values__grid--media { grid-template-columns: 1fr; }
}
.value { background: var(--elevated); padding: clamp(28px, 2.8vw, 40px); }
.value__key { font-family: var(--font-mono); font-size: 12px; color: var(--accent-text); margin-bottom: 30px; }
.value h3 { margin: 0 0 10px; font-size: 20px; font-weight: 600; }
.value p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.locations__label { margin-bottom: 48px; }
.locations__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 32px; }
.location__meta { margin-top: 24px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.location h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 38px); }
.location__country { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted-2); }
.location p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
/* ---------- Careers: open positions list ---------- */
.roles { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.role { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(24px, 2.8vw, 36px); background: var(--elevated); text-decoration: none; color: inherit; transition: background 0.4s ease; }
.role:hover { background: var(--elevated-hover); }
.role__main { max-width: 60ch; }
.role__title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -0.01em; }
.role__desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.role__meta { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); flex-shrink: 0; }
.role__tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.role__tags span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.role__arr { font-size: 22px; color: var(--muted-2); }
@media (max-width: 720px) {
.role { flex-direction: column; align-items: flex-start; gap: 16px; }
.role__meta { width: 100%; justify-content: space-between; }
.role__tags { justify-content: flex-start; }
}
/* ---------- Team ---------- */
.team__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 34px; margin-bottom: 48px; }
.team__head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.01em; }
.team__head p { margin: 0; font-size: 15px; color: var(--muted); max-width: 38ch; line-height: 1.55; }
.team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: 1500px; margin: 0 auto; }
/* Mobile: keep two employee cards per row. minmax(0,1fr) keeps both tracks equal
and within the viewport; tighter meta padding/text for the cramped two-up. */
@media (max-width: 619px) {
.team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team-card__meta { padding: clamp(14px, 4vw, 20px); }
.team-card__name { font-size: clamp(16px, 4.4vw, 20px); overflow-wrap: anywhere; }
}
/* Photo fills its area edge-to-edge; the name, role and links sit below on the
card's solid background. */
.team-card { position: relative; overflow: hidden; background: var(--elevated); transition: background 0.4s ease; }
.team-card:hover { background: var(--elevated-hover); }
.team-card__top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 16px 18px; }
.team-card__idx { display: none; }
.team-card__arr { font-size: 20px; color: #fff; transition: transform 0.4s var(--ease), color 0.4s ease; }
.team-card:hover .team-card__arr { color: var(--accent); transform: translate(3px, -3px); }
.team-card__photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-deep); }
.team-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform 0.7s var(--ease); }
.team-card:hover .team-card__photo img { transform: scale(1.045); }
.team-card__meta { padding: clamp(20px, 1.8vw, 28px); }
.team-card__name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 1.8vw, 25px); letter-spacing: -0.01em; color: var(--text); }
.team-card__role { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); }
.team-card__links { display: flex; gap: 10px; margin-top: 18px; }
.team-card__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); cursor: var(--cursor); transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
.team-card__link:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.team-card__link svg { width: 16px; height: 16px; display: block; fill: currentColor; }
/* Whole card reads as clickable: the name is a real