/* Advisory N9. Design tokens and components from the design study in docs/design-notes.md.
   (docs/design-notes.md). Palette: black, white, five greys. Accent #F92525 only. */

/* Blauer Nue, supplied by Kevin on 25 October 2026. Nine weights, upright and italic. */
@font-face { font-family: "Blauer Nue"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/BlauerNue-Thin.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: italic; font-weight: 100; font-display: swap; src: url("../fonts/BlauerNue-Thin_Italic.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/BlauerNue-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: italic; font-weight: 200; font-display: swap; src: url("../fonts/BlauerNue-ExtraLight_Italic.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/BlauerNue-Light.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/BlauerNue-Light_Italic.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/BlauerNue-Regular.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/BlauerNue-Regular_Italic.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/BlauerNue-Medium.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/BlauerNue-Medium_Italic.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/BlauerNue-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/BlauerNue-SemiBold_Italic.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/BlauerNue-Bold.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/BlauerNue-Bold_Italic.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/BlauerNue-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/BlauerNue-ExtraBold_Italic.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/BlauerNue-Heavy.woff2") format("woff2"); }
@font-face { font-family: "Blauer Nue"; font-style: italic; font-weight: 900; font-display: swap; src: url("../fonts/BlauerNue-Heavy_Italic.woff2") format("woff2"); }

:root {
  --ease-collapse: cubic-bezier(.7, 0, .2, 1);
  --arrow-ne: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="square"><path d="M3 13L13 3M5 3h8v8"/></svg>');
  --font-sans: "Blauer Nue", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Blauer Nue", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --color-black: #010101;
  --color-white: #ffffff;
  --color-gray-800: #4d4d4d;
  --color-gray-600: #757575;
  --color-gray-500: #737373;
  --color-gray-400: #9d9d9d;
  --color-gray-200: #cccccc;
  --color-gray-100: #ebebeb;
  --color-accent: #F92525;
  --color-accent-hover: #b85a2c;
  --surface-10: rgba(1, 1, 1, 0.08);
  --surface-80: rgba(0, 0, 0, 0.8);

  /* Fluid type scale, copied from the template */
  --text-display-xl: clamp(6.25rem, 4.7717rem + 7.3913vw, 10.5rem);
  --text-display-lg: clamp(2.75rem, 0.9239rem + 9.1304vw, 8rem);
  --text-display-md: clamp(3.75rem, 2.9239rem + 4.1304vw, 6.125rem);
  --text-heading-lg: clamp(2rem, 1.0652rem + 4.6739vw, 4.6875rem);
  --text-heading-md: clamp(1.5rem, 0.7826rem + 3.587vw, 3.5625rem);
  --text-heading-sm: clamp(1.25rem, 0.7283rem + 2.6087vw, 2.75rem);
  --text-heading-xs: clamp(1.25rem, 0.9674rem + 1.413vw, 2.0625rem);
  --text-heading-2xs: 1.5rem;
  --text-body-lg: clamp(1.0625rem, 0.8668rem + 0.9783vw, 1.625rem);
  --text-body-md: clamp(0.875rem, 0.7663rem + 0.5435vw, 1.1875rem);
  --text-body-sm: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  --text-label: clamp(0.625rem, 0.6033rem + 0.1087vw, 0.6875rem);

  /* Spacing */
  --unit-sm: 12px; --unit-md: 20px; --unit-lg: 48px;
  --grid-margin: var(--unit-lg); --grid-gutter: var(--unit-md);
  --fluid-2xs: clamp(.375rem, .3315rem + .2174vw, .5rem);
  --fluid-xs: clamp(.5rem, .4565rem + .2174vw, .625rem);
  --fluid-sm: clamp(1rem, .8261rem + .8696vw, 1.5rem);
  --fluid-md: clamp(1.5rem, 1.3261rem + .8696vw, 2rem);
  --fluid-lg: clamp(2rem, 1.8261rem + .8696vw, 2.5rem);
  --fluid-xl: clamp(2.5rem, 2.1522rem + 1.7391vw, 3.5rem);
  --fluid-2xl: clamp(3.5rem, 2.7609rem + 3.6957vw, 5.625rem);
  --fluid-3xl: clamp(5.625rem, 4.3207rem + 6.5217vw, 9.375rem);
  --fluid-4xl: clamp(9.375rem, 8.288rem + 5.4348vw, 12.5rem);

  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px;

  /* Motion */
  --ease-power2-out: cubic-bezier(.215, .61, .355, 1);
  --ease-power4-out: cubic-bezier(.23, 1, .32, 1);
  --ease-expo-out: cubic-bezier(.19, 1, .22, 1);
  --ease: var(--ease-power4-out);
  --dur-fast: .2s; --dur: .4s; --dur-slow: .6s; --dur-slower: .8s; --dur-slowest: 1s;

  --z-header: 50; --z-menu: 200; --z-modal: 700;
  --header-h: 72px;
}
@media (max-width: 999px) { :root { --grid-margin: var(--unit-sm); } }

/* Reset and base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
html.has-smooth { scroll-behavior: auto; }
body { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--color-black); background: var(--color-white); overflow-x: clip; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 1000; }
.skip:focus { left: 8px; }
.container { padding-inline: var(--grid-margin); }
strong { font-weight: 700; }

/* Type ------------------------------------------------------------------- */
.label { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; line-height: 1.4; }
.display-xl { font-size: var(--text-display-xl); letter-spacing: -.03em; font-weight: 700; line-height: .85; }
.display-lg { font-size: var(--text-display-lg); letter-spacing: -.03em; font-weight: 700; line-height: .85; }
.display-md { font-size: var(--text-display-md); letter-spacing: -.03em; font-weight: 700; line-height: .85; }
.heading-lg { font-size: var(--text-heading-lg); letter-spacing: -.02em; font-weight: 700; line-height: .9; }
.heading-md { font-size: var(--text-heading-md); letter-spacing: -.02em; font-weight: 700; line-height: .95; }
.heading-sm { font-size: var(--text-heading-sm); letter-spacing: -.015em; font-weight: 700; line-height: 1; }
.heading-xs { font-size: var(--text-heading-xs); letter-spacing: -.015em; font-weight: 700; line-height: 1.05; }
.heading-2xs { font-size: var(--text-heading-2xs); letter-spacing: -.015em; font-weight: 700; line-height: 1; }
.body-lg { font-size: var(--text-body-lg); letter-spacing: -.02em; font-weight: 500; line-height: 1.15; }
.body-md { font-size: var(--text-body-md); letter-spacing: -.02em; font-weight: 500; line-height: 1.25; }
.body-sm { font-size: var(--text-body-sm); letter-spacing: -.01em; font-weight: 500; line-height: 1.35; }
@media (min-width: 700px) { .md\:display-xl { font-size: var(--text-display-xl); } }

.c-two-tone_rest { color: var(--color-gray-600); }
.theme-dark .c-two-tone_rest, .c-push .c-two-tone_rest { color: var(--color-gray-400); }
.c-eyebrow { display: block; color: var(--color-accent); margin-bottom: var(--fluid-sm); font-size: calc(var(--text-label) * 1.25); letter-spacing: .06em; }
.c-line { display: block; overflow: hidden; padding-bottom: .22em; margin-bottom: -.22em; }
.c-line .anim-text-item { display: block; }

/* Buttons ----------------------------------------------------------------- */
/* Buttons: a pill with the label on the left and a round arrow badge on the right. Grey at rest, black on hover; the badge inverts and the arrow grows. */
.c-button { --bg: var(--color-gray-100); --fg: var(--color-black); --hover-bg: var(--surface-80); --hover-fg: #fff; --badge: #fff; --badge-fg: var(--color-black); --hover-badge: #fff; --hover-badge-fg: var(--color-black); --padding-x: 20px; --padding-y: 8px; --icon-w: 32px; position: relative; display: inline-flex; color: var(--fg); isolation: isolate; cursor: pointer; transition: color var(--dur-slow) var(--ease); }
.c-button:hover, .c-button:focus-visible { color: var(--hover-fg); }
.c-button.-small { --padding-x: 14px; --padding-y: 6px; --icon-w: 26px; }
.c-button.-primary { --bg: var(--color-gray-100); }
.c-button.-secondary { --bg: transparent; }
.c-button.-secondary .c-button_bg { box-shadow: inset 0 0 0 1px var(--color-gray-200); }
.c-button.-white { --bg: #fff; --hover-bg: var(--color-gray-200); --hover-fg: var(--color-black); --badge: var(--color-black); --badge-fg: #fff; --hover-badge: var(--color-black); --hover-badge-fg: #fff; }
.c-button.-glass { --bg: rgba(255,255,255,.14); --fg: #fff; --hover-bg: #fff; --hover-fg: var(--color-black); --badge: #fff; --badge-fg: var(--color-black); --hover-badge: var(--color-black); --hover-badge-fg: #fff; }
.c-button_bg { position: absolute; inset: 0; background: var(--bg); border-radius: 999px; transition: transform var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease); z-index: -1; }
.c-button.-glass .c-button_bg, .c-button:hover .c-button_bg { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.c-button_inner { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: var(--padding-y) var(--padding-y) var(--padding-y) var(--padding-x); font-size: var(--text-body-sm); letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; }
/* Hover, as on the template: the trailing arrow leaves to the right, a leading arrow slides in from the left and the label shifts over. */
.c-button_icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--icon-w); height: var(--icon-w); border-radius: 50%; background: var(--badge); font-size: 0; color: transparent; flex: none; transition: background-color var(--dur-slow) var(--ease); }
.c-button_icon::before { content: ""; width: 42%; height: 42%; background: var(--badge-fg); -webkit-mask: var(--arrow-ne) center / contain no-repeat; mask: var(--arrow-ne) center / contain no-repeat; transition: transform .6s var(--ease-expo-out), background-color var(--dur-slow) var(--ease); }
.c-button_icon:first-child { display: none; }
.c-button:hover .c-button_icon, .c-button:focus-visible .c-button_icon { background: var(--hover-badge); }
.c-button:hover .c-button_icon::before, .c-button:focus-visible .c-button_icon::before { background: var(--hover-badge-fg); transform: scale(1.3); }
.c-button:hover .c-button_bg, .c-button:focus-visible .c-button_bg { background: var(--hover-bg); }
.c-textlink { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-body-sm); letter-spacing: -.02em; padding-bottom: 2px; color: var(--color-gray-600); transform-origin: left center; transition: color var(--dur-slow) var(--ease), transform .6s var(--ease-expo-out); }
.c-textlink:hover { color: var(--color-black); transform: scale(1.05); }
.c-textlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform var(--dur-slow) var(--ease); }
.c-textlink:hover::after { transform: scaleX(0); transform-origin: right; animation: underlineBack var(--dur-slow) var(--ease) .1s forwards; }
@keyframes underlineBack { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
.c-textlink::before { content: ""; order: 2; width: .85em; height: .85em; background: currentColor; -webkit-mask: var(--arrow-ne) center / contain no-repeat; mask: var(--arrow-ne) center / contain no-repeat; transition: transform .7s var(--ease-expo-out); }


/* Header -------------------------------------------------------------------- */
.c-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); display: flex; justify-content: center; padding: 32px var(--grid-margin); pointer-events: none; color: #fff; transition: transform .6s var(--ease-expo-out), opacity .4s var(--ease), padding-top 1.6s var(--ease-collapse); }
.c-header.is-hidden { transform: translateY(-120%); opacity: 0; pointer-events: none; }
.c-header_inner { position: relative; width: 100%; max-width: var(--head-w, 100vw); display: grid; pointer-events: all; transition: max-width 1.6s var(--ease-collapse); will-change: max-width; }
.c-header.is-dark { color: var(--color-black); }
.c-header.is-scrolled, .c-header.is-open, .c-header:has(.c-header_nav-link:focus-visible) { color: #fff; }
.c-header_head { display: flex; justify-content: space-between; align-items: center; gap: var(--fluid-lg); padding: 0; position: relative; z-index: 2; transition: padding 1.6s var(--ease-collapse), gap 1.6s var(--ease-collapse); }
.c-header_right { display: flex; align-items: center; gap: var(--fluid-md); transition: gap 1.6s var(--ease-collapse); }
.c-header.is-scrolled .c-header_right { gap: 16px; }
.c-header_bg { position: absolute; inset: 0; border-radius: var(--radius-lg); background: var(--surface-80); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); opacity: 0; transition: opacity 1.2s var(--ease-power2-out); z-index: 1; }
/* Pill: sized to its content (the width is measured by main.js into --pill-w), 10px by 20px padding like the template. */
.c-header.is-scrolled { padding-top: 22px; }
.c-header.is-scrolled .c-header_inner { max-width: var(--pill-w, 560px); }
.c-header.is-scrolled .c-header_head { padding: 10px 20px; }
.c-header.is-scrolled .c-header_bg, .c-header.is-open .c-header_bg, .c-header:has(:focus-visible) .c-header_bg { opacity: 1; }
.c-header.is-open .c-header_inner { max-width: none; }
.c-header.is-open .c-header_head { padding: 10px 20px; }
.c-header.is-open { padding-top: 22px; }
/* The wordmark and the N9 mark cross fade as the bar collapses: the mark sets the logo width, the wordmark floats over it. */
.c-header_logo { position: relative; display: inline-flex; align-items: center; line-height: 1; min-height: 20px; }
.c-logo { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: baseline; gap: 5px; font-weight: 700; letter-spacing: .16em; font-size: 17px; white-space: nowrap; transition: opacity .7s var(--ease), transform 1.6s var(--ease-collapse); }
.c-logo_no { font-weight: 500; letter-spacing: 0; font-size: 18px; }
.c-logo_mark { display: inline-block; font-weight: 700; letter-spacing: -.04em; font-size: 20px; line-height: 1; }
.c-header_logo .c-logo_mark { opacity: 0; transform: translateX(14px) scale(.85); transition: opacity .7s var(--ease), transform 1.6s var(--ease-collapse); }
.c-header.is-scrolled .c-logo, .c-header.is-open .c-logo { opacity: 0; transform: translateY(-50%) translateX(-16px) scale(.9); pointer-events: none; }
.c-header.is-scrolled .c-header_logo .c-logo_mark, .c-header.is-open .c-header_logo .c-logo_mark { opacity: 1; transform: none; transition-delay: .25s; }
.c-header_logo:hover { opacity: .7; }

.c-header_nav { display: none; }
.c-header_nav ul { display: flex; gap: 0; align-items: center; }
.c-header_nav-link { position: relative; display: inline-flex; align-items: center; font-size: 15px; line-height: 18px; letter-spacing: -.01em; padding: 0; margin: 0 10px; white-space: nowrap; }
/* Hover box exactly as on the template: 7px above and below, 6.5px either side, 10px radius, white at 10 percent, 0.1s. */
.c-header_nav-link::before { content: ""; position: absolute; inset: -7px -6.5px; border-radius: 10px; background: currentColor; opacity: 0; transition: opacity .1s var(--ease-power2-out); }
.c-header_nav-link:hover::before, .c-header_nav-link:focus-visible::before, .c-header_nav-link[aria-expanded="true"]::before, .c-header_nav-link.is-current::before { opacity: .1; }
.c-header_nav-link > span { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.c-chev { transition: transform var(--dur) var(--ease); }
.c-header_nav-link[aria-expanded="true"] .c-chev, .c-lang_toggle[aria-expanded="true"] .c-chev { transform: scaleY(-1); }
.c-header_tools { display: flex; align-items: center; gap: 6px; }
.c-lang { position: relative; }
.c-lang_toggle { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 18px; padding: 0; margin: 0 8px; font-family: var(--font-mono); letter-spacing: .04em; }
.c-lang_toggle::before { content: ""; position: absolute; inset: -7px -6.5px; border-radius: 10px; background: currentColor; opacity: 0; transition: opacity .1s var(--ease-power2-out); }
.c-lang_toggle:hover::before, .c-lang_toggle[aria-expanded="true"]::before { opacity: .1; }
.c-lang_list { position: absolute; right: 0; top: calc(100% + 12px); min-width: 160px; background: var(--surface-80); backdrop-filter: blur(10px); border-radius: var(--radius-md); padding: 6px; display: none; }
.c-lang.is-open .c-lang_list { display: block; }
.c-lang_list a { display: block; padding: 8px 10px; border-radius: var(--radius-xs); font-size: var(--text-body-sm); color: #fff; }
.c-lang_list a:hover { background: rgba(255,255,255,.12); }
.c-lang_list a[aria-selected="true"] { color: var(--color-accent); }
.c-header_toggle-mobile { display: inline-flex; gap: 16px; align-items: center; font-size: var(--text-body-sm); padding: 6px 4px 6px 10px; }
.c-header_toggle-mobile span:last-child { font-size: 18px; line-height: 1; }

@media (min-width: 1000px) {
  .c-header_nav { display: block; }
  .c-header_toggle-mobile { display: none; }
}
@media (max-width: 999px) {
  .c-header { padding: 12px var(--grid-margin); }
  .c-header_head { padding: 8px 14px; }
  .c-header_bg { opacity: 1; }
  .c-header, .c-header.is-dark { color: #fff; }
  .c-header_inner, .c-header.is-scrolled .c-header_inner { max-width: none; }
  .c-header.is-scrolled { padding-top: 12px; }
  .c-logo { font-size: 14px; }
  .c-logo_no { font-size: 15px; }
}

/* Services mega menu: intro tile, stacked sections, the hovered section's pages on the right */
.c-header_dropdowns { position: relative; z-index: 2; }
.c-header_dropdown { display: grid; transform-origin: top; clip-path: inset(0 20% 100% 20% round var(--radius-lg)); transition: clip-path var(--dur) var(--ease), opacity var(--dur) var(--ease); opacity: 0; max-height: 72vh; overflow: auto; }
.c-header_dropdown.is-open { clip-path: inset(0 0 0 0 round var(--radius-lg)); opacity: 1; }
.c-header_dropdown[hidden] { display: none; }
.c-header_dropdown.-services { grid-template-columns: 1fr 1.5fr; gap: var(--fluid-xl); padding: var(--fluid-sm) 20px 20px; min-height: 300px; }
.c-header_cats-col { display: flex; flex-direction: column; justify-content: space-between; gap: var(--fluid-md); padding-right: var(--fluid-md); border-right: 1px solid rgba(255,255,255,.12); }
.c-header_intro { display: flex; flex-direction: column; justify-content: space-between; gap: var(--fluid-md); padding-right: var(--fluid-md); border-right: 1px solid rgba(255,255,255,.12); }
.c-header_intro-title { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.c-header_intro-desc { font-size: 15px; line-height: 1.4; color: var(--color-gray-200); max-width: 240px; margin-top: 6px; }
.c-header_intro-cta { align-self: flex-start; }
.c-header_cats { display: grid; align-content: start; gap: 2px; }
.c-header_cat { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); color: var(--color-gray-200); transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.c-header_cat-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--color-gray-400); }
.c-header_cat-label { display: inline-flex; gap: .3em; font-size: var(--text-heading-2xs); font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
.c-header_cat-arrow { opacity: 0; transform: translateX(-6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); font-weight: 500; }
.c-header_cat.is-active, .c-header_cat:hover, .c-header_cat:focus-visible { color: #fff; background: rgba(255,255,255,.07); }
.c-header_cat.is-active .c-header_cat-arrow, .c-header_cat:hover .c-header_cat-arrow { opacity: 1; transform: translateX(0); }
.c-header_panels { position: relative; min-width: 0; }
.c-header_panel { display: grid; gap: 12px; align-content: start; animation: panelIn .35s var(--ease) both; }
.c-header_panel[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.c-header_panel-desc { font-size: 14px; line-height: 1.4; color: var(--color-gray-400); max-width: 320px; padding: 8px 0 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
.c-header_panel-list { display: grid; gap: 1px 0; grid-template-columns: 1fr; padding-top: 10px; }
.c-header_panel-link { display: block; padding: 7px 0; font-size: 16px; color: var(--color-gray-200); letter-spacing: -.01em; transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.c-header_panel-link:hover, .c-header_panel-link.is-current { color: #fff; transform: translateX(4px); }
@media (min-width: 1100px) { .c-header_panel-list { grid-template-columns: 1fr 1fr; column-gap: var(--fluid-lg); } }
.c-mobile_group { color: var(--color-gray-400); padding: 18px 0 4px; }
.c-mobile_group a:hover { color: #fff; }

/* Mobile menu */
.c-mobile { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--surface-80); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; padding: var(--unit-sm); }
.c-mobile[hidden] { display: none; }
.c-mobile_inner { height: 100%; overflow: auto; background: rgba(0,0,0,.85); border-radius: var(--radius-xl); padding: var(--fluid-md); display: flex; flex-direction: column; }
.c-mobile_close { align-self: flex-end; font-size: 28px; line-height: 1; padding: 4px 8px; }
.c-mobile_logo { text-align: center; font-size: 44px; font-weight: 700; letter-spacing: -.03em; margin: var(--fluid-lg) 0; }
.c-mobile_item { border-bottom: 1px solid rgba(255,255,255,.2); }
.c-mobile_link { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 0; font-size: var(--text-heading-xs); font-weight: 700; letter-spacing: -.015em; text-align: left; }
.c-mobile_plus { font-weight: 500; transition: transform var(--dur) var(--ease); }
.c-mobile_link[aria-expanded="true"] .c-mobile_plus { transform: rotate(45deg); }
.c-mobile_sub { padding: 0 0 14px; display: grid; gap: 10px; }
.c-mobile_sub[hidden] { display: none; }
.c-mobile_sub a { font-size: var(--text-body-md); color: var(--color-gray-200); }
.c-mobile_langs { display: flex; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: var(--fluid-xl); font-size: var(--text-body-sm); color: var(--color-gray-400); }
.c-mobile_langs .is-current { color: #fff; }
.c-mobile_cta { margin-top: var(--fluid-md); align-self: flex-start; }

/* Placeholders -------------------------------------------------------------- */
.c-ph { position: relative; background: var(--color-gray-100); overflow: hidden; }
.c-ph.-dark { background: #2a2a2a; }
.c-ph.is-missing::after { content: "Placeholder · " attr(data-slot); position: absolute; left: 8px; bottom: 8px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--color-accent); padding: 3px 6px; border-radius: 4px; z-index: 3; pointer-events: none; opacity: .9; }
.c-ph img { width: 100%; height: 100%; object-fit: cover; }

/* Hero home ------------------------------------------------------------------- */
.c-hero-home { position: relative; height: 100svh; min-height: 560px; padding: 8px 8px 0; }
.c-hero-home_media { position: absolute; inset: 8px 8px 0; border-radius: var(--radius-xl); overflow: hidden; background: #1c1c1c; }
.c-hero-home_media .c-hero-home_video, .c-hero-home_media .c-hero-home_poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-hero-home_shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%); }
.c-hero-home_inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--fluid-lg); padding: 0 var(--fluid-md) var(--fluid-lg); color: #fff; }
.c-hero-home_text { display: grid; gap: var(--fluid-md); }
/* Blauer Nue runs wide: the hero headline is sized so its longest line clears the corner card at every width. */
.c-hero-home .display-lg { font-size: clamp(2.5rem, 8.64vw, 9.9rem); line-height: .9; letter-spacing: -.04em; }
.c-hero-home .display-lg .anim-text-item { white-space: normal; text-wrap: balance; }
/* Lines clip only vertically (for the rise in), never at the right, so a wide word is not cut. */
.c-hero-home .display-lg .c-line { overflow: visible clip; padding-right: .1em; }
.c-hero-home_lead { max-width: 36rem; color: rgba(255,255,255,.9); }
.c-hero-home_actions { display: flex; flex-wrap: wrap; gap: var(--fluid-md); align-items: center; }
.c-hero-card { display: flex; gap: 12px; align-items: stretch; padding: 4px; border-radius: var(--radius-lg); background: rgba(0,0,0,.25); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #fff; width: 100%; max-width: 320px; }
.c-hero-card_image { width: 40%; aspect-ratio: 1.6; border-radius: var(--radius-sm); overflow: hidden; flex: none; }
.c-hero-card_body { display: flex; flex-direction: column; justify-content: space-between; padding: 6px 6px 6px 0; flex: 1; gap: 16px; }
.c-hero-card_title { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.c-hero-card_title .heading-2xs { max-width: 80%; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); }
.c-hero-card_arrow { transition: transform var(--dur-slow) var(--ease-expo-out); }
.c-hero-card:hover .c-hero-card_arrow { transform: scale(1.25); }
.c-hero-card:hover img { transform: scale(1.05); }
.c-hero-card img { transition: transform var(--dur-slow) var(--ease-expo-out); }
@media (min-width: 700px) {
  .c-hero-home_inner { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: 0 var(--fluid-xl) var(--fluid-2xl); }
  /* The card sits the same distance from the tile's right and bottom edges. */
  .c-hero-card { position: absolute; right: 24px; bottom: 24px; flex-direction: column; width: 280px; gap: 4px; }
  /* Headline top aligned with the top of the card: the text block is as tall as the card and sits on the same baseline. */
  .c-hero-home_inner { padding-bottom: 24px; }
  .c-hero-home_text { min-height: var(--hero-card-h, 0px); align-content: end; padding-right: 330px; }
  .c-hero-card_image { width: 100%; }
  .c-hero-card_body { padding: 8px; gap: 40px; }
}

/* Hero page (visual) ------------------------------------------------------- */
.c-hero-page { position: relative; min-height: 92svh; padding: 8px 8px 0; display: flex; }
.c-hero-page_media { position: absolute; inset: 8px 8px 0; border-radius: var(--radius-xl); overflow: hidden; background: #1c1c1c; }
.c-hero-page_media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-hero-page_shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.6) 100%); }
.c-hero-page_inner { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--fluid-xl); padding: var(--fluid-4xl) var(--fluid-md) var(--fluid-lg); color: #fff; }
.c-hero-page_row { display: grid; gap: var(--fluid-md); border-top: 1px solid rgba(255,255,255,.35); padding-top: var(--fluid-md); }
.c-hero-page_eyebrow { color: #fff; }
.c-hero-page_text { display: grid; gap: var(--fluid-md); max-width: 46rem; }
.c-hero-page_lead { max-width: 34rem; color: rgba(255,255,255,.9); }
.c-hero-page_stats { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 1000px) {
  .c-hero-page_inner { padding: var(--fluid-4xl) var(--fluid-xl) var(--fluid-2xl); }
  .c-hero-page_row { grid-template-columns: 1fr 1.3fr; align-items: start; }
}

/* Chips ----------------------------------------------------------------------- */
.c-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.c-chip { display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--radius-lg); background: rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; min-width: 140px; }
.c-chip_figure { font-size: var(--text-heading-2xs); font-weight: 700; letter-spacing: -.015em; line-height: 1; }
.c-chip_label { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: .02em; color: rgba(255,255,255,.8); margin-top: 6px; max-width: 200px; line-height: 1.3; }
.c-chips.-light .c-chip { background: var(--surface-10); color: var(--color-black); min-width: 0; font-size: var(--text-body-sm); padding: 8px 12px; backdrop-filter: none; }

/* Sections (shared) ---------------------------------------------------------- */
section.container, .c-features { margin-block: var(--fluid-3xl); }
.c-section_head { display: grid; gap: var(--fluid-sm); max-width: 54rem; margin-bottom: var(--fluid-xl); }
.c-section_head h2, .c-section_sub, .c-two-tone { text-wrap: balance; }
.c-section_head.is-center { text-align: center; margin-inline: auto; }
.c-section_lead { color: var(--color-gray-800); max-width: 40rem; }
.c-section_sub { max-width: 44rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.c-note { color: var(--color-gray-600); max-width: 48rem; margin-top: var(--fluid-md); }
.c-note a { border-bottom: 1px solid currentColor; }

/* Statement (two columns) */
.c-statement_grid { display: grid; gap: var(--fluid-md); }
.c-statement_body { display: grid; gap: var(--fluid-sm); max-width: 44rem; font-weight: 700; }
.c-statement_body p + p { font-weight: 500; color: var(--color-gray-800); }
.c-statement_lead { color: var(--color-gray-800); margin-bottom: var(--fluid-sm); }
.c-statement.-large .c-statement_body { font-size: var(--text-heading-sm); line-height: 1.15; letter-spacing: -.015em; max-width: 60rem; }
.c-statement.-text-small .c-statement_body { font-size: var(--text-body-md); font-weight: 500; color: var(--color-gray-800); max-width: 36rem; }
.c-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.c-statement_right { display: grid; gap: var(--fluid-md); }
@media (min-width: 1000px) { .c-statement_grid { grid-template-columns: 1fr 1fr; } }

/* Service cards (01 to 04) */
.c-services_grid { display: grid; gap: var(--grid-gutter); }
.c-service_link { display: grid; grid-template-rows: auto 1fr; height: 100%; border-radius: var(--radius-xl); background: #1c1c1c; color: #fff; overflow: hidden; position: relative; isolation: isolate; }
.c-service_space { aspect-ratio: 4 / 3; }
.c-service_image { position: absolute; inset: 0; }
.c-service_image img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform var(--dur-slower) var(--ease-expo-out); }
.c-service_link:hover .c-service_image img { transform: scale(1.04); }
.c-service_num { position: absolute; top: 12px; left: 12px; z-index: 3; background: rgba(0,0,0,.6); color: #fff; padding: 4px 8px; border-radius: 6px; backdrop-filter: blur(8px); }
.c-service_tagline { margin-top: -6px; font-size: var(--text-body-sm); }
.c-service_title { font-size: var(--text-heading-2xs); }
.c-service_text { position: relative; z-index: 2; display: grid; gap: 12px; margin: 0 8px 8px; padding: var(--fluid-md); align-content: start; border-radius: var(--radius-lg); background: rgba(0,0,0,.3); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: background-color var(--dur-slow) var(--ease); }
.c-service_text .c-two-tone_rest { color: rgba(255,255,255,.72); }
.c-service_body { color: rgba(255,255,255,.82); }
.c-service_more { color: var(--color-accent); font-size: 20px; }
.c-service_link:hover .c-service_more .c-button_icon::before { transform: scale(1.3); }
.c-service_link { transition: background-color var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.c-service_link:hover { transform: translateY(-4px); }
.c-service_link:hover .c-service_text { background: rgba(0,0,0,.18); }
@media (min-width: 700px) { .c-services_grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .c-services_grid { grid-template-columns: repeat(4, 1fr); } }

/* Profiles */
.c-profiles_grid { display: grid; gap: var(--grid-gutter); }
.c-profile { padding: var(--fluid-lg) 0; border-top: 1px solid var(--color-gray-200); display: grid; gap: 12px; }
.c-profile_num { color: var(--color-accent); font-size: calc(var(--text-label) * 1.5); letter-spacing: .06em; }
.c-profile .heading-xs { font-size: var(--text-heading-sm); }
.c-profile p { color: var(--color-gray-800); max-width: 36rem; }
@media (min-width: 1000px) { .c-profiles_grid { grid-template-columns: repeat(3, 1fr); } }

/* Steps (simple) */
.c-steps_list { display: grid; gap: 0; }
.c-steps_item { display: grid; grid-template-columns: 56px 1fr; gap: var(--fluid-md); padding: var(--fluid-md) 0; border-top: 1px solid var(--color-gray-200); color: var(--color-gray-500); cursor: default; transition: padding var(--dur-slow) var(--ease-expo-out), color var(--dur) var(--ease); }
.c-steps_item:last-child { border-bottom: 1px solid var(--color-gray-200); }
.c-steps_num { color: var(--color-gray-400); transition: color var(--dur) var(--ease); }
.c-steps_title { color: inherit; transition: color var(--dur) var(--ease); }
.c-steps_text { display: grid; gap: 8px; max-width: 44rem; }
.c-steps_text p { color: inherit; }
.c-steps_item:hover, .c-steps_item:focus-visible { padding-top: calc(var(--fluid-md) + 14px); padding-bottom: calc(var(--fluid-md) + 14px); color: var(--color-gray-800); outline: none; }
.c-steps_item:hover .c-steps_title, .c-steps_item:focus-visible .c-steps_title { color: var(--color-black); }
.c-steps_item:hover .c-steps_num, .c-steps_item:focus-visible .c-steps_num { color: var(--color-accent); }
.c-steps_closing { margin-top: var(--fluid-xl); max-width: 36rem; }
@media (min-width: 1000px) { .c-steps_item { grid-template-columns: 64px calc(50% - 64px - 1.5 * var(--fluid-md)) 1fr; column-gap: var(--fluid-md); align-items: start; padding-left: 0; } .c-steps_item:hover, .c-steps_item:focus-visible { padding-left: 24px; } .c-steps_text { display: contents; } .c-steps_text h3 { grid-column: 2; } .c-steps_text p { grid-column: 3; max-width: 40rem; } }

/* Feature cards (Why Panama) */
/* Large card (Why Panama): black container, square photo left, text and four tiles right, like the template's report card */
.c-features_card { display: grid; gap: 16px; padding: 4px; border-radius: var(--radius-lg); background: var(--color-black); color: #fff; }
.c-features_media { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1.6; }
.c-features_media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-features_body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--fluid-xl); padding: var(--fluid-sm) 12px 12px; }
.c-features_head { display: grid; gap: var(--fluid-sm); }
.c-features_rest { color: var(--color-gray-400); }
.c-features_lead { color: var(--color-gray-200); max-width: 32rem; }
.c-features_foot { display: grid; gap: 16px; }
.c-features_grid { display: grid; gap: 8px; }
.c-feature a { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 150px; padding: 12px; border-radius: var(--radius-xl); background: rgba(255,255,255,.1); position: relative; transition: background var(--dur) var(--ease); }
.c-feature a:hover { background: rgba(255,255,255,.18); }
.c-feature_label { color: var(--color-accent); }
.c-feature_row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.c-feature_body { color: #fff; font-weight: 700; letter-spacing: -.02em; }
.c-feature_arrow { transition: transform var(--dur) var(--ease); font-size: 20px; line-height: 1; }
.c-feature a:hover .c-feature_arrow { transform: translateX(4px); }
.c-features_cta { margin-top: 4px; }
@media (min-width: 700px) { .c-features_grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .c-features_card { grid-template-columns: 1fr 1fr; } .c-features_media { aspect-ratio: 1; border-radius: var(--radius-xl); } .c-features_body { padding: var(--fluid-md) var(--fluid-md) var(--fluid-md) 8px; } }

/* Carousel (guides) */
.c-carousel_head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--fluid-md); margin-bottom: var(--fluid-lg); flex-wrap: wrap; }
.c-carousel_tools { display: flex; gap: var(--fluid-md); align-items: center; }
.c-carousel_btn { font-size: var(--text-body-sm); letter-spacing: -.02em; color: var(--color-black); }
.c-carousel_btn[disabled] { color: var(--color-gray-400); cursor: default; }
.c-carousel_track { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--grid-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.c-carousel_track::-webkit-scrollbar { display: none; }
.c-carousel_viewport { overflow: hidden; }
.c-carousel.-marquee .c-carousel_track, .c-process.-marquee .c-process_track { overflow: visible; scroll-snap-type: none; will-change: transform; }
.c-carousel.-marquee .c-carousel_btn[disabled] { color: var(--color-black); cursor: pointer; }
.c-card { scroll-snap-align: start; }
.c-card_link { display: grid; gap: 12px; }
.c-card_image { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.c-card_image img { transition: transform var(--dur-slower) var(--ease-expo-out); }
.c-card_link:hover img { transform: scale(1.04); }
.c-card_eyebrow { color: var(--color-gray-600); margin-top: 8px; }
.c-card_title { color: var(--color-black); transition: color var(--dur-fast) var(--ease); }
.c-card_link:hover .c-card_title { color: var(--color-accent); }
@media (min-width: 700px) { .c-carousel_track { grid-auto-columns: calc((100% - var(--grid-gutter)) / 2); } }
@media (min-width: 1000px) { .c-carousel_track { grid-auto-columns: calc((100% - 2 * var(--grid-gutter)) / 3); } }

/* Values */
.c-values_grid { display: grid; gap: var(--grid-gutter); }
.c-value { display: grid; gap: 10px; align-content: start; padding: var(--fluid-md); border-radius: var(--radius-lg); background: var(--surface-10); }
.c-value p { color: var(--color-gray-800); }
@media (min-width: 700px) { .c-values_grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .c-values_grid { grid-template-columns: repeat(4, 1fr); } }

/* Push (dark closing band) */
.c-push { transform: translateY(32px); transition: transform 1.2s var(--ease-expo-out); position: relative; margin: var(--fluid-xl) 8px 0; min-height: 50svh; border-radius: var(--radius-2xl); overflow: hidden; background: var(--color-black); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--fluid-4xl) var(--fluid-md); }
.c-push.is-inview { transform: none; }
.c-push_media { position: absolute; inset: 0; }
/* Closing band text: the lines rise one after another, the body and the button follow. */
.c-push .anim-text .anim-text-item { transition-duration: 1.2s; transition-delay: calc(var(--index, 0) * .12s); }
.c-push_body.anim-fade { transition-delay: .5s; }
.c-push_actions.anim-fade { transition-delay: .7s; }
.c-push_media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transform: scale(calc(1.15 - var(--progress, 0) * .15)) translateY(calc((var(--progress, 0) * 2 - 1) * 10%)); will-change: transform; }
.c-push_media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.2), rgba(0,0,0,.7)); z-index: 1; }
.c-push_inner { position: relative; z-index: 2; display: grid; gap: var(--fluid-lg); justify-items: center; max-width: 50rem; }
.c-push_body { max-width: 30rem; color: rgba(255,255,255,.85); }

/* Stat cards */
.c-stats_grid { display: grid; gap: var(--grid-gutter); }
.c-stat { transition: transform var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease); display: grid; gap: 10px; padding: var(--fluid-lg) var(--fluid-md); border-radius: var(--radius-lg); background: var(--surface-10); align-content: start; }
.c-stat_figure { letter-spacing: -.02em; }
.c-stat_label { color: var(--color-accent); }
.c-stat_body { color: var(--color-gray-800); margin-top: 6px; }
@media (min-width: 700px) { .c-stats_grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .c-stats_grid { grid-template-columns: repeat(3, 1fr); } .c-stats_grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); } }

/* Numbered list (01 02 03, one expanded) */
.c-numlist_list { display: grid; }
.c-numlist_item { display: grid; grid-template-columns: 56px 1fr; gap: var(--fluid-md); padding: var(--fluid-md) 0; border-top: 1px solid var(--color-gray-200); }
.c-numlist_item:last-child { border-bottom: 1px solid var(--color-gray-200); }
.c-numlist_num { color: var(--color-accent); }
.c-numlist_text { display: grid; gap: 8px; max-width: 44rem; }
.c-numlist_text p { color: var(--color-gray-800); }
.c-numlist_col .label { color: var(--color-accent); }
.c-numlist_item.is-expanded--off { background: var(--surface-10); border-radius: var(--radius-lg); padding: var(--fluid-lg) var(--fluid-md); border-color: transparent; margin-block: 4px; }
.c-numlist_item.is-expanded .heading-xs { font-size: var(--text-heading-sm); }
/* Compact list: short rows for items that are titles only (what you will need, why it happened). */
.c-numlist.-compact .c-numlist_item { padding: 14px 0; align-items: baseline; }
.c-numlist.-compact .c-numlist_num { font-size: var(--text-body-sm); }
.c-numlist.-compact .c-numlist_text > h3 { font-size: var(--text-body-lg); font-weight: 400; letter-spacing: -.015em; }
.c-numlist.-compact .c-numlist_list .c-numlist_item:hover { padding-left: 10px; }
@media (min-width: 1000px) { .c-numlist.-compact .c-numlist_text > h3 { grid-column: 2 / -1; max-width: 40rem; } }
.c-numlist_item.is-expanded p { font-size: var(--text-body-md); color: var(--color-black); }
@media (min-width: 1000px) { .c-numlist_item { grid-template-columns: 64px calc(50% - 64px - 1.5 * var(--fluid-md)) 1fr; column-gap: var(--fluid-md); align-items: start; } .c-numlist_text { display: contents; } .c-numlist_text > h3 { grid-column: 2; } .c-numlist_text > p { grid-column: 3; max-width: none; } }

/* Process (numbered steps with photos) */
.c-process { margin-block: var(--fluid-3xl); }
.c-process_tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--fluid-lg); gap: var(--fluid-md); }
.c-process_tools > div { display: flex; gap: var(--fluid-md); }
.c-process_count { color: var(--color-gray-600); }
.c-process_track { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--grid-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.c-process_track::-webkit-scrollbar { display: none; }
.c-step { scroll-snap-align: start; display: grid; gap: 10px; align-content: start; }
.c-step_image { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.c-step_num { color: var(--color-accent); margin-top: var(--fluid-sm); }
.c-step p { color: var(--color-gray-800); }
@media (min-width: 700px) { .c-process_track { grid-auto-columns: calc((100% - var(--grid-gutter)) / 2); } }
@media (min-width: 1000px) { .c-process_track { grid-auto-columns: calc((100% - 2 * var(--grid-gutter)) / 3); } }
@media (min-width: 1400px) { .c-process_track { grid-auto-columns: calc((100% - 3 * var(--grid-gutter)) / 4); } }

/* Icon cards */
.c-icons_grid { display: grid; gap: var(--grid-gutter); }
.c-icon-card { display: grid; gap: 12px; padding: var(--fluid-md); border-radius: var(--radius-lg); background: var(--surface-10); align-content: start; }
.c-icon-card_icon { color: var(--color-accent); }
.c-icon-card p { color: var(--color-gray-800); }
@media (min-width: 700px) { .c-icons_grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .c-icons_grid { grid-template-columns: repeat(4, 1fr); } }

/* Footer -------------------------------------------------------------------- */
.page { position: relative; background: var(--color-white); padding-bottom: var(--fluid-2xl); }
/* A page that ends on a dark tile keeps 8px to the footer (the footer overlaps the page by its 20px radius). */
.page:has(> .c-push:last-child), .page:has(> .c-band:last-child), .page:has(> .c-stage:last-child) { padding-bottom: 0; }
.page:has(> .c-showcase:last-child) { padding-bottom: 28px; }
.page > .c-showcase:last-child { margin-bottom: 0; }
.page > .c-band:last-child { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; padding-bottom: var(--radius-2xl); }
.c-footer { position: relative; z-index: 1; background: var(--color-black); color: #fff; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; margin-top: calc(-1 * var(--radius-2xl)); }
.c-footer_inner { padding: var(--fluid-2xl) var(--grid-margin) var(--fluid-md); display: grid; gap: var(--fluid-3xl); }
.c-footer_header { display: grid; gap: var(--fluid-xl); }
.c-footer_logo .c-logo_mark { display: inline-block; font-size: 36px; }
/* Mark at the top, disclaimer pushed to the bottom so its last line sits level with the last menu entry. */
.c-footer_brandcol { display: flex; flex-direction: column; justify-content: space-between; gap: var(--fluid-lg); align-items: flex-start; height: 100%; }
.c-footer_menu-item { border-bottom: 1px solid rgba(255,255,255,.25); }
.c-footer_menu-link { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.2; font-weight: 700; letter-spacing: -.03em; transition: opacity .8s var(--ease-expo-out); }
/* Hover as on the template: the hovered entry stays white, the others fade. */
.c-footer_menu-list:hover .c-footer_menu-link { opacity: .3; }
.c-footer_menu-list .c-footer_menu-link:hover { opacity: 1; }
.c-footer_menu-arrow { opacity: 0; transform: translateX(-8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); font-weight: 500; }
.c-footer_menu-link:hover .c-footer_menu-arrow { opacity: 1; transform: translateX(0); }
.c-footer_content { display: grid; gap: var(--fluid-2xl); }
.c-footer_text { display: grid; gap: var(--fluid-lg); max-width: 24rem; align-content: start; }
.c-footer_text-content { font-size: var(--text-body-sm); color: var(--color-gray-200); }
.c-footer_contacts { display: grid; gap: 12px; font-size: var(--text-body-sm); }
.c-footer_contacts li { display: grid; gap: 2px; }
.c-footer_contacts .label { color: var(--color-gray-400); }
.c-footer_contacts a:hover { text-decoration: underline; }
.c-footer_services { display: grid; gap: var(--fluid-lg); grid-template-columns: repeat(2, 1fr); }
.c-footer_col { display: grid; gap: 12px; align-content: start; }
.c-footer_col-title { color: var(--color-gray-400); }
.c-footer_col ul { display: grid; gap: 8px; }
.c-footer_col a { font-size: var(--text-body-sm); color: var(--color-gray-200); }
.c-footer_col a:hover { color: #fff; }
.c-footer_disclaimer { font-size: 12px; line-height: 1.5; color: var(--color-gray-400); max-width: 24rem; transition: color var(--dur-slow) var(--ease); }
.c-footer_disclaimer:hover { color: var(--color-accent); }
.c-footer_bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: var(--fluid-md); border-top: 1px solid rgba(255,255,255,.15); font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: .04em; }
.c-footer_bottom-links { display: flex; flex-wrap: wrap; gap: 24px; }
.c-footer_bottom-link { font: inherit; text-transform: inherit; letter-spacing: inherit; }
.c-footer_bottom-link:hover { text-decoration: underline; }
/* Brand name on the black footer, then the photo band. The name pins to the middle of the screen (sticky within the
   footer) while the band rises behind it, so the page ends with ADVISORY N9 over the photo. */
.c-footer_brand { position: sticky; top: calc(50vh - .5em); z-index: 2; display: flex; justify-content: center; padding: var(--fluid-xl) var(--grid-margin); pointer-events: none; font-size: clamp(2rem, 10.5vw, 11rem); }
.c-footer_brand-word { font-size: 1em; font-weight: 700; letter-spacing: .06em; line-height: 1; white-space: nowrap; text-align: center; color: #fff; transform: translateY(12%); opacity: 0; transition: transform 1.1s var(--ease-expo-out), opacity .9s var(--ease); }
.c-footer.is-brand-inview .c-footer_brand-word { transform: translateY(0); opacity: 1; }
.c-footer_reveal { position: relative; z-index: 1; height: 80vh; height: 80svh; width: 100%; background: var(--color-black); clip-path: inset(0 round 16px 16px 0 0); overflow: hidden; font-size: clamp(2rem, 10.5vw, 11rem); }
.c-footer_reveal-media { position: absolute; inset: 0; transform: scale(calc(1.25 - var(--progress, 0) * .25)); will-change: transform; }
.c-footer_reveal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-footer_reveal-shade { position: absolute; inset: 0; background: rgba(0,0,0,.3); }
.c-footer_brand-word span { font-weight: 500; letter-spacing: 0; margin-left: .25em; color: rgba(255,255,255,.75); }
@media (min-width: 1000px) {
  .c-footer_header { grid-template-columns: 1fr 1fr; }
  .c-footer_content { grid-template-columns: 1fr 1fr; }
  .c-footer_services { grid-template-columns: repeat(4, 1fr); }
}

/* Language bar and cookie banner ----------------------------------------------- */
.c-langbar { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-modal); background: var(--surface-80); backdrop-filter: blur(12px); color: #fff; border-radius: var(--radius-xl); padding: 12px 12px 12px 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; max-width: calc(100% - 32px); width: max-content; animation: rise var(--dur-slow) var(--ease-expo-out); }
.c-langbar[hidden] { display: none; }
.c-langbar_text { font-size: var(--text-body-sm); }
.c-langbar_actions { display: flex; gap: 12px; align-items: center; }
.c-langbar_dismiss { font-size: var(--text-body-sm); color: var(--color-gray-200); text-decoration: underline; }
.c-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: var(--z-modal); display: flex; justify-content: flex-start; pointer-events: none; }
.c-cookie[hidden] { display: none; }
.c-cookie_inner { pointer-events: all; max-width: 520px; background: #fff; color: var(--color-black); border-radius: var(--radius-xl); padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.25); display: grid; gap: 16px; animation: rise var(--dur-slow) var(--ease-expo-out); }
.c-cookie_text { font-size: var(--text-body-sm); color: var(--color-gray-800); }
.c-cookie_actions { display: flex; gap: 8px; flex-wrap: wrap; }
@keyframes rise { from { opacity: 0; transform: translateY(16px) translateX(var(--tx, 0)); } to { opacity: 1; transform: translateY(0) translateX(var(--tx, 0)); } }
@media (max-width: 999px) { .c-langbar { left: 16px; right: 16px; width: auto; } html.has-langbar .c-cookie { bottom: calc(32px + var(--langbar-h, 96px)); } }

/* Animations ------------------------------------------------------------------- */
.anim-text .anim-text-item { display: inline-block; transform: translateY(110%); transition: transform var(--dur-slowest) var(--ease-expo-out); transition-delay: calc(var(--index, 0) * .1s); }
.anim-text { overflow: hidden; padding-bottom: .22em; margin-bottom: -.22em; }
.is-inview .anim-text .anim-text-item, .anim-text.is-inview .anim-text-item { transform: translateY(0); }
.anim-fade { opacity: 0; transition: opacity var(--dur-slow) var(--ease-power2-out); transition-delay: calc(var(--index, 0) * .08s + .15s); }
.is-inview .anim-fade, .anim-fade.is-inview { opacity: 1; }
.anim-up { opacity: 0; transform: translateY(12%); transition: opacity var(--dur-slower) var(--ease-expo-out), transform var(--dur-slower) var(--ease-expo-out); transition-delay: calc(var(--index, 0) * .08s); }
.is-inview .anim-up, .anim-up.is-inview { opacity: 1; transform: translateY(0); }
.page { opacity: 1; transition: opacity .3s var(--ease-power2-out); }
html.is-leaving .page { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .anim-text .anim-text-item, .anim-fade, .anim-up { transform: none; opacity: 1; }
}

/* Stub pages (preview only) */
.c-stub { padding-top: var(--fluid-4xl); min-height: 70svh; display: grid; gap: var(--fluid-md); align-content: start; max-width: 50rem; }
.c-stub_note { color: var(--color-gray-600); }

/* 404 */
.c-404 .c-hero-page_row { grid-template-columns: 1fr 1.3fr auto; align-items: start; }
.c-404 .c-hero-page_media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, #2a3540 0%, #0a0c0e 70%); }
.c-404 .c-hero-page_media img { opacity: .35; }

/* Comparison card */
.c-compare_card { padding: 0; border-top: 1px solid var(--color-gray-200); }
.c-compare_row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--color-gray-200); }
.c-compare_head { display: none; }
.c-compare_row .label { color: var(--color-gray-600); }
.c-compare_row { transition: opacity var(--dur-slow) var(--ease); }
.c-compare_card:hover .c-compare_row { opacity: .45; } .c-compare_card .c-compare_row:hover { opacity: 1; }
.c-compare_row .body-sm { color: var(--color-gray-800); }
.c-compare_label { letter-spacing: -.02em; }
.c-compare_cell { display: grid; gap: 4px; }
.c-compare_mlabel { color: var(--color-accent); }
@media (min-width: 700px) {
  .c-compare_row { grid-template-columns: 1fr repeat(var(--cols, 2), 1.4fr); gap: var(--fluid-md); align-items: start; }
  .c-compare_mlabel { display: none; }
  .c-compare_head { display: grid; }
  .c-compare_head .label { color: var(--color-accent); }
}
/* Numbered list columns */
.c-numlist_cols { display: grid; gap: var(--fluid-md); margin-top: var(--fluid-sm); }
.c-numlist_col { display: grid; gap: 6px; }
.c-numlist_col .label { color: var(--color-accent); }
@media (min-width: 700px) { .c-numlist_cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .c-numlist_cols { grid-column: 2 / -1; } }

/* Option cards (two long cards, verdict band, small print) */
.c-options_grid { display: grid; gap: var(--grid-gutter); }
.c-option { display: grid; gap: var(--fluid-sm); align-content: start; padding: var(--fluid-lg) var(--fluid-md); border-radius: var(--radius-lg); background: var(--surface-10); }
.c-option_tagline { color: var(--color-gray-800); }
.c-option_section { display: grid; gap: 8px; padding-top: var(--fluid-sm); border-top: 1px solid var(--color-gray-200); }
.c-option_section .label { color: var(--color-accent); }
.c-option_section .body-sm { color: var(--color-gray-800); }
.c-option_section .body-sm p + p { margin-top: 8px; }
.c-options_verdict { display: grid; gap: 12px; margin-top: var(--grid-gutter); padding: var(--fluid-lg) var(--fluid-md); border-radius: var(--radius-lg); background: var(--color-black); color: var(--color-white); }
.c-options_verdict .body-lg { max-width: 48rem; font-weight: 700; }
.c-options_verdict .c-eyebrow { color: var(--color-accent); }
@media (min-width: 900px) { .c-options_grid[data-count="2"] { grid-template-columns: 1fr 1fr; } }
.c-icon-card_link { margin-top: 6px; color: var(--color-accent); font-weight: 700; display: inline-block; transition: transform var(--dur) var(--ease); }
.c-icon-card_link:hover { transform: translateX(6px); }
.c-push_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.c-push_secondary { color: var(--color-white); border-bottom: 1px solid currentColor; }
/* Inline links inside body copy */
.c-numlist_text a, .c-stat_body a, .c-option_section a, .c-statement_body a, .c-stats .c-note a, .c-options .c-note a { border-bottom: 1px solid currentColor; font-weight: 700; }
.c-process_step a, .c-icon-card a:not(.c-icon-card_link) { border-bottom: 1px solid currentColor; font-weight: 700; }
@media (min-width: 1200px) { .c-stats_grid[data-count="5"] { grid-template-columns: repeat(5, 1fr); } }

/* Checklists (included / not included) */
.c-checklists_body { max-width: 44rem; margin-bottom: var(--fluid-md); color: var(--color-gray-800); }
.c-checklists_grid { display: grid; gap: var(--grid-gutter); }
.c-checklist { display: grid; gap: 14px; align-content: start; padding-top: 14px; border-top: 1px solid var(--color-gray-200); }
.c-checklist .label { color: var(--color-accent); }
.c-checklist.-negative .label { color: var(--color-gray-600); }
.c-checklist ul { display: grid; gap: 0; }
.c-checklist li { position: relative; padding: 10px 0 10px 26px; color: var(--color-gray-800); border-bottom: 1px solid var(--color-gray-100); }
.c-checklist li::before { content: ""; position: absolute; left: 0; top: calc(10px + .45em); width: 14px; height: 7px; border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(-45deg); }
.c-checklist.-negative li::before { width: 12px; height: 0; border: 0; border-top: 2px solid var(--color-gray-400); transform: none; top: calc(10px + .7em); }
@media (min-width: 800px) { .c-checklists_grid { grid-template-columns: 1fr 1fr; } }
/* Statement: white (default) or dark band */
.c-statement:not(.-dark) { margin-block: var(--fluid-3xl); }
.c-statement.-dark { background: var(--color-black); color: var(--color-white); padding-block: var(--fluid-3xl); margin-block: var(--fluid-3xl); }
.c-statement.-dark .c-statement_body p + p, .c-statement.-dark .c-note, .c-statement.-dark .c-statement_lead { color: var(--color-gray-400); }
.c-statement.-dark .c-eyebrow { color: var(--color-accent); }
@media (min-width: 1000px) { .c-values_grid[data-count="3"], .c-values_grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .c-values_grid[data-count="5"] { grid-template-columns: repeat(5, 1fr); } .c-values_grid[data-count="3"], .c-values_grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); } }
.c-checklist .heading-xs { margin-top: -4px; }
.c-checklist_body { color: var(--color-gray-800); }
.c-checklist_note { color: var(--color-gray-600); padding-top: 14px; border-top: 1px solid var(--color-gray-200); }
.c-checklist_note a { border-bottom: 1px solid currentColor; font-weight: 700; }
.c-compare_stack { display: grid; gap: var(--fluid-lg); }
.c-compare_caption { color: var(--color-accent); margin-bottom: 12px; }
.c-footer_note { margin-bottom: 12px; }
.c-hero-page_sub { max-width: 38rem; color: rgba(255,255,255,.62); margin-top: calc(var(--fluid-sm) * -0.5); }
.c-value .c-value_link, .c-value a { border-bottom: 1px solid currentColor; font-weight: 700; }
@media (min-width: 1000px) { .c-icons_grid[data-count="3"], .c-icons_grid[data-count="6"], .c-icons_grid[data-count="9"] { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .c-icons_grid[data-count="5"] { grid-template-columns: repeat(5, 1fr); } }
.c-statement_right > .c-note:first-child { margin-top: 0; }
.c-checklist_body { color: var(--color-gray-800); }
.c-checklist_note { color: var(--color-gray-600); padding-top: 10px; border-top: 1px solid var(--color-gray-200); }
.c-checklist_note a, .c-checklist li a { border-bottom: 1px solid currentColor; font-weight: 700; }
/* Spec chips inside a numbered list item */
.c-numlist_specs { display: grid; gap: 10px; margin-top: var(--fluid-sm); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.c-numlist_spec { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-radius: var(--radius-md); background: rgba(0,0,0,.05); }
.c-numlist_item.is-expanded .c-numlist_spec { background: #fff; }
.c-numlist_spec dt { color: var(--color-accent); }
.c-numlist_spec dd { color: var(--color-gray-800); }
.c-numlist_specnote { color: var(--color-gray-600); margin-top: 8px; }
@media (min-width: 1000px) { .c-numlist_specs, .c-numlist_specnote { grid-column: 2 / -1; } .c-numlist_specs { grid-template-columns: repeat(4, 1fr); } }

.c-statement_cta { margin-top: var(--fluid-sm); }
.c-statement_media { aspect-ratio: 4 / 5; border-radius: var(--radius-xl); margin-top: var(--fluid-sm); max-width: 440px; }
@media (min-width: 1000px) { .c-statement_media { margin-top: var(--fluid-md); } }

/* Contact: booking hero and form band */
.c-hero-contact { padding-top: calc(var(--fluid-4xl) + 48px); padding-bottom: var(--fluid-xl); }
.c-hero-contact_inner { display: grid; gap: var(--fluid-lg); align-items: stretch; }
.c-hero-contact_text { display: flex; flex-direction: column; gap: var(--fluid-md); max-width: 36rem; }
.c-hero-contact_lead { color: var(--color-gray-800); max-width: 32rem; }
.c-hero-contact_panel { display: grid; gap: var(--fluid-sm); padding: var(--fluid-md); border-radius: var(--radius-xl); background: var(--surface-10); min-height: 420px; }
.c-embed_frame { width: 100%; min-height: 560px; border: 0; border-radius: var(--radius-lg); background: #fff; }
.c-embed_frame.-tall { min-height: 720px; }
.c-embed_ph { display: grid; gap: var(--fluid-sm); }
.c-embed_cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 12px; border-radius: var(--radius-lg); background: #fff; }
.c-embed_day { aspect-ratio: 1; border-radius: 6px; background: var(--color-gray-100); }
.c-embed_day.is-open { background: var(--color-accent); opacity: .85; }
.c-embed_actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 1000px) { .c-hero-contact_inner { grid-template-columns: 1fr 1.1fr; gap: var(--fluid-2xl); } }
.c-form-band { background: var(--surface-10); padding-block: var(--fluid-2xl); }
.c-form-band_inner { display: grid; gap: var(--fluid-lg); align-items: start; }
.c-form-band_text { display: grid; gap: var(--fluid-md); }
.c-form-band_body { color: var(--color-gray-800); max-width: 32rem; }
.c-form-band_panel { display: grid; gap: var(--fluid-sm); padding: var(--fluid-md); border-radius: var(--radius-xl); background: #fff; }
.c-form { display: grid; gap: 14px; }
.c-form_field { display: grid; gap: 6px; }
.c-form_field input, .c-form_field select, .c-form_field textarea { width: 100%; font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); background: #fff; color: var(--color-black); }
.c-form_field input:focus, .c-form_field select:focus, .c-form_field textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.c-form_actions { display: grid; gap: 10px; justify-items: start; }
.c-form_status { color: var(--color-gray-800); }
.c-form-band_note { margin-top: 4px; }
@media (min-width: 700px) { .c-form { grid-template-columns: 1fr 1fr; } .c-form_field.-full, .c-form_actions.-full { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .c-form-band_inner { grid-template-columns: 1fr 1.3fr; gap: var(--fluid-2xl); } }

/* Article (guides) and guide grid */
.c-article_grid { display: grid; gap: var(--fluid-md); }
.c-article_aside { display: grid; gap: var(--fluid-sm); align-content: start; }
.c-article_asidebody { color: var(--color-gray-800); max-width: 20rem; }
.c-article_links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.c-article_links a { text-decoration: none; color: var(--color-black); font-weight: 600; }
.c-article_links a:hover { color: var(--color-accent); }
.c-article_body { max-width: 44rem; color: var(--color-gray-800); }
.c-article_body > * + * { margin-top: 1.1em; }
.c-article_lead { color: var(--color-black); font-weight: 600; }
.c-article_body .c-rich_h2 { color: var(--color-black); margin-top: var(--fluid-lg); }
.c-article_body .c-rich_h3 { color: var(--color-black); margin-top: var(--fluid-md); }
.c-article_body p strong { color: var(--color-black); }
ul.c-rich_list { list-style: disc; padding-left: 1.2em; display: grid; gap: 8px; }
ol.c-rich_list { list-style: decimal; padding-left: 1.4em; display: grid; gap: 10px; }
.c-rich_list li::marker { color: var(--color-accent); font-weight: 700; }
.c-article_body a { color: var(--color-black); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.c-article_body a:hover { color: var(--color-accent); }
.c-article_note { margin-top: var(--fluid-md); }
@media (min-width: 1000px) { .c-article_grid { grid-template-columns: 1fr 2fr; gap: var(--fluid-xl); } .c-article_aside { position: sticky; top: 120px; } }
.c-guidegrid_list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--grid-gutter); }
@media (min-width: 700px) { .c-guidegrid_list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .c-guidegrid_list { grid-template-columns: 1fr 1fr 1fr; } }

/* Services overview ------------------------------------------------------ */
.c-sindex { display: grid; gap: var(--fluid-3xl); }
.c-sindex_section { display: grid; gap: var(--fluid-lg); scroll-margin-top: 100px; }
.c-sindex_head { display: grid; gap: 10px; max-width: 42rem; }
.c-sindex_desc { margin-top: 4px; }
.c-sindex_grid { display: grid; gap: var(--grid-gutter); }
.c-sindex_link { position: relative; isolation: isolate; display: grid; gap: 10px; align-content: start; height: 100%; padding: var(--fluid-md); border-radius: var(--radius-lg); background: #1c1c1c; color: #fff; overflow: hidden; transition: transform var(--dur-slow) var(--ease); }
.c-sindex_link > span { position: relative; z-index: 2; }
.c-sindex_image { position: absolute; inset: 0; }
.c-sindex_image img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform var(--dur-slower) var(--ease-expo-out); }
.c-sindex_glass { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.32); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); transition: background-color var(--dur-slow) var(--ease); }
.c-sindex_link:hover { transform: translateY(-4px); }
.c-sindex_link:hover .c-sindex_glass { background: rgba(0,0,0,.22); }
.c-sindex_link:hover .c-sindex_image img { transform: scale(1.04); }
.c-sindex_num { color: rgba(255,255,255,.7); }
.c-sindex_title { font-size: var(--text-heading-2xs); font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
.c-sindex_body { color: rgba(255,255,255,.82); }
.c-sindex_more { color: var(--color-accent); font-size: 20px; margin-top: auto; padding-top: 8px; }
.c-sindex_link:hover .c-sindex_more .c-button_icon::before { transform: scale(1.3); }
@media (min-width: 700px) { .c-sindex_grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .c-sindex_section { grid-template-columns: 1fr 2.4fr; align-items: start; } .c-sindex_grid { grid-template-columns: repeat(2, 1fr); } .c-sindex_head { position: sticky; top: 100px; } }
@media (min-width: 1300px) { .c-sindex_grid { grid-template-columns: repeat(3, 1fr); } }

/* Tile hover, everywhere a tile appears ------------------------------------ */
.c-stat:hover, .c-icon-card:hover, .c-option:hover, .c-checklist:hover, .c-numlist_item.is-expanded--off:hover { transform: translateY(-4px); background: var(--color-gray-100); }
.c-stats_grid:hover .c-stat, .c-icons_grid:hover .c-icon-card, .c-options_grid:hover .c-option { opacity: .55; }
.c-stats_grid .c-stat:hover, .c-icons_grid .c-icon-card:hover, .c-options_grid .c-option:hover { opacity: 1; }
.c-stat, .c-icon-card, .c-option { transition: transform var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease); }
.c-icon-card, .c-option, .c-checklist, .c-chip.-figure, .c-numlist_item.is-expanded--off { transition: transform var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease); }
.theme-dark .c-stat:hover, .theme-dark .c-icon-card:hover { background: rgba(255,255,255,.14); }
.c-numlist_item { transition: padding-left var(--dur-slow) var(--ease-expo-out), opacity var(--dur-slow) var(--ease); }
.c-numlist_list:hover .c-numlist_item { opacity: .35; }
.c-numlist_list .c-numlist_item:hover { opacity: 1; padding-left: 16px; }
.c-numlist_item:hover .c-numlist_num { color: var(--color-accent); }
.c-numlist_item .heading-xs { transition: color var(--dur) var(--ease); }
.c-steps_list:hover .c-steps_item { opacity: .35; } .c-steps_list .c-steps_item:hover { opacity: 1; }
.c-steps_item { transition: padding var(--dur-slow) var(--ease-expo-out), color var(--dur) var(--ease), opacity var(--dur-slow) var(--ease); }
/* Key figures: a quiet row of small text, hairline between items, no tiles */
.c-chipsblock.-figures { margin-top: calc(-1 * var(--fluid-xl)); }
.c-chipsblock.-figures .c-chips { gap: 12px 48px; }
.c-chipsblock.-figures .c-chip { background: transparent; color: var(--color-black); padding: 0; min-width: 0; border-radius: 0; gap: 3px; }
.c-chipsblock.-figures .c-chip_figure { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.c-chipsblock.-figures .c-chip_label { color: var(--color-gray-600); font-size: 10px; }
.c-chipsblock.-figures .c-chip:hover { transform: none; background: transparent; }
.c-hero-page_stats { gap: 12px 40px; }
.c-hero-page_stats .c-chip { background: transparent; padding: 0; border-radius: 0; }
.c-hero-page_stats .c-chip_figure { font-size: 15px; font-weight: 600; }

/* Long section pages ------------------------------------------------------- */
/* Section hero: a full window tile, 8px inside the window, photo, title at the middle left and the one line on the right. */
.c-shero { padding: 8px 8px 0; }
.c-shero_frame { position: relative; height: calc(100svh - 8px); min-height: 560px; border-radius: var(--radius-2xl); overflow: hidden; color: #fff; background: var(--color-black); }
.c-shero_media { position: absolute; inset: 0; }
.c-shero_media img { position: absolute; inset: -8%; width: 116%; max-width: none; height: 116%; object-fit: cover; will-change: transform; }
.c-shero_shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.45) 100%); }
.c-shero_inner { position: absolute; inset: 0; padding: 0 var(--grid-margin); display: grid; grid-template-columns: calc(50% - var(--fluid-md) / 2) minmax(0, 1fr) auto; column-gap: var(--fluid-md); align-content: start; padding-top: 50svh; }
.c-shero_eyebrow { grid-column: 1; grid-row: 1; align-self: start; margin-top: -2.4em; color: rgba(255,255,255,.8); }
.c-shero_title { grid-column: 1; grid-row: 1; padding-right: var(--fluid-md); }
.c-shero_line { grid-column: 2; grid-row: 1; max-width: 34rem; }
.c-shero_explore { grid-column: 3; grid-row: 1; justify-self: end; padding-left: var(--fluid-md); color: rgba(255,255,255,.8); }
.c-shero + .c-statement { margin-top: var(--fluid-2xl); }
@media (max-width: 999px) {
  .c-shero_inner { grid-template-columns: 1fr; padding-top: 40svh; row-gap: var(--fluid-md); }
  .c-shero_eyebrow, .c-shero_title, .c-shero_line, .c-shero_explore { grid-column: 1; grid-row: auto; margin: 0; justify-self: start; }
  .c-shero_line { font-size: var(--text-heading-xs); }
}
/* Intro paragraphs all run at the headline size and weight: black, grey, black. */
.c-statement.-intro .c-statement_body { display: block; }
.c-statement.-intro .c-statement_body p { display: inline; }
.c-statement.-intro .c-statement_body p + p { font-size: inherit; font-weight: inherit; }
.c-statement.-intro .c-statement_body p + p::before { content: " "; }

/* Closing call to action: full width photo on the band, glass tile over it */
.c-showcase { margin-block: var(--fluid-3xl); padding: 0 8px; }
.c-showcase_media { position: relative; height: 58svh; min-height: 420px; border-radius: var(--radius-xl); overflow: hidden; display: flex; align-items: flex-end; padding: 8px; }
.c-showcase_media img { position: absolute; inset: -8%; width: 116%; max-width: none; height: 116%; object-fit: cover; will-change: transform; }
.c-showcase_media::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.08); z-index: 1; }
/* Glass tile as on the template's careers page: bottom left, label and number on top, headline and button at the bottom. */
.c-showcase_glass { position: relative; z-index: 2; width: fit-content; max-width: min(100%, 34rem); display: flex; flex-direction: column; gap: var(--fluid-lg); padding: 20px 24px; border-radius: var(--radius-sm); background: rgba(0,0,0,.2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #fff; }
.c-showcase_top { display: flex; justify-content: space-between; color: rgba(255,255,255,.85); }
.c-showcase_bottom { display: grid; gap: var(--fluid-sm); }
.c-showcase_title { font-size: var(--text-heading-sm); }
.c-showcase_text { font-size: var(--text-body-sm); }
.c-showcase_text { color: rgba(255,255,255,.85); max-width: 30rem; }
.c-showcase_glass .c-actions { margin-top: var(--fluid-sm); }
@media (max-width: 699px) { .c-showcase_media { height: auto; min-height: 0; padding: 8px; } .c-showcase_glass { min-height: 0; margin-top: 46svh; } }
.c-band .c-showcase { margin-block: var(--fluid-2xl) 0; }
.c-band:has(> .c-showcase:first-child) { padding-top: 8px; } .c-band > .c-showcase:first-child { margin-top: 0; }

/* Dark rows block: photo with the headline over it, then text and hairline rows on black */
.c-darkrows { padding: 0 8px; margin-block: var(--fluid-3xl); }
.c-darkrows_inner { border-radius: var(--radius-2xl); background: var(--color-black); color: #fff; padding: 0 0 var(--fluid-xl); overflow: hidden; }
.c-darkrows_media { position: relative; aspect-ratio: 16 / 9; min-height: 420px; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; overflow: hidden; }
@media (min-width: 1000px) { .c-darkrows_media { aspect-ratio: auto; height: 50svh; } }
.c-darkrows_media img { position: absolute; inset: -8%; width: 116%; max-width: none; height: 116%; object-fit: cover; will-change: transform; }
.c-darkrows_media::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.3); z-index: 1; }
.c-darkrows_over { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--fluid-sm); text-align: center; padding: var(--fluid-lg); }
.c-darkrows_overeyebrow { color: rgba(255,255,255,.8); }
.c-darkrows_title { max-width: 14ch; text-wrap: balance; font-size: var(--text-display-md); }
.c-darkrows_body { padding: var(--fluid-xl) var(--fluid-md) 0; display: grid; gap: var(--fluid-xl); }
.c-darkrows_lead { max-width: none; color: #fff; }
.c-darkrows_lead p + p { margin-top: 1em; }
.c-darkrows_note { color: var(--color-gray-400); max-width: 36rem; margin-top: calc(-1 * var(--fluid-md)); }
.c-darkrows_note a { color: #fff; border-bottom: 1px solid currentColor; }
.c-darkrows_head { display: grid; gap: var(--fluid-sm); max-width: 44rem; }
.c-darkrows_head .c-two-tone_rest { color: var(--color-gray-400); }
.c-darkrows_rows { border-top: 1px solid rgba(255,255,255,.2); }
.c-darkrows_row { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.2); transition: opacity var(--dur-slow) var(--ease); }
.c-darkrows_rows:hover .c-darkrows_row { opacity: .4; } .c-darkrows_rows .c-darkrows_row:hover { opacity: 1; }
.c-darkrows_row dt { display: flex; gap: 12px; align-items: baseline; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.c-darkrows_figure { color: var(--color-accent); font-family: var(--font-mono); font-size: 13px; font-weight: 400; }
.c-darkrows_row dd { color: var(--color-gray-200); max-width: 34rem; margin: 0; }
@media (min-width: 800px) { .c-darkrows_body { grid-template-columns: 1fr 1fr; column-gap: var(--fluid-md); padding-inline: calc(var(--grid-margin) - 4px); } .c-darkrows_lead { grid-column: 2; } .c-darkrows_note { grid-column: 2; } .c-darkrows_head { grid-column: 1 / -1; } .c-darkrows_rows { grid-column: 1 / -1; } .c-darkrows_row { grid-template-columns: 1fr 1fr; column-gap: var(--fluid-md); } .c-darkrows_row dd { grid-column: 2; } .c-darkrows_row dt { grid-column: 1; } }

/* Simple list: head left, hairline list right */
.c-slist_grid { display: grid; gap: var(--fluid-lg); }
.c-slist_head .c-section_head { margin-bottom: 0; }
.c-slist_list { border-top: 1px solid var(--color-gray-200); }
.c-slist_item { display: grid; grid-template-columns: 56px 1fr; gap: 10px var(--fluid-sm); padding: 28px 0; border-bottom: 1px solid var(--color-gray-200); transition: opacity var(--dur-slow) var(--ease), padding-left var(--dur-slow) var(--ease-expo-out); }
.c-slist_list:hover .c-slist_item { opacity: .4; } .c-slist_list .c-slist_item:hover { opacity: 1; padding-left: 10px; }
.c-slist_num { color: var(--color-gray-500); grid-row: 1 / 3; padding-top: 6px; }
.c-slist_title { font-size: var(--text-heading-xs); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.c-slist_body { font-size: var(--text-body-md); }
.c-slist_body { color: var(--color-gray-800); grid-column: 2; font-size: var(--text-body-md); }
.c-slist_link { font-weight: 700; color: var(--color-gray-600); }
.c-slist_link:hover { color: var(--color-black); }
@media (min-width: 1000px) { .c-slist_grid { grid-template-columns: 1fr 1fr; column-gap: var(--fluid-md); align-items: start; } .c-slist_head { position: sticky; top: 100px; } }

/* Centred standout head (timeline and cost) */
.c-stats.-standout .c-section_head { margin-bottom: var(--fluid-2xl); max-width: 60rem; }
.c-stats.-standout .c-section_head .c-eyebrow { display: block; margin-bottom: var(--fluid-sm); }
.c-stats.-standout .c-section_head .c-two-tone_rest { display: block; font-size: var(--text-heading-xs); margin-top: var(--fluid-sm); max-width: 36rem; margin-inline: auto; }

/* Scroll driven timeline, vertical: the line fills downwards, each entry appears when reached, a small tick marks it. */
.c-timeline_track { position: relative; margin-top: var(--fluid-lg); padding-left: 40px; }
.c-timeline_line { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--color-gray-200); }
.c-timeline_fill { display: block; width: 100%; height: calc(var(--progress, 0) * 100%); background: var(--color-black); transition: height .2s linear; }
.c-timeline_items { display: grid; }
.c-timeline_item { position: relative; display: grid; grid-template-columns: 1fr; gap: 8px; padding: var(--fluid-lg) 0; border-top: 1px solid var(--color-gray-200); opacity: 0; transform: translateY(28px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease-expo-out); outline: none; }
.c-timeline_items:hover .c-timeline_item.is-on { opacity: .45; }
.c-timeline_items .c-timeline_item.is-on:hover, .c-timeline_items .c-timeline_item.is-on:focus-visible { opacity: 1; }
.c-timeline_item:hover .c-timeline_tick, .c-timeline_item:focus-visible .c-timeline_tick { background: var(--color-accent); width: 28px; }
.c-timeline_item:hover .c-timeline_year { color: var(--color-accent); }
.c-timeline_year { transition: color var(--dur) var(--ease); }
.c-timeline_item:first-child { border-top: 0; padding-top: 0; }
.c-timeline_item.is-on { opacity: 1; transform: none; }
.c-timeline_tick { position: absolute; left: -40px; top: calc(var(--fluid-lg) + .55em); width: 18px; height: 1px; background: var(--color-black); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-expo-out) .2s, background var(--dur) var(--ease), width var(--dur) var(--ease); }
.c-timeline_item:first-child .c-timeline_tick { top: .55em; }
.c-timeline_item.is-on .c-timeline_tick { transform: scaleX(1); }
.c-timeline_year { letter-spacing: -.02em; line-height: 1; }
.c-timeline_text { display: grid; gap: 8px; }
.c-timeline_label { color: var(--color-accent); }
.c-timeline_label.body-md { color: var(--color-gray-800); }
.c-timeline.-standout .c-section_head { margin-bottom: var(--fluid-2xl); max-width: 60rem; }
.c-timeline.-standout .c-section_head .c-eyebrow { display: block; margin-bottom: var(--fluid-sm); }
.c-timeline.-standout .c-section_head .c-two-tone_rest { display: block; font-size: var(--text-heading-xs); margin-top: var(--fluid-sm); max-width: 36rem; margin-inline: auto; }
.c-band .c-timeline_line { background: rgba(255,255,255,.2); } .c-band .c-timeline_fill, .c-band .c-timeline_tick { background: #fff; } .c-band .c-timeline_item { border-color: rgba(255,255,255,.2); } .c-band .c-timeline_label.body-md { color: var(--color-gray-200); }
.c-timeline_body { color: var(--color-gray-800); }
@media (min-width: 800px) { .c-timeline_item { grid-template-columns: calc(50% + var(--fluid-md) / 2 - 64px) 1fr; column-gap: var(--fluid-md); align-items: start; } .c-timeline_track { padding-left: 64px; } .c-timeline_tick { left: -64px; width: 28px; } }

/* Accordion, as on the template */
.c-accordions_grid { display: grid; gap: var(--fluid-lg); }
.c-accordions_head .c-section_head { margin-bottom: 0; }
.c-accordions_list { border-bottom: 1px solid var(--color-gray-200); align-self: start; }
@media (min-width: 1000px) { .c-accordions_grid { grid-template-columns: 1fr 1fr; column-gap: var(--fluid-md); align-items: start; } .c-accordions_head { position: sticky; top: 100px; } }
.c-accordion { border-top: 1px solid var(--color-gray-200); }
.c-accordion_summary { display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: var(--fluid-sm); padding: 24px 0; cursor: pointer; list-style: none; transition: padding-left var(--dur-slow) var(--ease-expo-out); }
.c-accordion_summary::-webkit-details-marker { display: none; }
.c-accordion_summary:hover { padding-left: 10px; }
.c-accordion_num { color: var(--color-gray-500); }
.c-accordion_title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.c-accordion_icon { position: relative; width: 24px; height: 24px; }
.c-accordion_icon span { position: absolute; left: 0; top: 11px; width: 24px; height: 2px; background: currentColor; transition: transform var(--dur-slow) var(--ease); }
.c-accordion_icon span:last-child { transform: rotate(90deg); }
.c-accordion.is-open .c-accordion_icon span:last-child { transform: rotate(0); }
.c-accordion_content { height: 0; overflow: hidden; will-change: height; }
.c-accordion.is-open .c-accordion_content { height: auto; }
.c-accordion_text { max-width: 44rem; display: grid; gap: 12px; padding: 0 0 0 48px; color: var(--color-gray-800); opacity: 0; transform: translateY(-6px); transition: opacity .6s var(--ease) .15s, transform .8s var(--ease-expo-out) .1s; }
.c-accordion.is-open .c-accordion_text { opacity: 1; transform: none; padding-bottom: 24px; }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 1000px) { .c-accordion_summary { grid-template-columns: 64px 1fr 24px; } .c-accordion_text { padding-left: 64px; } }

/* Bottom navigation on long pages: a strip of titles, selected one centred. Same height and type size as the top pill. */
/* The pill is a 560px window with the selected title at its centre. The dark box inside only covers the part of the
   window that has titles in it, so with the first title selected the box starts at that title and grows to the right. */
/* The box stays solid; only the titles fade out at an edge where they continue past it (mask set by main.js). */
.c-process.-marquee .c-process_count { display: none; }
.c-carousel_viewport.-scroll { overflow: visible; }

/* Horizontal timeline (timeline and cost) -------------------------------- */
.c-htl_track { position: relative; margin-top: var(--fluid-xl); padding-top: 8px; }
.c-htl_line { position: absolute; left: 0; right: 0; top: 15px; height: 1px; background: var(--color-gray-200); }
.c-htl_fill { display: block; height: 100%; width: calc(var(--progress, 0) * 100%); background: var(--color-black); transition: width .6s var(--ease-expo-out); }
.c-htl_nodes { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: var(--grid-gutter); }
.c-htl_node { position: relative; display: grid; gap: 8px; align-content: start; padding: 28px 12px 0 0; cursor: default; outline: none; opacity: .45; transition: opacity var(--dur-slow) var(--ease); }
.c-htl_node.is-active, .c-htl_node:hover, .c-htl_node:focus-visible { opacity: 1; }
.c-htl_dot { position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 1px solid var(--color-gray-400); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-slow) var(--ease-expo-out); }
.c-htl_node.is-active .c-htl_dot, .c-htl_node.is-lit .c-htl_dot { background: var(--color-black); border-color: var(--color-black); }
.c-htl_node.is-active .c-htl_dot { transform: scale(1.3); background: var(--color-accent); border-color: var(--color-accent); }
.c-htl_figure { letter-spacing: -.015em; }
.c-htl_label { color: var(--color-gray-800); max-width: 20rem; }
.c-htl_body { color: var(--color-gray-600); max-width: 20rem; display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows var(--dur-slow) var(--ease-expo-out); }
.c-htl_body > * { min-height: 0; }
.c-htl_node.is-active .c-htl_body { grid-template-rows: 1fr; }
@media (max-width: 699px) { .c-htl_nodes { grid-template-columns: 1fr; gap: var(--fluid-md); } .c-htl_line { left: 7px; right: auto; top: 8px; bottom: 0; width: 1px; height: auto; } .c-htl_fill { width: 1px; height: calc(var(--progress, 0) * 100%); } .c-htl_node { padding: 0 0 0 36px; } }

/* Closing band: black from the last text block through the closing card, with black space under it */
.c-band { position: relative; background: var(--color-black); color: #fff; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; margin: var(--fluid-3xl) 0 0; padding: var(--fluid-xl) 0 0; }
.c-band > section.container { margin-block: var(--fluid-2xl); }
.c-band > section.container:first-child { margin-top: 0; }
.c-band .c-showcase { margin-block: var(--fluid-2xl) 0; }
.c-band + .c-shero { background: var(--color-black); }
/* Section hand over: the closing call to action and the next section's tile travel up together, 8px apart. Once the
   next tile is about an inch from the bottom of the window, the call to action starts moving faster than the scroll,
   shrinking towards the top centre, and only dissolves in its last stretch. Driven by scroll, so it plays back in reverse. */
.c-band.-exit .c-showcase_media { --e: var(--exit, 0); --e2: calc(var(--e) * var(--e)); transform-origin: 50% 0; transform: translateY(calc(var(--e2) * -46svh)) scale(calc(1 - var(--e2) * .34)); opacity: calc(1 - max(0, (var(--e) - .72) / .28)); will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .c-band.-exit .c-showcase_media { transform: none; opacity: 1; } }
.c-band .heading-xs, .c-band .heading-sm, .c-band .heading-md, .c-band .heading-lg, .c-band .c-two-tone_key, .c-band .c-accordion_title, .c-band .c-slist_title, .c-band .c-numlist_text h3, .c-band .c-stat_figure, .c-band .c-htl_figure { color: #fff; }
.c-band .c-two-tone_rest, .c-band .c-section_sub { color: var(--color-gray-400); }
.c-band p, .c-band .body-sm, .c-band .c-note, .c-band .c-numlist_text p, .c-band .c-stat_body, .c-band .c-slist_body, .c-band .c-accordion_text, .c-band .c-htl_label, .c-band .c-statement_body, .c-band .c-statement_lead, .c-band .c-checklist li, .c-band .c-option_tagline, .c-band .c-option_section .body-sm, .c-band .c-icon-card p, .c-band .c-checklists_body, .c-band .c-checklist_body { color: var(--color-gray-200); }
.c-band .c-htl_body, .c-band .c-accordion_num, .c-band .c-slist_num, .c-band .c-checklist_note { color: var(--color-gray-400); }
.c-band .c-accordion, .c-band .c-accordions_list, .c-band .c-slist_list, .c-band .c-slist_item, .c-band .c-numlist_item, .c-band .c-steps_item, .c-band .c-option_section, .c-band .c-checklist_note { border-color: rgba(255,255,255,.2); }
.c-band .c-stat, .c-band .c-checklist, .c-band .c-option, .c-band .c-icon-card, .c-band .c-chip { background: rgba(255,255,255,.08); color: #fff; }
.c-band .c-stat:hover, .c-band .c-checklist:hover, .c-band .c-option:hover, .c-band .c-icon-card:hover { background: rgba(255,255,255,.14); }
.c-band .c-htl_line { background: rgba(255,255,255,.2); } .c-band .c-htl_fill { background: #fff; } .c-band .c-htl_dot { background: var(--color-black); border-color: rgba(255,255,255,.4); } .c-band .c-htl_node.is-lit .c-htl_dot { background: #fff; border-color: #fff; }
.c-band .c-numlist_item:hover .heading-xs, .c-band .c-numlist_item:hover p { color: #fff; }
.c-band .c-button.-primary { --bg: #fff; --hover-bg: var(--color-gray-200); --hover-fg: var(--color-black); --badge: var(--color-black); --badge-fg: #fff; --hover-badge: var(--color-black); --hover-badge-fg: #fff; }
.c-band .c-button.-secondary { --fg: #fff; } .c-band .c-button.-secondary .c-button_bg { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.c-band .c-statement_body a, .c-band .c-note a, .c-band .c-slist_link { color: #fff; }
.c-band .c-darkrows { margin-top: 0; padding: 0; } .c-band .c-darkrows_inner { padding-bottom: 0; }

/* WhatsApp: round bubble bottom right, small chat window above it ---------------------- */
.c-wa { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: var(--z-header); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; transition: transform var(--dur-slow) var(--ease-expo-out), opacity var(--dur) var(--ease); }
.c-wa.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
.c-wa_bubble { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255,255,255,.9); box-shadow: 0 6px 18px rgba(0,0,0,.18); opacity: .85; transition: transform var(--dur-slow) var(--ease-expo-out), background-color var(--dur) var(--ease); }
.c-wa_bubble:hover { transform: translateY(-2px); background: rgba(0,0,0,.9); opacity: 1; }
.c-wa_bubble svg { width: 20px; height: 20px; }
.c-wa_window { width: min(340px, calc(100vw - 32px)); border-radius: var(--radius-xl); background: #fff; color: var(--color-black); box-shadow: 0 24px 60px rgba(0,0,0,.3); overflow: hidden; transform-origin: bottom right; animation: waIn .5s var(--ease-expo-out) both; }
.c-wa_window[hidden] { display: none; }
@keyframes waIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.c-wa_head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--color-gray-100); }
.c-wa_avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: -.04em; flex: none; }
.c-wa_dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #25d366; border: 2px solid #fff; }
.c-wa_who { display: grid; gap: 1px; flex: 1; }
.c-wa_who strong { font-size: 15px; letter-spacing: -.01em; }
.c-wa_status { font-size: 12px; color: var(--color-gray-600); }
.c-wa_close { font-size: 22px; line-height: 1; color: var(--color-gray-600); padding: 4px 6px; border-radius: 6px; }
.c-wa_close:hover { background: var(--color-gray-100); color: var(--color-black); }
.c-wa_body { padding: 16px; background: #f6f6f6; display: grid; gap: 10px; min-height: 120px; align-content: start; }
.c-wa_time { color: var(--color-gray-500); text-align: center; }
.c-wa_typing { display: inline-flex; gap: 4px; padding: 12px 14px; background: #fff; border-radius: 14px 14px 14px 4px; width: max-content; }
.c-wa_typing[hidden] { display: none; }
.c-wa_typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gray-400); animation: waDots 1s infinite ease-in-out; }
.c-wa_typing span:nth-child(2) { animation-delay: .15s; } .c-wa_typing span:nth-child(3) { animation-delay: .3s; }
@keyframes waDots { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
.c-wa_msg { background: #fff; padding: 12px 14px; border-radius: 14px 14px 14px 4px; font-size: 15px; line-height: 1.4; max-width: 85%; animation: waMsg .45s var(--ease-expo-out) both; }
.c-wa_msg[hidden] { display: none; }
@keyframes waMsg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.c-wa_form { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; }
.c-wa_input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 0; border: 0; outline: none; background: transparent; color: var(--color-black); }
.c-wa_input::placeholder { color: var(--color-gray-400); }
.c-wa_send { width: 40px; height: 40px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; transition: transform var(--dur) var(--ease); }
.c-wa_send:hover { transform: scale(1.06); }
.c-wa_send svg { width: 18px; height: 18px; }
html.has-langbar .c-wa { bottom: calc(32px + var(--langbar-h, 96px)); }

/* Glass panel with lines (Contact) */
.c-glass { margin-block: var(--fluid-3xl); }
.c-glass .c-showcase_media { height: auto; min-height: 58svh; }
.c-glass_tile { max-width: min(100%, 36rem); gap: var(--fluid-md); }
.c-glass_rows { display: grid; gap: 14px 32px; grid-template-columns: 1fr 1fr; margin: 0; }
.c-glass_row { display: grid; gap: 2px; align-content: start; }
.c-glass_row:last-child { grid-column: 1 / -1; }
.c-glass_row dd { margin: 0; }
.c-glass_row dt { color: rgba(255,255,255,.7); }
.c-glass_row dd { font-size: var(--text-body-md); }
.c-glass_row a:hover { text-decoration: underline; }
.c-embed_open { justify-self: start; color: var(--color-gray-600); }

/* Split tiles: two tall photo tiles with a glass panel each (the Reforestation Visa routes) -------------- */
.c-split { margin-block: var(--fluid-3xl); }
.c-split:has(+ .c-band), .c-panels:has(+ .c-band), .c-stack:has(+ .c-band) { margin-bottom: 0; } .c-split + .c-band, .c-panels + .c-band, .c-stack + .c-band { margin-top: 8px; }
.c-split_head { display: grid; gap: var(--fluid-xs); max-width: 44rem; margin-bottom: var(--fluid-lg); }
.c-split_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 8px; }
.c-split_title { letter-spacing: -.015em; line-height: 1.05; }
@media (min-width: 1000px) { .c-split_grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); } .c-split_grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); } }
/* Four across: square tiles, every glass box the same height, titles under the section heading in size. */
.c-split_grid[data-count="4"] .c-split_tile { height: auto; aspect-ratio: 1; min-height: 0; }
.c-split_grid[data-count="4"] .c-split_glass { height: auto; min-height: 46%; max-width: none; gap: 12px; padding: 14px 16px 16px; grid-template-rows: auto 1fr; }
.c-split_grid[data-count="4"] .c-split_title { font-size: var(--text-heading-2xs); }
.c-split_grid[data-count="4"] .c-split_text { font-size: var(--text-body-sm); }
@media (max-width: 999px) { .c-split_grid[data-count="4"] { grid-template-columns: 1fr 1fr; } }
.c-split_tile { position: relative; height: 78svh; min-height: 480px; border-radius: var(--radius-xl); overflow: hidden; display: flex; align-items: flex-end; padding: 8px; color: #fff; background: #1c1c1c; }
.c-split_tile > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.4s var(--ease-expo-out); }
.c-split_tile:hover > img { transform: scale(1.04); }
.c-split_tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35)); z-index: 1; pointer-events: none; }
.c-split_glass { position: relative; z-index: 2; width: 100%; max-width: 30rem; background: rgba(0,0,0,.2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: var(--radius-sm); padding: 16px 18px 18px; display: grid; gap: 28px; }
.c-split_top { display: flex; justify-content: space-between; gap: 12px; color: rgba(255,255,255,.7); }
.c-split_bottom { display: grid; gap: 10px; }
.c-split_figure { letter-spacing: -.02em; line-height: 1; }
.c-split_text { color: rgba(255,255,255,.85); max-width: 26rem; }
.c-split_note { margin-top: var(--fluid-md); }
@media (max-width: 820px) { .c-split_grid { grid-template-columns: 1fr; } .c-split_tile { height: 62svh; min-height: 420px; } }

/* Steps timeline: the process with a duration per step, one unit per timeline ------------------------------- */
.c-timeline.-steps .c-timeline_head { display: grid; gap: var(--fluid-md); }
.c-timeline.-steps .c-section_head { margin-bottom: 0; }
.c-timeline_lead { max-width: 34rem; color: var(--color-gray-800); }
.c-timeline.-steps .c-timeline_year { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; }
.c-timeline_time { color: var(--color-gray-600); font-weight: 400; letter-spacing: 0; white-space: nowrap; transition: color var(--dur) var(--ease); }
.c-timeline_title, .c-timeline_body, .c-timeline.-steps .c-timeline_year { transition: color var(--dur) var(--ease); }
.c-timeline_title { display: inline-block; transform-origin: left center; transition: color var(--dur) var(--ease), transform var(--dur-slow) var(--ease-expo-out); }
/* Resting on a step turns the whole step orange and lifts its title a little. */
.c-timeline.-steps .c-timeline_item:hover .c-timeline_title, .c-timeline.-steps .c-timeline_item:hover .c-timeline_body, .c-timeline.-steps .c-timeline_item:hover .c-timeline_time, .c-timeline.-steps .c-timeline_item:focus-visible .c-timeline_title { color: var(--color-accent); }
.c-timeline.-steps .c-timeline_item:hover .c-timeline_title { transform: scale(1.04); }
/* Figures that are not durations: small cards under the line. */
.c-timeline_cards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--fluid-xl); }
.c-timeline_card { position: relative; overflow: hidden; flex: 0 1 auto; min-width: 180px; max-width: 320px; display: grid; gap: 10px; align-content: start; padding: 18px 20px 20px; border-radius: var(--radius-sm); color: #fff; background: #1c1c1c url("../images/shared/texture-01.jpg") center / cover; transition: opacity var(--dur-slow) var(--ease); }
.c-timeline_card::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.1); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.c-timeline_card > * { position: relative; }
.c-timeline_cards:hover .c-timeline_card { opacity: .55; } .c-timeline_cards .c-timeline_card:hover { opacity: 1; }
.c-timeline_card-figure { letter-spacing: -.015em; line-height: 1; }
.c-timeline_card-label { color: rgba(255,255,255,.85); max-width: 24rem; }
.c-band .c-timeline_card { background: rgba(255,255,255,.08); } .c-band .c-timeline_card-label { color: var(--color-gray-200); }
@media (min-width: 800px) { .c-timeline.-steps .c-timeline_head { grid-template-columns: calc(50% - var(--fluid-md) / 2) 1fr; column-gap: var(--fluid-md); align-items: end; } }
/* Body paragraphs after a heading: regular weight, body size; a second paragraph goes grey. */
.c-statement_body { font-weight: 400; font-size: var(--text-body-lg); max-width: none; }
.c-statement_body p + p { font-weight: 400; color: inherit; }
/* The big intro paragraph: first line black, the detail grey, a closing line black again. */
.c-statement.-intro .c-statement_body p + p { color: var(--color-gray-600); }
.c-statement.-intro .c-statement_body p + p + p { display: block; margin-top: var(--fluid-sm); font-size: var(--text-body-lg); font-weight: 400; letter-spacing: -.015em; line-height: 1.4; color: var(--color-black); max-width: 36em; }
.c-statement.-intro .c-statement_body p + p + p::before { content: none; }
.c-statement.-large .c-statement_body { font-weight: 700; max-width: 60rem; }

/* Section switcher: a small vertical bar above the WhatsApp bubble on the long pages ----------------------- */
.c-switch { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: .45; transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-expo-out); }
.c-switch:hover, .c-switch:focus-within { opacity: 1; }
.c-switch.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
.c-switch_btn { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.c-switch_btn:hover { background: rgba(255,255,255,.18); }
.c-switch_btn.is-off { opacity: .25; pointer-events: none; }
.c-switch_btn svg { width: 14px; height: 14px; }

/* Comparison tiles --------------------------------------------------------------------------------------- */
.c-compare_tiles { display: grid; gap: 8px; grid-template-columns: 1fr; }
.c-compare_tile { padding: 20px 22px 24px; border-radius: var(--radius-sm); background: var(--surface-10); display: grid; gap: 14px; align-content: start; transition: opacity var(--dur-slow) var(--ease); }
.c-compare_tiles:hover .c-compare_tile { opacity: .55; } .c-compare_tiles .c-compare_tile:hover { opacity: 1; }
.c-compare_tile-rows { display: grid; }
.c-compare_tile-row { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--color-gray-200); }
.c-compare_tile-row dt { color: var(--color-gray-600); }
.c-compare_tile-row dd { margin: 0; color: var(--color-black); }
.c-band .c-compare_tile { background: rgba(255,255,255,.08); } .c-band .c-compare_tile-row { border-color: rgba(255,255,255,.2); } .c-band .c-compare_tile-row dd { color: #fff; }
@media (min-width: 800px) { .c-compare_tiles { grid-template-columns: repeat(var(--n, 3), 1fr); } .c-compare_tiles[data-count="2"] { --n: 2; } .c-compare_tiles[data-count="4"] { --n: 4; } }

/* Panels: black tile, photo left, text right (title top, text bottom) ----------------------------------------- */
.c-panels { margin-block: var(--fluid-3xl); display: grid; gap: 8px; }
.c-panels_head { margin-bottom: var(--fluid-md); }
.c-panel { position: relative; margin: 0 8px; border-radius: var(--radius-xl); overflow: hidden; display: grid; grid-template-columns: 1fr; min-height: 70svh; }
.c-panel.-dark { background: var(--color-black); color: #fff; }
.c-panel.-light { background: #1c1c1c; color: #fff; }
.c-panel_media { position: relative; min-height: 40svh; }
/* The photo sits inside the black tile with a sliver of black around it, as on the template. */
.c-panel.-dark .c-panel_media { margin: 8px; border-radius: calc(var(--radius-xl) - 6px); overflow: hidden; }
.c-panel_media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.c-panel_text { position: relative; z-index: 2; display: grid; grid-template-rows: auto 1fr; gap: var(--fluid-lg); padding: var(--fluid-lg); }
.c-panel_bottom { align-self: end; display: grid; gap: var(--fluid-sm); }
.c-panel_title { line-height: .9; letter-spacing: -.03em; font-weight: 700; }
.c-panel_heading { color: #fff; max-width: 30rem; }
.c-panel_body { color: rgba(255,255,255,.8); max-width: 30rem; }
.c-panel_list { display: grid; margin-top: var(--fluid-xs); max-width: 34rem; }
.c-panel_list li { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.9); }
.c-panel_note { color: rgba(255,255,255,.6); max-width: 34rem; }
.c-panel_note a, .c-panel_body a { color: #fff; border-bottom: 1px solid currentColor; }
.c-panel_cta { justify-self: end; display: grid; gap: 40px; min-width: 260px; padding: 18px 20px; border-radius: var(--radius-lg); background: rgba(255,255,255,.08); transition: background var(--dur) var(--ease); }
.c-panel_cta:hover { background: rgba(255,255,255,.14); }
@media (min-width: 1000px) {
  .c-panel.-dark { grid-template-columns: 1fr 1fr; min-height: 80svh; }
  .c-panel.-dark .c-panel_media { min-height: calc(80svh - 16px); }
  .c-panel.-dark .c-panel_text { padding: var(--fluid-lg) var(--fluid-lg) var(--fluid-lg) var(--fluid-lg); }
  .c-panel.-dark.-right .c-panel_media { order: 2; }
  .c-panel.-light .c-panel_media { position: absolute; inset: 0; }
  .c-panel.-light { display: flex; justify-content: flex-end; align-items: stretch; padding: 8px; }
  .c-panel.-light .c-panel_glass { width: 50%; background: rgba(0,0,0,.38); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: var(--radius-lg); padding: var(--fluid-lg); }
}

/* Simple tiles ------------------------------------------------------------------------------------------- */
.c-tiles_grid { display: grid; gap: 8px; grid-template-columns: 1fr; }
.c-tile { display: grid; gap: 10px; align-content: start; padding: 22px 24px 26px; border-radius: var(--radius-sm); background: var(--surface-10); transition: opacity var(--dur-slow) var(--ease); }
.c-tiles_grid:hover .c-tile { opacity: .55; } .c-tiles_grid .c-tile:hover { opacity: 1; }
.c-tile_body { color: var(--color-gray-800); }
.c-band .c-tile { background: rgba(255,255,255,.08); } .c-band .c-tile_body { color: var(--color-gray-200); }
.c-darkrows_sub { color: var(--color-gray-400); max-width: 40rem; }
@media (min-width: 800px) { .c-tiles_grid { grid-template-columns: 1fr 1fr; } }

/* Stacked tiles: title bars gather at the bottom, each tile rises out of the stack in turn ------------------- */
.c-stack { margin-block: var(--fluid-3xl); }
.c-stack_head { margin-bottom: var(--fluid-lg); }
.c-stack_list { --tile-h: max(50svh, 380px); --bar: 72px; --rise: 45svh; --pause: 10svh; display: grid; gap: 8px; padding: 0 8px; list-style: none; margin: 0; }
.c-stack_item { display: flex; flex-direction: column; justify-content: flex-end; }
.c-stack_tile { position: relative; height: var(--tile-h); border-radius: var(--radius-xl); overflow: hidden; background: #1c1c1c; color: #fff; display: block; box-shadow: 0 -4px 18px rgba(0,0,0,.18); }
.c-stack_tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); z-index: 1; pointer-events: none; }
.c-stack_tile > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.c-stack_bar { position: absolute; top: 0; left: 0; right: 0; height: 72px; display: flex; align-items: center; gap: 18px; padding: 0 24px; z-index: 2; }
.c-stack_num { color: var(--color-accent); }
.c-stack_glass { position: absolute; left: 24px; top: 80px; z-index: 2; max-width: 34rem; opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease), transform 1s var(--ease-expo-out); background: rgba(0,0,0,.25); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: var(--radius-sm); padding: 16px 18px; }
.c-stack_glass p { color: rgba(255,255,255,.9); }
@media (max-width: 799px) { .c-stack_glass { opacity: 1; transform: none; } }
@media (min-width: 800px) {
  /* The list is a runway. Each item is placed one bar height below the previous, so the tiles already form the stack
     while it travels up with the page. A tile sticks to the bottom of the window, offset by the bars below it, and is
     released when its item's bottom edge passes that line. Items get taller one after the other, so the first tile
     is released first and the rest follow at --rise intervals while the stack below stays put. */
  .c-stack_list { position: relative; display: block; height: calc(var(--tile-h) + (var(--n) - 1) * var(--bar) + var(--pause) + (var(--n) - 1) * var(--rise)); padding: 0 8px 8px; }
  .c-stack_item { position: absolute; left: 8px; right: 8px; top: calc(var(--i) * var(--bar)); height: calc(var(--tile-h) + var(--pause) + var(--i) * var(--rise)); }
  .c-stack_tile { position: sticky; bottom: calc((var(--n) - 1 - var(--i)) * var(--bar)); }
  .c-stack_tile.is-risen .c-stack_glass { opacity: 1; transform: none; }
}

/* A link alone on its line reads as a link: bold, with the diagonal arrow in a box. */
/* A link that closes a paragraph sits where a button would: its own line under the text, regular weight, underlined, with the arrow. */
.c-statement_body p > a:only-child { display: flex; width: max-content; align-items: center; gap: 10px; margin-top: var(--fluid-sm); border-bottom: 0; font-weight: 400; color: var(--color-gray-600); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transform-origin: left center; transition: color var(--dur-slow) var(--ease), transform .6s var(--ease-expo-out); }
.c-statement_body p > a:only-child:hover { color: var(--color-black); transform: scale(1.05); }
.c-statement_body p > a:only-child::after { content: ""; width: .8em; height: .8em; background: currentColor; -webkit-mask: var(--arrow-ne) center / contain no-repeat; mask: var(--arrow-ne) center / contain no-repeat; transition: transform .7s var(--ease-expo-out); }


/* Zigzag rows ------------------------------------------------------------------------------------------- */
.c-zigzag_list { display: grid; gap: var(--fluid-lg); }
.c-zigzag_row { display: grid; gap: var(--fluid-md); align-items: center; }
.c-zigzag_tile { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; background: #1c1c1c; color: #fff; }
.c-zigzag_tile > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.4s var(--ease-expo-out); }
.c-zigzag_row:hover .c-zigzag_tile > img { transform: scale(1.04); }
.c-zigzag_tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0) 50%); z-index: 1; }
.c-zigzag_over { position: absolute; top: 20px; left: 22px; right: 22px; z-index: 2; display: grid; gap: 8px; }
.c-zigzag_num { color: var(--color-accent); }
.c-zigzag_text { max-width: 30rem; }
@media (min-width: 900px) {
  .c-zigzag_row { grid-template-columns: 1fr 1fr; column-gap: var(--fluid-md); }
  .c-zigzag_row.-flip .c-zigzag_tile { order: 2; }
  .c-zigzag_row.-flip .c-zigzag_text { order: 1; justify-self: end; }
}

/* The same diagonal arrow wherever a text arrow was used: hero card, footer menu, text links. Spins on hover. */
.c-hero-card_arrow, .c-footer_menu-arrow, .c-textlink > span[aria-hidden], .c-slist_link > span[aria-hidden], .c-icon-card_link > span[aria-hidden] { display: inline-block; width: .9em; height: .9em; font-size: inherit; color: inherit; background: currentColor; -webkit-mask: var(--arrow-ne) center / contain no-repeat; mask: var(--arrow-ne) center / contain no-repeat; transition: transform .7s var(--ease-expo-out); overflow: hidden; text-indent: -999px; }
.c-hero-card:hover .c-hero-card_arrow { transform: scale(1.25); }
.c-footer_menu-link:hover .c-footer_menu-arrow { transform: scale(1.25); }
.c-slist_link, .c-icon-card_link { display: inline-block; transform-origin: left center; transition: color var(--dur-slow) var(--ease), transform .6s var(--ease-expo-out); }
.c-slist_link:hover, .c-icon-card_link:hover { transform: scale(1.05); }
.c-textlink:has(> span[aria-hidden])::before { display: none; }

/* Compared columns: one title, a photo card per column, then a row per topic with one cell per column. ---------- */
.c-cols { margin-block: var(--fluid-3xl); }
.c-cols_grid { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); column-gap: var(--fluid-md); margin-top: var(--fluid-lg); }
.c-cols_headcell { padding-bottom: var(--fluid-md); }
.c-cols_card { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; display: flex; align-items: flex-end; padding: 8px; color: #fff; background: #1c1c1c; }
.c-cols_card > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.4s var(--ease-expo-out); }
.c-cols_card:hover > img { transform: scale(1.04); }
.c-cols_card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.35)); z-index: 1; pointer-events: none; }
.c-cols_glass { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; width: 100%; background: rgba(0,0,0,.25); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: var(--radius-sm); padding: 14px 18px; }
.c-cols_glass .label { color: rgba(255,255,255,.7); }
.c-cols_coltitle { color: #fff; }
.c-cols_rowhead { grid-column: 1 / -1; border-top: 1px solid var(--color-gray-200); padding-top: var(--fluid-md); display: grid; gap: 8px; }
.c-cols_rowhead .heading-xs { max-width: 44rem; }
.c-cols_rowhead .body-md { color: var(--color-gray-800); max-width: 44rem; }
.c-cols_cell { padding: var(--fluid-sm) 0 var(--fluid-lg); display: grid; gap: 10px; align-content: start; min-width: 0; }
.c-cols_colname { color: var(--color-gray-600); }
.c-cols_cell .body-md { color: var(--color-gray-800); }
.c-cols_list { list-style: none; margin: 0; padding: 0; display: grid; }
.c-cols_list li { padding: 10px 0; border-top: 1px solid var(--color-gray-200); color: var(--color-gray-800); }
.c-cols_list li:first-child { border-top: 0; padding-top: 0; }
.c-cols_figure { letter-spacing: -.02em; line-height: 1; }
@media (max-width: 820px) { .c-cols_grid { grid-template-columns: 1fr; } .c-cols_headcell { padding-bottom: 12px; } .c-cols_cell { padding-bottom: var(--fluid-md); } }

/* Photo band: half height, full width. -------------------------------------------------------------------------- */
.c-photoband { padding: 0 8px; margin-block: var(--fluid-3xl); }
.c-photoband.-dark { background: var(--color-black); margin: 0 8px var(--fluid-3xl); padding: 0 8px 8px; border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); }
.c-statement.-dark:has(+ .c-photoband.-dark) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
.c-photoband_media { position: relative; height: 50svh; min-height: 360px; border-radius: var(--radius-xl); overflow: hidden; background: #1c1c1c; }
.c-photoband_media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Opening statement on a page without a hero tile: room for the header. */
.c-statement.-opener { padding-top: calc(var(--fluid-3xl) + 72px); }
.c-statement.-dark { border-radius: var(--radius-2xl); margin-inline: 8px; }

/* Contact: direct lines under the opening text; the write first band as a full width picture tile with the form on glass. */
.c-hero-contact_lines { display: grid; gap: 14px; padding-top: var(--fluid-sm); margin-top: auto; }
.c-lines { display: grid; margin: 0; }
.c-lines_row { display: grid; grid-template-columns: 11rem 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-gray-200); align-items: baseline; }
.c-lines_row:last-child { border-bottom: 1px solid var(--color-gray-200); }
.c-lines_row dt { color: var(--color-gray-600); } .c-lines_row dd { margin: 0; color: var(--color-black); }
.c-form-band.-picture { position: relative; margin: var(--fluid-3xl) 8px 0; padding-block: var(--fluid-3xl); border-radius: var(--radius-2xl); overflow: hidden; background: var(--color-black); color: #fff; }
.c-form-band.-picture .c-form-band_media { position: absolute; inset: 0; }
.c-form-band.-picture .c-form-band_media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .6; }
.c-form-band.-picture .c-form-band_media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.6)); z-index: 1; }
.c-form-band.-picture .c-form-band_inner { position: relative; z-index: 2; }
.c-form-band.-picture .c-two-tone_key, .c-form-band.-picture .heading-md { color: #fff; }
.c-form-band.-picture .c-two-tone_rest { color: rgba(255,255,255,.7); }
.c-form-band.-picture .c-form-band_body, .c-form-band.-picture .c-form-band_note, .c-form-band.-picture .c-form_status { color: rgba(255,255,255,.85); }
.c-form-band.-picture .c-form-band_panel { background: rgba(0,0,0,.28); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #fff; }
.c-form-band.-picture .c-form_field .label { color: rgba(255,255,255,.75); }
.c-form-band.-picture .c-form_field input, .c-form-band.-picture .c-form_field select, .c-form-band.-picture .c-form_field textarea { background: rgba(255,255,255,.92); color: var(--color-black); border-color: transparent; }

/* Compact closing card (guides): half the window, the glass tile at the top left. */
.c-showcase.-compact .c-showcase_media { height: 50svh; min-height: 380px; align-items: flex-start; }
/* Plain closing card (guides): a white tile, no photo, black text, the grey button. */
.c-showcase.-plain .c-showcase_media { background: #fff; color: var(--color-black); }
.c-showcase.-plain .c-showcase_media::before { display: none; }
.c-showcase.-plain .c-showcase_glass { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 24px 28px; max-width: min(100%, 40rem); }
.c-showcase.-plain .c-showcase_top { color: var(--color-gray-600); }
.c-showcase.-plain .c-showcase_title, .c-band .c-showcase.-plain .heading-md { color: var(--color-black); }
.c-showcase.-plain .c-showcase_text, .c-band .c-showcase.-plain p { color: var(--color-gray-800); }
.c-band .c-showcase.-plain .c-button.-primary { --bg: var(--color-gray-100); --fg: var(--color-black); --hover-bg: var(--surface-80); --hover-fg: #fff; --badge: #fff; --badge-fg: var(--color-black); --hover-badge: #fff; --hover-badge-fg: var(--color-black); }
.c-band .c-showcase.-plain .c-button.-secondary { --fg: var(--color-black); }
.c-band .c-showcase.-plain .c-button.-secondary .c-button_bg { box-shadow: inset 0 0 0 1px var(--color-gray-200); }
/* Quiet closing box on the guides: as small as its text, bottom right, scrolls with the page. */
.c-ctabox { display: flex; justify-content: flex-end; margin: var(--fluid-2xl) auto var(--fluid-xl); }
.c-ctabox_box { display: grid; gap: 12px; width: min(100%, 24rem); padding: 20px 22px; border-radius: var(--radius-lg); background: var(--surface-10); }
.c-ctabox_text { color: var(--color-gray-800); }
.c-ctabox .c-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 4px; }
/* Guide band: the article on black, closing tight under it, with the white box level with the last paragraph. */
.c-band.-guide { padding-bottom: 8px; }
.c-band.-guide > .c-article { margin-bottom: var(--fluid-md); }
.c-band .c-article_body, .c-band .c-article_asidebody { color: var(--color-gray-200); }
.c-band .c-article_lead, .c-band .c-article_body .c-rich_h2, .c-band .c-article_body .c-rich_h3, .c-band .c-article_body p strong, .c-band .c-article_body a, .c-band .c-article_links a { color: #fff; }
.c-band .c-article_body a:hover, .c-band .c-article_links a:hover { color: var(--color-accent); }
.c-article_cta { display: grid; gap: 12px; align-content: start; align-self: end; justify-self: start; width: min(100%, 22rem); padding: 20px 22px; border-radius: var(--radius-lg); background: #fff; color: var(--color-black); }
.c-band .c-article_cta .heading-xs, .c-band .c-article_cta-title { color: var(--color-black); }
.c-article_cta-text, .c-band .c-article_cta p { color: var(--color-gray-800); }
.c-article_cta .c-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 4px; }
.c-band .c-article_cta .c-textlink { color: var(--color-gray-600); } .c-band .c-article_cta .c-textlink:hover { color: var(--color-black); }
@media (min-width: 1000px) { .c-article_grid:has(> .c-article_cta) { grid-template-columns: minmax(18rem, 1fr) minmax(0, 44rem) 1fr; } .c-article_cta { grid-column: 1; grid-row: 1; margin-right: var(--fluid-md); } .c-article_grid:has(> .c-article_cta) .c-article_aside { grid-column: 1; grid-row: 1; } .c-article_grid:has(> .c-article_cta) .c-article_body { grid-column: 2; grid-row: 1; } }
@media (max-width: 999px) { .c-article_cta { justify-self: stretch; } }
/* Stage: the last picture tile of a page (closing call to action, the contact form) sits on black that runs into
   the footer, so there is no white between the tile and the footer. */
.c-stage { background: var(--color-black); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; margin-top: var(--fluid-xl); padding: 8px 0 calc(var(--radius-2xl) + 8px); }
.c-stage > .c-push, .c-stage > .c-form-band.-picture { margin-top: 0; }
.c-stage:has(> .c-404) { margin-top: 0; padding-top: 0; border-radius: 0; }
.c-stage > .c-404 { margin-bottom: 0; }
.c-stage > .c-push { transform: none; }
/* Section tile video: fades in over the poster photo once it plays. */
.c-shero_video { position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 1s var(--ease); pointer-events: none; }
.c-shero_media.has-video .c-shero_video { opacity: 1; }
/* Lone back to top arrow on single pages. */
.c-switch.-solo { transition: transform .5s var(--ease), opacity .4s var(--ease); }
/* Hand over: the previous service's glass call to action rides on the next tile while it rises, and dissolves once the
   tile covers half the screen; only then does the tile's own title come in. ----------------------------------------- */
.c-shero_handover { position: absolute; left: 24px; top: 24px; z-index: 4; max-width: min(100% - 48px, 34rem); transition: opacity .55s var(--ease), transform .7s var(--ease-expo-out); }
.c-shero_handover.is-gone { opacity: 0; transform: translateY(-48px) scale(.97); pointer-events: none; }
.c-shero_glass { background: rgba(0,0,0,.28); }
.c-shero.-handover .c-shero_inner { opacity: 0; transition: opacity .4s var(--ease); }
.c-shero.-handover.is-inview .c-shero_inner { opacity: 1; }
.c-band.-tail { padding-bottom: var(--fluid-xl); }
/* Dark pages (Services): black all the way down, white text. ---------------------------------------------------- */
body.page-dark, body.page-dark .page { background: var(--color-black); color: #fff; }
body.page-dark .c-stage { margin-top: 0; border-radius: 0; }
body.page-dark .c-sindex_head .c-eyebrow { color: rgba(255,255,255,.7); }
/* Company formation order: rail with the running total on the left, one step panel at a time on the right. --------- */
.c-order { display: grid; gap: var(--fluid-xl); margin-block: var(--fluid-2xl) var(--fluid-3xl); color: #fff; }
.c-order [hidden] { display: none !important; }
.c-order_card_name { font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
.c-order_rail { display: grid; gap: var(--fluid-lg); align-content: start; }
.c-order_steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.c-order_step { display: flex; align-items: baseline; gap: 14px; color: rgba(255,255,255,.45); transition: color var(--dur-slow) var(--ease); }
.c-order_step.is-done { color: rgba(255,255,255,.7); cursor: pointer; }
.c-order_step.is-current { color: #fff; }
.c-order_step_num { min-width: 2ch; }
.c-order_summary { margin: 0; display: grid; gap: 12px; padding: 20px 24px; border-radius: var(--radius-lg); background: rgba(255,255,255,.06); }
.c-order_row { display: grid; gap: 4px; }
.c-order_row dt { color: rgba(255,255,255,.55); }
.c-order_row dd { margin: 0; }
.c-order_row.-total { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.c-order_summary_note { color: rgba(255,255,255,.55); }
.c-order_form { display: grid; gap: var(--fluid-lg); align-content: start; }
.c-order_panel { display: none; gap: var(--fluid-md); margin: 0; padding: 0; border: 0; min-width: 0; }
.c-order_panel.is-active { display: grid; animation: orderIn .6s var(--ease-expo-out); }
@keyframes orderIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.c-order_title { color: #fff; max-width: 22ch; text-wrap: balance; }
legend.c-order_title { float: left; width: 100%; padding: 0; }
.c-order_lead { color: rgba(255,255,255,.7); max-width: 40rem; }
.c-order_group { display: grid; gap: 12px; }
.c-order_group_label { color: rgba(255,255,255,.55); }
.c-order_cards, .c-order_choice { display: grid; gap: 10px; }
.c-order_card { position: relative; display: block; cursor: pointer; }
.c-order_card input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.c-order_card_inner { display: grid; gap: 6px; padding: 16px 18px; border-radius: var(--radius-md); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: background-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.c-order_card:hover .c-order_card_inner { background: rgba(255,255,255,.1); }
.c-order_card input:checked + .c-order_card_inner { background: #fff; color: var(--color-black); box-shadow: inset 0 0 0 1px #fff; }
.c-order_card input:focus-visible + .c-order_card_inner { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.c-order_card_price { color: rgba(255,255,255,.6); }
.c-order_card input:checked + .c-order_card_inner .c-order_card_price { color: var(--color-gray-600); }
.c-order_card_note { opacity: .8; }
.c-order_help { color: rgba(255,255,255,.6); }
.c-order_help .c-textlink { color: rgba(255,255,255,.8); }
.c-order_help .c-textlink:hover { color: #fff; }
.c-order_fields { gap: 16px; }
.c-order .c-form_field .label { color: rgba(255,255,255,.7); }
.c-order .c-form_field input, .c-order .c-form_field select, .c-order .c-form_field textarea { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.14); }
.c-order .c-form_field input:focus, .c-order .c-form_field textarea:focus { outline-color: #fff; background: rgba(255,255,255,.1); }
.c-order .c-form_field.is-invalid input, .c-order .c-form_field.is-invalid textarea { border-color: var(--color-accent); }
.c-form_help { color: rgba(255,255,255,.5); }
.c-order_people { display: grid; gap: var(--fluid-md); }
.c-order_person { display: grid; gap: 16px; padding: 20px; border-radius: var(--radius-lg); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.c-order_person_head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.c-order_type { display: flex; gap: 8px; flex-wrap: wrap; }
.c-order_pill { position: relative; cursor: pointer; }
.c-order_pill input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.c-order_pill span { display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: var(--text-body-sm); background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease); }
.c-order_pill input:checked + span { background: #fff; color: var(--color-black); }
.c-order_person .-corp, .c-order_person.-corporation .-ind { display: none; }
.c-order_person.-corporation .-corp { display: grid; }
.c-order_person .-share { display: none; }
.c-order_people[data-share] .-share { display: grid; }
.c-order_add, .c-order_remove, .c-order_back { color: rgba(255,255,255,.7); background: none; border: 0; font: inherit; cursor: pointer; }
.c-order_add:hover, .c-order_remove:hover, .c-order_back:hover { color: #fff; }
.c-textlink.-plain::before { display: none; }
.c-order_check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; color: rgba(255,255,255,.85); }
.c-order_check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: #fff; }
.c-order_check.is-invalid { color: var(--color-accent); }
.c-order_decl { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.c-order_check.-consent { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.c-order_review { display: grid; gap: 12px; }
.c-order_recap { margin: 0; display: grid; gap: 10px; }
.c-order_recap div { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
.c-order_recap dt { color: rgba(255,255,255,.55); font-size: var(--text-label); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.c-order_recap dd { margin: 0; font-size: var(--text-body-sm); }
.c-order_nav { display: grid; gap: 12px; padding-top: var(--fluid-md); border-top: 1px solid rgba(255,255,255,.14); }
.c-order_nav_row { display: flex; align-items: center; gap: 20px; }
.c-order_count { margin-left: auto; color: rgba(255,255,255,.5); }
.c-order_error { color: var(--color-accent); }
.c-order_done { gap: 12px; }
@media (min-width: 700px) { .c-order_cards { grid-template-columns: repeat(2, 1fr); } .c-order_choice { grid-template-columns: 1fr 1fr; } .c-order_recap { grid-template-columns: 1fr 1fr; gap: 10px 24px; } }
@media (min-width: 1000px) { .c-order { grid-template-columns: minmax(16rem, 1fr) 2.2fr; gap: var(--fluid-2xl); } .c-order_rail { position: sticky; top: 100px; } .c-order_cards { grid-template-columns: repeat(3, 1fr); } }