/* ==========================================================================
   TeknosEC Landing Page
   Brand: Black Denim #1c1f29 · American Earth #0e2443 (web: #102542)
          Cherub #8fbbc9 · Dark Silver #afafaf · Spicy Green #527727
   Type:  Nimbus Sans L
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Nimbus Sans";
  src: url("/assets/fonts/nimbussanl-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nimbus Sans";
  src: url("/assets/fonts/nimbussanl-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nimbus Sans";
  src: url("/assets/fonts/nimbussanl-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nimbus Sans";
  src: url("/assets/fonts/nimbussanl-bolditalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --navy: #102542;
  --navy-deep: #0e2443;
  --denim: #1c1f29;
  --cherub: #8fbbc9;
  --cherub-hover: #7fb0c0;
  --silver: #afafaf;
  --green: #527727;
  --ink: #3d434d;
  --field: #e1e1e1;
  --white: #ffffff;
  --red: #d8232a;
  --radius-card: 20px;
  --radius-btn: 999px;
  --container: 1320px;
  --header-h: 84px;
  --font: "Nimbus Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Deliberately NOT scroll-behavior: smooth here. Globally it also hijacks
   keyboard paging, the space bar and scrollbar clicks, which then drift
   instead of responding instantly. Smooth is applied per-interaction in
   main.js, only when following an in-page link. */

/* Keep anchor targets clear of the sticky header. */
:is(section, footer)[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--navy); color: #fff;
  padding: .6rem 1.2rem; border-radius: 0 0 8px 8px;
  z-index: 200; transition: top .2s;
}
.skip-link:focus { top: 0; }

.container {
  width: min(100% - 3rem, var(--container));
  margin-inline: auto;
}
.section { padding-block: clamp(4rem, 8vw, 7.5rem); }

/* ---------- Buttons & pills ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.0625rem;
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color .2s, transform .2s, box-shadow .2s;
  font-family: inherit;
}
.btn-primary {
  background: var(--cherub);
  color: var(--white);
  padding: 1rem 2.4rem;
}
.btn-primary:hover { background: var(--cherub-hover); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16, 37, 66, .18); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.btn svg { width: 1.35em; height: 1.35em; transition: translate .25s ease; }
.btn:hover svg { translate: 4px 0; }

.pill {
  display: inline-block;
  padding: .55rem 1.5rem;
  border: 1px solid var(--navy);
  border-radius: var(--radius-btn);
  color: var(--navy);
  font-size: 1rem;
}
.pill--light { border-color: var(--white); color: var(--white); }

/* ---------- Header ---------- */
/* Zero-height marker before the header; once it scrolls out of view the
   header gets .is-stuck. Cheaper than a scroll listener, and unlike
   scroll-state container queries it works outside Chromium. */
.scroll-sentinel { width: 100%; height: 1px; margin-bottom: -1px; visibility: hidden; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(16, 37, 66, .08);
  transition: box-shadow .3s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 22px rgba(16, 37, 66, .13); }
.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: var(--header-h);
}
.site-nav { margin-left: auto; margin-right: 1.5rem; }
/* Supplied vector lockup, inlined so a single copy of the artwork serves
   both placements: fill:currentColor means the footer just inherits white
   instead of needing a second file. */
.brand { display: inline-flex; align-items: center; color: var(--denim); }
.brand-logo { height: 30px; width: auto; display: block; }
.brand--light { color: var(--white); }
.brand-logo--footer { height: 34px; }

.site-nav ul { display: flex; gap: 2.6rem; }
.site-nav a {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--denim);
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.site-nav a:hover { color: var(--navy); border-color: var(--cherub); }

.header-actions { display: flex; align-items: center; gap: 1.4rem; }

.lang-toggle {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--navy);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  min-width: 42px;
}
.lang-toggle .lang { display: block; padding: .38rem .5rem; color: var(--navy); background: var(--white); transition: opacity .2s; }
.lang-toggle .lang.active { background: var(--navy); color: var(--white); }
.lang-toggle .lang:not(.active):hover { opacity: .65; }
.lang-toggle--light { border-color: var(--white); }
.lang-toggle--light .lang { background: transparent; color: var(--white); }
.lang-toggle--light .lang.active { background: var(--white); color: var(--navy); }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-burger span { display: block; height: 3px; background: var(--navy); border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu { border-top: 1px solid rgba(16,37,66,.1); background: var(--white); }
.mobile-menu ul { display: grid; gap: .4rem; padding: 1rem 1.5rem 1.6rem; }
.mobile-menu a:not(.btn) { display: block; padding: .8rem 0; font-weight: 700; font-size: 1.15rem; color: var(--denim); }
.mobile-menu .btn { margin-top: .6rem; width: 100%; }

/* ---------- Hero ---------- */
/* Placeholder tone sampled from the photo itself, so the space it will
   occupy is never a hard white rectangle while the image is in flight.
   overflow:hidden contains the entry zoom below. */
.hero {
  background: #c2c1af;
  overflow: hidden;
}
.hero img {
  width: 100%;
  height: clamp(320px, 42vw, 800px);
  object-fit: cover;
  object-position: center 30%;
}

/* Entry animation for the hero.
   This is the LCP element, so what gets animated matters: transform is free
   (the image counts as painted from the first frame regardless of scale) and
   opacity starts at 0.6 rather than 0, because a fully transparent element
   is not considered rendered and would push the LCP timestamp back. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero img {
    opacity: .6;
    transform: scale(1.06);
    transition: opacity 1.1s cubic-bezier(.22, .61, .36, 1),
                transform 1.4s cubic-bezier(.22, .61, .36, 1);
  }
  .js .hero.is-loaded img {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Headings ---------- */
h1, h2 {
  font-weight: 700;
  color: var(--navy);
  line-height: 1.12;
  letter-spacing: -.01em;
}
.about h1, .section-head h2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
h1 em, h2 em { font-style: italic; color: var(--cherub); }
.section-head { text-align: center; display: grid; justify-items: center; gap: 1.4rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(300px, 470px) 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.about-media img {
  border-radius: var(--radius-card);
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.about-copy { display: grid; gap: 1.5rem; justify-items: start; }
.about-copy p { max-width: 62ch; }

/* ---------- OE Role ---------- */
.oe-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}
.oe-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--navy);
  aspect-ratio: 68 / 88;
  isolation: isolate;
  transition: transform .25s, box-shadow .25s;
}
.oe-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16,37,66,.18); }
.oe-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
}
.oe-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,37,66,0) 32%, rgba(16,37,66,.62) 62%, rgba(16,37,66,.94) 100%);
  z-index: 0;
}
.oe-card-body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.4rem 1.5rem 1.5rem;
  color: var(--white);
}
.oe-card-body h3 { font-size: 1.25rem; margin-bottom: .55rem; }
.oe-card-body ul { display: grid; gap: .25rem; font-size: .92rem; line-height: 1.35; }
.oe-card-body li { padding-left: 1em; position: relative; }
.oe-card-body li::before { content: "•"; position: absolute; left: 0; }

.oe-outro {
  text-align: center;
  max-width: 76rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

/* ---------- Why TeknosEC ---------- */
.section--dark { background: var(--navy); color: var(--white); }
.section--dark h2 { color: var(--white); }

.why > .container > h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-top: 1.6rem; }
.why-grid {
  display: grid;
  grid-template-columns: minmax(300px, 620px) 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.why-img {
  width: 100%;
  aspect-ratio: 62 / 43;
  object-fit: cover;
  border-radius: var(--radius-card);
}
.why-list { display: grid; }
.why-list > li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.4rem;
  padding-block: 1.7rem;
}
.why-list > li + li { border-top: 1px solid rgba(255,255,255,.28); }
.why-num { font-size: 1.7rem; color: #c6d5de; line-height: 1.2; }
.why-list h3 { font-size: 1.15rem; margin-bottom: .8rem; }
.why-list ul { display: grid; gap: .3rem; font-size: 1rem; color: #e6ecf1; }
.why-list ul li { padding-left: 1.1em; position: relative; }
.why-list ul li::before { content: "•"; position: absolute; left: 0; }

/* ---------- Services ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6rem 2rem;
}
/* The whole card lifts, not just the artwork — matches the OE cards.
   Hover uses transform while the entry animation uses translate, so the
   two compose instead of overriding each other. */
.svc-card { position: relative; text-align: center; transition: transform .25s ease; }
.svc-card img {
  border-radius: var(--radius-card);
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  transition: box-shadow .25s ease;
}
.svc-card:hover { transform: translateY(-4px); }
.svc-card:hover img { box-shadow: 0 14px 30px rgba(16,37,66,.16); }
.svc-face--front h3 {
  margin-top: 1.4rem;
  font-size: 1.45rem;
  color: var(--navy);
  line-height: 1.25;
}

/* ---------- Service card flip ----------
   Gated behind .js, like the reveals: the 3D stack depends on the toggle in
   main.js, so without scripting the two faces simply stack in normal flow and
   every bullet stays readable instead of being hidden behind the front. */
.js .svc-card--flip { perspective: 1600px; }
.js .svc-card--flip .svc-card-inner {
  display: grid;                 /* both faces share one cell, so the card is */
  transform-style: preserve-3d;  /* as tall as the taller face and never jumps */
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.js .svc-card--flip .svc-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
}
.js .svc-card--flip .svc-face--back { transform: rotateY(180deg); }
.js .svc-card--flip.is-flipped .svc-card-inner { transform: rotateY(180deg); }
/* Lift and shadow belong to the front artwork only; suppress them once turned. */
.js .svc-card--flip.is-flipped:hover { transform: none; }

.svc-face--back {
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: 1rem;
  padding: 2rem 1.9rem;
  border-radius: var(--radius-card);
  background: var(--navy);
  color: #e6ecf1;
  text-align: left;
}
.svc-face--back h3 {
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--white);
  text-align: center;
}
.svc-back-list { display: grid; gap: .6rem; font-size: 1rem; line-height: 1.4; }
.svc-back-list li { padding-left: 1.1em; position: relative; }
.svc-back-list li::before { content: "•"; position: absolute; left: 0; color: var(--cherub); }

/* Transparent hit area over the whole card; the visible affordance is the
   chip in the corner. It sits outside .svc-card-inner so it stays upright
   and clickable on both faces. */
.svc-flip {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-card);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.svc-flip:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.svc-flip-icon {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 2.4rem;
  height: 2.4rem;
  padding: .5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  fill: currentColor;
  box-shadow: 0 4px 12px rgba(16, 37, 66, .2);
  transition: background-color .2s, color .2s, rotate .45s ease;
}
.svc-card:hover .svc-flip-icon,
.svc-flip:focus-visible .svc-flip-icon { background: var(--cherub); color: var(--white); }
.svc-card.is-flipped .svc-flip-icon { rotate: -180deg; }

/* ---------- Footer / Contact ---------- */
.footer { padding-block: clamp(4rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.footer-info { display: grid; gap: 2rem; justify-items: start; }
.footer-info h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); color: var(--white); max-width: 16em; }
.footer-info p { max-width: 46ch; color: #dde5ec; font-size: 1rem; }

.contact-list { display: grid; gap: 1.2rem; font-size: 1.05rem; }
.contact-list li { display: flex; align-items: center; gap: .9rem; }
.contact-list svg { width: 1.35rem; height: 1.35rem; fill: var(--white); flex: none; }
.contact-list a:hover { color: var(--cherub); }

.form-title { font-size: 1.7rem; color: var(--white); text-align: center; margin-bottom: 2rem; }
#contact-form { display: grid; gap: 1.2rem;}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--field);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 1.05rem 1.5rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--navy);
  transition: border-color .2s, background-color .2s;
}
.field textarea { border-radius: 26px; resize: vertical; min-height: 7rem; }
.field ::placeholder { color: #9b9b9b; opacity: 1; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; border-color: var(--cherub); background: #eaeaea; }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--red); }

/* Honeypot. Kept in the layout but off-screen — display:none is skipped by
   the bots this is meant to catch. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field--select { position: relative; }
.field--select select { appearance: none; cursor: pointer; }
.field--select select:invalid { color: #9b9b9b; }
.field--select::after {
  content: "";
  position: absolute;
  right: 1.4rem; top: 50%;
  translate: 0 -35%;
  border: 7px solid transparent;
  border-top-color: var(--navy);
  pointer-events: none;
}

.btn-submit { justify-self: center; min-width: 17.5rem; margin-top: .4rem; }
.btn-submit:disabled { cursor: default; }
.btn-submit.is-sending::after {
  content: "";
  width: 1.05em;
  height: 1.05em;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { rotate: 1turn; } }

.form-status { min-height: 1.4em; text-align: center; font-size: .95rem; color: var(--cherub); }
.form-status.error { color: #f2a0a4; }

.footer-legal {
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,.28);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: .98rem;
}
.footer-legal a:hover { color: var(--cherub); }

/* Footer "Cookie settings" — a button (it opens the consent banner rather
   than navigating) dressed to match the links beside it. */
.cookie-settings-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.cookie-settings-link:hover { color: var(--cherub); }
.footer-legal a[aria-current="page"] { color: var(--cherub); }

/* ---------- Legal pages ---------- */
.legal-hero { padding-block: clamp(3rem, 7vw, 5.5rem); }
.legal-hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.1;
  color: var(--white);
}
.legal-updated { margin-top: 1rem; color: #dde5ec; font-size: 1rem; }

.legal-body {
  max-width: 52rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}
.legal-body > * + * { margin-top: 1rem; }
.legal-body h2 {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.25;
  color: var(--navy);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h2 + *, .legal-body h3 + * { margin-top: .9rem; }
.legal-body h3 { margin-top: 2rem; font-size: 1.2rem; line-height: 1.3; color: var(--navy); }
.legal-body strong { color: var(--denim); }
.legal-body ul, .legal-body ol { padding-left: 1.5rem; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li ul { list-style: circle; }
.legal-body li + li { margin-top: .55rem; }
.legal-body li > :is(ul, ol, p) { margin-top: .55rem; }
.legal-body li::marker { color: var(--navy); }
.legal-body a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--cherub);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.legal-body a:hover { text-decoration-color: var(--navy); }
.legal-body code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; color: var(--navy); }
.legal-note {
  padding: .9rem 1.2rem;
  border-left: 4px solid var(--cherub);
  border-radius: 0 14px 14px 0;
  background: #eef4f7;
  font-size: 1rem;
}
.legal-sign { margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; color: var(--navy); }

.legal-table-wrap {
  margin-block: 1.5rem !important;
  overflow-x: auto;
  border: 1px solid #d6dfe6;
  border-radius: 16px;
}
.legal-table-wrap:focus-visible { outline: 3px solid var(--cherub); outline-offset: 2px; }
.legal-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.legal-table th {
  padding: .85rem 1rem;
  background: var(--navy);
  color: var(--white);
  text-align: left;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.legal-table td { padding: .85rem 1rem; vertical-align: top; border-top: 1px solid #e3e9ee; }
.legal-table td:first-child { white-space: nowrap; }
.legal-table td:nth-child(3) { min-width: 18rem; }

/* Phones: one card per cookie instead of a sideways-scrolling table. */
@media (max-width: 640px) {
  .legal-table { min-width: 0; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; }
  .legal-table tr + tr { border-top: 1px solid #d6dfe6; }
  .legal-table td { display: grid; grid-template-columns: 7rem 1fr; gap: .8rem; min-width: 0; padding: .65rem 1rem; }
  .legal-table td:first-child { border-top: 0; padding-top: 1rem; background: #eef4f7; }
  .legal-table td:last-child { padding-bottom: 1rem; }
  .legal-table td::before {
    content: attr(data-label);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--navy);
    padding-top: .15rem;
  }
}

.footer--slim { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.footer-slim-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
  flex-wrap: wrap;
}
.footer-slim-top .contact-list { font-size: 1rem; gap: .8rem; }

/* ---------- Cookie consent banner ----------
   Non-blocking: the page stays usable behind it. Both choices share one
   style so neither is nudged. */
.cookie-banner {
  position: fixed;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 150;
  width: min(30rem, calc(100% - 3rem));
  padding: 1.6rem 1.6rem 1.5rem;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 50px rgba(16, 37, 66, .28), 0 0 0 1px rgba(16, 37, 66, .08);
  font-size: .98rem;
  line-height: 1.55;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-title { font-size: 1.2rem; color: var(--navy); margin-bottom: .6rem; }
.cookie-banner-text a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--cherub);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.cookie-banner-current { margin-top: .6rem; font-size: .9rem; color: var(--navy); }
.cookie-banner-current[hidden] { display: none; }
.cookie-banner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.2rem; }
.cookie-btn {
  padding: .85rem 1rem;
  border: 2px solid var(--navy);
  border-radius: var(--radius-btn);
  background: var(--navy);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.cookie-btn:hover { background: var(--white); color: var(--navy); }
.cookie-btn:focus-visible { outline: 3px solid var(--cherub); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .cookie-banner {
    opacity: 0;
    translate: 0 18px;
    transition: opacity .45s cubic-bezier(.22, .61, .36, 1), translate .45s cubic-bezier(.22, .61, .36, 1);
  }
  .cookie-banner.is-open { opacity: 1; translate: 0 0; }
}

/* ---------- Reveal animations ----------
   Gated behind .js (set by an inline script in <head>): without JavaScript
   the IntersectionObserver never runs, so hiding these unconditionally
   would leave most of the page permanently at opacity 0. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    /* Vertical travel is kept moderate on purpose — pushing it further makes
       content climb while the page scrolls down, which is what read as a
       jumpy scroll before. The visibility comes from scale instead: it reads
       as clear movement without fighting the scroll direction. Longer
       duration also makes the motion easier to notice than a bigger jump. */
    translate: 0 26px;
    scale: .965;
    transition: opacity .75s cubic-bezier(.22, .61, .36, 1),
                translate .75s cubic-bezier(.22, .61, .36, 1),
                scale .75s cubic-bezier(.22, .61, .36, 1);
  }
  .js .reveal.is-visible { opacity: 1; translate: 0 0; scale: 1; }

  /* Stagger siblings so a row arrives as a sequence, not all at once.
     Grids step by column count so the delay never accumulates past ~270ms. */
  .js .svc-grid > .reveal:nth-child(3n + 2),
  .js .oe-cards > .reveal:nth-child(4n + 2),
  .js :is(.about-copy, .section-head, .why-list) > .reveal:nth-child(2) { transition-delay: 90ms; }

  .js .svc-grid > .reveal:nth-child(3n + 3),
  .js .oe-cards > .reveal:nth-child(4n + 3),
  .js :is(.about-copy, .section-head, .why-list) > .reveal:nth-child(3) { transition-delay: 180ms; }

  .js .oe-cards > .reveal:nth-child(4n + 4),
  .js :is(.about-copy, .why-list) > .reveal:nth-child(4) { transition-delay: 270ms; }
}

/* Shorter travel on small screens. Must stay paired with no-preference —
   on its own it would leave elements offset with no animation to resolve it. */
@media (prefers-reduced-motion: no-preference) and (max-width: 560px) {
  .js .reveal { translate: 0 16px; scale: .975; }
}

/* Movement-free variant: colour and shadow feedback stay, displacement goes. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-primary:hover,
  .oe-card:hover,
  .svc-card:hover { transform: none; }
  .btn:hover svg { translate: none; }
  .btn-submit.is-sending::after { display: none; }

  /* The card still turns over, it just swaps faces instead of rotating.
     Faces keep sharing the grid cell, so visibility does the hiding. */
  .js .svc-card--flip .svc-card-inner,
  .js .svc-card--flip.is-flipped .svc-card-inner { transform: none; transition: none; }
  .js .svc-card--flip .svc-face { backface-visibility: visible; transform: none; }
  .js .svc-card--flip .svc-face--back,
  .js .svc-card--flip.is-flipped .svc-face--front { visibility: hidden; }
  .js .svc-card--flip.is-flipped .svc-face--back { visibility: visible; }
  .svc-flip-icon { transition: background-color .2s, color .2s; }
  .svc-card.is-flipped .svc-flip-icon { rotate: none; }
}

/* Hide the TeknosEC contact form */
.footer-form {
    display: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .oe-cards { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .site-nav, .header-cta { display: none; }
  .nav-burger { display: flex; }
  .about-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 470px; }
}

@media (min-width: 861px) {
  .mobile-menu { display: none !important; }
}

@media (max-width: 560px) {
  body { font-size: 1.05rem; }
  .oe-cards { grid-template-columns: 1fr; }
  .oe-card { aspect-ratio: 4 / 3; }
  .svc-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .btn-submit { width: 100%; }
  .footer-legal { justify-content: center; text-align: center; }
  .cookie-banner { left: .75rem; bottom: .75rem; width: calc(100% - 1.5rem); padding: 1.3rem 1.2rem 1.2rem; }
}

@media (max-width: 360px) {
  .cookie-banner-actions { grid-template-columns: 1fr; }
}

/* ---------- Universal Hide Form Elements ---------- */
.footer-form .form-title,
.footer-form #contact-form {
  display: none !important;
}

/* Forces layout containers to hide if grid wrapper is used on desktop */
.footer-form {
  display: block !important; /* Collapses any desktop columns */
}