/* ============================================================
   POOLS PAGE FRAGMENT — page-specific styles
   Ported from 02_pool.html; base tokens/nav/btn/footer in style.css
   ============================================================ */

/* Per-language display font for design elements base doesn't cover */
[dir="rtl"] .font-display { font-family:'Rubik',sans-serif; }
[dir="ltr"] .font-display { font-family:'Inter',sans-serif; }

/* ============================================================
   HERO (pools variant — banner div with inner padding)
   ============================================================ */
.hero { background:radial-gradient(1200px 600px at 15% -10%, #0B3A5C 0%, var(--navy) 55%, #04234C 100%); padding:72px 0 88px; position:relative; overflow:hidden; }
.hero::after { display:none; }
.hero::before { display:none; }
.hero__inner { position:relative; z-index:1; max-width:820px; }
[dir="ltr"] .hero__inner { text-align:left; margin:0; }

.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::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); }

.hero h1 {
  font-size:clamp(2rem,3.8vw,2.9rem);
  font-weight:900; line-height:1.1;
  color:#fff; margin-bottom:20px;
}
.hero__sub2 { font-size:1.4rem; font-weight:700; color:#fff; margin-bottom:6px; line-height:1.3; }
.hero__sub3 { font-size:1.05rem; font-weight:600; color:rgba(255,255,255,.85); margin-bottom:22px; line-height:1.4; }
.hero__sub {
  font-size:1.05rem; color:rgba(255,255,255,.85);
  max-width:620px; margin-bottom:36px; line-height:1.7;
}
.hero__btns { display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================
   SECTION VARIANTS (teal / dark) — base has only --off / --white
   ============================================================ */
.sec--teal { background:transparent; color:#fff; }
.sec--dark { background:transparent; color:#fff; }
.sec--teal .label, .sec--dark .label { color:rgba(255,255,255,.65); }
.sec--teal h2.title, .sec--dark h2.title { color:#fff; }

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

[dir="ltr"] .body-l { text-align:left; }

/* ============================================================
   PROBLEMS
   ============================================================ */
.problems__grid {
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:64px; align-items:start; margin-top:48px;
}
.prob-list { display:flex; flex-direction:column; gap:0; }
.prob-item {
  display:grid; grid-template-columns:auto 1fr;
  gap:0; border-bottom:1px solid var(--line);
}
.prob-item:last-child { border-bottom:none; }
[dir="ltr"] .prob-item { direction:ltr; }
.prob-num {
  font-size:4rem; font-weight:900;
  color:var(--grey-lt); line-height:1;
  min-width:80px; text-align:center;
}
[dir="rtl"] .prob-num { font-family:'Rubik',sans-serif; padding:28px 0 28px 24px; }
[dir="ltr"] .prob-num { font-family:'Inter',sans-serif; padding:28px 24px 28px 0; }
.prob-content { padding:28px 0; }
.prob-content h3 { font-size:1.05rem; font-weight:700; color:var(--orange); margin-bottom:8px; }
.prob-content p { font-size:.9rem; color:var(--grey); line-height:1.65; }
[dir="ltr"] .prob-content h3,
[dir="ltr"] .prob-content p { text-align:left; }
.prob-fix {
  margin-top:10px; background:var(--off);
  border-right:3px solid var(--teal-d);
  padding:10px 14px; font-size:.95rem; color:var(--teal-d); font-weight:600; line-height:1.5;
}
[dir="ltr"] .prob-fix { text-align:left; border-right:none; border-left:3px solid var(--teal-d); }
.prob-fix strong {
  font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
  display:block; color:var(--navy); margin-bottom:2px;
}
[dir="rtl"] .prob-fix strong { font-family:'Rubik',sans-serif; }
[dir="ltr"] .prob-fix strong { font-family:'Inter',sans-serif; }

.prob-side { position:sticky; top:32px; }
[dir="ltr"] .prob-side { direction:ltr; }

/* ---- video variant (green building) ----------------------------------
   Where this section carries a clip rather than a still, the clip is sized to
   the copy: it starts on the heading's top line and ends with the third
   problem. The heading, intro and list all live inside one wrapper in the page
   content, so both wrappers collapse to display:contents and the rows line up
   with the copy itself; the video is then placed by line number.
   Rows: 1 eyebrow · 2 heading · 3 intro · 4-7 problems.
   Scoped by :has() so the still-image version (pools) is untouched. */
.problems__grid:has(.prob-side > video) {
  /* a little wider than the still-image variant's 1.2fr/1fr, keeping the 64px
     channel between the clip and the copy */
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-rows:auto auto auto auto auto auto auto;  /* explicit, so line 7 resolves */
  column-gap:64px;
  row-gap:0;                       /* spacing already comes from each block's margins */
}
.problems__grid:has(.prob-side > video) > div:first-child,
.problems__grid:has(.prob-side > video) .prob-list { display:contents; }
.problems__grid:has(.prob-side > video) > div:first-child > *,
.problems__grid:has(.prob-side > video) .prob-item { grid-column:1; }

.problems__grid:has(.prob-side > video) .prob-side {
  grid-column:2;
  grid-row:2 / 7;                  /* heading through the end of problem 03 */
  position:static;                 /* not sticky — the height is the point now */
  align-self:stretch;
}
/* the element carries inline height/min-height, hence the overrides */
.problems__grid:has(.prob-side > video) .prob-side > video {
  height:100% !important;
  min-height:0 !important;
}
img.prob-ph {
  display:block; width:100%; aspect-ratio:500/380; object-fit:cover;
  background:#fff;
}
iframe.prob-ph {
  display:block; width:100%; aspect-ratio:500/380; border:0;
  background:#fff;
}
video.prob-ph {
  display:block; width:100%; aspect-ratio:500/380; object-fit:cover;
  background:#fff; border-radius:14px;
}
.prob-ph-frame {
  width:100%; aspect-ratio:500/380; overflow:hidden; border-radius:14px;
  position:relative; background:#fff;
}
.prob-ph-frame video.prob-ph {
  position:absolute; top:50%; left:50%; width:100%; height:100%;
  object-fit:cover; border-radius:0;
  transform:translate(-50%,-50%) scale(1.95);
}
.prob-ph-frame--hotels video.prob-ph {
  top:46.6%; left:53.2%;
  transform:translate(-53.2%,-46.6%) scale(1.4);
}
div.prob-ph {
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:100%; aspect-ratio:500/380; padding:24px;
  background:var(--grey-lt); color:#9aa1ad; font-size:.8rem; font-weight:700;
}
.prob-callout { background:var(--teal); color:#fff; padding:28px; }
.prob-callout__n { font-size:2.8rem; font-weight:900; line-height:1; margin-bottom:6px; }
[dir="rtl"] .prob-callout__n { font-family:'Rubik',sans-serif; }
[dir="ltr"] .prob-callout__n { font-family:'Inter',sans-serif; }
.prob-callout__l { font-size:.9rem; opacity:.9; line-height:1.5; }
@media(max-width:860px){
  .problems__grid { grid-template-columns:1fr; }
  /* single column: give the wrappers their boxes back and let the clip size
     itself, since there is no second column to span. */
  .problems__grid:has(.prob-side > video) { grid-template-rows:none; row-gap:0; }
  .problems__grid:has(.prob-side > video) > div:first-child { display:block; }
  .problems__grid:has(.prob-side > video) .prob-list { display:flex; }
  .problems__grid:has(.prob-side > video) .prob-side { grid-column:1; grid-row:auto; }
  .problems__grid:has(.prob-side > video) .prob-side > video {
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16/10;
  }
}

/* ============================================================
   SOLUTION (teal bg) — scoped to avoid base .benefit collision
   ============================================================ */
.solution__intro {
  display:grid; grid-template-columns:1fr 1fr;
  gap:48px; align-items:end; margin-bottom:56px;
}
.solution__benefits {
  display:grid; grid-template-columns:1fr 1fr;
  gap:16px; background:none;
  border:none;
}
.solution__benefits .benefit {
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:14px;
  padding:28px 24px; box-shadow:0 8px 24px -16px rgba(0,0,0,.25); transition:transform .15s ease, box-shadow .15s ease;
}
.solution__benefits .benefit:hover { transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(0,0,0,.32); }
.benefit__n { font-size:2.2rem; font-weight:900; color:var(--teal-d); margin-bottom:6px; direction:ltr; unicode-bidi:isolate; display:inline-block; }
[dir="rtl"] .benefit__n { font-family:'Rubik',sans-serif; }
[dir="ltr"] .benefit__n { font-family:'Inter',sans-serif; }
.benefit__h { font-size:1.08rem; font-weight:700; color:var(--teal-d); margin-bottom:6px; }
.benefit__p { font-size:.94rem; color:var(--grey); line-height:1.6; }
[dir="ltr"] .benefit__p { text-align:left; }
@media(max-width:780px){ .solution__intro { grid-template-columns:1fr; } .solution__benefits { grid-template-columns:1fr; } }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.cmp-wrap { margin-top:40px; overflow-x:auto; }
table.cmp { width:100%; border-collapse:collapse; font-size:.93rem; }
.cmp thead th {
  font-size:.84rem; font-weight:900;
  letter-spacing:.06em; text-transform:uppercase;
  padding:16px 20px; text-align:right;
  border-bottom:2px solid var(--blue);
}
[dir="rtl"] .cmp thead th { font-family:'Rubik',sans-serif; }
[dir="ltr"] .cmp thead th { font-family:'Inter',sans-serif; text-align:left; }
.cmp thead th:first-child { color:var(--grey); }
.cmp thead th:nth-child(2) { color:var(--orange); }
.cmp thead th:nth-child(3) { color:var(--teal-d); }
.cmp thead th.th-plus { color:var(--teal-d) !important; background:var(--off) !important; }
.cmp thead th.th-alt { color:var(--grey) !important; background:var(--off) !important; }
.cmp thead th:first-child { background:var(--off); }
.cmp td { padding:16px 20px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.55; }
[dir="ltr"] .cmp td { text-align:left; }
.cmp tr:last-child td { border-bottom:none; }
.cmp td:first-child { font-weight:700; color:#000; width:22%; }
.cmp .bad { color:var(--orange); }
.cmp .good { color:var(--teal-d); font-weight:600; }
.cmp .good::before { content:"✓ "; }
.cmp tr:nth-child(even) td { background:var(--off); }

/* ============================================================
   PROCESS — scoped to avoid base .step (timeline) collision
   ============================================================ */
.process__steps {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; margin-top:52px; border:1px solid rgba(255,255,255,.15);
}
.process__steps .step { padding:26px 24px; border-left:1px solid rgba(255,255,255,.15); }
.process__steps .step:last-child { border-left:none; }
[dir="ltr"] .process__steps .step { border-left:none; border-right:1px solid rgba(255,255,255,.15); }
[dir="ltr"] .process__steps .step:last-child { border-right:none; }
.step__n {
  font-size:2.6rem; font-weight:900;
  color:rgba(255,255,255,.18); line-height:1; margin-bottom:10px;
}
[dir="rtl"] .step__n { font-family:'Rubik',sans-serif; }
[dir="ltr"] .step__n { font-family:'Inter',sans-serif; }
.step__h { font-size:1.05rem; font-weight:700; color:#fff; margin-bottom:8px; }
.step__p { font-size:.9rem; color:rgba(255,255,255,.72); line-height:1.65; }
[dir="ltr"] .step__p { text-align:left; }
@media(max-width:780px){
  .process__steps { grid-template-columns:1fr; }
  .process__steps .step { border-left:none; border-right:none; border-bottom:1px solid rgba(255,255,255,.15); }
  .process__steps .step:last-child { border-bottom:none; }
}

/* ============================================================
   APPLICATIONS
   ============================================================ */
.apps__list {
  display:flex; flex-direction:column; gap:1px;
  background:var(--line); margin-top:36px; border:1px solid var(--line);
}
.app-item {
  display:grid; grid-template-columns:auto 1fr;
  background:#fff; padding:28px 32px; gap:24px;
  align-items:center; transition:.15s;
}
[dir="ltr"] .app-item { direction:ltr; }
.app-item:hover { background:var(--off); }
.app-item__num { font-size:1.6rem; font-weight:900; color:var(--teal); min-width:40px; }
[dir="rtl"] .app-item__num { font-family:'Rubik',sans-serif; }
[dir="ltr"] .app-item__num { font-family:'Inter',sans-serif; }
.app-item__h { font-size:1rem; font-weight:700; color:var(--teal-d); margin-bottom:4px; }
.app-item__p { font-size:.88rem; color:var(--grey); line-height:1.55; }
#solution .apps__list { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.25); }
#solution .app-item { background:var(--navy); }
#solution .app-item:hover { background:var(--navy-2); }
#solution .app-item__h { color:#fff; }
#solution .app-item__p { color:rgba(255,255,255,.85); }
#solution .app-item__p a { color:#fff; text-decoration:underline; }
#solution .app-item__num { color:rgba(255,255,255,.65); }

.gb-directory-wrap {
  background: linear-gradient(180deg, #EAF6F2 0%, #F3F9F7 100%);
  padding: 72px 0;
}
.gb-directory-head { text-align:center; max-width:720px; margin:0 auto 48px; }
.gb-directory-head h2 { font-size:clamp(1.8rem,3vw,2.4rem); font-weight:900; color:var(--navy); margin-bottom:14px; }
.gb-directory-rule { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px; }
.gb-directory-rule span { display:block; width:36px; height:2px; background:var(--navy); }
.gb-directory-rule svg { width:18px; height:18px; stroke:var(--navy); fill:none; stroke-width:1.8; }
.gb-directory-head p { color:var(--grey); font-size:1rem; line-height:1.7; }
.gb-directory-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto; }
.gb-directory-wrap .label, .gb-directory-wrap h2.title { text-align:right; }
[dir="ltr"] .gb-directory-wrap .label, [dir="ltr"] .gb-directory-wrap h2.title { text-align:left; }
.gb-directory-grid--4 { grid-template-columns:repeat(4,1fr); max-width:none; margin-top:36px; }
@media(max-width:1100px){ .gb-directory-grid--4 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .gb-directory-grid--4 { grid-template-columns:1fr; } }
.gb-card { background:#fff; border-radius:16px; padding:32px 26px; text-align:center; box-shadow:0 10px 30px -12px rgba(15,60,50,.15); display:flex; flex-direction:column; }
.gb-card__icon { width:100px; height:100px; border-radius:50%; background:var(--teal-light); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.gb-card__icon svg { width:30px; height:30px; stroke:var(--teal-d); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.gb-card h3 { font-size:1.05rem; font-weight:800; color:var(--navy); margin-bottom:10px; }
.gb-card p { font-size:.88rem; color:var(--grey); line-height:1.6; margin-bottom:18px; }
.gb-card__btn { display:flex; align-items:center; justify-content:center; text-align:center; gap:6px; background:var(--navy); color:#fff; font-size:.82rem; font-weight:700; padding:12px 16px; border-radius:8px; text-decoration:none; margin-top:auto; min-height:52px; line-height:1.35; }
.gb-card__btn:hover { background:var(--navy-2); }
.gb-card__note { display:block; margin-top:8px; font-size:.72rem; color:#9aa1ad; font-style:italic; }
.gb-logo-box { height:90px; display:flex; align-items:center; gap:24px; margin-bottom:16px; }
.gb-logo-box img { max-height:100%; max-width:170px; object-fit:contain; }
.gb-card__icon { background:#fff; border:1px solid var(--line); }
.gb-card__icon img { width:74%; height:74%; object-fit:contain; }

@media(max-width:900px){ .gb-directory-grid{ grid-template-columns:1fr; } }

[dir="ltr"] .app-item__p { text-align:left; }

/* ============================================================
   FAQ
   ============================================================ */
.faq__list { margin-top:36px; }
.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:20px 0;
  font-weight:700; font-size:1rem;
  color:var(--navy); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
[dir="ltr"] .faq-item summary { direction:ltr; }
.faq-item summary::-webkit-details-marker { display:none; }
[dir="rtl"] .faq-item summary::before { font-family:'Rubik',sans-serif; content:"+"; font-size:1.5rem; font-weight:900; color:var(--teal); order:999; flex-shrink:0; }
[dir="rtl"] .faq-item[open] summary::before { content:"−"; }
[dir="ltr"] .faq-item summary::after { font-family:'Inter',sans-serif; content:"+"; font-size:1.5rem; font-weight:900; color:var(--teal); flex-shrink:0; }
[dir="ltr"] .faq-item[open] summary::after { content:"−"; }
.faq-item[open] summary { color:var(--teal-d); }
.faq-body { padding:0 0 22px; font-size:.93rem; color:var(--grey); line-height:1.72; max-width:760px; }
[dir="ltr"] .faq-body { text-align:left; }

/* ============================================================
   CTA STRIP
   ============================================================ */
.cta-strip { background:transparent; padding:72px 0; }
.cta-strip__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;
}
[dir="ltr"] .cta-strip__inner { direction:ltr; }
.cta-strip h2 {
  font-size:clamp(1.4rem,2.8vw,2rem);
  font-weight:900; color:#fff; line-height:1.2; max-width:520px;
}
.cta-strip p { color:rgba(255,255,255,.75); margin-top:8px; font-size:.95rem; }
[dir="ltr"] .cta-strip h2,
[dir="ltr"] .cta-strip p { text-align:left; }
.cta-strip__actions { display:flex; gap:12px; flex-shrink:0; flex-wrap:wrap; }
.cta-strip a.link { display:block; margin-top:14px; color:rgba(255,255,255,.6); font-size:.87rem; text-decoration:none; }
.cta-strip a.link:hover { color:#fff; }
.cta-strip--monitor .cta-strip__inner { background:linear-gradient(120deg, var(--navy), var(--navy-2)); }

@media(max-width:600px){ .hero__btns { flex-direction:column; } .cta-strip__actions { flex-direction:column; } .cta-strip__inner { flex-direction:column; padding:32px 28px; } }


/* Clients logo marquee — continuous auto-scroll, no manual drag */
.client-marquee { }
.client-marquee__track { will-change: transform; }
.client-marquee:hover .client-marquee__track { animation-play-state: paused; }
@keyframes client-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   SECTION CLIP — drop, and a loading state
   ============================================================ */
.problems__grid:has(.prob-side > video) .prob-side { position:relative; }

/* `autoplay` renders a blank white box while a file this size buffers, which
   reads as a broken embed. Hold a spinner over the clip until the first frame
   is genuinely running; the JS lifts it on `playing`. */
.js .problems__grid:has(.prob-side > video) .prob-side:not(.is-ready)::before,
.prob-side.is-loading::before {
  content:""; position:absolute; z-index:2;
  inset:var(--clip-offset,0px) 0 0 0;
  background:var(--navy); border-radius:14px;
}
.js .problems__grid:has(.prob-side > video) .prob-side:not(.is-ready)::after,
.prob-side.is-loading::after {
  content:""; position:absolute; z-index:3;
  top:calc(50% + var(--clip-offset,0px) / 2); left:50%;
  width:44px; height:44px; margin:-22px 0 0 -22px;
  border:3px solid rgba(255,255,255,.18); border-top-color:#9FDBF5;
  border-radius:50%; animation:prob-spin .8s linear infinite;
}
@keyframes prob-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){
  .js .problems__grid:has(.prob-side > video) .prob-side:not(.is-ready)::after,
.prob-side.is-loading::after { animation-duration:2.4s; }
}

@media(min-width:1000px){
  /* Start the clip below the heading line instead of flush with it. Declared
     as a variable because the loading overlay has to sit over the clip only,
     not over the gap above it. */
  .problems__grid:has(.prob-side > video) .prob-side { --clip-offset:48px; }
  .problems__grid:has(.prob-side > video) .prob-side > video {
    margin-block-start:var(--clip-offset);
    height:calc(100% - var(--clip-offset)) !important;
  }
}