/* ==========================================================================
   Ingenia Industrial — theme (fictional brand, demo)
   Precise, trustworthy: dark split hero on a blueprint grid, KPI strip, numbered
   service grid, square corners, condensed uppercase headings and buttons.
   Fonts: Barlow Condensed 600/700 (headings) + IBM Plex Sans 400/500 (body).
   ========================================================================== */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Roboto"), local("Helvetica");
  size-adjust: 69%; /* Arial/Liberation Sans/Roboto scaled to Barlow Condensed's average width (reduces layout shift on swap) */
}
@font-face {
  font-family: "Plex Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Roboto"), local("Helvetica");
  size-adjust: 101%; /* Arial/Liberation Sans/Roboto matched to IBM Plex Sans width (reduces layout shift on swap) */
}

:root {
  /* Brand palette (as briefed) */
  --ingenia-graphite: #14181d;
  --ingenia-steel: #3a5a78;
  --ingenia-orange: #f26b21;
  --ingenia-grey: #e7eaee;

  /* AA-adjusted shades (orange is text-safe only on dark backgrounds) */
  --ingenia-orange-ink: #b04409;    /* orange text on light: 4.73:1 on grey, 5.71:1 on white */
  --ingenia-steel-light: #8fa9c2;   /* steel text on graphite: 7.32:1 */
  --ingenia-surface-dark: #1e242b;

  --color-bg: var(--ingenia-grey);
  --color-surface: #fff;
  --color-text: var(--ingenia-graphite);     /* 14.77:1 on grey */
  --color-text-muted: #4f5966;               /* 5.89:1 on grey, 7.11:1 on white */
  --color-border: #cdd2d9;
  --color-border-strong: #7d8794;            /* 3.02:1 on grey (UI) */
  --color-accent: var(--ingenia-orange);     /* buttons: graphite on orange 5.86:1 */
  --color-accent-ink: var(--ingenia-orange-ink);
  --color-on-accent: var(--ingenia-graphite);

  --color-dark-bg: var(--ingenia-graphite);
  --color-dark-surface: var(--ingenia-surface-dark);
  --color-dark-text: var(--ingenia-grey);
  --color-dark-muted: #9aa3ae;               /* 6.98:1 on graphite */
  --color-dark-border: #2c343d;

  --font-display: "Barlow Condensed", "Barlow Fallback", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Plex Fallback", system-ui, sans-serif;
  --text-base: 1rem;

  --section-space: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --button-font: var(--font-display);
  --button-size: 1.0625rem;
  --button-weight: 600;
  --button-tracking: 0.06em;
  --button-radius: 0;
  --button-padding: 0.75rem 1.5rem;
  --card-radius: 0;
  --field-radius: 0;
  --field-border: #6b7785;                   /* 3.43:1 on field background (UI) */
  --hero-space: clamp(4rem, 3rem + 5vw, 7rem);
  --hero-bg:
    linear-gradient(rgb(143 169 194 / 0.07) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    linear-gradient(90deg, rgb(143 169 194 / 0.07) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    linear-gradient(180deg, var(--ingenia-graphite), #161c22);
}

/* ---- Typography ---- */
h1, h2, h3 {
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1;
}
h1 {
  font-weight: 700;
  font-size: clamp(2.75rem, 1.8rem + 4.6vw, 5.25rem);
  line-height: 0.95;
}
h1 span {
  color: var(--ingenia-orange);   /* on graphite: 5.86:1 */
}
h3 {
  font-size: 1.5rem;
}
strong {
  font-weight: 500;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.eyebrow::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  background: var(--ingenia-orange);
}
.lead {
  font-size: 1.125rem;
}

/* ---- Header ---- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wordmark svg {
  width: 1.5rem;
  height: 1.5rem;
}
.nav-toggle {
  border-radius: 0;
}

/* ---- Hero ---- */
.hero {
  border-bottom: 4px solid var(--ingenia-orange);
}
.hero__art {
  max-width: 30rem;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-dark-muted);
}
.hero__meta li::before {
  content: "✓ ";
  color: var(--ingenia-orange);
}

/* ---- KPI strip on steel ---- */
.kpi-strip {
  --color-text-muted: var(--ingenia-grey);   /* grey on steel: 5.97:1 */
  background: var(--ingenia-steel);
  color: #fff;                               /* 7.21:1 */
  border: 0;
}
.kpi dd {
  font-weight: 700;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.kpi dd sup {
  font-size: 0.45em;
  vertical-align: top;
  margin-inline-start: 0.1em;
}
.kpi-strip__note {
  color: var(--ingenia-grey);
}

/* ---- Numbered service grid with hairlines ---- */
.feature-grid--numbered {
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.feature-grid--numbered .feature {
  border-top: 0;
  padding: var(--space-6);
  transition: background-color var(--duration) var(--ease);
}
.feature-grid--numbered .feature::before {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}
.feature-grid--numbered .feature:hover {
  background: #f6f7f9;
}

/* ---- Process: steps with square markers ---- */
.process__step {
  border-top: 3px solid var(--ingenia-graphite);
}
.process__step::before {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-2);
  background: var(--ingenia-graphite);
  color: var(--ingenia-orange);   /* 5.86:1 */
  font-size: 1.25rem;
  font-weight: 700;
}

/* ---- Sector list ---- */
.sectors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.sectors li {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ---- FAQ ---- */
.faq summary {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
}
.faq summary::after {
  font-weight: 500;
  color: var(--color-accent-ink);
}

/* ---- Social proof placeholder ---- */
.placeholder-block {
  border-radius: 0;
  border-style: dashed;
  background: repeating-linear-gradient(-45deg, transparent 0 12px, rgb(20 24 29 / 0.03) 12px 24px);
}

/* ---- Contact ---- */
.contact__details {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-dark-border);
  font-size: var(--text-sm);
}
.contact__details dt {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-dark-muted);
}
.contact__details dd {
  margin: 0 0 var(--space-2);
}
.field label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.process__step {
  align-content: start;
}

/* ==========================================================================
   Premium layer + photography (premium.css is linked before this file).
   Motion here is precise and mechanical: short, crisp reveals and thin lines that
   draw in. No bounce, no slow fades, no count-ups. Everything stays visible
   without JavaScript and under prefers-reduced-motion (premium.css handles both).
   ========================================================================== */

[data-premium] {
  --ease: cubic-bezier(0.3, 0, 0.2, 1);   /* firm start, clean stop: no overshoot */
  --duration: 180ms;
  --reveal-duration: 320ms;
  --reveal-distance: 8px;
  --selection-bg: var(--ingenia-orange);
  --selection-text: var(--ingenia-graphite);   /* 5.86:1 */
  --footer-border: var(--color-dark-border);
}
/* Condensed uppercase headings keep their own tracking (the layer tightens it for serif/sans display). */
[data-premium] h1,
[data-premium] h2,
[data-premium] h3 {
  letter-spacing: 0.005em;
}
[data-premium] .site-header .wordmark {
  letter-spacing: 0.08em;
}

/* Images settle without a slow zoom */
[data-premium] .ph img {
  transition: none;
}
.reveal-ready [data-reveal]:not(.is-in) .ph img {
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  [data-premium] .hero .ph img {
    animation: none;
  }
}

/* ---- "Illustrative image" label: always visible, graphite on light grey (≈14:1) ---- */
.img-tag {
  position: absolute;
  z-index: 2;
  left: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.625rem;
  background: rgb(231 234 238 / 0.94);
  color: var(--ingenia-graphite);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.img-tag::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--ingenia-orange);
}

/* ---- Hero: plant photo behind the copy, blueprint grid and orange rule kept as framing ---- */
.hero--photo .hero__meta {
  color: var(--ingenia-grey);   /* on the photo: ≥ 7:1 */
}
.hero--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  background: var(--ingenia-graphite);
}
.hero__bg .ph,
.hero__bg .ph img {
  width: 100%;
  height: 100%;
}
.hero__bg .ph img {
  object-position: 72% 50%;   /* narrow screens: keep the tank and pipework in frame */
}
.hero__bg .ph::after {
  display: none;              /* the hero has its own overlay */
}
/* Tonal overlay: darkens the calm left side where the copy sits, as far as the text needs. */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgb(20 24 29 / 0.96), rgb(20 24 29 / 0.93));
}
/* Blueprint grid over the photo */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgb(143 169 194 / 0.06) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    linear-gradient(90deg, rgb(143 169 194 / 0.06) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem;
  pointer-events: none;
}
.hero__bg .img-tag {
  left: auto;
  right: var(--gutter);
  bottom: var(--space-5);
}
/* Corner measurement marks: two thin lines that draw in from the corner */
.hero__mark {
  position: absolute;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  pointer-events: none;
}
.hero__mark::before,
.hero__mark::after {
  content: "";
  position: absolute;
  background: var(--ingenia-grey);
}
.hero__mark::before { width: 100%; height: 2px; }
.hero__mark::after { width: 2px; height: 100%; }
.hero__mark--tr {
  top: var(--space-5);
  right: var(--gutter);
}
.hero__mark--tr::before { top: 0; right: 0; transform-origin: right; }
.hero__mark--tr::after { top: 0; right: 0; transform-origin: top; }
.hero__mark--br {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__mark::before { animation: mark-x 380ms var(--ease) 120ms both; }
  .hero__mark::after { animation: mark-y 380ms var(--ease) 200ms both; }
}
@keyframes mark-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes mark-y { from { transform: scaleY(0); } to { transform: none; } }

@media (min-width: 48rem) {
  .hero__bg .ph img {
    object-position: 50% 45%;
  }
  .hero__bg::before {
    background: linear-gradient(to right, rgb(20 24 29 / 0.96) 0%, rgb(20 24 29 / 0.94) 58%, rgb(20 24 29 / 0.5) 80%, rgb(20 24 29 / 0.1) 100%);
  }
  .hero__mark--br {
    display: block;
    bottom: var(--space-5);
    right: var(--gutter);
  }
  .hero__mark--br::before { bottom: 0; right: 0; transform-origin: right; }
  .hero__mark--br::after { bottom: 0; right: 0; transform-origin: bottom; }
  .hero__bg .img-tag {
    bottom: calc(var(--space-5) + 3.25rem);
  }
}
@media (min-width: 60rem) {
  .hero--photo .hero__inner {
    grid-template-columns: minmax(0, 48rem);
  }
}

/* ---- Services: every cell is image on top, then number, title and text ----
   The photo is inset inside its cell (12px, 16px from 48rem up) so neighbouring photos never touch;
   the hairline grid and the orange top rule stay as the frame. Text shares the photo's left edge. */
.feature-grid--numbered {
  --tile-inset: 0.75rem;
}
@media (min-width: 48rem) {
  .feature-grid--numbered {
    --tile-inset: 1rem;
  }
}
.feature-grid--numbered .feature {
  position: relative;
  padding: calc(var(--tile-inset) + 2px) var(--tile-inset) var(--space-6);
  background: var(--color-surface);
}
.feature__img {
  position: relative;
  order: -1;
  margin: 0 0 var(--space-2);
}
.feature__img .ph {
  aspect-ratio: 4 / 3;
}
/* Thin orange rule on top of each cell; it draws in when the cell reveals */
.feature-grid--numbered .feature::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ingenia-orange);
  transform-origin: left;
  transition: transform 420ms var(--ease) 80ms;
}
.reveal-ready .feature-grid--numbered .feature:not(.is-in)::after {
  transform: scaleX(0);
}

/* ---- Method: panoramic band closing the section ---- */
.process__band {
  position: relative;
  margin: var(--space-7) 0 0;
  border-top: 3px solid var(--ingenia-graphite);
}
.process__band .ph {
  aspect-ratio: 16 / 9;
}
@media (min-width: 48rem) {
  .process__band .ph {
    aspect-ratio: 21 / 9;
  }
}

/* Generated by scripts/images.mjs: image placeholders (dominant colour + 24px WebP). */
.ph-ingenia-01-planta{background-color:#66696e;background-image:url(data:image/webp;base64,UklGRooAAABXRUJQVlA4IH4AAAAQBACdASoYAAwAPu1kqU2ppaQiMAgBMB2JZwC06BjsSMRJKCLcnHiwAAD+7oxMR4CquVpzxWGhb/LTx4bhT7OViKE29AJuQbDpiciIe1ik8f0xqJX/TdwZPjhgfxWxXRS63Z7MVI4YKhfyiJz29Qwid+RO4OMF+ku1dpwAAAA=)}
.ph-ingenia-02-mantenimiento{background-color:#52585f;background-image:url(data:image/webp;base64,UklGRuQAAABXRUJQVlA4INgAAACQBQCdASoYABIAPu1urlIppiQiqAgBMB2JQBWGceHAAdxRv+q/jVhPn2Hj8dvPfTSFhQK+YAD8B9xdK9Vwm8zgPLSjgeSPs68i7C8O6n7hPA9CS5MbUTS/bDjKFhcQRmibJw2nKwgTt3CNuy3EnJbiV3izIY8pxkqml77dfgVKwGRmZpudNStKA9a/Ee1/BoCOzD/7Xy2EWcMw4o1XR63RpXyHcwMJIAolxdDzywrZ2x4OtASRZNhjgiWkYAowS8ME3kArf8MC857e+eXFFOyiHa5Q84QAAAA=)}
.ph-ingenia-07-procesos{background-color:#717070;background-image:url(data:image/webp;base64,UklGRtgAAABXRUJQVlA4IMwAAADwBACdASoYABIAPu1sq1EppaOiqAqpMB2JQBOgAX0IyWUDFBbcOjYPKP3kCtPfg+AA98566LDKXUgL4nm5Pht3NZHkaDD0oYVQpd9+lsVqkoFWnupfn3Wcs1OZXtxVPUFtjZbyIUDjRRHaX3X0ecioX64jlFviC+TqWf+0R4/fkoj4EN+qIgkwEhk18e6/I25dt5ctjz2NtHn0M8CUV2Oe1RD+L/LbruOA5JTOoz05aSVFA8fIqe7+VXd9me6NRbPJZTF2dTxC2JOgAAA=)}
.ph-ingenia-03-automatizacion{background-color:#646a73;background-image:url(data:image/webp;base64,UklGRrYAAABXRUJQVlA4IKoAAAAQBQCdASoYABIAPu1sqlEppaOiqAqpMB2JZQC7IW0BTegI9PvToD1Wn+Csh2y+yqwAAPOe63qRopXWj/7z62VMPA0OPLhNk0VsJu1ocbbCwp0HnPiSZk0DQrl5EHICAOQt63yHuMu3RPdDzKAZXCMuq/dNMyW2BRJhFPbv0+4PWU3s48mk7AcZUL9v4jggsT+zDRBRSprn1liJjUqZfS1aA5j1ZZ58hniAAA==)}
.ph-ingenia-04-montaje{background-color:#636568;background-image:url(data:image/webp;base64,UklGRrgAAABXRUJQVlA4IKwAAACQBACdASoYABIAPu1srVCppaQiqAqpMB2JZQDKAA65qpYKVV0nV8uOFXPNsQAA/kC1HtC/F4/r7KIIDvfRKuPyP2TtDo/JQr1Way3pv3zme91nSG5GtMG9mnot0Q6TGRTYCayK1otvaQf/Tv3K4WujGDv8zzB/B7M+t+JgTCLBsj8Kl+eUX2G5OMwwj7RXRR+i7YGLtiJTWYFBLLiRJ+0ARWWb3dzc+lB+QAAA)}
.ph-ingenia-05-electrico{background-color:#6e757d;background-image:url(data:image/webp;base64,UklGRsYAAABXRUJQVlA4ILoAAAAwBQCdASoYABIAPu1ur1IppiQiqAgBMB2JZwCsAdwLhyKZ8ssmrb0il9AB8Ou/hMBBgADMUjfhBXfercMO7E121erCMiJRi5MClJFVvGGiK2MvQsbTrwgTD/CkUlSLWb2f/z3nSU6Z0yvfAAPXpp8VEOe0T1yK++yirghDFcd7wfvlU7zVyNDlzX1bBWspQMdBuPULKELRvrcM3XjEoIJg4K8HhQCtiBCZtEVoGQyB2MeQWHfhAcWVAAA=)}
.ph-ingenia-08-eficiencia{background-color:#787c82;background-image:url(data:image/webp;base64,UklGRqgAAABXRUJQVlA4IJwAAACQBACdASoYABIAPu1srVEppaQiqAqpMB2JaQDGQAcsfga65W/SiaD7aL9VOAAA76RuzFQLred06ES10f3ur/8ZbSaRjVAojFlfRxMaVYe6epkldDAMWt8FiKID5ae4o8wD4Bov+KBQc6IH6YWB0yUBIm677iMh4OqY0Y91LfzZrQiBJmEZieliY6KDs/lntpcR6ZKzeBQpYGWAAAA=)}
.ph-ingenia-06-panoramica{background-color:#727a81;background-image:url(data:image/webp;base64,UklGRoIAAABXRUJQVlA4IHYAAADwAwCdASoYAAoAPu1kqU2ppaOiMAgBMB2JZwC+SBXrhbgrJLBw8vgAAPo+0kJRJS2/aOqzQ8SkFXpmSEyl1TFZCMJmaXcM7dMOVyEVy/iUq+rN84nKf1KorrtnREmhporFqLcA2DRp1wSld1pxpABmTqCrXAAA)}