/* =========================================================
GOPA – Corporate website
Built on the 2026 Brand Manual / Design System tokens
========================================================= */
@import url('assets/fonts/lato.css');
:root {
/* Master brand */
--gopa-yellow: #FCC200;
--gopa-yellow-amber: #F2A900;
--gopa-yellow-pressed: #D99400;
--gopa-yellow-straw: #FDEABE;
--gopa-grey-classic: #7C7B7B;
--gopa-grey-silver-mist: #B5B5B5;
--gopa-grey-light: #D6D8D8;
--gopa-grey-ivory: #F1F2F2;
/* Sub-brand anchors */
--com-dark-black: #081A24;
--com-dark-steel: #333333;
--com-steel-pearl: #CCCCCC;
--tech-lapis: #265C99;
--tech-ocean: #183153;
--tech-sky: #82A1CA;
--pro-sea-green: #008B4F;
--pro-pine: #154628;
--pro-mint: #54A272;
/* Surfaces and text */
--bg: #FFFFFF;
--bg-subtle: var(--gopa-grey-ivory);
--bg-inverse: var(--com-dark-black);
--fg1: #081A24;
--fg2: var(--gopa-grey-classic);
--fg3: var(--gopa-grey-silver-mist);
--border: #E3E4E4;
--divider: #EDEDED;
/* Ink tones and heading scale (typography pass, Aug 2026): ONE ramp
for the whole site. Page-local styles reference these tokens instead
of ad-hoc clamp()s and hex greys. --ink = headings and emphasis,
--ink-body = long-form copy, --ink-muted = captions, labels, meta. */
--ink: #081A24;
--ink-body: #2A3140;
--ink-muted: #5A6573;
--fs-h1: clamp(2.25rem, 5.5vw, 4rem); /* page titles */
--fs-h2: clamp(1.65rem, 3.2vw, 2.4rem); /* section titles */
--fs-h3: clamp(1.25rem, 2vw, 1.5rem); /* card/block titles */
--fs-prose: 1.0625rem; /* long-form body copy */
/* The signature stationery gradient */
--gopa-gradient: linear-gradient(90deg, #B5B5B5 0%, #C9B88A 45%, #FCC200 100%);
/* Type */
--font-display: 'Lato', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
/* Spacing – 4px ramp */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
--s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
--container-max: 1280px;
/* Motion */
--ease: cubic-bezier(0.2, 0, 0, 1);
--dur-fast: 120ms;
--dur-med: 220ms;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* Offset in-page anchor jumps by the sticky/fixed header height so the
target is not hidden underneath it (e.g. the homepage hero CTAs that
jump to #sectors / #who-we-are under the fixed over-hero header). */
scroll-padding-top: 88px;
/* Clip horizontal overflow at the root. On iPadOS Safari, setting
overflow-x only on body lets sub-pixel overflow from absolutely-
positioned pseudo elements still bubble up to the viewport and
produce a small horizontal rubber-band on scroll. Clipping at
html prevents that reliably across browsers. `overflow-x: clip`
is preferred over hidden because it does not establish a new
scroll container (keeps sticky positioning anchored to window);
hidden is the fallback for browsers that do not support clip. */
overflow-x: hidden;
overflow-x: clip;
max-width: 100vw;
}
body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--fg1);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
overflow-x: clip;
max-width: 100vw;
position: relative;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* ---------- Layout ---------- */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--s5);
}
@media (min-width: 768px) {
.container { padding: 0 var(--s7); }
}
.section { padding: var(--s8) 0; }
@media (min-width: 768px) { .section { padding: var(--s9) 0; } }
/* Index/intro heads carry only an eyebrow, title and lead before a
wave-top section that already adds generous top padding. Trim the
redundant bottom space so these pages do not open with a tall empty
band (most noticeable on phones). */
.section.projects-archive-head,
.section.news-archive-head,
.section.brands-archive-head,
.section.about-hero {
padding-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
}
.section--ivory { background: var(--bg-subtle); }
.section--dark { background: var(--bg-inverse); color: #fff; }
/* ---------- Type ---------- */
.eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gopa-grey-classic);
margin: 0 0 var(--s4);
}
.section--dark .eyebrow { color: var(--gopa-grey-silver-mist); }
h1, h2, h3, h4 {
font-family: var(--font-display);
letter-spacing: -0.01em;
text-wrap: balance;
margin: 0;
}
h1 {
font-weight: 900;
font-size: clamp(40px, 5.6vw, 80px);
line-height: 1.02;
letter-spacing: -0.015em;
}
h2 {
font-weight: 900;
font-size: clamp(30px, 4vw, 56px);
line-height: 1.08;
margin-bottom: var(--s5);
}
h3 {
font-weight: 700;
font-size: clamp(20px, 1.6vw, 24px);
line-height: 1.2;
margin-bottom: var(--s3);
}
h4 {
font-weight: 700;
font-size: 18px;
line-height: 1.3;
}
p { margin: 0 0 var(--s4); max-width: 68ch; text-wrap: pretty; }
.lead {
font-weight: 300;
font-size: clamp(18px, 1.4vw, 22px);
line-height: 1.5;
color: var(--fg1);
max-width: 64ch;
}
.section--dark .lead { color: rgba(255,255,255,0.86); }
/* Shared section title: every page's section heading uses this class
(or at least its --fs-h2 size). Lived page-locally before the Aug 2026
typography pass, so pages without the definition fell back to the much
larger bare-h2 rule. */
.cross-section__title {
font-size: var(--fs-h2);
font-weight: 900; font-style: normal;
line-height: 1.12;
margin: 0.2em 0 0.9em;
}
/* ---------- Prose + companion rail ----------
The About-area answer to a long text column with dead space beside it:
prose keeps its measure on the left, a sticky companion (mission card,
key figures, fact card) fills the right. Single column below 980px,
companion after the prose. */
.prose-rail {
display: grid;
grid-template-columns: 1fr;
gap: 2.2rem;
}
@media (min-width: 980px) {
.prose-rail {
grid-template-columns: minmax(0, 44rem) minmax(17rem, 21rem);
justify-content: space-between;
column-gap: clamp(2.5rem, 5vw, 5rem);
align-items: start;
}
.prose-rail__aside { position: sticky; top: 110px; }
}
.rail-card {
background: var(--gopa-yellow, #FCC200);
border-radius: 16px;
padding: 1.7rem 1.6rem;
color: var(--ink);
}
.rail-card--dark { background: var(--com-dark-black, #081A24); color: #fff; }
.rail-card__label {
margin: 0 0 0.7rem;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(8, 26, 36, 0.65);
}
.rail-card--dark .rail-card__label { color: var(--gopa-yellow, #FCC200); }
.rail-card__statement {
margin: 0;
font-size: clamp(1.15rem, 1.6vw, 1.35rem);
font-weight: 800;
line-height: 1.4;
}
.rail-card__text { margin: 0.8rem 0 0; font-size: 0.95rem; line-height: 1.6; }
.rail-card .btn { margin-top: 1.3rem; }
.rail-card .btn--primary {
background: var(--com-dark-black, #081A24);
border-color: var(--com-dark-black, #081A24);
color: var(--gopa-yellow, #FCC200);
box-shadow: none;
}
.rail-card .btn--primary:hover {
background: var(--com-dark-steel, #333333);
border-color: var(--com-dark-steel, #333333);
}
/* Stacked key figures for a companion rail. */
.rail-figures {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: 1.6rem;
}
.rail-figure { display: flex; flex-direction: column; }
.rail-figure__value {
font-weight: 900;
font-size: clamp(2.2rem, 3vw, 2.8rem);
line-height: 1;
color: var(--ink);
}
.rail-figure__label {
margin-top: 0.45rem;
font-size: 0.92rem;
line-height: 1.45;
color: var(--ink-muted);
}
@media (max-width: 979px) {
/* On one column the figures sit in a row, not a tower. */
.rail-figures { flex-direction: row; flex-wrap: wrap; gap: 1.5rem 3rem; }
}
/* The tagline – "Shaping / a better tomorrow" */
.tagline {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
line-height: 1.02;
letter-spacing: -0.015em;
margin: 0;
}
.tagline strong {
font-weight: 900;
font-style: italic;
display: block;
}
.tagline--accent strong { color: var(--gopa-yellow); }
.section--dark .tagline,
.section--dark .tagline strong { color: #fff; }
/* The sub-slogan – "engineering. consulting. communicating." */
.subslogan {
font-family: var(--font-display);
font-weight: 300;
font-style: italic;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.3;
letter-spacing: -0.005em;
margin: 0;
}
.subslogan .dot { color: var(--gopa-yellow-amber); font-weight: 700; }
.section--dark .subslogan { color: #fff; }
.section--dark .subslogan .dot-eng { color: var(--tech-sky); }
.section--dark .subslogan .dot-con { color: var(--pro-mint); }
.section--dark .subslogan .dot-com { color: var(--com-steel-pearl); }
/* The eyebrow-caps recipe of the sub-slogan */
.subslogan--caps {
font-style: normal;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 13px;
color: var(--gopa-grey-classic);
line-height: 1.4;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: 16px 32px;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.01em;
border: 2px solid transparent;
border-radius: 999px;
transition: background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { box-shadow: 0 6px 18px rgba(252, 194, 0, 0.32); }
.btn--primary:hover { box-shadow: 0 10px 28px rgba(252, 194, 0, 0.45); }
.btn .arrow {
font-family: 'Times New Roman', serif;
display: inline-block;
transition: transform var(--dur-med) var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary {
background: var(--gopa-yellow);
color: var(--com-dark-black);
border-color: var(--gopa-yellow);
}
.btn--primary:hover { background: var(--gopa-yellow-amber); border-color: var(--gopa-yellow-amber); }
.btn--primary:active { background: var(--gopa-yellow-pressed); border-color: var(--gopa-yellow-pressed); }
.btn--ghost {
background: transparent;
color: var(--fg1);
border-color: var(--fg1);
}
.btn--ghost:hover { background: var(--fg1); color: #fff; }
.section--dark .btn--ghost { color: #fff; border-color: #fff; }
.section--dark .btn--ghost:hover { background: #fff; color: var(--com-dark-black); }
/* Approach is a dark-band section but does not carry the section--dark
utility class (its own .approach background takes over). Match the
dark-on-light ghost-button override so the CTA stays legible. */
.approach .btn--ghost { color: #fff; border-color: #fff; }
.approach .btn--ghost:hover { background: #fff; color: var(--com-dark-black); }
/* ---------- Header / Nav ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--border);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s5);
padding: 16px var(--s5);
max-width: var(--container-max);
margin: 0 auto;
}
@media (min-width: 768px) {
.site-header__inner { padding: 18px var(--s7); }
}
.site-header__logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.site-header__logo img {
height: 36px;
width: auto;
display: block;
}
@media (max-width: 640px) {
.site-header__logo img { height: 30px; }
}
.site-nav {
display: none;
gap: var(--s6);
}
.site-nav a {
font-size: 15px;
font-weight: 700;
color: var(--fg2);
letter-spacing: 0.01em;
border-bottom: 3px solid transparent;
padding-bottom: 18px;
margin-bottom: -18px;
transition: color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.site-nav a:hover {
color: var(--fg1);
border-bottom-color: var(--gopa-yellow);
}
.site-header__right {
display: flex;
align-items: center;
gap: var(--s4);
}
/* Search trigger button in the header */
.header-search-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
padding: 8px;
color: var(--fg2, #4a4a4a);
cursor: pointer;
border-radius: 999px;
transition: background var(--dur-fast, 0.15s) var(--ease, ease), color var(--dur-fast, 0.15s) var(--ease, ease);
}
.header-search-trigger:hover {
color: var(--fg1, #081a24);
background: #f4f4f3;
}
.header-search-trigger svg { width: 20px; height: 20px; display: block; }
.lang-toggle {
font-size: 13px;
font-weight: 700;
color: var(--fg2);
letter-spacing: 0.06em;
text-transform: uppercase;
display: none;
}
.lang-toggle a { padding: 0 4px; }
.lang-toggle a.active { color: var(--fg1); }
@media (min-width: 1024px) {
.site-nav { display: flex; }
.lang-toggle { display: inline-flex; }
}
.btn-contact {
background: var(--com-dark-black);
color: #fff;
padding: 11px 20px;
font-size: 14px;
font-weight: 700;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background var(--dur-fast) var(--ease);
}
.btn-contact:hover { background: var(--com-dark-steel); }
@media (max-width: 1023px) { .btn-contact { display: none; } }
/* Mobile menu */
.menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: transparent;
border: 1px solid var(--border);
border-radius: 999px;
padding: 0;
}
@media (min-width: 1024px) { .menu-toggle { display: none; } }
.menu-toggle__bars {
display: block;
width: 18px;
height: 2px;
background: var(--fg1);
position: relative;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after {
content: "";
position: absolute;
left: 0;
width: 18px;
height: 2px;
background: var(--fg1);
transition: transform var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease);
}
.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: 0; transform: rotate(-45deg); }
.mobile-menu {
position: fixed;
inset: 73px 0 0 0;
background: #fff;
z-index: 40;
padding: var(--s7) var(--s5);
overflow-y: auto;
display: none;
flex-direction: column;
gap: var(--s4);
border-top: 1px solid var(--border);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
font-size: 22px;
font-weight: 700;
color: var(--fg1);
padding: var(--s3) 0;
border-bottom: 1px solid var(--divider);
}
.mobile-menu a:hover { color: var(--gopa-yellow-amber); }
.mobile-menu .btn-contact {
display: inline-flex;
align-self: flex-start;
margin-top: var(--s4);
}
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }
/* ---------- Hero – immersive, image full-bleed ---------- */
.hero {
position: relative;
/* 90vh instead of full-viewport so a sliver of the stats band below
peeks at the bottom edge and invites the visitor to scroll. Divided
by the large-screen zoom because vh does not shrink with it. */
min-height: calc(90vh / var(--screen-zoom, 1));
background-color: var(--com-dark-black);
background-image: url('assets/photography/hero-bridge.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
/* Two-row grid: the copy lives in the flexible top row (vertically
centred), the three-pillar band sits in the auto-sized bottom row and
spans the full width. This balances the composition on wide screens,
where the copy alone left a large empty right half. */
display: grid;
grid-template-rows: 1fr auto;
/* Top clears the fixed over-hero header; the bottom gap sits below the
pillar band. */
padding: 116px 0 calc(var(--hero-wave-h) + clamp(16px, 3vh, 36px));
isolation: isolate;
}
@media (min-width: 768px) {
.hero { padding-top: 150px; }
}
/* Align the hero's left edge with the GOPA logo above. The header uses
.site-header__inner with max-width: 1280 and margin: auto, so on wide
viewports the logo sits at gutter+padding. The hero's .container must
match that exactly.
Because .hero is display: flex, the .container is a flex item.
Without an explicit width, a flex item shrink-wraps to its content
(= the 720px hero__copy column); the auto margins from .container
then centre that small block in the middle of the row, which is
what made the hero text float in the centre originally.
width: 100% forces the container to take the full flex row, max-width
caps it at 1280, margin: 0 auto centres what is left over - exactly
the same recipe the header uses, so logo and hero text share one
left axis at every viewport width. */
.hero > .container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
}
/* Subtle gradient overlay so the headline reads cleanly on any image area.
Heavier at the bottom-left where the copy sits, lighter elsewhere so the
imagery still breathes through. */
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
/* Scrim tuned to the immersive deck's hero: NEUTRAL near-black (a navy
tint dulls the montage's colours) and fully transparent from 64%
across, so the right half of the key image keeps its full punch. */
linear-gradient(90deg, rgba(10,12,14,0.74) 0%, rgba(10,12,14,0.40) 36%, rgba(10,12,14,0) 64%),
/* Light top vignette (header contrast) + a foot scrim that carries the
white key figures. It stops well short of black: the light wave
below no longer needs the photo to fade into #081A24. */
linear-gradient(180deg, rgba(10,12,14,0.30) 0%, rgba(10,12,14,0.08) 28%, rgba(10,12,14,0.22) 62%, rgba(10,12,14,0.62) 100%);
}
/* On phones the 90vh hero plus its large vh bottom padding makes the user
scroll a long way before any content. Shorten it and pull the photo focus
toward the subject so the crop still reads well in portrait. */
@media (max-width: 720px) {
.hero {
/* On phones, drop the two-row grid and let the copy and the pillar band
stack in natural flow so nothing floats far apart on a tall screen. */
display: block;
min-height: 76vh;
padding: 120px 0 calc(var(--hero-wave-h) + 20px);
background-position: 62% center;
}
.hero__main { padding-bottom: var(--s7); }
/* The desktop scrim clears to fully transparent on the right, but on a
phone the copy spans the whole width and sits on the busy ship strip.
Use a more uniform veil (like the subpage .photo-hero mobile variant)
so every line keeps contrast; the image still glows through. */
.hero::before {
background:
linear-gradient(90deg, rgba(10,12,14,0.80) 0%, rgba(10,12,14,0.58) 55%, rgba(10,12,14,0.38) 100%),
linear-gradient(180deg, rgba(10,12,14,0.35) 0%, rgba(10,12,14,0.16) 30%, rgba(10,12,14,0.26) 62%, rgba(10,12,14,0.66) 100%);
}
}
.hero__backdrop { display: none; }
.hero__media { display: none; }
.hero__media__chip { display: none; }
.hero__inner {
position: relative;
z-index: 1;
width: 100%;
}
/* Top grid row: vertically centre the copy in the space above the band. */
.hero__main { align-self: center; }
.hero__copy {
max-width: 720px;
color: #fff;
}
.hero__copy .eyebrow {
color: rgba(255,255,255,0.92);
text-shadow: 0 1px 8px rgba(0,0,0,0.50);
}
.hero h1 {
color: #fff;
margin-bottom: var(--s5);
font-weight: 300; /* base weight = light, like the brand lockup */
font-style: italic;
line-height: 1.0;
letter-spacing: -0.02em;
text-shadow:
0 2px 12px rgba(0,0,0,0.55),
0 4px 32px rgba(0,0,0,0.40);
}
.hero h1 em {
font-style: italic;
font-weight: 300;
display: block;
color: #fff;
}
.hero h1 strong {
font-style: italic;
font-weight: 900;
display: block;
color: var(--gopa-yellow);
}
.hero__lead {
font-weight: 400;
font-size: clamp(18px, 1.4vw, 22px);
line-height: 1.5;
max-width: 56ch;
margin-bottom: var(--s6);
color: #fff;
text-shadow:
0 1px 8px rgba(0,0,0,0.55),
0 2px 18px rgba(0,0,0,0.40);
}
.hero__cta {
display: flex;
flex-wrap: wrap;
gap: var(--s3);
margin-bottom: var(--s6);
}
.hero .btn--ghost {
color: #fff;
border-color: rgba(255,255,255,0.85);
background: rgba(255,255,255,0.06);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hero .btn--ghost:hover {
background: #fff;
color: var(--com-dark-black);
border-color: #fff;
}
.hero__subslogan {
margin-top: var(--s6);
font-size: clamp(18px, 1.6vw, 24px);
color: #fff;
text-shadow:
0 1px 8px rgba(0,0,0,0.55),
0 2px 18px rgba(0,0,0,0.40);
}
.hero__subslogan .dot {
font-size: 1.2em;
font-weight: 900;
}
.hero__subslogan .dot-eng { color: var(--tech-sky); }
.hero__subslogan .dot-con { color: var(--pro-mint); }
.hero__subslogan .dot-com { color: var(--gopa-yellow); }
/* "Making complex systems work" pivot (May 2026)
----------------------------------------------------------------
Modifier on the homepage hero. Overrides the legacy ` ... `
/ ` ... ` markup that was rendered as two block-level
italic-light lines ("Shaping" / "a better tomorrow."). The new hero
reads as a single bold sentence with the accent word "work." inline,
italic and gold. Adds the three-pillar lockup (technically sound /
politically deliverable / socially accepted) below the CTAs.
The legacy `.hero h1 em { display: block }` rule still applies to
/experiments/baseline-en/, which keeps the old markup and lives
without this modifier. */
.hero--systems h1 {
font-weight: 900;
font-style: normal;
letter-spacing: -0.035em;
/* 1.0 (not the tighter 0.92) so descenders on one line clear the
ascenders on the next. With negative leading the line break point
(which shifts by viewport width and language) can drop a descender
like the "p" in "complex" onto the "k" in "work" below. Still dense,
just without the accidental near-collisions. */
line-height: 1.0;
max-width: 16ch;
}
.hero--systems h1 em {
display: inline;
font-style: italic;
font-weight: 900;
color: var(--gopa-yellow);
}
/* Bottom grid row: full-width band holding the key figures, pulled into the
hero so they land in the first viewport over the darker foot of the photo. */
.hero__stats-band {
align-self: end;
position: relative;
z-index: 1;
}
.hero__stats {
list-style: none;
margin: 0;
padding: var(--s4) 0 0;
border-top: 1px solid rgba(255,255,255,0.30);
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--s4) var(--s5);
}
@media (max-width: 900px) {
.hero__stats { grid-template-columns: repeat(3, 1fr); gap: var(--s4) var(--s5); }
}
@media (max-width: 520px) {
.hero__stats { grid-template-columns: repeat(2, 1fr); }
}
.hero__stats .stat {
color: #fff;
text-shadow:
0 1px 8px rgba(0,0,0,0.55),
0 2px 12px rgba(0,0,0,0.35);
}
.hero__stats .stat__value {
color: #fff;
font-size: clamp(26px, 2.8vw, 42px);
margin: 0 0 4px;
}
.hero__stats .stat__value .unit { color: var(--gopa-yellow); }
.hero__stats .stat__label {
color: rgba(255,255,255,0.85);
font-size: 12.5px;
line-height: 1.35;
}
/* ---------- Shared subpage photo hero ----------
One treatment for every page-head with a key visual (sector pages,
business areas, news archive, expert companies). The page sets
`--hero-image: url(...)` inline and adds this class; padding and
typography stay page-local. Scrim philosophy mirrors the homepage hero:
NEUTRAL near-black (a navy tint dulls the photos), dark on the left for
the white copy, fully transparent toward the right so the image keeps
its punch; plus a light veil at the foot that grounds the wave without
darkening the picture (see the light wave block below). */
.photo-hero {
color: #fff;
background-color: var(--com-dark-black, #081A24);
background-image:
linear-gradient(to top, rgba(8,26,36,0.42) 0%, rgba(8,26,36,0.20) 10%, rgba(8,26,36,0.06) 22%, rgba(8,26,36,0) 36%),
linear-gradient(90deg, rgba(10,12,14,0.82) 0%, rgba(10,12,14,0.55) 30%, rgba(10,12,14,0.16) 58%, rgba(10,12,14,0) 72%),
var(--hero-image);
background-size: cover;
/* Focal point: pages can bias the cover crop (e.g. "center 30%" keeps
faces in the upper third visible on very wide viewports). */
background-position: var(--hero-position, center);
background-repeat: no-repeat;
}
@media (max-width: 768px) {
/* Copy spans the full width on phones: keep a readable, more uniform
veil, still biased darker on the left. */
.photo-hero {
background-image:
linear-gradient(to top, rgba(8,26,36,0.44) 0%, rgba(8,26,36,0.22) 12%, rgba(8,26,36,0.06) 26%, rgba(8,26,36,0) 42%),
linear-gradient(90deg, rgba(10,12,14,0.86) 0%, rgba(10,12,14,0.58) 58%, rgba(10,12,14,0.34) 100%),
var(--hero-image);
}
}
/* ---------- Light wave under the photo heroes (Aug 2026) ----------
The heroes used to sink into black: the section below carried a dark
wave-top, so the photo had to fade into #081A24 for the two to meet
without a seam. That cost every key visual its bottom edge, worst on
the right where the wave is thickest.
Now the wave rides the hero's own bottom edge (the same trick the
careers hero already uses) and carries the colour of the section
BELOW it. The photo keeps its light all the way down and the curve
itself is the divider, so no colour has to match the photo any more.
One rule serves every surface colour: the shape is a mask, the fill
comes from --hero-wave-fill. */
.photo-hero,
.hero {
position: relative;
--hero-wave-h: 61px;
}
@media (min-width: 768px) {
.photo-hero,
.hero { --hero-wave-h: 91px; }
}
.photo-hero::after,
.hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
/* 1px past the edge so iPhone Safari's fractional pixel rendering
cannot leave a hairline of the photo below the curve. */
bottom: -1px;
height: var(--hero-wave-h);
background-color: var(--hero-wave-fill, #fff);
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595 92' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M-17,49c33,7,75,20,111,24,85,11,172,6,256-14,84-20,167-53,254-54v101H-16Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595 92' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M-17,49c33,7,75,20,111,24,85,11,172,6,256-14,84-20,167-53,254-54v101H-16Z'/%3E%3C/svg%3E");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
pointer-events: none;
z-index: 2;
}
/* The wave lives in the hero now, so the section that follows drops its
own wave-top: no ::before, and the clearance padding goes back to the
normal section rhythm. */
.photo-hero + .wave-top::before,
.hero + .wave-top::before { display: none; }
.photo-hero + .wave-top,
.hero + .wave-top { padding-top: var(--s8); }
@media (min-width: 768px) {
.photo-hero + .wave-top,
.hero + .wave-top { padding-top: var(--s9); }
}
/* The wave has to carry the colour of whatever follows it. White is the
default; these are the surfaces that differ. */
.photo-hero:has(+ .section--ivory),
.hero:has(+ .section--ivory) { --hero-wave-fill: var(--bg-subtle); }
.photo-hero:has(+ .news-section) { --hero-wave-fill: #E8E9EC; }
.photo-hero:has(+ .section--dark) { --hero-wave-fill: var(--bg-inverse); }
/* The signature wave divider – sits between hero and the next section */
.wave {
height: 80px;
background-image: url('assets/shapes/Shape_weblarge.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center bottom;
}
@media (min-width: 768px) { .wave { height: 120px; } }
.wave--white {
background-image: url('assets/shapes/WhiteShape_weblarge.png');
}
/* ---------- Wave-top – section-internal wave transitions ----------
Why a ::before on the *receiving* section instead of a separate divider?
A divider element has two edges (top and bottom), each one a potential
hard horizontal line where colours can't perfectly match neighbouring
content (especially with image-bearing sections). Putting the wave inside
the receiving section as a ::before, filled with the *prior* section's
colour, only ever has one boundary – the prior section's bg meets its
own colour on the wave-top, and the wave curve dissolves naturally into
the receiving section's content. No abutting edges = no hard lines. */
.wave-top {
position: relative;
/* Push content below the wave's curve so they never visually overlap. */
padding-top: 100px;
}
@media (min-width: 768px) {
.wave-top { padding-top: 130px; }
}
.wave-top::before {
content: "";
position: absolute;
/* Overlap by 1px upward so the wave's dark fill covers the last
pixel of the previous section. On iPhone Safari, fractional pixel
rendering of stacked sections can produce a hairline gap at the
seam; the overlap masks it without affecting visible layout. */
top: -1px;
left: 0;
right: 0;
height: 61px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: bottom;
pointer-events: none;
z-index: 1;
}
@media (min-width: 768px) {
.wave-top::before { height: 91px; }
}
/* Stats and footer have their own internal padding patterns – strip the
default wave-top padding-top there and apply a more compact value. */
.stats.wave-top { padding-top: 110px; }
@media (min-width: 768px) { .stats.wave-top { padding-top: 150px; } }
.site-footer.wave-top { padding-top: 0; }
.site-footer.wave-top .container { padding-top: 110px; }
@media (min-width: 768px) {
.site-footer.wave-top .container { padding-top: 150px; }
}
/* Feature banners – content is justified to the bottom, so the wave doesn't
need to push anything down. Reset the padding the wave-top adds. */
.feature-banner.wave-top { padding-top: 0; }
/* Each variant carries the prior section's colour, baked into a flipped
wave SVG (curve at bottom, fill on top). */
.wave-top--ivory::before {
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595 92' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 92) scale(1 -1)' fill='%23F1F2F2' d='M-17,49c33,7,75,20,111,24,85,11,172,6,256-14,84-20,167-53,254-54v101H-16Z'/%3E%3C/svg%3E");
}
/* Warm sand (#F4F2ED), the careers-hero surface (Comms/Alexa, Aug 2026). */
.wave-top--sand::before {
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595 92' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 92) scale(1 -1)' fill='%23F4F2ED' d='M-17,49c33,7,75,20,111,24,85,11,172,6,256-14,84-20,167-53,254-54v101H-16Z'/%3E%3C/svg%3E");
}
.wave-top--dark::before {
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595 92' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 92) scale(1 -1)' fill='%23081A24' d='M-17,49c33,7,75,20,111,24,85,11,172,6,256-14,84-20,167-53,254-54v101H-16Z'/%3E%3C/svg%3E");
}
/* Variant tuned to the featured-publication band's slightly lighter,
navy-tinted dark (#0D2330). Used by the news section directly below
the featured-pub band so the wave's colour matches the prior section
exactly with no visible seam. */
.wave-top--dark-tinted::before {
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595 92' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 92) scale(1 -1)' fill='%230D2330' d='M-17,49c33,7,75,20,111,24,85,11,172,6,256-14,84-20,167-53,254-54v101H-16Z'/%3E%3C/svg%3E");
}
.wave-top--white::before {
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595 92' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 92) scale(1 -1)' fill='%23FFFFFF' d='M-17,49c33,7,75,20,111,24,85,11,172,6,256-14,84-20,167-53,254-54v101H-16Z'/%3E%3C/svg%3E");
}
/* Matches the medium-grey sectors section background so the wave the Approach
section draws over it dissolves seamlessly. */
.wave-top--grey::before {
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595 92' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 92) scale(1 -1)' fill='%23E8E9EC' d='M-17,49c33,7,75,20,111,24,85,11,172,6,256-14,84-20,167-53,254-54v101H-16Z'/%3E%3C/svg%3E");
}
.wave-top--yellow::before {
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595 92' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 92) scale(1 -1)' fill='%23FCC200' d='M-17,49c33,7,75,20,111,24,85,11,172,6,256-14,84-20,167-53,254-54v101H-16Z'/%3E%3C/svg%3E");
}
/* Brand-aware wave: same shape, colour follows the --brand-color custom
property set inline on the section. Used on brand pages where the prior
section is the brand hero (green / blue / black) and the fixed-fill
variants above can't match. */
.wave-top--brand::before {
background-image: none;
background-color: var(--brand-color, #081A24);
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595 92' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 92) scale(1 -1)' fill='%23000' d='M-17,49c33,7,75,20,111,24,85,11,172,6,256-14,84-20,167-53,254-54v101H-16Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595 92' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 92) scale(1 -1)' fill='%23000' d='M-17,49c33,7,75,20,111,24,85,11,172,6,256-14,84-20,167-53,254-54v101H-16Z'/%3E%3C/svg%3E");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: bottom;
mask-position: bottom;
}
/* Master gradient wave – silver-mist → yellow. Same brand wave shape as the
solid variants (varying thickness, peak rising on the right), filled with
the brand gradient. A soft mask fades the very top edge to transparent so
the wave dissolves into the hero's white above without a hard horizontal
line. The bottom is naturally smooth – below the curve is transparent and
stats is white. */
.wave-top--gradient {
position: relative;
}
.wave-top--gradient::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 90px;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595 92' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%23B5B5B5'/%3E%3Cstop offset='0.5' stop-color='%23C9B88A'/%3E%3Cstop offset='1' stop-color='%23FCC200'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath transform='translate(0 92) scale(1 -1)' fill='url(%23g)' d='M-17,49c33,7,75,20,111,24,85,11,172,6,256-14,84-20,167-53,254-54v101H-16Z'/%3E%3C/svg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: bottom;
pointer-events: none;
z-index: 1;
/* Fade the top edge to transparent so the wave dissolves into hero white */
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 35%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 35%);
}
@media (min-width: 768px) {
.wave-top--gradient::before { height: 130px; }
}
@media (min-width: 768px) {
.wave-top--gradient::before { height: 120px; }
}
/* ---------- Stats band ---------- */
.stats {
background: var(--bg);
padding: var(--s7) 0;
}
.stats__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s5);
}
@media (min-width: 768px) { .stats__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
@media (min-width: 1024px) { .stats__grid { grid-template-columns: repeat(6, 1fr); } }
.stat__value {
font-family: var(--font-display);
font-size: clamp(36px, 3.8vw, 56px);
font-weight: 900;
line-height: 1;
letter-spacing: -0.02em;
margin: 0 0 6px;
font-variant-numeric: tabular-nums;
}
.stat__value .unit {
font-weight: 900;
font-size: 0.55em;
margin-left: 4px;
color: var(--gopa-yellow-amber);
}
.stat__label {
font-size: 13px;
color: var(--fg2);
font-weight: 400;
line-height: 1.4;
}
/* ---------- Brands strip ---------- */
.brands__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s5);
}
@media (min-width: 768px) { .brands__grid { grid-template-columns: repeat(3, 1fr); } }
/* The editorial "3" anchor next to the brands headline */
#brands .section-head {
position: relative;
}
#brands .section-head__three {
position: absolute;
right: -2%;
top: -32%;
z-index: 0;
pointer-events: none;
font-family: var(--font-display);
font-style: italic;
font-weight: 900;
font-size: clamp(160px, 18vw, 320px);
line-height: 0.85;
letter-spacing: -0.06em;
color: var(--gopa-yellow);
opacity: 0.18;
user-select: none;
}
@media (max-width: 900px) {
#brands .section-head__three {
position: relative;
right: auto;
top: auto;
text-align: right;
font-size: clamp(120px, 36vw, 200px);
margin: 0 0 var(--s4);
opacity: 0.14;
}
}
#brands .section-head > div { position: relative; z-index: 1; }
.brand-card {
position: relative;
display: flex;
flex-direction: column;
/* Neutral GOPA card: plain white body, a resting shadow to lift it off
the white section. The sub-brand colour is pulled back to a thin top
edge only (see ::before); everything else stays in GOPA yellow/dark. */
background: #fff;
border: 1px solid var(--border);
border-radius: 28px;
padding: var(--s7) var(--s6) var(--s7);
overflow: hidden;
box-shadow: 0 16px 34px -24px rgba(8, 26, 36, 0.24);
transition: transform var(--dur-med) var(--ease),
box-shadow var(--dur-med) var(--ease),
border-color var(--dur-med) var(--ease);
}
.brand-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
background: var(--accent, var(--gopa-yellow));
border-radius: 28px 28px 0 0;
}
/* The wave footer – uses the brand wave SVG, in the sub-brand colour */
.brand-card::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 36px;
background-image: var(--brand-wave-svg, none);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: bottom;
opacity: 0.10;
transition: opacity var(--dur-med) var(--ease), height var(--dur-med) var(--ease);
}
.brand-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 48px rgba(12,12,12,0.10);
}
.brand-card:hover::after { opacity: 0.18; height: 50px; }
/* Each card keeps its sub-brand colour ONLY as the thin top edge (--accent,
used by ::before). The decorative brand wave is dropped so the colour no
longer dominates the card. */
.brand-card--tech { --accent: var(--tech-lapis); }
.brand-card--pro { --accent: var(--pro-sea-green); }
.brand-card--com { --accent: var(--com-dark-black); }
.brand-card__eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--com-dark-black);
margin-bottom: var(--s2);
}
.brand-card__name {
font-size: 32px;
font-weight: 900;
letter-spacing: -0.015em;
margin: 0 0 var(--s4);
line-height: 1;
}
.brand-card__name span {
font-weight: 300;
font-style: italic;
color: var(--com-dark-black);
}
.brand-card__desc {
font-size: 16px;
line-height: 1.55;
color: var(--fg1);
margin-bottom: var(--s5);
flex-grow: 1;
}
.brand-card__list {
list-style: none;
padding: 0;
margin: 0 0 var(--s5);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s2) var(--s4);
}
.brand-card__list li {
position: relative;
padding-left: 14px;
font-size: 14px;
color: var(--fg1);
}
.brand-card__list li::before {
content: "";
position: absolute;
left: 0; top: 0.65em;
width: 6px; height: 6px;
background: var(--gopa-yellow-amber);
}
.brand-card__link {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--com-dark-black);
border-bottom: 2px solid var(--gopa-yellow);
padding-bottom: 2px;
align-self: flex-start;
transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.brand-card__link:hover { gap: 10px; }
/* ---------- Sectors – image tiles (rounded "Polaroid" cards on grey) ---------- */
.sectors-section { background: #E8E9EC; }
.sectors-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 1.6vw, 1.5rem);
}
@media (max-width: 1024px) { .sectors-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .sectors-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .sectors-tiles { grid-template-columns: 1fr; } }
/* Compact homepage variant (Comms, July 2026): six small tiles per row,
names only, so the section takes half the height. The /sectors/ page
keeps the large tiles with summaries. */
.sectors-tiles--compact { grid-template-columns: repeat(6, 1fr); gap: clamp(0.7rem, 1vw, 1rem); }
.sectors-tiles--compact .sector-tile { border-radius: 12px; }
.sectors-tiles--compact .sector-tile__media { aspect-ratio: 16 / 10; }
.sectors-tiles--compact .sector-tile__body { padding: 0.7rem 0.85rem 0.8rem; }
.sectors-tiles--compact .sector-tile__name { font-size: 0.88rem; line-height: 1.25; letter-spacing: 0; }
.sectors-tiles--compact .sector-tile__desc { display: none; }
@media (max-width: 1180px) { .sectors-tiles--compact { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) { .sectors-tiles--compact { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .sectors-tiles--compact { grid-template-columns: repeat(2, 1fr); } }
.sector-tile {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: var(--fg1);
box-shadow: 0 2px 6px rgba(8, 26, 36, 0.06);
transition: transform var(--dur-med) var(--ease),
box-shadow var(--dur-med) var(--ease);
}
.sector-tile:hover {
transform: translateY(-4px);
box-shadow: 0 20px 38px -14px rgba(8, 26, 36, 0.22);
}
.sector-tile__media {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--bg-subtle);
}
.sector-tile__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-med) var(--ease);
}
.sector-tile:hover .sector-tile__media img { transform: scale(1.045); }
.sector-tile__body {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1rem 1.1rem 1.2rem;
}
/* Mixed case (Comms, Aug 2026): sector names are no longer set in all caps. */
.sector-tile__name {
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0;
line-height: 1.25;
color: var(--com-dark-black);
}
.sector-tile__desc {
font-size: 0.9rem;
line-height: 1.5;
color: var(--fg2);
margin: 0;
}
/* ---------- Feature banner – full-bleed 5:2 cinematic photo with overlay ----------
Borrowed from the live GOPA pattern: hero-style photography with overlay copy
and CTA. Used to break up the page rhythm with editorial weight. */
.feature-banner {
position: relative;
width: 100%;
min-height: 320px;
aspect-ratio: 5 / 2;
overflow: hidden;
background: var(--com-dark-black);
display: flex;
isolation: isolate;
}
@media (max-width: 768px) {
.feature-banner {
aspect-ratio: 4 / 5;
min-height: 480px;
}
}
.feature-banner__media {
position: absolute;
inset: 0;
z-index: 0;
}
.feature-banner__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.feature-banner__media::after {
/* Dark overlay for text legibility – heavier on the left so copy reads cleanly.
The first gradient solidifies to pure --com-dark-black at the very bottom,
so the banner ends on the exact colour the next section's dark wave-top
uses. No colour mismatch = no horizontal line at the boundary. */
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 70%, #081A24 100%),
linear-gradient(90deg, rgba(8,26,36,0.78) 0%, rgba(8,26,36,0.45) 60%, rgba(8,26,36,0.20) 100%),
linear-gradient(180deg, rgba(8,26,36,0.10) 0%, rgba(8,26,36,0.55) 100%);
}
@media (max-width: 768px) {
.feature-banner__media::after {
background:
linear-gradient(180deg, transparent 70%, #081A24 100%),
linear-gradient(180deg, rgba(8,26,36,0.30) 0%, rgba(8,26,36,0.78) 100%);
}
}
.feature-banner__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: var(--s7) var(--s5);
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: var(--s4);
color: #fff;
}
@media (min-width: 768px) {
.feature-banner__inner { padding: var(--s8) var(--s7); gap: var(--s5); }
}
.feature-banner__eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gopa-yellow);
margin: 0;
}
.feature-banner__title {
font-family: var(--font-display);
font-size: clamp(32px, 4.5vw, 64px);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0;
max-width: 22ch;
text-wrap: balance;
}
.feature-banner__title em {
font-weight: 300;
font-style: italic;
color: var(--gopa-yellow);
display: block;
}
.feature-banner__lead {
font-size: clamp(16px, 1.2vw, 19px);
font-weight: 300;
line-height: 1.55;
margin: 0;
max-width: 56ch;
color: rgba(255,255,255,0.86);
}
.feature-banner__cta {
align-self: flex-start;
background: var(--gopa-yellow);
color: var(--com-dark-black);
padding: 14px 28px;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.01em;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: var(--s2);
box-shadow: 0 6px 18px rgba(252, 194, 0, 0.32);
transition: background var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
.feature-banner__cta:hover {
background: var(--gopa-yellow-amber);
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(252, 194, 0, 0.45);
}
.feature-banner__cta .arrow {
font-family: 'Times New Roman', serif;
transition: transform var(--dur-med) var(--ease);
}
.feature-banner__cta:hover .arrow { transform: translateX(4px); }
/* The optional bottom wave: same SVG pattern, sub-pixel-flush with next section */
.feature-banner__wave {
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 80px;
z-index: 1;
pointer-events: none;
}
.feature-banner__wave svg { width: 100%; height: 100%; display: block; }
/* ---------- Presence map – radial constellation from HQ ---------- */
.presence-map {
background: var(--com-dark-black);
color: #fff;
position: relative;
overflow: hidden;
}
.presence-map__head {
display: grid;
grid-template-columns: 1fr;
gap: var(--s5);
margin-bottom: var(--s7);
align-items: end;
}
@media (min-width: 900px) {
.presence-map__head { grid-template-columns: 7fr 5fr; gap: var(--s8); }
}
.presence-map__head .eyebrow { color: var(--gopa-yellow); }
.presence-map__head h2 { color: #fff; }
.presence-map__head h2 em { font-style: italic; font-weight: 300; color: var(--gopa-yellow); }
.presence-map__head .lead {
color: rgba(255,255,255,0.78);
font-weight: 300;
font-size: clamp(16px, 1.2vw, 19px);
line-height: 1.55;
margin: 0;
}
/* The visualization canvas */
.presence-map__viz {
position: relative;
width: 100%;
margin: 0 auto;
/* Square-ish on small screens, wider on large */
aspect-ratio: 1 / 1;
max-width: 720px;
}
@media (min-width: 768px) {
.presence-map__viz { aspect-ratio: 5 / 4; max-width: 920px; }
}
.presence-map__svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
/* Concentric rings – subtle, dashed, on-brand wave hint */
.presence-map .ring {
fill: none;
stroke: rgba(255,255,255,0.06);
stroke-width: 1;
stroke-dasharray: 1 3;
}
.presence-map .ring--strong {
stroke: rgba(252, 194, 0, 0.10);
stroke-dasharray: none;
}
/* Spokes – faint lines from HQ to each country */
.presence-map .spoke {
stroke: rgba(255,255,255,0.06);
stroke-width: 1;
fill: none;
}
/* HQ marker */
.presence-map .hq-dot {
fill: var(--gopa-yellow);
}
.presence-map .hq-pulse {
fill: none;
stroke: var(--gopa-yellow);
stroke-width: 1.5;
transform-origin: center;
transform-box: fill-box;
animation: hq-pulse 3s cubic-bezier(0.2, 0, 0, 1) infinite;
}
@keyframes hq-pulse {
0% { transform: scale(0.6); opacity: 0; }
20% { opacity: 0.65; }
100% { transform: scale(2.4); opacity: 0; }
}
.presence-map .hq-label {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
fill: rgba(255,255,255,0.78);
text-anchor: middle;
}
/* Country markers */
.presence-map .country {
cursor: pointer;
transition: transform 220ms var(--ease);
transform-origin: center;
transform-box: fill-box;
}
.presence-map .country__dot {
fill: rgba(252, 194, 0, 0.55);
transition: fill 220ms var(--ease), r 220ms var(--ease);
}
.presence-map .country:hover .country__dot,
.presence-map .country.is-active .country__dot {
fill: var(--gopa-yellow);
}
.presence-map .country:hover { transform: scale(1.4); }
.presence-map .country__label {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
fill: rgba(255,255,255,0.72);
text-anchor: middle;
pointer-events: none;
opacity: 0;
transition: opacity 220ms var(--ease);
}
.presence-map .country:hover .country__label,
.presence-map .country.is-active .country__label { opacity: 1; }
/* Ambient pulse – randomly staggered */
.presence-map .country__dot {
animation: country-pulse 4s ease-in-out infinite;
}
@keyframes country-pulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
/* Travelling ripple – a yellow circle scaling outward from HQ */
.presence-map .ripple {
fill: none;
stroke: var(--gopa-yellow);
stroke-width: 1;
transform-origin: center;
transform-box: fill-box;
opacity: 0;
animation: ripple-out 6s linear infinite;
}
.presence-map .ripple--2 { animation-delay: -2s; }
.presence-map .ripple--3 { animation-delay: -4s; }
@keyframes ripple-out {
0% { transform: scale(0.05); opacity: 0; }
4% { opacity: 0.55; }
100% { transform: scale(1.0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.presence-map .country__dot,
.presence-map .hq-pulse,
.presence-map .ripple { animation: none; }
}
/* Detail card – appears below the map, updated on hover/click */
.presence-map__detail {
margin-top: var(--s7);
padding: var(--s5) var(--s6);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
display: grid;
grid-template-columns: 1fr;
gap: var(--s4);
min-height: 88px;
}
@media (min-width: 768px) {
.presence-map__detail { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s6); }
}
.presence-map__detail__country {
font-size: 22px;
font-weight: 900;
letter-spacing: -0.005em;
color: #fff;
margin: 0;
}
.presence-map__detail__region {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gopa-yellow);
margin-bottom: 4px;
}
.presence-map__detail__brands {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
}
.presence-map__detail__brand {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.18);
color: rgba(255,255,255,0.78);
}
.presence-map__detail__brand--tech { color: var(--tech-sky); border-color: rgba(130, 161, 202, 0.4); }
.presence-map__detail__brand--pro { color: var(--pro-mint); border-color: rgba(84, 162, 114, 0.4); }
.presence-map__detail__brand--com { color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.18); }
.presence-map__detail__hint {
font-size: 14px;
color: rgba(255,255,255,0.55);
font-style: italic;
font-weight: 300;
}
/* Stats strip below the map */
.presence-map__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s5);
margin-top: var(--s7);
padding-top: var(--s6);
border-top: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 768px) {
.presence-map__stats { grid-template-columns: repeat(4, 1fr); }
}
.presence-map__stats .stat__value { color: #fff; }
.presence-map__stats .stat__value .unit { color: var(--gopa-yellow); }
.presence-map__stats .stat__label { color: rgba(255,255,255,0.55); }
/* ---------- Marquee – silently scrolling country band ---------- */
.marquee {
background: var(--com-dark-black);
color: #fff;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: var(--s5) 0;
position: relative;
}
.marquee__eyebrow {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: 0; /* override the default margin */
z-index: 2;
display: flex;
align-items: center;
padding: 0 110px 0 var(--s5);
/* Solid dark on the left fades to transparent ~110px in, so country names
scrolling left disappear behind the eyebrow before they reach the text. */
background: linear-gradient(
90deg,
var(--com-dark-black) 0%,
var(--com-dark-black) 65%,
transparent 100%
);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gopa-yellow);
}
@media (max-width: 768px) { .marquee__eyebrow { display: none; } }
.marquee__track {
display: flex;
gap: var(--s5);
animation: marquee 60s linear infinite;
width: max-content;
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(20px, 2vw, 28px);
line-height: 1;
white-space: nowrap;
letter-spacing: -0.01em;
}
.marquee__track > span {
display: inline-flex;
align-items: center;
gap: var(--s5);
}
.marquee__track > span::after {
content: "•";
color: var(--gopa-yellow);
font-style: normal;
font-weight: 900;
font-size: 0.7em;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation: none; }
}
/* ---------- Approach (dark band with image) ---------- */
.approach {
background: var(--com-dark-black);
color: #fff;
position: relative;
overflow: hidden;
}
.approach__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--s7);
align-items: center;
padding: var(--s8) 0;
}
@media (min-width: 768px) { .approach__inner { padding: var(--s9) 0; } }
@media (min-width: 1024px) { .approach__inner { grid-template-columns: 6fr 6fr; gap: var(--s9); } }
.approach h2 { color: #fff; }
.approach h2 em { font-style: italic; font-weight: 300; color: var(--gopa-yellow); }
.approach__lead { color: rgba(255,255,255,0.86); }
.approach__pillars {
list-style: none;
padding: 0;
margin: var(--s6) 0 0;
display: grid;
gap: var(--s4);
}
.approach__pillars li {
display: grid;
grid-template-columns: 56px 1fr;
gap: var(--s4);
align-items: start;
padding-top: var(--s4);
border-top: 1px solid rgba(255,255,255,0.12);
}
.approach__pillars .num {
font-size: 13px;
font-weight: 700;
color: var(--gopa-yellow);
letter-spacing: 0.16em;
padding-top: 4px;
}
.approach__pillars h4 { color: #fff; margin: 0 0 4px; }
.approach__pillars p { color: rgba(255,255,255,0.78); font-size: 15px; line-height: 1.55; margin: 0; max-width: 56ch; }
.approach__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--com-dark-steel);
border-radius: 28px;
}
.approach__media img {
width: 100%; height: 100%; object-fit: cover;
opacity: 0.94;
}
.approach__media::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(8,26,36,0.45) 100%);
z-index: 1;
}
/* The big "60" graphic – overlaid editorial number */
.approach__years {
position: absolute;
right: -8px;
bottom: -16px;
z-index: 2;
display: flex;
align-items: baseline;
gap: 4px;
pointer-events: none;
}
.approach__years strong {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(120px, 14vw, 220px);
line-height: 0.85;
letter-spacing: -0.04em;
color: var(--gopa-yellow);
font-style: italic;
}
.approach__years span {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #fff;
padding: var(--s2) var(--s4);
background: rgba(0,0,0,0.4);
border-radius: 999px;
margin-bottom: 32px;
}
/* ---------- Featured projects ---------- */
.projects__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s5);
}
/* Compact landing variant: four small cards in one row, no teaser text. */
.projects__grid.projects__grid--compact { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
@media (max-width: 1100px) { .projects__grid.projects__grid--compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .projects__grid.projects__grid--compact { grid-template-columns: 1fr; } }
.projects__grid--compact .project-card__media { aspect-ratio: auto; height: 140px; }
.projects__grid--compact .project-card__title { font-size: 1rem; }
@media (min-width: 768px) { .projects__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s6); } }
@media (min-width: 1100px) { .projects__grid { grid-template-columns: repeat(3, 1fr); } }
.project-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--border);
border-radius: 24px;
overflow: hidden;
transition: transform var(--dur-med) var(--ease),
box-shadow var(--dur-med) var(--ease),
border-color var(--dur-med) var(--ease);
}
.project-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(12,12,12,0.08);
border-color: var(--gopa-yellow-amber);
}
.project-card__media {
position: relative;
aspect-ratio: 16 / 10;
background: var(--bg-subtle);
overflow: hidden;
}
.project-card__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--dur-med) var(--ease);
}
/* The wave-bottom variant: the photo's bottom edge dips into the card body */
.project-card__media--wave::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 18%;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595 92' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M-17,49c33,7,75,20,111,24,85,11,172,6,256-14,84-20,167-53,254-54v101H-16Z'/%3E%3C/svg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: bottom;
}
.project-card:hover .project-card__media img { transform: scale(1.04); }
.project-card__body { padding: var(--s5) var(--s5) var(--s6); flex-grow: 1; display: flex; flex-direction: column; }
.project-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-bottom: var(--s3);
}
.tag {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--fg2);
}
.tag--tech { color: var(--tech-lapis); border-color: var(--tech-lapis); }
.tag--pro { color: var(--pro-sea-green); border-color: var(--pro-sea-green); }
.tag--com { color: var(--com-dark-black); border-color: var(--com-dark-black); }
.tag--group { color: var(--com-dark-black); border-color: var(--gopa-yellow-amber); background: var(--gopa-yellow); }
.tag--region { color: var(--fg1); }
.project-card__title {
font-size: 20px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 var(--s3);
letter-spacing: -0.005em;
}
.project-card__desc {
font-size: 14px;
line-height: 1.55;
color: var(--fg2);
margin: 0 0 var(--s4);
flex-grow: 1;
}
/* ---------- Global presence ---------- */
.presence {
background: var(--bg-subtle);
}
.presence__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--s7);
align-items: start;
}
@media (min-width: 1024px) { .presence__inner { grid-template-columns: 5fr 7fr; gap: var(--s8); } }
/* Sticky only at desktop where the two-column layout exists; on mobile the
stacked layout would cause the sticky copy to overlap the cards below. */
@media (min-width: 1024px) {
.presence__copy { position: sticky; top: 100px; }
}
.presence__copy h2 em { font-style: italic; font-weight: 300; color: var(--gopa-yellow-amber); }
.presence__metrics {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s4);
margin-top: var(--s6);
padding-top: var(--s6);
border-top: 1px solid var(--border);
}
.presence__metric .stat__value { font-size: 32px; }
.presence__metric .stat__label { font-size: 12px; }
.regions {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
}
@media (min-width: 600px) { .regions { grid-template-columns: repeat(2, 1fr); } }
.regions {
border-radius: 24px;
overflow: hidden;
}
.region {
background: #fff;
padding: var(--s5);
display: flex;
flex-direction: column;
gap: 6px;
}
.region__name {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gopa-yellow-amber);
}
.region__city {
font-size: 18px;
font-weight: 700;
margin: 0;
letter-spacing: -0.005em;
}
.region__detail {
font-size: 13px;
color: var(--fg2);
line-height: 1.5;
margin: 0;
}
/* ---------- Insights ---------- */
.insights__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s5);
}
@media (min-width: 768px) { .insights__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
.insight {
display: flex;
flex-direction: column;
border-top: 3px solid var(--com-dark-black);
padding-top: var(--s4);
transition: border-color var(--dur-fast) var(--ease);
}
.insight:hover { border-top-color: var(--gopa-yellow-amber); }
.insight__date {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg2);
margin-bottom: var(--s2);
}
.insight__title {
font-size: 22px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.005em;
margin: 0 0 var(--s3);
}
.insight__excerpt {
font-size: 14px;
line-height: 1.55;
color: var(--fg2);
margin: 0 0 var(--s4);
}
.insight__more {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: underline;
text-decoration-color: var(--gopa-yellow);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
align-self: flex-start;
}
/* ---------- News preview list on the homepage ---------- */
.home-news__list {
list-style: none;
padding: 0;
margin: var(--s6) 0 var(--s5);
}
/* Position context for the ::before whole-card-clickable trick on the
title link; the sector tag sits at a higher z-index and stays
independently clickable to the sector page. */
.home-news__item {
border-top: 1px solid #d4d8dd;
position: relative;
}
.home-news__item:last-child { border-bottom: 1px solid #d4d8dd; }
.home-news__link {
display: grid;
grid-template-columns: minmax(7rem, 9rem) 1fr auto;
gap: 1.25rem 1.75rem;
align-items: center;
padding: 1.2rem 0;
color: inherit;
transition: color 0.18s ease;
}
.home-news__title-link {
color: inherit;
text-decoration: none;
display: inline-block;
}
.home-news__title-link::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
}
.home-news__item:hover .home-news__title {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.home-news__item:hover .home-news__arrow { transform: translateX(3px); }
.home-news__tags {
margin: 0.6rem 0 0;
}
.home-news__sector-tag {
position: relative;
z-index: 1;
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
padding: 0.22rem 0.55rem;
border-radius: 6px;
background: #f4f6f9;
border: 1px solid #e3e6ea;
color: var(--ink-body);
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.home-news__sector-tag:hover {
background: #fffbea;
border-color: var(--gopa-yellow, #FCC200);
color: var(--com-dark-black, #081A24);
}
.home-news__date {
margin: 0;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-muted);
}
.home-news__title {
font-size: 1.2rem;
font-weight: 800;
font-style: italic;
line-height: 1.2;
margin: 0 0 0.3em;
}
.home-news__summary {
margin: 0;
font-size: 0.95rem;
color: var(--ink-body);
line-height: 1.5;
}
.home-news__arrow {
color: var(--ink-muted);
font-size: 1.1rem;
transition: transform 0.18s ease;
}
@media (max-width: 640px) {
.home-news__link {
grid-template-columns: 1fr;
gap: 0.3rem;
}
.home-news__arrow { display: none; }
}
/* ---------- Careers band ---------- */
.careers {
position: relative;
background: var(--gopa-yellow);
color: var(--com-dark-black);
overflow: hidden;
}
.careers__inner {
padding: var(--s8) 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--s6);
align-items: center;
}
@media (min-width: 768px) { .careers__inner { padding: var(--s9) 0; grid-template-columns: 7fr 5fr; } }
.careers h2 { margin: 0 0 var(--s4); }
.careers h2 em { font-style: italic; font-weight: 300; }
.careers__lead { font-size: clamp(17px, 1.3vw, 19px); font-weight: 300; max-width: 56ch; }
.careers__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.careers .btn--ghost { color: var(--com-dark-black); border-color: var(--com-dark-black); }
.careers .btn--ghost:hover { background: var(--com-dark-black); color: var(--gopa-yellow); }
.careers .btn--primary {
background: var(--com-dark-black);
color: var(--gopa-yellow);
border-color: var(--com-dark-black);
}
.careers .btn--primary:hover { background: var(--com-dark-steel); border-color: var(--com-dark-steel); }
.careers__quote {
border-left: 3px solid var(--com-dark-black);
padding: var(--s5);
font-style: italic;
font-weight: 300;
font-size: clamp(18px, 1.4vw, 20px);
line-height: 1.5;
background: rgba(255,255,255,0.36);
border-radius: 0 24px 24px 0;
}
.careers__quote strong { font-weight: 700; }
.careers__quote .who {
display: block;
margin-top: var(--s3);
font-style: normal;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* ---------- Footer ---------- */
.site-footer {
background: var(--com-dark-black);
color: #fff;
}
.site-footer .container { padding-top: var(--s8); padding-bottom: var(--s5); }
.footer__top {
display: grid;
grid-template-columns: 1fr;
gap: var(--s7);
padding-bottom: var(--s7);
border-bottom: 1px solid rgba(255,255,255,0.10);
}
@media (min-width: 768px) {
.footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s6); }
}
.footer__brand img { height: 32px; margin-bottom: var(--s4); }
.footer__brand .tagline {
font-size: 22px;
color: #fff;
margin-bottom: var(--s5);
}
.footer__brand .tagline strong { color: var(--gopa-yellow); }
.footer__brand .subslogan {
font-size: 14px;
color: rgba(255,255,255,0.78);
}
.footer__brand .subslogan .dot { color: var(--gopa-yellow); }
.footer__col h4 {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gopa-yellow);
margin: 0 0 var(--s4);
}
.footer__col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--s3);
}
/* The postal address is a single block: line-height sets its internal
spacing, while the column's var(--s3) gap still separates it from the
email and phone below. */
.footer__addr {
font-style: normal;
line-height: 1.5;
/* Same type as the link columns: as plain
text the address
inherited 16px in full white and shouted over the rest of the
footer. */
font-size: 14px;
color: rgba(255,255,255,0.78);
}
.footer__col a {
font-size: 14px;
color: rgba(255,255,255,0.78);
transition: color var(--dur-fast) var(--ease);
}
.footer__col a:hover { color: var(--gopa-yellow); }
.footer__bottom {
padding-top: var(--s5);
display: flex;
flex-wrap: wrap;
gap: var(--s4);
align-items: center;
justify-content: space-between;
}
.footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--s5);
font-size: 12px;
color: rgba(255,255,255,0.6);
}
.footer__legal a {
color: rgba(255,255,255,0.78);
transition: color var(--dur-fast) var(--ease);
}
.footer__legal a:hover { color: var(--gopa-yellow); }
.footer__copyright { font-size: 12px; color: rgba(255,255,255,0.6); margin: 0; }
.socials { display: flex; gap: var(--s2); }
.socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 2px;
color: #fff;
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.socials a:hover { background: var(--gopa-yellow); color: var(--com-dark-black); border-color: var(--gopa-yellow); }
.socials svg { width: 16px; height: 16px; }
/* ---------- Utilities ---------- */
.section-head {
display: grid;
grid-template-columns: 1fr;
gap: var(--s5);
margin-bottom: var(--s7);
align-items: start;
}
@media (min-width: 900px) {
.section-head { grid-template-columns: 7fr 5fr; gap: var(--s8); }
/* First line of the intro aligns with the top of the title (below the
eyebrow), regardless of which column is taller. */
.section-head__intro { padding-top: 2.4rem; }
}
.section-head__intro p { color: var(--fg2); margin: 0; }
.section--dark .section-head__intro p { color: rgba(255,255,255,0.78); }
.section-foot {
margin-top: var(--s7);
display: flex;
justify-content: center;
}
@media (min-width: 768px) { .section-foot { justify-content: flex-start; } }
/* Reveal-on-scroll (light) */
[data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* Skip link */
.skip {
position: absolute;
left: -9999px;
}
.skip:focus {
left: 12px;
top: 12px;
background: var(--com-dark-black);
color: var(--gopa-yellow);
padding: 8px 14px;
z-index: 100;
font-weight: 700;
font-size: 14px;
border-radius: 2px;
}
/* ---------- Activity cards (shared by sector and brand detail pages) ----
Mixed news + publications grid with type-badge cards. Used at:
- /[lang]/sectors/[slug]/ "Recent activity"
- /[lang]/brands/[slug]/ "Recent news and publications"
Both contexts share the same grid + card pattern; only the surrounding
section background differs. */
.sector-activity__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
gap: 1rem;
}
.sector-activity-card {
background: #fff;
border: 1px solid #e3e6ea;
border-radius: 12px;
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sector-activity-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px -10px rgba(8, 26, 36, 0.14);
}
.sector-activity-card__link {
display: flex;
flex-direction: column;
height: 100%;
padding: 1.2rem 1.3rem 1.1rem;
color: inherit;
text-decoration: none;
gap: 0.6rem;
}
.sector-activity-card__head {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.sector-activity-card__type {
display: inline-block;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.2rem 0.55rem;
border-radius: 999px;
}
.sector-activity-card__type--article {
background: rgba(8, 26, 36, 0.08);
color: var(--com-dark-black, #081A24);
}
.sector-activity-card__type--publication {
background: var(--gopa-yellow, #FCC200);
color: var(--com-dark-black, #081A24);
}
.sector-activity-card__pages {
font-size: 0.72rem;
color: var(--ink-muted);
font-weight: 600;
}
.sector-activity-card__title {
font-size: 1.05rem;
font-weight: 800;
font-style: normal;
line-height: 1.25;
margin: 0;
color: var(--com-dark-black, #081A24);
}
.sector-activity-card:hover .sector-activity-card__title {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.sector-activity-card__summary {
font-size: 0.88rem;
color: var(--ink-body);
line-height: 1.5;
margin: 0;
flex-grow: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sector-activity-card__date {
margin: 0;
font-size: 0.75rem;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ---------- Featured publication band (homepage) ----------
Dark brand-black band sandwiched between the reach map and the news
section. Two-column layout: copy on the left, stylised PDF-cover
graphic on the right. Stacks below ~860px. */
.featured-pub {
position: relative;
/* Slightly lighter, navy-tinted dark than the Reach map above. The
hue shift is small but enough to mark the section as its own
content band without resorting to a flat divider line, which
would clash with the wave-based design language used elsewhere. */
background: #0d2330;
color: #fff;
padding-block: clamp(3rem, 7vw, 5.5rem);
}
.featured-pub__inner {
display: grid;
grid-template-columns: 1.3fr minmax(280px, 0.9fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
@media (max-width: 860px) {
.featured-pub__inner { grid-template-columns: 1fr; }
}
.featured-pub__copy { max-width: 38rem; }
.featured-pub__eyebrow {
color: var(--gopa-yellow, #FCC200);
margin: 0 0 1rem;
}
.featured-pub__type {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
background: var(--gopa-yellow, #FCC200);
color: var(--com-dark-black, #081A24);
padding: 0.3rem 0.7rem;
border-radius: 999px;
margin: 0 0 1.1rem;
}
.featured-pub__title {
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 900;
font-style: italic;
line-height: 1.1;
margin: 0 0 0.6em;
color: #fff;
}
.featured-pub__lead {
font-size: 1.05rem;
line-height: 1.55;
color: rgba(255,255,255,0.88);
margin: 0 0 1.6rem;
max-width: 36rem;
}
.featured-pub__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.8rem;
margin: 0 0 1.8rem;
font-size: 0.95rem;
color: rgba(255,255,255,0.7);
}
.featured-pub__meta strong { color: #fff; font-weight: 800; margin-right: 0.25rem; }
.featured-pub__meta-dot { color: rgba(255,255,255,0.5); }
.featured-pub__meta-link {
color: rgba(255,255,255,0.85);
text-decoration: none;
border-bottom: 1px dashed rgba(255,255,255,0.4);
}
.featured-pub__meta-link:hover {
color: var(--gopa-yellow, #FCC200);
border-bottom-color: var(--gopa-yellow, #FCC200);
}
.featured-pub__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8rem 1.6rem;
}
.featured-pub__download {
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.featured-pub__download-meta { font-weight: 400; opacity: 0.85; }
.featured-pub__readmore {
color: #fff;
text-decoration: none;
font-weight: 700;
border-bottom: 2px solid transparent;
padding-bottom: 2px;
transition: border-color 0.15s ease, color 0.15s ease;
}
.featured-pub__readmore:hover {
color: var(--gopa-yellow, #FCC200);
border-bottom-color: var(--gopa-yellow, #FCC200);
}
/* Stylised PDF cover. CSS-only composition that visually echoes the
actual PDF cover (brand-black background, GOPA wordmark top-left in
yellow, tagline lockup, type label and title centred). */
.featured-pub__cover {
display: block;
text-decoration: none;
color: inherit;
transition: transform 0.2s ease, box-shadow 0.2s ease;
align-self: stretch;
justify-self: center;
width: min(100%, 360px);
}
.featured-pub__cover:hover {
transform: translateY(-3px);
}
.featured-pub__cover-inner {
position: relative;
background: #0d2330;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
aspect-ratio: 3 / 4;
padding: 1.6rem 1.5rem;
display: grid;
grid-template-rows: auto auto 1fr auto;
gap: 0.7rem;
box-shadow:
0 18px 36px -16px rgba(0,0,0,0.45),
0 4px 12px -4px rgba(0,0,0,0.3);
overflow: hidden;
}
.featured-pub__cover-inner::after {
/* Yellow accent stripe at the bottom of the cover. */
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 6px;
background: var(--gopa-yellow, #FCC200);
}
.featured-pub__cover-logo {
font-weight: 900;
font-size: 1.8rem;
letter-spacing: 0.03em;
color: var(--gopa-yellow, #FCC200);
}
.featured-pub__cover-tagline {
font-family: 'Inter', 'Lato', sans-serif;
font-size: 0.7rem;
line-height: 1.2;
font-weight: 300;
color: rgba(255,255,255,0.9);
display: block;
}
.featured-pub__cover-tagline em {
font-style: italic;
display: inline-block;
margin-right: 0.15em;
}
.featured-pub__cover-tagline strong {
display: block;
font-weight: 900;
font-style: italic;
color: var(--gopa-yellow, #FCC200);
margin-top: 0.05em;
}
.featured-pub__cover-type {
align-self: end;
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.18em;
color: var(--gopa-yellow, #FCC200);
text-transform: uppercase;
margin-bottom: 0.3rem;
}
.featured-pub__cover-title {
align-self: end;
font-size: clamp(1.05rem, 2vw, 1.3rem);
font-weight: 900;
font-style: italic;
line-height: 1.15;
color: #fff;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.featured-pub__cover-pages {
font-size: 0.65rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
align-self: end;
margin-bottom: 0.4rem;
}
/* ---------- Sector rail (sector pages + business-area subpages) ---------- */
.sector-side { position: sticky; top: 6rem; }
.sector-side__lead { font-size: 0.9rem; color: var(--ink-muted); margin: 0.5rem 0 1.1rem; line-height: 1.5; }
/* Compact contact rows: small round portrait, name / role / email.
One shared card keeps the rail quiet next to the intro prose. */
.sector-side__card {
background: #fff;
border: 1px solid #e3e6ea;
border-radius: 16px;
padding: 0.35rem 1.15rem;
box-shadow: 0 2px 8px rgba(8, 26, 36, 0.05);
}
.sector-contact {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.9rem;
align-items: center;
padding: 1rem 0;
}
.sector-contact + .sector-contact { border-top: 1px solid #eef1f4; }
.sector-contact__avatar {
width: 3.5rem; height: 3.5rem;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: #e7ebef;
display: flex; align-items: center; justify-content: center;
}
.sector-contact__avatar img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 22%;
}
.sector-contact__initials { font-weight: 800; font-size: 0.95rem; color: var(--com-dark-black, #081A24); }
.sector-contact__who { display: grid; gap: 0.12rem; min-width: 0; }
.sector-contact__name { font-weight: 800; font-size: 0.95rem; color: var(--ink); line-height: 1.25; }
.sector-contact__role { font-size: 0.8rem; color: var(--ink-muted); line-height: 1.35; }
/* People show name-only with a quiet envelope link; the visible role
line and the written-out address were dropped (Comms/Friederike,
Aug 2026). */
.sector-contact__mail {
display: inline-flex; align-items: center; justify-content: center;
width: 2.1rem; height: 2.1rem; border-radius: 50%;
color: var(--ink-muted); background: #f4f6f9; border: 1px solid #e3e6ea;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.sector-contact__mail:hover {
color: var(--com-dark-black, #081A24);
background: var(--gopa-yellow-soft, #FFF4CC);
border-color: var(--gopa-yellow, #FCC200);
}
.sector-contact__mail svg { display: block; }
/* --- Read-more fold (shared: sector intros, About narrative) --- */
.sector-more { margin-top: 1rem; }
.sector-more__head { display: inline-flex; align-items: center; gap: 0.45rem; list-style: none; cursor: pointer; user-select: none;
color: #6b5a00; background: var(--gopa-yellow-soft, #FFF4CC); border: 1px solid #F5E6A0;
padding: 0.38rem 0.85rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sector-more__head::-webkit-details-marker { display: none; }
.sector-more__head::marker { display: none; content: ''; }
.sector-more__chevron { width: 11px; height: 7px; transition: transform 0.18s ease; }
.sector-more[open] > .sector-more__head .sector-more__chevron { transform: rotate(180deg); }
.sector-more__body { margin-top: 1rem; }
/* --- Job-board rows (shared: project / regional-office / HQ vacancy boards) --- */
.jobs-table {
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 6px rgba(8, 26, 36, 0.05);
overflow: hidden;
}
.job-row {
display: grid;
grid-template-columns: clamp(6rem, 12vw, 9rem) clamp(6.5rem, 12vw, 9rem) 1fr auto;
align-items: center;
gap: 0.6rem 1.25rem;
padding: 0.85rem 1.4rem;
text-decoration: none;
color: inherit;
transition: background 0.15s ease;
}
.job-row:hover { background: #f9fafb; }
.job-row[hidden] { display: none; }
/* Dividers only between *visible* rows: after filtering, the first shown
row must not carry a top border even if it is not :first-child. */
.job-row:not([hidden]) ~ .job-row:not([hidden]) { border-top: 1px solid #ebeef2; }
.job-row__place {
font-size: 0.82rem; font-weight: 600; color: var(--ink-muted); line-height: 1.35;
}
.job-row__deadline { display: grid; line-height: 1.35; }
.job-row__deadline-label {
font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em;
color: var(--ink-muted);
}
.job-row__deadline-date { font-size: 0.82rem; font-weight: 700; color: var(--ink-body); white-space: nowrap; }
.job-row__main { min-width: 0; }
.job-row__title {
display: block;
font-size: 0.98rem; font-weight: 800; line-height: 1.3; color: var(--ink);
}
.job-row:hover .job-row__title {
text-decoration: underline;
text-decoration-color: var(--gopa-yellow);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.job-row__meta {
display: block; margin-top: 0.15rem;
font-size: 0.78rem; color: var(--ink-muted);
}
/* Yellow outline in the resting state so the pill reads as a button on the
white table surface (Comms/Inke, Aug 2026); the whole row filling it in
on hover. */
.job-row__cta {
justify-self: end;
display: inline-flex; align-items: center; gap: 0.35rem;
border: 2px solid var(--gopa-yellow); border-radius: 999px;
padding: 0.26rem 0.8rem;
font-size: 0.78rem; font-weight: 700; white-space: nowrap;
color: var(--ink);
transition: background 0.15s ease, border-color 0.15s ease;
}
.job-row:hover .job-row__cta,
.job-row:focus-visible .job-row__cta {
background: var(--gopa-yellow); border-color: var(--gopa-yellow);
}
.job-row__arrow { transition: transform 0.15s ease; }
.job-row:hover .job-row__arrow { transform: translateX(2px); }
@media (max-width: 719px) {
.job-row {
grid-template-columns: 1fr auto;
grid-template-areas:
'place deadline'
'main main';
row-gap: 0.4rem;
padding: 0.95rem 1.1rem;
}
.job-row__place { grid-area: place; }
.job-row__deadline { grid-area: deadline; text-align: right; }
.job-row__main { grid-area: main; }
.job-row__cta { display: none; }
}
/* =========================================================
LARGE SCREENS – built-in "browser zoom" for big monitors
At 100% zoom on a 1440p/4K monitor the site renders as a narrow
band of small type in a sea of whitespace: every clamp() ceiling
is calibrated for ~1500px viewports and the 1280px container fills
barely half the screen. Root-level zoom scales the entire page –
global and page-scoped styles, px and rem alike – exactly like
manual browser zoom. (The e-brochure solved this with a root
font-size bump instead; that works there because its type is all
rem-based, while this stylesheet's px-heavy ramp would not move.)
Viewport units are zoom-adjusted per the standardized behavior,
so the 90vh hero still spans the screen; older browsers ignore
zoom entirely and keep today's compact rendering.
Width AND height must both hold, mirroring the e-brochure's tiers:
standard 1920×1080 office monitors and 2560×1080 ultrawides keep
the layout they were designed on.
========================================================= */
/* Viewport units are NOT rescaled by zoom (a 90vh box renders at
90vh × zoom of the screen), so any rule that must stay viewport-
bound divides by --screen-zoom to get back to true screen size. */
@media (min-width: 1900px) and (min-height: 1150px) {
html { zoom: 1.1875; } /* = 19px root, the e-brochure's stage 1 */
:root { --screen-zoom: 1.1875; }
}
@media (min-width: 2300px) and (min-height: 1350px) {
html { zoom: 1.375; } /* = 22px root, stage 2 for 1440p/4K */
:root { --screen-zoom: 1.375; }
}