/* ============================================================
   TECHNOLOGY PAGE — page-specific styles
   Ported from 04_technology.html ([data-lang] → [dir])
   ============================================================ */

/* Direction helpers */
[dir="ltr"] .hero { text-align:left; }
[dir="ltr"] .split-grid { direction:ltr; }
[dir="ltr"] .ba-col { direction:ltr; }
[dir="ltr"] .steps-grid { direction:ltr; }
[dir="ltr"] .faq-item summary { direction:ltr; }
[dir="ltr"] .faq-item summary::after  { font-family:'Inter',sans-serif; content:"+"; font-size:1.4rem; font-weight:900; color:var(--teal); flex-shrink:0; }
[dir="ltr"] .faq-item[open] summary::after { content:"−"; }
[dir="rtl"] .faq-item summary::before { font-family:'Rubik',sans-serif; content:"+"; font-size:1.4rem; font-weight:900; color:var(--teal); order:999; flex-shrink:0; }
[dir="rtl"] .faq-item[open] summary::before { content:"−"; }
[dir="ltr"] .nav-anchors { flex-direction:row; justify-content:flex-start; }
[dir="ltr"] .step-item { direction:ltr; }
[dir="ltr"] .cta-inner { direction:ltr; }

/* ============================================================
   HERO (page variant — teal, compact, anchor sub-nav)
   ============================================================ */
.hero {
  background:linear-gradient(to right, rgba(8,20,28,0) 0%, rgba(8,20,28,.35) 45%, rgba(8,20,28,.75) 70%, rgba(8,20,28,.9) 100%), url('/wp-content/uploads/2026/08/technology.jpeg') right center/cover no-repeat; padding:72px 0 88px;
  position:relative; overflow:visible;
}
.hero::before, .hero::after { display:none; }
.hero__inner { position:relative; z-index:1; max-width:820px; }
[dir="ltr"] .hero__inner { margin:0; }

/* Hero video — sits beside the heading, same treatment as the product photo on product pages */
.hero-flex { display:flex; align-items:center; gap:80px; position:relative; z-index:1; }
.hero-flex .hero__inner { flex:1 1 auto; max-width:520px; }
.hero-photo { flex:0 0 auto; width:390px; }
.hero-photo--video {
  width:660px;
  border:1px solid rgba(255,255,255,.25); box-shadow:0 20px 48px rgba(0,0,0,.22);
  background:rgba(255,255,255,.08); padding:10px; aspect-ratio:16/9;
  position:relative; z-index:5; margin-bottom:-260px;
}
.hero-photo--video iframe { display:block; width:100%; height:100%; border:0; }
@media(max-width:1300px){
  .hero-photo--video { width:560px; margin-bottom:-220px; }
}
@media(max-width:1040px){
  .hero-flex { flex-wrap:wrap; }
  .hero-flex .hero__inner { max-width:100%; }
  .hero-photo--video { width:520px; margin-bottom:-190px; }
}
@media(max-width:860px){
  .hero-flex { flex-direction:column; gap:32px; }
  .hero-photo { width:100%; }
  .hero-photo--video { width:100%; max-width:560px; margin-bottom:-140px; }
}

.hero__eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
[dir="rtl"] .hero__eyebrow { font-family:'Rubik',sans-serif; }
[dir="ltr"] .hero__eyebrow { font-family:'Inter',sans-serif; }
[dir="rtl"] .hero__eyebrow::before { content:""; display:block; width:28px; height:2px; background:rgba(255,255,255,.5); }
[dir="ltr"] .hero__eyebrow::after { content:""; display:block; width:28px; height:2px; background:rgba(255,255,255,.5); }

/* Type scale copied from the home banner so the two read as one family. */
.hero h1 {
  font-size:clamp(2.4rem,5.5vw,4rem); font-weight:900;
  line-height:1.05; color:#fff; margin-bottom:24px;
}
/* The heading reads as one sentence, so the last word gets no separate
   colour. `.c` dims to 70% elsewhere for product names; that is not
   what this is. */
.hero h1 .c { color:#fff; }

.hero__sub { font-size:1.1rem; color:rgba(255,255,255,.82); max-width:620px; line-height:1.72; margin-bottom:36px; }

/* The page markup carries `.eyebrow`, which is the teal badge used in body
   sections and reads as a stray chip on a dark banner. Give it the home
   banner's rule-and-label treatment instead, without touching the markup. */
.hero .eyebrow {
  display:flex; align-items:flex-start; gap:10px;
  background:none; padding:0; border-radius:0;
  font-size:.85rem; font-weight:700; letter-spacing:.02em; text-transform:none;
  color:rgba(255,255,255,.85); margin-bottom:20px; line-height:1.5; max-width:480px;
}
.hero .eyebrow::before {
  content:""; display:block; flex-shrink:0;
  width:28px; height:2px; background:rgba(255,255,255,.4); margin-top:.85em;
}

/* Anchor nav inside hero */
.nav-anchors {
  display:flex; gap:10px; flex-wrap:wrap;
  direction:ltr; flex-direction:row-reverse; justify-content:flex-start;
}
/* Same pill as .btn--white on the home and about banners: these are the
   banner's calls to action and should not look like a different control. */
.nav-anchor {
  font-size:.87rem; font-weight:700; letter-spacing:.02em;
  padding:13px 26px; border-radius:999px; border:none;
  background:#9FDBF5; color:#0A2A38;
  text-decoration:none; display:inline-block; transition:.2s;
}
[dir="rtl"] .nav-anchor { font-family:'Rubik',sans-serif; }
[dir="ltr"] .nav-anchor { font-family:'Inter',sans-serif; }
.nav-anchor:hover { background:#B8E5F8; color:#0A2A38; }

/* ============================================================
   SECTION VARIANTS (page-specific additions to .sec/.label/.title)
   ============================================================ */
.sec--dark  { background:transparent; color:#fff; }
.sec--dark:has(.cta-inner) { background:transparent; color:inherit; }
.sec--teal  { background:transparent; color:#fff; }
.label { margin-bottom:12px; }
.sec--dark .label,.sec--teal .label { color:rgba(255,255,255,.6); }

h2.title {
  font-size:clamp(1.6rem,3vw,2.2rem); font-weight:900;
  line-height:1.12; color:var(--navy); margin-bottom:14px;
}
.sec--dark h2.title,.sec--teal h2.title { color:#fff; }

.body-l { font-size:1rem; color:var(--grey); line-height:1.75; max-width:680px; }
.sec--dark .body-l,.sec--teal .body-l { color:rgba(255,255,255,.8); }

/* ============================================================
   HOW IT WORKS — split grid with signal diagram
   ============================================================ */
/* Operating-principle split.
   The heading sits outside .split-grid in the page markup, so the grid is
   lifted onto the section wrapper with display:contents. That lets the diagram
   span from the heading's top edge down to the last line of copy — one shared
   top line, one shared baseline — instead of floating centred beside the text
   with a gap under the heading. */
.wrap:has(> .split-grid) {
  display:grid;
  grid-template-columns:1fr 1fr;
  /* rows: eyebrow, heading, copy — declared explicitly so the diagram can be
     addressed by line number (a -1 end line would resolve against the empty
     explicit grid and push the item into implicit rows above). */
  grid-template-rows:auto auto 1fr;
  column-gap:56px;
  row-gap:18px;
  align-items:start;
}
.wrap:has(> .split-grid) > .label      { grid-column:1; grid-row:1; }
.wrap:has(> .split-grid) > .title      { grid-column:1; grid-row:2; }
.wrap:has(> .split-grid) .split-text   { grid-column:1; grid-row:3; }
.wrap:has(> .split-grid) > .title { margin-bottom:0; }
.wrap:has(> .split-grid) > .label { margin-bottom:0; }

.split-grid { display:contents; }

/* the diagram column — from the heading's row to the end of the copy */
.split-grid > :not(.split-text) {
  grid-column:2;
  grid-row:2 / 4;          /* heading row through the copy row */
  align-self:stretch;
  min-width:0;
  position:relative;       /* the card fills this box absolutely, see below */
}
/* Fill the column exactly. The card is taken out of row sizing (absolute
   inside its grid area) so the rows are measured from the copy alone — that
   is what makes the card's bottom edge land on the last line of text instead
   of running past it. The pipe image then takes whatever height is left. */
.split-grid > :not(.split-text) > .signal-diagram {
  position:absolute;
  inset:0;
  justify-content:center;
  overflow:hidden;
  padding:22px 18px;        /* tighter than the stacked card, to feed the pipe */
}
.split-grid > :not(.split-text) .signal-pipe--gif {
  flex:0 0 auto;
  min-height:0;
  overflow:hidden;
  display:flex;
  align-items:center;
}
/* The pipe artwork is 1200x582, but the drawing only occupies rows 170-416
   (the unit itself spans 179-408) — the rest is empty canvas. Letterboxing the
   whole file into this short frame shrank the pipe to a third of the width,
   and cropping to the frame's ratio cut through the unit. So the image is laid
   out at full width and only the empty band is pulled out of view. The offsets
   are percentages, which resolve against the frame's width, so the trim tracks
   the artwork as it scales. */
.split-grid > :not(.split-text) .signal-gif {
  display:block;
  width:100%;
  height:auto;
  object-fit:fill;
  margin-block-start:-14%;    /* 168 of the 170px empty top */
  margin-block-end:-13.6%;    /* 163 of the 165px empty bottom */
}

.split-text p { font-size:.95rem; color:var(--grey); line-height:1.75; margin-bottom:16px; }
.split-text p:last-child { margin-bottom:0; }

/* Signal diagram */
.signal-diagram {
  background:var(--off); border:1px solid var(--line);
  padding:32px 24px; display:flex; flex-direction:column; gap:0; position:relative;
}
.signal-pipe {
  width:100%; height:80px; background:#fff; border:2px solid var(--line);
  border-radius:40px; position:relative; display:flex; align-items:center; overflow:hidden;
}
.signal-water {
  position:absolute; inset:6px; border-radius:32px;
  background:linear-gradient(90deg,#b3eae8,var(--teal),#b3eae8);
  background-size:200% 100%; animation:flow 3s linear infinite;
  opacity:.35;
}
@keyframes flow { 0%{background-position:0% 0%} 100%{background-position:200% 0%} }
.signal-ring {
  position:absolute; left:50%; transform:translateX(-50%);
  width:52px; height:52px; border-radius:50%;
  background:var(--blue); border:4px solid #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 6px rgba(56,74,156,.18);
  z-index:2;
}
.signal-ring svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.signal-pipe--gif { height:auto; border-radius:8px; background:#fff; overflow:hidden; display:block; }
.signal-gif { display:block; width:100%; height:auto; }
.signal-waves {
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; gap:0; z-index:1;
}
.signal-wave {
  width:60px; height:60px; border-radius:50%;
  border:2px solid rgba(56,74,156,.25);
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  animation:wave 2s ease-out infinite;
}
.signal-wave:nth-child(2) { animation-delay:.5s; }
.signal-wave:nth-child(3) { animation-delay:1s; }
@keyframes wave { 0%{width:52px;height:52px;opacity:.9} 100%{width:150px;height:150px;opacity:0} }

.signal-labels {
  display:flex; justify-content:space-between; margin-top:16px;
  font-size:.78rem; color:var(--grey);
}
[dir="rtl"] .signal-labels { font-family:'Rubik',sans-serif; }
[dir="ltr"] .signal-labels { font-family:'Inter',sans-serif; }
.signal-label { text-align:center; }
.signal-label strong { display:block; color:var(--blue); font-weight:700; margin-bottom:2px; }

.signal-stats {
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px; margin-top:20px;
}
.sig-stat { background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:10px; padding:14px 16px; text-align:center; }
.sig-stat__n { font-size:1.4rem; font-weight:900; color:var(--blue); }
.sig-stat__l { font-size:.74rem; color:var(--grey); margin-top:3px; line-height:1.4; }

@media(max-width:860px){
  /* Stack: heading, copy, then the diagram at its natural height. */
  .wrap:has(> .split-grid) { display:block; }
  .split-grid { display:block; }
  .wrap:has(> .split-grid) > .title { margin-bottom:14px; }
  .wrap:has(> .split-grid) > .label { margin-bottom:12px; }
  .split-grid > :not(.split-text) { margin-top:28px; position:static; }
  .split-grid > :not(.split-text) > .signal-diagram {
    position:static; inset:auto; overflow:visible;
  }
  /* Same trim of the artwork's empty band, so the pipe reads large here too. */
  .split-grid > :not(.split-text) .signal-pipe--gif { display:block; overflow:hidden; }
  .split-grid > :not(.split-text) .signal-gif {
    height:auto;
    margin-block-start:-14%;
    margin-block-end:-13.6%;
  }
}

/* ============================================================
   SCALE — BEFORE / AFTER
   ============================================================ */
.ba-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:16px; margin-top:36px;
}
.ba-col { background:#fff; border:1px solid var(--line); border-radius:14px; padding:32px 30px; box-shadow:0 8px 24px -16px rgba(0,0,0,.2); }
.ba-tag {
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:fit-content; margin:0 auto 18px;
  font-size:.72rem; font-weight:900; letter-spacing:.1em;
  text-transform:uppercase; padding:6px 14px;
}
[dir="rtl"] .ba-tag { font-family:'Rubik',sans-serif; }
[dir="ltr"] .ba-tag { font-family:'Inter',sans-serif; }
.ba-tag--before { background:#FEF0E9; color:#c5501e; }
.ba-tag--after  { background:var(--teal-light); color:var(--teal-d); }
.ba-col h3 { font-size:1rem; font-weight:700; color:var(--teal-d); margin-bottom:10px; }
.ba-col--before h3 { color:var(--orange); }
.ba-col p { font-size:.9rem; color:var(--grey); line-height:1.65; }
div.ba-visual {
  height:100px; border-radius:6px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; color:#fff; font-weight:700; letter-spacing:.05em;
}
div.ba-visual--before { background:linear-gradient(135deg,#b0913a,#d4a843); }
div.ba-visual--after  { background:linear-gradient(135deg,var(--teal),var(--teal-d)); }
img.ba-visual {
  display:block; width:100%; height:auto; aspect-ratio:700/210; object-fit:cover;
  border-radius:6px; margin-bottom:16px; background:#fff;
  border:1px solid var(--line);
}

@media(max-width:680px){ .ba-grid { grid-template-columns:1fr; } }

/* ============================================================
   BACTERIA — stat callout + explanation
   ============================================================ */
.bacteria-grid {
  display:grid; grid-template-columns:280px 1fr;
  gap:48px; align-items:stretch; margin-top:40px;
}
[dir="ltr"] .bacteria-grid { grid-template-columns:280px 1fr; }
.bacteria-callout {
  background:var(--blue); color:#fff; padding:32px 28px;
  text-align:center; border-radius:14px; border-top:4px solid var(--navy-2);
  box-shadow:0 10px 28px -14px rgba(6,43,76,.4);
  display:flex; flex-direction:column; justify-content:center;
}
.bacteria-callout__n {
  font-size:4.5rem; font-weight:900; line-height:1; color:#fff;
}
.bacteria-callout__sub { font-size:.82rem; color:rgba(255,255,255,.75); margin-top:6px; line-height:1.5; }
.bacteria-callout__badges { display:flex; flex-direction:column; gap:6px; margin-top:18px; }
.bacteria-badge {
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  padding:7px 12px; font-size:.78rem; color:rgba(255,255,255,.85); text-align:right;
}
[dir="rtl"] .bacteria-badge { font-family:'Rubik',sans-serif; }
[dir="ltr"] .bacteria-badge { font-family:'Inter',sans-serif; text-align:left; }
.bacteria-badge strong { color:#fff; display:block; margin-bottom:1px; }

.bacteria-text p { font-size:.95rem; color:var(--grey); line-height:1.75; margin-bottom:16px; }

@media(max-width:780px){
  .bacteria-grid { grid-template-columns:1fr; }
  [dir="ltr"] .bacteria-grid { grid-template-columns:1fr; }
}

/* ============================================================
   BIOFOULING — 4 STEPS
   ============================================================ */
.steps-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:14px; margin-top:36px;
}
.step-item {
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:12px; padding:26px 22px;
  display:flex; flex-direction:column;
}

.step-top {
  display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:14px;
}
.step-num {
  font-size:3rem; font-weight:900; color:var(--grey-lt);
  line-height:1;
}
[dir="rtl"] .step-num { font-family:'Rubik',sans-serif; }
[dir="ltr"] .step-num { font-family:'Inter',sans-serif; }
.step-icon {
  width:44px; height:44px; border-radius:8px; background:#ECEBFB;
  display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.step-icon svg { width:22px; height:22px; stroke:var(--blue); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
img.step-icon {
  width:190px; height:190px; border-radius:12px; object-fit:contain;
  display:block; background:#fff; flex-shrink:0;
}
@media(max-width:780px){ img.step-icon { width:140px; height:140px; } }
@media(max-width:480px){ img.step-icon { width:110px; height:110px; } }
.step-h { font-size:.96rem; font-weight:700; color:var(--teal-d); margin-bottom:6px; }
.step-p { font-size:.86rem; color:var(--grey); line-height:1.6; }

@media(max-width:780px){ .steps-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .steps-grid { grid-template-columns:1fr; } }

/* ============================================================
   FILTRATION — big stat + explanation
   ============================================================ */
.filtration-stats {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px; margin-top:36px;
}
.filt-stat {
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:12px; padding:28px 24px; text-align:center;
}
.filt-stat__n {
  font-size:2.6rem; font-weight:900; color:var(--blue); line-height:1;
}
.filt-stat__n--icon svg { width:2.2rem; height:2.2rem; }
.filt-stat__l { font-size:.82rem; color:var(--grey); margin-top:7px; line-height:1.4; }
.filt-stat__sub { font-size:.78rem; color:var(--grey); margin-top:4px; }

.filtration-body { margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.filtration-body p { font-size:.95rem; color:var(--grey); line-height:1.75; }
@media(max-width:680px){ .filtration-stats { grid-template-columns:1fr; } .filtration-body { grid-template-columns:1fr; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { margin-top:32px; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item:first-child { border-top:1px solid var(--line); }
.faq-item summary {
  list-style:none; padding:18px 0; font-weight:700; font-size:.96rem;
  color:var(--navy); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item[open] summary { color:var(--teal-d); }
.faq-body { padding:0 0 18px; font-size:.9rem; color:var(--grey); line-height:1.72; max-width:760px; }

/* ============================================================
   CTA
   ============================================================ */
.cta-inner {
  background:linear-gradient(120deg, var(--teal-d), var(--teal));
  border-radius:20px; padding:44px 40px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.cta-inner h2 {
  font-size:clamp(1.4rem,2.8vw,2rem); font-weight:900; color:#fff; line-height:1.2; max-width:520px;
}
.cta-inner p { color:rgba(255,255,255,.75); margin-top:8px; font-size:.95rem; }
.cta-btns { display:flex; gap:12px; flex-shrink:0; flex-wrap:wrap; }
@media(max-width:600px){ .cta-inner { flex-direction:column; padding:32px 28px; } .cta-btns { flex-direction:column; } }

/* On the dark CTA the white button uses the blue brand color */
.sec--dark .btn--white { color:var(--navy); }
.sec--dark .btn--white:hover { background:var(--off); }

/* ============================================================
   HERO ARTWORK — wide screens
   The ring motif is whole in the source, but the banner is only
   436px tall against a 900px image, so `cover` scaled the artwork
   up past 2x and sliced the rings off top and bottom.
   Sized to 118% of the banner height with the vertical offset at
   63%, the rings sit fully inside it — that is the largest the
   motif can be drawn and still fit, measured off the artwork
   rather than guessed. Both values are relative to the banner
   height, so the fit survives the heading wrapping to another
   line and changing that height.
   The image is not the original: from x=1550 it cross-fades into
   its own edge column, smoothed vertically, then runs flat to
   5.5:1. Scaled down this far the artwork no longer spans the
   banner, and this carries it to the right edge without a seam.
   Nothing here can recover the left side of the rings — they run
   off the edge of the supplied file.
   Wide screens only; below 1000px the rule above still applies.
   ============================================================ */
@media(min-width:1000px){
  .hero {
    background:
      linear-gradient(to right, rgba(8,20,28,0) 0%, rgba(8,20,28,.35) 45%, rgba(8,20,28,.75) 70%, rgba(8,20,28,.9) 100%),
      url('../../img/heroes/technology-field.jpeg') left 63% / auto 118% no-repeat,
      rgb(3,18,40);
  }
}