:root {
  --color-bg: #eef4f8; --color-text: #1c2c38; --color-heading: #0e1a24;
  --color-muted: #5a7384; --color-accent: #3d8fb5; --color-surface: #dce8f0;
  --color-border: rgba(14,26,36,.1); --nav-fg: #fff; --nav-solid: rgba(238,244,248,.96);
  --nav-solid-fg: #0e1a24; --btn-primary-fg: #fff; --font-display: 'Outfit', sans-serif;
  --font-body: 'Rubik', sans-serif; --footer-bg: #0e1a24; --btn-radius: 6px;
}
html:has(body.theme-climate) { overflow-x: hidden; }
.theme-climate { overflow-x: hidden; overscroll-behavior-x: none; }
body { font-family: var(--font-body); background: var(--color-bg); }
h1,h2,h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; }
.theme-climate .site-footer, .theme-climate .site-footer p, .theme-climate .site-footer a, .theme-climate .site-footer button, .theme-climate .site-footer h3 { color: #c5d6e0; }
.cli-hero { position: relative; min-height: 100vh; display: grid; overflow: hidden; isolation: isolate; }
@media (min-width: 800px) {
  .cli-hero { grid-template-columns: 1.15fr .85fr; }
  .cli-hero__out { clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
}
.cli-hero__in, .cli-hero__out { overflow: hidden; min-height: 50vh; background: #9bb7c8; }
.cli-hero img { width: 100%; height: 100%; object-fit: cover; min-height: 50vh; }
.cli-hero__copy { position: absolute; inset: auto 0 0; z-index: 2; padding: 5.5rem 8vw 4rem; color: #fff;
  background: linear-gradient(105deg, rgba(14,26,36,.88) 0%, rgba(14,26,36,.42) 62%, transparent); max-width: 46rem; }
.cli-hero h1 { font-size: clamp(2.8rem, 7vw, 5.2rem); letter-spacing: -.02em; }
.cli-hero .lede { max-width: 32ch; color: rgba(255,255,255,.9); }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.3rem; }
.cli-stats { display: flex; justify-content: space-around; padding: 2.2rem; background: #0e1a24; color: #fff; flex-wrap: wrap; gap: 1rem; }
.cli-stats b { display: block; font-size: 2rem; color: #7ec8e3; }
.cli-film { overflow: hidden; background: #0e1a24; padding: 10px 0; }
.cli-marquee { overflow: hidden; width: 100%; direction: ltr; }
.cli-marquee__track { display: flex; width: max-content; animation: cli-roll 48s linear infinite; }
.cli-marquee:hover .cli-marquee__track, .cli-marquee:focus-within .cli-marquee__track { animation-play-state: paused; }
.cli-marquee__set { display: flex; gap: 8px; padding-inline-end: 8px; flex-shrink: 0; }
.cli-marquee figure { flex: 0 0 300px; margin: 0; overflow: hidden; background: #1c2c38; }
.cli-marquee img { width: 300px; height: 28vh; object-fit: cover; display: block; filter: saturate(.92); }
@keyframes cli-roll { to { transform: translate3d(-50%,0,0); } }
.cli-about { padding: 5.5rem 0; }
.cli-about__grid { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 800px) { .cli-about__grid { grid-template-columns: 1.05fr 1fr; } }
.cli-about__media { margin: 0; min-height: 320px; overflow: hidden; }
.cli-about__media img { min-height: 320px; width: 100%; object-fit: cover; }
.cli-belief { display: grid; background: #d7eaf3; overflow: hidden; }
@media (min-width: 800px) { .cli-belief { grid-template-columns: 1.1fr .9fr; } }
.cli-belief .container { padding: 4rem 8vw; display: flex; flex-direction: column; justify-content: center; }
.cli-belief h2 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); font-weight: 500; max-width: 24ch; line-height: 1.45; }
.cli-belief cite { margin-top: 1.2rem; color: var(--color-muted); }
.cli-belief__img { min-height: 360px; overflow: hidden; }
.cli-belief__img img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.cli-svc { padding: 5.5rem 0; }
.cli-grid { display: grid; gap: 1.15rem; margin-top: 2rem; }
@media (min-width: 800px) { .cli-grid { grid-template-columns: repeat(3,1fr); } }
.cli-grid article { background: #fff; overflow: hidden; border: 1px solid rgba(14,26,36,.08); }
.cli-grid img { height: 170px; width: 100%; object-fit: cover; }
.cli-grid h3, .cli-grid p { padding: 0 1.1rem; }
.cli-grid p { padding-bottom: 1.2rem; color: var(--color-muted); font-size: .92rem; }
.cli-gal { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; overflow: hidden; background: #0e1a24; }
.cli-gal img { height: 32vh; width: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .cli-hero { grid-template-columns: 1fr; }
  .cli-hero__out { clip-path: none; min-height: 32vh; }
  .cli-gal { grid-template-columns: 1fr 1fr; }
  .cli-marquee figure, .cli-marquee img { flex-basis: 230px; width: 230px; }
}
@media (prefers-reduced-motion: reduce) { .cli-marquee__track { animation: none; } }
body.a11y-stop-motion .cli-marquee__track { animation: none; }