* { padding: 0; margin: 0; border: 0; box-sizing: border-box; accent-color: var(--accent); }
*::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, 1.05vw, 20px); scroll-behavior: smooth; overscroll-behavior: none; overflow-x: clip; }
body { font-size: var(--font-size-body); color: var(--main-color); font-family: var(--primary-font); font-weight: var(--font-regular); background: var(--background-color); line-height: var(--line-height-regular); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
p a { color: var(--accent); }
p a:hover { color: var(--accent-hover); text-decoration: underline; }
ul { list-style-type: none; }
p { margin-bottom: 1.4em; }
p:last-of-type { margin-bottom: 0; }
br { margin:0; height: 0; }
strong, em { font-style: normal; font-weight: var(--font-regular); }
p strong { font-weight: var(--font-bold); }
p em { font-style: italic; }
fieldset legend { display: none; }
address { font-style: normal; }

:root {
    /* Fonts */
    --primary-font: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --header-font: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* Font weights */
    --font-regular: 400;
    --font-semibold: 600;
    --font-bold: 700;
    /* Font sizes — fixed rems only (design px ÷ 20). Responsiveness comes from the clamp() on html font-size. */
    --font-size-display: 4.8rem;    /* 96px — hero statement / editorial */
    --font-size-hero: 4rem;         /* 80px — immersive / cinematic hero */
    --font-size-h1: 3.5rem;         /* 70px */
    --font-size-h2: 2.7rem;         /* 54px */
    --font-size-h3: 2.1rem;         /* 42px */
    --font-size-h4: 1.65rem;        /* 33px */
    --font-size-h5: 1.3rem;         /* 26px */
    --font-size-h6: 1.05rem;        /* 21px */
    --font-size-lead: 0.9rem;       /* 18px */
    --font-size-body: 0.8rem;       /* 16px */
    --font-size-small: 0.7rem;      /* 14px */
    --font-size-tiny: 0.65rem;      /* 13px */
    --font-size-micro: 0.6rem;      /* 12px */
    /* Colors — Phanta palette */
    --my-white: #FFFFFF;
    --my-black: #000000;
    --my-ink: #111417;
    --my-gray-50: #F7F9FB;
    --my-gray-100: #EEF1F4;
    --my-gray-200: #E0E5EA;
    --my-gray-300: #C7CED6;
    --my-gray-400: #9AA4AF;
    --my-gray-500: #6B7681;
    --my-gray-600: #4A545E;
    --my-gray-700: #333B43;
    --my-blue: #008FC2;             /* deep / logo blue — primary accent */
    --my-blue-hover: #0079A6;
    --my-blue-press: #026185;
    --my-sky: #68BEDD;              /* light sky blue — secondary accent */
    --my-blue-900: #0C3A4F;         /* shadow tint */
    /* Semantic */
    --main-color: var(--my-ink);
    --background-color: var(--my-white);
    --text-body: var(--my-gray-700);
    --text-muted: var(--my-gray-500);
    --text-faint: var(--my-gray-400);
    --surface-subtle: var(--my-gray-50);
    --surface-inverse: var(--my-ink);
    --border-subtle: var(--my-gray-200);
    --border-default: var(--my-gray-300);
    --accent: var(--my-blue);
    --accent-hover: var(--my-blue-hover);
    /* Color scheme (drives forms + schemed sections) */
    --scheme-primary: var(--my-ink);
    --scheme-background: var(--my-white);
    /* Dark overlays for hero imagery */
    --hero-gradient-left: linear-gradient(90deg, rgba(9,12,15,0.9) 0%, rgba(9,12,15,0.5) 50%, rgba(9,12,15,0.2) 100%);
    --hero-gradient-center: linear-gradient(180deg, rgba(9,12,15,0.15) 0%, rgba(9,12,15,0.15) 45%, rgba(9,12,15,0.82) 100%);
    /* Line heights */
    --line-height-tight: 0.98;
    --line-height-small: 1.1;
    --line-height-regular: 1.5;
    --line-height-large: 1.65;
    /* Letter spacing */
    --ls-display: -0.03em;
    --ls-heading: -0.025em;
    --ls-label: 0.14em;
    --ls-tagline: 0.22em;
    /* Widths */
    --gutter-side: 1.5rem;                               /* 24px */
    --gutter-top: 1rem;
    --max-width: 77.5rem;                                /* 1240px */
    --max-width-ultra-wide: 120rem;
    --max-width-narrow: 46rem;
    --width: calc(100% - calc(var(--gutter-side) * 2));
    --gap: 2rem;
    --half-gap: calc(var(--gap) / 2);
    /* Section rhythm */
    --section-pad: clamp(3.25rem, 8vh, 7rem);
    --margin: var(--margin-y) auto;
    --margin-y: 4rem;
    --header-height: 4.75rem;
    /* Spacing scale (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    /* Transitions */
    --my-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --my-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 400ms;
    /* Shadows — cool blue-black tint */
    --shadow-xs: 0 1px 2px rgba(12, 58, 79, 0.06);
    --shadow-sm: 0 1px 3px rgba(12, 58, 79, 0.08), 0 1px 2px rgba(12, 58, 79, 0.06);
    --shadow-md: 0 4px 12px rgba(12, 58, 79, 0.10);
    --shadow-lg: 0 12px 32px rgba(12, 58, 79, 0.14);
    --shadow-card: 0 6px 20px rgba(12, 58, 79, 0.05);
    --shadow-glow: 0 0 40px rgba(104, 190, 221, 0.45);
    /* Borders */
    --border-radius: 0.625rem;                           /* 10px — cards, images */
    --border-radius-md: 0.375rem;                        /* 6px — buttons, inputs */
    --border-radius-pill: 999px;
    /* Logos */
    --logo-height: 1.75rem;
}

/* =========================================================== */
/* ========================= HEADERS ========================= */
/* =========================================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: var(--font-bold); font-family: var(--header-font); line-height: var(--line-height-small); letter-spacing: var(--ls-heading); margin-bottom: 0.4em; }
.display { font-size: var(--font-size-display); line-height: var(--line-height-tight); letter-spacing: var(--ls-display); }
.hero-size { font-size: var(--font-size-hero); line-height: 1.03; }
h1, .h1 { font-size: var(--font-size-h1); }
h2, .h2 { font-size: var(--font-size-h2); }
h3, .h3 { font-size: var(--font-size-h3); }
h4, .h4 { font-size: var(--font-size-h4); }
h5, .h5 { font-size: var(--font-size-h5); }
h6, .h6 { font-size: var(--font-size-h6); }
.accent { color: var(--my-sky); }
.eyebrow { font-size: var(--font-size-micro); font-weight: var(--font-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }

/* =========================================================== */
/* ========================= GENERAL ========================= */
/* =========================================================== */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
header, main, footer { max-width: 100%; width: 100%; margin: 0 auto; position: relative; min-width: 0; }
main { padding-top: var(--header-height); }
.container { max-width: var(--max-width); width: var(--width); margin: 0 auto; position: relative; }
.container.narrow { max-width: var(--max-width-narrow); }
section { position: relative; background: var(--background-color); }
section .container { padding-block: var(--section-pad); }
section.subtle { background: var(--surface-subtle); }

.lead { font-size: var(--font-size-lead); line-height: var(--line-height-large); color: var(--text-body); }
.muted { color: var(--text-muted); }

/* IMAGES */
figure, picture { position: relative; display: block; }
picture { display: flex; }
picture.abs img, .media.abs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
img, video { width: 100%; height: auto; display: block; user-select: none; }

/* SELECTION */
*::selection { background: var(--accent); color: var(--my-white); }

/* NO VISIBLE SCROLLBAR */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }

/* BUTTONS */
button { all: unset; box-sizing: border-box; touch-action: manipulation; text-align: center; }
button, label { cursor: pointer; user-select: none; }
.btn { display: inline-flex; align-items: center; gap: 0.55rem; background: var(--accent); color: var(--my-white); font-weight: var(--font-bold); font-size: var(--font-size-body); padding: 0.9rem 1.6rem; border-radius: var(--border-radius-md); transition: background var(--dur-base) var(--my-ease), transform var(--dur-base) var(--my-ease); }
.btn:hover { background: var(--accent-hover); }
.btn svg { width: 1.1em; height: 1.1em; }
.btn.secondary { background: transparent; color: var(--main-color); border: 1px solid var(--border-default); }
.btn.secondary:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn.ink { background: var(--my-ink); } .btn.ink:hover { background: #000; }

/* =========================================================== */
/* ========================= HEADER ========================== */
/* =========================================================== */
header { position: fixed; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(2rem); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-subtle); }
header .container { padding-block: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; min-height: var(--header-height); flex-wrap: wrap; }
#skiplink { position: fixed; left: 50%; top: -40rem; transform: translate(-50%, -50%); font-size: 1rem; background: var(--background-color); opacity: 0; pointer-events: none; text-align: center; padding: 0.5rem; z-index: 60; }
#skiplink:focus { top: 4rem; opacity: 1; pointer-events: all; }

/* Brand lockup */
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand img { height: var(--logo-height); width: auto; }
.brand .wordmark { font-weight: var(--font-bold); font-size: 1.125rem; letter-spacing: -0.01em; color: var(--my-ink); }
.brand .wordmark span { color: var(--accent); }

/* Desktop nav / contact */
nav#desktop > ul { display: flex; align-items: center; gap: 1rem; font-size: var(--font-size-small); flex-wrap: wrap; }
nav#desktop > ul > li > a { display: inline-flex; }
nav#desktop .menu-link { font-weight: var(--font-semibold); color: var(--my-gray-600); padding: 0.4em 0; }
nav#desktop .menu-link:hover, nav#desktop li.active .menu-link { color: var(--accent); }
.contact-link { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--my-gray-600); font-weight: var(--font-semibold); }
.contact-link:hover { color: var(--accent); }
.contact-link svg { width: 0.95rem; height: 0.95rem; }
.lang-toggle { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); padding: 0.4rem 0.75rem; font-size: var(--font-size-tiny); font-weight: var(--font-bold); color: var(--my-ink); transition: all var(--dur-fast); }
.lang-toggle:hover { border-color: var(--accent); color: var(--accent); }
.lang-toggle .flag { position: relative; width: 1.1rem; height: 1.1rem; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(17,20,23,0.12); }
.lang-toggle .flag svg { position: absolute; top: 50%; left: 50%; width: auto; height: 100%; min-width: 100%; transform: translate(-50%, -50%); display: block; }

/* Burger */
button.burger { display: none; position: relative; width: 1.5rem; height: 1.1rem; flex-direction: column; justify-content: space-between; z-index: 60; }
button.burger > span { width: 100%; height: 2px; background: var(--my-ink); transition: 300ms var(--my-ease); border-radius: 2px; }
header.open button.burger span:nth-of-type(1) { transform: translateY(0.53rem) rotate(45deg); }
header.open button.burger span:nth-of-type(2) { opacity: 0; }
header.open button.burger span:nth-of-type(3) { transform: translateY(-0.53rem) rotate(-45deg); }

/* Mobile nav */
nav#mobile { position: fixed; top: calc(var(--header-height) + 1px); transform: translateX(100%); transition: transform 400ms var(--my-ease); background: var(--background-color); padding: 2rem var(--gutter-side); display: flex; flex-direction: column; gap: 1.25rem; z-index: 40; visibility: hidden; height: 100vh; width: 100%; }
header.open nav#mobile { transform: none; visibility: visible; }
nav#mobile > ul { display: flex; flex-direction: column; gap: 0.5rem; }
nav#mobile a { font-size: 1.4rem; font-weight: var(--font-bold); padding: 0.4rem 0; }
nav#mobile .mobile-contact { margin-top: auto; display: flex; flex-direction: column; gap: 0.75rem; font-size: var(--font-size-small); color: var(--text-muted); }
nav#mobile .mobile-contact .contact-link { color: var(--my-gray-600); }

/* =========================================================== */
/* ========================= FOOTER ========================== */
/* =========================================================== */
footer { background: var(--surface-inverse); color: rgba(255,255,255,0.55); }
footer .container { padding-block: 2.1rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.9rem; align-items: center; font-size: var(--font-size-small); }
footer .footer-brand { font-weight: var(--font-bold); color: var(--my-white); letter-spacing: -0.01em; }
footer .footer-contact a { color: var(--my-sky); }
footer .footer-contact a:hover { text-decoration: underline; }
footer nav.footer-legal ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
footer nav.footer-legal a:hover { color: var(--my-white); }
footer .odf-credit a { color: rgba(255,255,255,0.4); font-size: var(--font-size-tiny); }
footer .odf-credit a:hover { color: rgba(255,255,255,0.7); }

ul.socials { display: flex; align-items: center; gap: 0.4rem; --icon-size: 1.4rem; }
ul.socials li a { width: var(--icon-size); height: var(--icon-size); display: flex; align-items: center; color: var(--my-sky); }
ul.socials li svg { width: 100%; height: 100%; }

/* =========================================================== */
/* ========================== PROSE ========================== */
/* =========================================================== */
section.standard article.prose { max-width: var(--max-width-narrow); margin-inline: auto; }
.prose > * + * { margin-top: 1.2em; }
.prose p { color: inherit; line-height: var(--line-height-large); }
.prose ul, .prose ul ul ul { list-style: disc; }
.prose ul ul, .prose ul ul ul ul { list-style: circle; }
.prose :is(ol, ul) { padding-left: 1.1em; }
.prose blockquote { font-style: italic; font-size: 1.2rem; padding-left: 0.9em; border-left: 3px solid var(--accent); color: var(--text-body); }
.prose a:not(.btn) { color: var(--accent); text-decoration: underline; }
.prose > * strong { font-weight: var(--font-bold); }
.prose > * em { font-style: italic; }

/* =========================================================== */
/* ====================== HERO (shared) ===================== */
/* =========================================================== */
.hero .accent, .hero-immersive .accent, .hero-cinematic .accent { color: var(--my-sky); }
section[class*="hero-"] { overflow: hidden; }
section[class*="hero-"] :is(h1, h2) { text-wrap: balance; }

/* =========================================================== */
/* ==================== HERO — IMMERSIVE ==================== */
/* =========================================================== */
section.hero-immersive { min-height: clamp(540px, 84vh, 860px); display: flex; align-items: flex-end; color: var(--my-white); }
section.hero-immersive .media, section.hero-immersive picture { position: absolute; inset: 0; height: 100%; }
section.hero-immersive img { object-fit: cover;}
section.hero-immersive::after { content: ""; position: absolute; inset: 0; background: var(--hero-gradient-left); pointer-events: none; }
section.hero-immersive .container { z-index: 1; padding-block: 0 clamp(2.75rem, 8vh, 5.5rem); pointer-events: none; }
section.hero-immersive h1 { color: var(--my-white); max-width: 18ch; }
section.hero-immersive .lead { color: rgba(255,255,255,0.82); max-width: 46ch; margin: 1.4rem 0 2rem; }
section.hero-immersive .btn { pointer-events: auto; }

/* =========================================================== */
/* ==================== HERO — CINEMATIC ==================== */
/* =========================================================== */
section.hero-cinematic { min-height: clamp(560px, 88vh, 900px); display: flex; align-items: flex-end; text-align: center; color: var(--my-white); }
section.hero-cinematic .media, section.hero-cinematic picture { position: absolute; inset: 0; height: 100%; }
section.hero-cinematic img { object-fit: cover;}
section.hero-cinematic::after { content: ""; position: absolute; inset: 0; background: var(--hero-gradient-center); pointer-events: none; }
section.hero-cinematic .container { z-index: 1; display: flex; flex-direction: column; align-items: center; padding-block: 0 clamp(2.75rem, 7vh, 5rem); }
section.hero-cinematic .container > * { max-width: 100%; }
section.hero-cinematic h1 { color: var(--my-white); max-width: 20ch; }
section.hero-cinematic .lead { color: rgba(255,255,255,1); max-width: 52ch; margin-bottom: 5rem; }
section.hero-cinematic .lead p { color: inherit; }
.float-arrow { margin-top: 2.5rem; color: var(--my-white); animation: pvFloat 2.4s ease-in-out infinite; }
.float-arrow svg { width: 1.75rem; height: 1.75rem; }
@keyframes pvFloat { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(8px); opacity: 1; } }

/* =========================================================== */
/* ==================== HERO — STATEMENT ==================== */
/* =========================================================== */
    section.hero-statement { border-bottom: 1px solid var(--border-subtle); }
    section.hero-statement .container { padding-block: clamp(3rem, 8vh, 6rem) clamp(2rem, 5vh, 3.5rem); }
    section.hero-statement h1 { max-width: 15ch; }
    section.hero-statement .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 2rem; align-items: end; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
    section.hero-statement .trust-side { display: flex; flex-direction: column; gap: 0.55rem; font-size: var(--font-size-small); color: var(--text-muted); }
    section.hero-statement .trust-side .strong { color: var(--my-ink); font-weight: var(--font-bold); }
    section.hero-statement .hero-wide-image { width: 100%; height: clamp(260px, 50vh, 540px); }
    section.hero-statement .hero-wide-image picture { height: 100%; }

/* =========================================================== */
/* ==================== HERO — EDITORIAL ==================== */
/* =========================================================== */
    section.hero-editorial .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
    section.hero-editorial h1 { max-width: 14ch; }
    section.hero-editorial .lead { margin-top: 1.4rem; }
    section.hero-editorial .editorial-image { aspect-ratio: 4 / 5; border-radius: var(--border-radius); overflow: hidden; }
    section.hero-editorial .btn { margin-top: 1rem; }
@media only screen and (max-width: 960px) {
    section.hero-editorial .container { grid-template-columns: 1fr; }
    section.hero-editorial .editorial-image { max-width: 30rem; }
}

/* =========================================================== */
/* ========================= MISSION ========================= */
/* =========================================================== */
section.mission .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
section.mission h2 { max-width: 20ch; }
section.mission .mission-image { aspect-ratio: 4 / 5; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-lg); }
@media only screen and (max-width: 960px) {
    section.mission .container { grid-template-columns: 1fr; }
    section.mission .mission-image { max-width: 30rem; }
}

/* =========================================================== */
/* ======== CAPABILITIES (alternating rows + gallery) ======== */
/* =========================================================== */
section.capabilities .intro { max-width: 54ch; margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.capability-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.capability-row + .capability-row { margin-top: clamp(2.5rem, 5vh, 4.5rem); }
.capability-row.reverse .cap-gallery { order: 2; }
.capability-row .cap-gallery { border-radius: var(--border-radius); overflow: hidden; }
.capability-row .cap-text { max-width: 25rem; margin-inline: auto; }
@media only screen and (max-width: 960px) {
    .capability-row { grid-template-columns: 1fr; gap: 1.5rem; }
    .capability-row.reverse .cap-gallery { order: 0; }
}

/* =========================================================== */
/* ======================= TRUST STRIP ======================= */
/* =========================================================== */
section.trust-strip { border-block: 1px solid var(--border-subtle); }
section.trust-strip .container { padding-block: clamp(2rem, 4vh, 2.75rem); }
section.trust-strip .trust-line { text-align: center; font-size: var(--font-size-tiny); letter-spacing: 0.02em; color: var(--text-faint); margin-bottom: 1.5rem; }
section.trust-strip .logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; }
section.trust-strip .logos .logo { width: 150px; height: 54px; display: flex; align-items: center; justify-content: center; opacity: 0.75; }
section.trust-strip .logos .logo picture, section.trust-strip .logos .logo img { width: 100%; height: 100%; object-fit: contain; }

/* =========================================================== */
/* ===================== SERVICES CARDS ====================== */
/* =========================================================== */
section.services h2 { max-width: 22ch; }
section.services .intro { max-width: 54ch; margin: 0.75rem 0 2.5rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1.1rem; }
.card { background: var(--my-white); border: 1px solid var(--border-subtle); border-radius: 0.75rem; padding: 1.6rem; box-shadow: var(--shadow-card); }
.card .card-icon { display: block; color: var(--accent); width: 1.6rem; height: 1.6rem; }
.card .card-icon svg { width: 100%; height: 100%; }
.card :is(h1,h2,h3,h4,h5,h6) { font-size: var(--font-size-h6); margin: 1rem 0 0.5rem; }
.card p { font-size: var(--font-size-small); line-height: 1.55; color: var(--text-muted); margin: 0; }

/* =========================================================== */
/* ======================= CASE STUDY ======================== */
/* =========================================================== */
section.case-study .case-head { max-width: 60ch; margin-bottom: 2.5rem; }
section.case-study .case-head .venue { display: block; color: var(--accent); font-weight: var(--font-bold); margin-bottom: 0.5rem; }
section.case-study .case-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2.5rem; }
section.case-study .case-gallery .g-item { aspect-ratio: 4 / 3; border-radius: var(--border-radius); overflow: hidden; }
section.case-study .case-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
section.case-study .case-cols .label { display: block; font-size: var(--font-size-micro); font-weight: var(--font-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; }
section.case-study .case-cols :is(h1,h2,h3,h4,h5,h6) { font-size: var(--font-size-h6); margin-bottom: 0.5rem; }
@media only screen and (max-width: 960px) {
    section.case-study .case-gallery { grid-template-columns: 1fr; }
    section.case-study .case-cols { grid-template-columns: 1fr; }
}

/* =========================================================== */
/* ====================== FORM SECTION ======================= */
/* =========================================================== */
section.form-section { background: var(--surface-subtle); scroll-margin-top: var(--header-height); }
section.form-section .container { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
section.form-section .form-intro h2 { max-width: 16ch; }
section.form-section .form-intro .lead { margin-top: 1rem; max-width: 42ch; }
@media only screen and (max-width: 960px) {
    section.form-section .container { grid-template-columns: 1fr; }
}

/* =========================================================== */
/* ====================== QUICK CAPTURE ====================== */
/* =========================================================== */
section.quick-capture { background: var(--accent); color: var(--my-white); }
section.quick-capture .container { text-align: center; max-width: 44rem; }
section.quick-capture h2 { color: var(--my-white); }
section.quick-capture p { color: rgba(255,255,255,0.9); margin-bottom: 1.75rem; }
section.quick-capture .qc-form { display: flex; gap: 0.6rem; max-width: 30rem; margin: 0 auto; flex-wrap: wrap; }
section.quick-capture input[type="email"] { flex: 1 1 12rem; background: var(--my-white); border: 1px solid transparent; border-radius: var(--border-radius-md); padding: 0.85rem 1rem; font: inherit; color: var(--my-ink); }
section.quick-capture input[type="email"]:focus { outline: none; border-color: var(--my-blue-900); }
section.quick-capture .btn { background: var(--my-ink); }
section.quick-capture .btn:hover { background: #000; }
section.quick-capture .qc-success { display: none; align-items: center; justify-content: center; gap: 0.6rem; font-weight: var(--font-bold); }
section.quick-capture.sent .qc-form { display: none; }
section.quick-capture.sent .qc-success { display: flex; }
section.quick-capture .qc-success svg { width: 1.4rem; height: 1.4rem; }

/* =========================================================== */
/* ========================== FORMS ========================== */
/* =========================================================== */
form.custom { --form-columns: 2; --form-gap: 1em; --form-main-color: var(--scheme-primary); --form-input-background-color: var(--scheme-background); --form-padding-x: .75em; --form-padding-y: .7em; --form-padding: var(--form-padding-y) var(--form-padding-x); --form-border-color: var(--border-default); --form-border-width: 1px; --form-border-radius: var(--border-radius-md); --form-label-color: var(--text-muted); --form-label-border-radius: 0.4em; --form-label-background-color: var(--scheme-background); --form-label-asterisk-color: var(--accent); --form-label-transform-distance: 90%; --form-check-border-radius: .2em; --form-color-focus: var(--accent); --form-color-error: #D24545; --form-transition: 250ms ease; }
/* CARD SHELL */
form.custom { position: relative; max-width: 50rem; margin: 0 auto; background: var(--scheme-background); border: 1px solid var(--border-subtle); border-radius: var(--border-radius); box-shadow: var(--shadow-md); padding: clamp(1.5rem, 3vw, 2.25rem); }
form.custom fieldset { display: grid; grid-template-columns: repeat(var(--form-columns), 1fr); grid-gap: var(--form-gap); }
form.custom fieldset > div { position: relative; }

/* INPUTS */
form.custom :is(textarea, input, select) { padding: var(--form-padding); font-family: var(--primary-font); font-size: var(--font-size-body); color: var(--form-main-color); width: 100%; transition: border var(--form-transition), box-shadow var(--form-transition); border: var(--form-border-width) solid var(--form-border-color); background: var(--form-input-background-color); border-radius: var(--form-border-radius); }
form.custom :is(textarea, input, select):focus-visible { outline: none; border-color: var(--form-color-focus); box-shadow: 0 0 0 3px rgba(0,143,194,0.15); }
form.custom :is(textarea, input, select)::placeholder { opacity: 0; }
form.custom .normal input { color: var(--form-main-color); }
form.custom div.double, form.custom small, form.custom small ~ *, form.custom .consent, form.custom > fieldset > button { grid-column: -1/1; }

/* TEXTAREA */
form.custom .normal textarea { min-width: 100%; max-width: 100%; resize: none; }

/* DIVIDER */
form.custom .divider:not(:first-of-type) { margin-top: 2em; }
form.custom .divider h2 { font-size: var(--font-size-h5); }

/* LABEL (floating) */
form.custom .normal label { position: absolute; top: calc(var(--form-padding-y) - .1em); left: var(--form-padding-x); opacity: .85; pointer-events: none; transform-origin: left; transition: var(--form-transition); white-space: nowrap; color: var(--form-label-color); border-radius: var(--form-label-border-radius); }
form.custom .normal :is(textarea:is(:focus,:not(:placeholder-shown)), input:is(:focus, :not(:placeholder-shown))) + label, form.custom .select[data-active=true] label { transform: translate(calc(var(--form-padding-x) * -.5), calc(var(--form-label-transform-distance) * -1)) scale(0.7); padding: 0 .2em 0 0.5em; opacity: 1; background: var(--form-label-background-color); max-width: unset; }
form.custom .normal :is(textarea:is(:focus,:not(:placeholder-shown)), input:is(:focus, :not(:placeholder-shown))):not([required]) + label, form.custom .select[data-active=true] select:not([required]) + label { padding: 0 .5em; }

/* ASTERISK */
form.custom .normal :is(textarea, input, select)[required] + label::after { content: "*"; display: inline-block; margin-left: 0.15em; color: var(--form-label-asterisk-color); transition: var(--form-transition); }
form.custom .normal :is(:is(input, textarea):is(:focus, :not(:placeholder-shown)), select[data-active=true]) + label:after { opacity: 0; }

/* EMAIL VALIDATION */
form.custom input[type="email"]:not(:focus, :placeholder-shown):invalid + label::after { content: "Invalid"; display: inline-block; margin-left: 0.5em; padding: 0 0.5em; color: var(--form-color-error); }

/* SELECTS */
form.custom .select { position: relative; display: flex; align-items: center; min-height: 2.6em; background: var(--form-input-background-color); border: var(--form-border-width) solid var(--form-border-color); border-radius: var(--form-border-radius); }
form.custom .select select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; background: transparent; border: none; cursor: pointer; }
form.custom .select span { position: absolute; top: var(--form-padding-y); left: var(--form-padding-x); pointer-events: none; transform-origin: left; transition: var(--form-transition); white-space: nowrap; color: var(--form-label-color); font-weight: var(--font-semibold); opacity: 0; }
form.custom .select[data-active=true] span { opacity: 1; }
form.custom .select::before, form.custom .select::after { content: ""; height: 2px; top: 45%; width: .4em; position: absolute; transform: translate(40%, -.05em) rotate(var(--r, 45deg)) translateY(.18em); background: var(--form-main-color); right: calc(var(--form-padding-x) + .4em); border-radius: 100vmin; transition: background var(--form-transition); }
form.custom .select::after { --r: -45deg; }

/* MULTICHOICE / SINGLE CHOICE (chips) */
form.custom .field { flex-direction: column; }
form.custom .field p { margin-bottom: 0.5em; color: var(--form-label-color); }
form.custom .field ul { display: flex; flex-wrap: wrap; gap: .6em; }
form.custom .field ul li { position: relative; display: flex; color: var(--form-main-color); }
form.custom .field ul input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
form.custom .field ul input:focus-visible + label { outline: 3px solid var(--form-color-focus); }
form.custom .field ul label { margin: 0; padding: 0.5rem 0.9rem; border: 1px solid var(--form-border-color); border-radius: var(--border-radius-pill); font-weight: var(--font-semibold); color: var(--text-muted); transition: all var(--form-transition); }
form.custom .field ul label:hover { border-color: var(--form-color-focus); }
form.custom .field ul input:checked + label { background: var(--my-sky); border-color: var(--my-sky); color: var(--my-ink); }

/* CONSENT */
form.custom .consent { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--font-size-small); color: var(--text-muted); }
form.custom .consent input { width: .85rem; height: .85rem; margin-top: 0.1rem; }
form.custom .consent label { position: static; margin: 0; opacity: 1; pointer-events: auto; }

/* SUBMIT */
form.custom button.btn { justify-content: center; }

/* CAPTCHA NOTICE */
form.custom small { font-size: .7rem; opacity: .85; display: block; }
form.custom small a { text-decoration: underline; }
.grecaptcha-badge { visibility: hidden; }

/* SUCCESS STATE */
form.custom.sent fieldset, form.custom.sent small { display: none; }
form.custom .form-success { display: none; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: 1rem 0; }
form.custom.sent .form-success { display: flex; }
form.custom .form-success .check { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--my-sky); color: var(--my-ink); }
form.custom .form-success .check svg { width: 1.5rem; height: 1.5rem; }
input.gotcha { display: none !important; }
@media only screen and (max-width: 620px) {
    form.custom fieldset { grid-template-columns: 1fr; }
}

/* =========================================================== */
/* =================== GALLERY / CARROUSEL =================== */
/* =========================================================== */
.gallery { position: relative; }
.gallery .slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: var(--border-radius); }
.gallery .slide { flex: 0 0 100%; scroll-snap-align: start; }
.gallery .slide picture { aspect-ratio: 16 / 11; }
.gallery .slide img { height: 100%; object-fit: cover; }
.gallery.single .ctrl-btns, .gallery.single .dots { display: none; }
.gallery .ctrl-btns { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 0.75rem; pointer-events: none; }
.gallery .ctrl-btns button { pointer-events: auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(17,20,23,0.55); color: var(--my-white); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast); }
.gallery .ctrl-btns button:hover { background: rgba(17,20,23,0.8); }
.gallery .ctrl-btns svg { width: 1.1rem; height: 1.1rem; }
.gallery .dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.9rem; list-style: none; }
.gallery .dots li { width: 8px; height: 8px; border-radius: 999px; background: var(--border-default); transition: all var(--dur-base); }
.gallery .dots li[data-active="true"] { width: 22px; background: var(--accent); }

/* =========================================================== */
/* =========================== 404 =========================== */
/* =========================================================== */
section.not-found .container { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }

/* =========================================================== */
/* ================== COOKIE BANNER COLORS =================== */
/* =========================================================== */
section.odf__cookies.odf__cookies { --odf_main_color: var(--my-ink); --odf_background_color: var(--my-white); --odf_highlight_color: var(--accent); }

/* =========================================================== */
/* ==================== IN-VIEW ANIMATION ==================== */
/* =========================================================== */
/* Children of an .activate-children section cascade in; the .activate class
holds them in the hidden state until the in-view observer removes it. */
.activate-children > * { transition: transform 600ms var(--my-ease-out), opacity 600ms var(--my-ease-out); transition-delay: calc(var(--cascade, 0) * var(--own-delay, 90ms)); }
.activate-children.activate > * { transform: translateY(1.25rem); opacity: 0; }

/* ==================================================================== */
/* =================== GLOBAL MEDIA QUERIES (layout) ================== */
/* (section-specific responsive rules live with their section above)   */
/* ==================================================================== */
@media only screen and (max-width: 768px) {
:root { --gutter-side: 1.25rem; }
    nav#desktop { display: none; }
    button.burger { display: flex; }
    .brand .wordmark { font-size: 1rem; }
}

@media only screen and (max-width: 620px) {
    html { font-size: clamp(14px, 3.9vw, 17px); }
:root { --font-size-display: 2.6rem; --font-size-hero: 2.3rem; --font-size-h1: 2.2rem; --font-size-h2: 1.9rem; }
    section[class*="hero-"] :is(h1, h2) { text-wrap: pretty; width: 100%; overflow-wrap: break-word; }
    .contact-link .contact-text { display: none; }
    footer .container { flex-direction: column; align-items: flex-start; }
}

@media only screen and (max-width: 380px) {
    html { font-size: 3.7vw; }
}

/* =========================================================== */
/* ===================== REDUCED MOTION ====================== */
/* =========================================================== */
@media (prefers-reduced-motion) {
    .float-arrow { animation: none; }
    .activate { transition: none; opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}