/* =========================================================================
   Kos Engineering — design system
   Hand-authored utility + component CSS (no build step, no external deps
   besides Google Fonts). Tokens match the live kosengineering.com brand:
   green/teal gradient logo, Work Sans headings, Inter body text.
   ========================================================================= */

:root {
  /* Brand colors sampled from kosengineering.com */
  --color-green: #00bf63;
  --color-teal: #0499af;
  /* Darker variant of the brand teal — the brand teal itself is only
     3.4:1 against white, which fails WCAG AA (4.5:1) for small text.
     Use this instead of --color-teal anywhere teal is rendered as text
     on a light background (it still passes fine on dark backgrounds). */
  --color-teal-text: #046f80;
  --color-blue: #1e73be;
  --color-mint: #9affce;
  --color-mint-tint: rgba(0, 191, 99, 0.12);

  --color-ink: #12140f;
  --color-ink-soft: #4a5259;
  --color-line: #e3e7e4;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f8f7;
  --color-dark: #1a1a1a;
  --color-dark-soft: #2f3b40;

  --gradient-brand: linear-gradient(90deg, var(--color-teal) 0%, var(--color-green) 60%, var(--color-mint) 100%);

  --font-heading: "Work Sans", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;

  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(18, 20, 15, 0.08);
  --shadow-md: 0 10px 30px rgba(18, 20, 15, 0.10);
  --max-width: 1180px;

  --focus-ring: 0 0 0 3px rgba(4, 153, 175, 0.45);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-surface);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; margin: 0 0 var(--space-2); color: var(--color-ink); }
h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-2); color: var(--color-ink-soft); }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

/* Visible focus ring everywhere — never remove outlines */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* Standard accessible-hiding pattern — used for the Netlify Forms honeypot
   field. display:none would also hide it from the bots it's meant to trap. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-dark);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Preloader (first visit per session only, see main.js) ---------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  background: var(--color-surface);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
#preloader img {
  height: 72px;
  width: auto;
  animation: preloader-breathe 1.7s ease-in-out infinite;
}
#preloader .loader-track {
  width: 220px;
  max-width: 60vw;
  height: 4px;
  border-radius: 999px;
  background: var(--color-line);
  overflow: hidden;
}
#preloader .loader-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--gradient-brand);
  animation: preloader-fill 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
#preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes preloader-fill { from { width: 0%; } to { width: 100%; } }
@keyframes preloader-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.045); opacity: 0.88; }
}
/* Reduced motion / no-JS: never trap people behind an artificial delay */
@media (prefers-reduced-motion: reduce) {
  #preloader { display: none !important; }
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Layout helpers ---------- */
.container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-3); }
.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-5); }
.section--alt { background: var(--color-surface-alt); }
.section--dark { background: var(--color-dark); color: #fff; }
.section--dark p { color: #c9d1d3; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

/* Client logo strip — each logo sits on its own white tile regardless of
   the source file's own background color (some arrive as opaque colored
   badges, some transparent), so the row reads as one consistent set. */
.client-logos {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.client-logos__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9aa6a9;
  margin-bottom: var(--space-3);
}
/* Infinite marquee: the track holds the logo set twice back-to-back and
   scrolls exactly one set-width (-50%) on a linear loop, so the seam between
   the end of copy 1 and the start of copy 2 is invisible. Edges fade via a
   mask instead of hard-cropping. */
.client-logos__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.client-logos__track {
  display: flex;
  width: max-content;
  gap: var(--space-2);
  animation: client-marquee 26s linear infinite;
}
.client-logos__marquee:hover .client-logos__track { animation-play-state: paused; }
@keyframes client-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .client-logos__track { animation: none; }
  .client-logos__marquee { overflow-x: auto; }
}
.client-logos__item {
  flex: 0 0 auto;
  width: 160px;
  background: var(--color-surface);
  border-radius: var(--radius);
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}
.client-logos__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-text);
  margin-bottom: var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--gradient-brand);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid var(--color-line);
}
/* Blur lives on a pseudo-element, not on .site-header itself — backdrop-filter
   on an actual ancestor would make it the containing block for any
   position:fixed descendant (e.g. the mobile .main-nav panel), breaking its
   full-viewport sizing. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 0.65rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.brand img { height: 64px; width: auto; }
@media (max-width: 480px) {
  .brand img { height: 52px; }
}

.main-nav { display: flex; align-items: center; gap: var(--space-4); }
.main-nav__list { display: flex; align-items: center; gap: var(--space-3); }
.main-nav__list a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-ink);
  padding: 0.5rem 0.15rem;
  position: relative;
}
.main-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--gradient-brand);
  transition: right 0.2s ease;
}
.main-nav__list a:hover::after,
.main-nav__list a[aria-current="page"]::after { right: 0; }
.main-nav__list a[aria-current="page"] { color: var(--color-teal-text); }

.lang-switch { display: flex; align-items: center; gap: 0.35rem; font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; }
.lang-switch a {
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  color: var(--color-ink-soft);
  min-width: 44px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lang-switch a[aria-current="true"] { background: var(--color-mint-tint); color: var(--color-teal-text); }
.lang-switch a:hover { background: var(--color-surface-alt); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: #fff;
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 860px) {
  .main-nav { position: fixed; inset: 64px 0 0 0; background: #fff; flex-direction: column; align-items: stretch; padding: var(--space-3); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; overflow-y: auto; }
  .main-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav__list a { display: block; padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--color-line); font-size: 1.05rem; }
  .lang-switch { margin-top: var(--space-3); justify-content: flex-start; }
  .nav-toggle { display: inline-flex; }
}

/* ---------- Hero / slider ---------- */
/* Photo on top, plain text block below it — never overlapping, so
   legibility never depends on the photo underneath. */
.hero { position: relative; background: var(--color-surface); }
.hero__track { position: relative; display: grid; padding-top: 0; }
.hero__slide {
  /* Plain block flow (not flex) — .container's own margin:auto centering
     doesn't play well as a flex item: auto margins win the stretch
     algorithm and the box collapses to its content width (0, since the
     media box sizes itself from aspect-ratio, which needs a width to
     start from). Block-level children stack top-to-bottom by default
     anyway, so flex was never required here. */
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}
.hero__slide.is-active { opacity: 1; visibility: visible; position: relative; }
/* A contained frame with a fixed aspect ratio — not a full-bleed band sized
   off viewport height (that combination went to extreme, badly-cropping
   ratios on wide monitors), and no card/shadow chrome around it either —
   the photo just sits plainly on the page's own white background. */
.hero__media {
  overflow: hidden;
  aspect-ratio: 16 / 8;
}
.hero__bg { width: 100%; height: 100%; background-size: cover; background-position: center; }
@media (max-width: 600px) {
  .hero__media { aspect-ratio: 4 / 3; }
}
.hero__text { background: var(--color-surface); padding-block: var(--space-4) var(--space-5); }
/* One-shot entrance for the text block when a slide becomes active — livelier
   than a static cut, but it plays once and stops. */
.hero__slide.is-active .hero__content {
  animation: hero-content-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes hero-content-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active .hero__content { animation: none; }
}
.hero__content { max-width: 640px; }
.page-hero .eyebrow,
.section--dark .eyebrow { color: var(--color-mint); }
.hero h1 { color: var(--color-ink); }
.hero__content p { color: var(--color-ink-soft); font-size: 1.1rem; }

.hero__dots { display: flex; gap: 0.4rem; margin-top: var(--space-3); }
.hero__dots button {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
}
.hero__dots button::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-line); transition: background 0.2s, transform 0.2s; }
.hero__dots button[aria-current="true"]::after { background: var(--color-green); transform: scale(1.25); }

/* Simple page header (non-home pages) */
.page-hero {
  background: var(--color-dark);
  color: #fff;
  padding-block: var(--space-6) var(--space-5);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--gradient-brand);
}
.page-hero h1 { color: #fff; }
.page-hero p { color: #d7dedb; max-width: 620px; font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
@media (max-width: 400px) {
  /* Guard against overflow on very narrow phones instead of wrapping mid-word */
  .btn { white-space: normal; text-align: center; }
}
.btn:hover { transform: translateY(-1px); }
.btn svg { transition: transform 0.25s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn--primary {
  background-image: var(--gradient-brand);
  background-size: 170% 100%;
  background-position: 0% 0%;
  color: #06231a;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-position 0.5s ease;
}
.btn--primary:hover { box-shadow: var(--shadow-md); background-position: 100% 0%; }
.btn--outline { border-color: rgba(255,255,255,0.55); color: #fff; }
.btn--outline:hover { background: rgba(255,255,255,0.1); }
.btn--dark { border-color: var(--color-line); color: var(--color-ink); }
.btn--dark:hover { border-color: var(--color-teal-text); color: var(--color-teal-text); }
@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover { background-position: 0% 0%; }
}

/* ---------- Grids / cards ---------- */
.grid { display: grid; gap: var(--space-3); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* transform lives on .tilt-card (see polish pass below) so the two rules
   don't fight over specificity — :hover here only owns box-shadow/border. */
.card:hover { box-shadow: var(--shadow-md); border-color: transparent; }
.card__icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-mint-tint);
  color: var(--color-green);
  margin-bottom: var(--space-2);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}
.card:hover .card__icon { transform: scale(1.08) rotate(-4deg); background: var(--color-green); color: #fff; }
.card__icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 0.4rem; }
.card p:last-child { margin-bottom: 0; }

/* Photo on top, plain-white caption card on the bottom — like the hero, the
   description text gets its own opaque surface instead of sitting directly
   on the photo, so it's never a legibility gamble. */
.project-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.project-card__body { position: relative; background: var(--color-surface); padding: var(--space-3); }
.project-card__body h3 { color: var(--color-ink); margin-bottom: 0.3rem; }
.project-card__body p { color: var(--color-ink-soft); font-size: 0.92rem; margin-bottom: 0.6rem; }
.project-card__link { font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; color: var(--color-teal-text); display: inline-flex; align-items: center; gap: 0.35rem; }
.project-card__link svg { transition: transform 0.25s ease; }
.project-card__count {
  position: absolute;
  top: var(--space-2); right: var(--space-2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(6, 10, 8, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
}
.project-card__count svg { width: 13px; height: 13px; }
.project-card:hover .project-card__link svg { transform: translateX(4px); }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } }
.gallery__item {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-surface-alt);
  cursor: zoom-in;
  min-height: 44px;
}
.gallery__item img { width: 100%; height: 260px; object-fit: cover; transition: transform 0.35s ease; }
.gallery__item:hover img { transform: scale(1.045); }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 12, 10, 0.92);
  display: flex;
  align-items: center; justify-content: center;
  padding: var(--space-3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(94vw, 1100px); max-height: 86vh; border-radius: 8px;
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox.is-open img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox img { transition: none; }
}
.lightbox__close {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}

/* ---------- Values / stats strip ---------- */
.values { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.value-pill {
  font-family: var(--font-heading);
  font-weight: 600;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-line);
}

/* ---------- Two column with image ---------- */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-5); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--space-3); } }
/* Plain image, no backing card — just the drawing/photo itself on the
   page's own white, sized to its natural aspect ratio via correct width/
   height attributes (no cropping, no distortion, no letterboxing), so it
   reads as large as the column allows. */
.split .photo-frame { border-radius: var(--radius-lg); overflow: hidden; }
.split .photo-frame img { display: block; width: 100%; height: auto; }

/* ---------- Software showcase ---------- */
.software-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.software-card:hover { box-shadow: var(--shadow-md); }
.software-card__logo { height: 46px; display: flex; align-items: center; }
.software-card__logo img { height: 100%; width: auto; object-fit: contain; }
.software-card p { margin-bottom: 0; }

/* ---------- Contact: centered "sent" toast ---------- */
.sent-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(10, 12, 10, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sent-overlay.is-visible { opacity: 1; visibility: visible; }
.sent-toast {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px rgba(6, 10, 8, 0.35);
  padding: var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  max-width: 340px;
  transform: scale(0.9) translateY(8px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sent-overlay.is-visible .sent-toast { transform: scale(1) translateY(0); }
.sent-toast__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-mint-tint);
  color: var(--color-green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sent-toast__icon svg { width: 28px; height: 28px; }
.sent-toast__icon { animation: toast-icon-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.sent-toast__icon .icon-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sent-overlay.is-visible .sent-toast__icon .icon-draw {
  animation: icon-draw 0.45s 0.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes icon-draw { to { stroke-dashoffset: 0; } }
@keyframes toast-icon-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sent-toast__icon { animation: none; }
  .sent-toast__icon .icon-draw { stroke-dashoffset: 0; animation: none; }
}
.sent-toast p { margin: 0; font-weight: 600; color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) {
  .sent-overlay, .sent-toast { transition: none; }
}
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-5); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: var(--space-3); }
.field label { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; }
.field input, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
  min-height: 44px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--color-teal); }
.field-note { font-size: 0.85rem; color: var(--color-ink-soft); margin-top: -0.5rem; }

/* ---------- GDPR / legal page ---------- */
.legal-tag { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-teal-text); margin-bottom: 0.4rem; }
.legal-duration { font-size: 0.85rem; color: var(--color-ink-soft); margin-top: 0.6rem; margin-bottom: 0; }

.contact-info-list { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-info-item { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-info-item__icon { width: 44px; height: 44px; border-radius: 10px; background: var(--color-mint-tint); color: var(--color-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-item__icon svg { width: 22px; height: 22px; }
.contact-info-item h3 { margin-bottom: 0.15rem; font-size: 1.02rem; }
.contact-info-item a, .contact-info-item p { color: var(--color-ink-soft); margin: 0; }
.contact-info-item a:hover { color: var(--color-teal-text); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-dark); color: #c9d1d3; padding-block: var(--space-5) var(--space-3); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-4); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-3); } }
.site-footer h3 { color: #fff; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-2); }
.site-footer a { color: #c9d1d3; }
.site-footer a:hover { color: var(--color-mint); }
.footer-list { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-brand img { height: 76px; width: auto; margin-bottom: var(--space-3); }
.footer-brand p { color: #9aa6a9; max-width: 340px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--space-4); padding-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; font-size: 0.85rem; color: #8b9699; }

/* ---------- Misc ---------- */
.cta-band {
  background: var(--gradient-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap;
  color: #06231a;
}
.cta-band h2 { color: #06231a; margin-bottom: 0.2rem; }
.cta-band p { color: rgba(6, 35, 26, 0.75); margin-bottom: 0; }

.breadcrumbs { font-size: 0.85rem; color: #cfd8d4; margin-bottom: var(--space-2); }
.breadcrumbs a:hover { color: var(--color-mint); }

.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line); }
.map-embed iframe { width: 100%; height: 320px; border: 0; display: block; }

@media (max-width: 620px) {
  .cta-band { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* =========================================================================
   Polish pass — scroll progress, tilt/spotlight cards, stats, hero stagger.
   Every continuously-running effect here is opacity/background-position
   based (cheap, no compositor-layer surprises); anything using `transform`
   is strictly hover/interaction-driven, never a perpetual loop — that's the
   lesson from the earlier hero Ken Burns experiment. Everything is gated
   behind prefers-reduced-motion and (hover:hover) where relevant.
   ========================================================================= */

/* ---------- Scroll progress bar ---------- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--gradient-brand);
  z-index: 60;
  transition: width 0.12s linear;
}
@media (prefers-reduced-motion: reduce) {
  #scroll-progress { transition: none; }
}

/* ---------- Tilt + spotlight cards ---------- */
/* main.js adds --tilt-x/--tilt-y/--spot-x/--spot-y custom properties on
   mousemove for elements with .tilt-card, and a .is-tilting class while the
   pointer is over them (removed on leave, which lets the transition below
   ease the card back to flat instead of snapping). */
.tilt-card {
  position: relative;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.tilt-card.is-tilting {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px);
  transition: transform 0.08s linear, box-shadow 0.3s ease;
}
.tilt-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(480px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(0, 191, 99, 0.14), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.tilt-card.is-tilting::after { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .tilt-card { transform: none !important; }
  .tilt-card::after { display: none; }
}

/* ---------- Stats strip ---------- */
.stats-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); text-align: center; }
@media (max-width: 700px) { .stats-strip { grid-template-columns: 1fr; gap: var(--space-5); } }
.stat { display: flex; flex-direction: column; gap: 0.3rem; }
.stat__value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label { color: #b7c1c4; font-size: 0.95rem; }

/* ---------- Hero heading word-stagger ---------- */
/* Each word is wrapped in <span class="word"><span class="word__inner">
   so the outer span clips (overflow:hidden) while the inner one slides up
   from below it — a cleaner reveal than a plain fade. */
.hero__content h1 { overflow: hidden; }
.hero__content h1 .word { display: inline-block; overflow: hidden; vertical-align: top; }
.hero__content h1 .word__inner {
  display: inline-block;
  transform: translateY(110%);
}
.hero__slide.is-active .hero__content h1 .word__inner {
  animation: word-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero__content h1 .word:nth-child(1) .word__inner { animation-delay: 0.02s; }
.hero__content h1 .word:nth-child(2) .word__inner { animation-delay: 0.08s; }
.hero__content h1 .word:nth-child(3) .word__inner { animation-delay: 0.14s; }
.hero__content h1 .word:nth-child(4) .word__inner { animation-delay: 0.2s; }
.hero__content h1 .word:nth-child(5) .word__inner { animation-delay: 0.26s; }
.hero__content h1 .word:nth-child(6) .word__inner { animation-delay: 0.32s; }
@keyframes word-rise {
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__content h1 .word__inner { animation: none; transform: none; }
}

/* =========================================================================
   Social proof / trust, mobile UX, and speed — finishing pass.
   ========================================================================= */

/* ---------- Trust bar (real, verifiable facts right under the hero) ---------- */
.trust-bar { border-bottom: 1px solid var(--color-line); background: var(--color-surface-alt); }
.trust-bar__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-3);
}
.trust-bar__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}
.trust-bar__icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-mint-tint);
  color: var(--color-green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.trust-bar__icon svg { width: 12px; height: 12px; }
@media (max-width: 620px) {
  .trust-bar__list { justify-content: flex-start; gap: var(--space-2); }
}

/* ---------- Sticky mobile quick-contact bar ---------- */
.mobile-contact-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -6px 20px rgba(18, 20, 15, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (max-width: 760px) {
  .mobile-contact-bar { display: flex; }
  /* Keep the bar from covering the last bit of real content/footer. */
  body { padding-bottom: 60px; }
}
.mobile-contact-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 56px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-ink);
}
.mobile-contact-bar a svg { width: 18px; height: 18px; color: var(--color-green); }
.mobile-contact-bar a:first-child { border-right: 1px solid var(--color-line); }
.mobile-contact-bar a:active { background: var(--color-surface-alt); }

/* ---------- iLogic / parametric automation spotlight ---------- */
.ilogic__intro { max-width: 680px; margin: 0 auto var(--space-6); text-align: center; }
.ilogic__intro .card__icon { margin: 0 auto var(--space-2); }
.ilogic__intro .eyebrow { justify-content: center; }
.ilogic__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 860px) { .ilogic__grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.ilogic__col h3 { margin-bottom: var(--space-3); }
.ilogic__list { display: flex; flex-direction: column; gap: var(--space-3); }
.ilogic__item { display: flex; gap: 0.75rem; align-items: flex-start; }
.ilogic__item-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-mint-tint);
  color: var(--color-green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.ilogic__item-icon svg { width: 14px; height: 14px; }
.ilogic__item p { margin: 0; color: var(--color-ink-soft); }
.ilogic__item strong { color: var(--color-ink); }
/* Visually distinguished from the plain checklist, per the brief — a
   highlighted callout card for the headline "80%" figure. */
.ilogic__stat {
  background: var(--color-mint-tint);
  border: 1px solid rgba(0, 191, 99, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  text-align: center;
}
.ilogic__stat .stat__value { display: block; }
.ilogic__stat p { margin: 0.3rem 0 0; font-weight: 600; color: var(--color-ink); }