/* AKVORA V31 base: layout mechanics shared by every theme. Loaded after the
   scroll-engine styles and before the theme; the theme owns the visual design.
   Scroll geometry (.pool-story, .pool-stage, .scene-fit, hotspot positions)
   stays in pool-scroll-v16.css / pool-scroll-v29.css and is not touched here. */
.section-wrap{max-width:1360px;margin:0 auto}
.section-heading-copy{min-width:0}
.section-heading-copy>*{margin:0}
.section-kicker{display:inline-flex;align-items:center;gap:12px}
h1,h2,h3{text-wrap:balance}
.skip-link{z-index:30}
.header-cta{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
#retry-motion[hidden]{display:none}
/* Programmatic focus on section/drawer titles is for screen readers only. */
#panel-title:focus-visible,#systems-title:focus-visible,#services-title:focus-visible{outline:none}

/* Desktop screens that are not 16:9 used to show a navy letterbox strip between
   the header and the scene. Let the scene cover the stage instead, cropping at
   most 6% per side so the heating marker at 91% stays on screen. Phones keep the
   contained scene; short landscape screens keep their own V29 geometry. */
@media(min-width:701px) and (min-height:501px){
 /* An absolutely positioned box wider than its container cannot be centred by
    auto margins (it would hug the left edge and spill right), so centre it
    explicitly. Hotspots live inside .scene-fit and move with it. */
 .scene-fit{width:max(100%,min(177.777778svh,112%));left:50%;right:auto;margin-inline:0;transform:translate(-50%,-50%)}
}
/* Portrait tablets keep the cover width but sit the band low, under the copy. */
@media(min-width:701px) and (min-height:501px) and (max-aspect-ratio:1/1){.scene-fit{top:62%}}
/* Portrait phones: the stage becomes a three-row grid (copy, scene, controls)
   instead of three absolutely positioned layers, so the scene can never run
   into the hero copy on a short screen. Both copy blocks share the first row
   (the taller one sizes it, so switching chapters never moves the scene). The
   scene keeps its 16:9 box, so the engine's hotspot coordinates and leader
   lines stay valid; it fills the leftover height and shrinks below full width
   only when a very short screen leaves it no room. Landscape phones keep the
   engine's split layout. */
/* .scene-slot only exists for this layout; everywhere else it is transparent. */
.scene-slot{display:contents}
@media(max-width:700px) and (max-aspect-ratio:1/1){
 .pool-stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);padding-top:105px}
 .intro-copy,.chapter-copy{position:relative;grid-area:1/1;inset:auto;margin:0 24px;max-width:none}
 /* The slot is a size container, so the scene can be sized to whichever of
    the slot's width or height binds while keeping its exact 16:9 box. */
 .scene-slot{display:grid;place-items:center;grid-area:2/1;min-width:0;min-height:0;container-type:size}
 .scene-fit{position:relative;inset:auto;transform:none;margin:0;max-width:none;height:auto;aspect-ratio:16/9;width:100%;width:min(100cqw,177.777778cqh)}
 .story-bottom{position:relative;grid-area:3/1;inset:auto;margin:0 24px}
}
@media(max-width:700px) and (max-aspect-ratio:1/1) and (max-height:680px){.pool-stage{padding-top:83px}}

/* Product photography carries opaque white backgrounds: multiply blends it
   into any light tile. Keep .category-image, .catalog-thumb and
   .category-panel-image on light backgrounds. */
.category-image img,.catalog-thumb img,.category-panel-image img{mix-blend-mode:multiply}

/* ---- Catalog ---- */
.systems{padding:96px 4% 80px;max-width:none;margin:0;color-scheme:light}
.systems .catalog-container{max-width:1360px;margin:0 auto}
.systems .section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin:0 0 48px}
.systems .section-heading h2{margin:0}
.systems .system-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border:0}
.systems .system-card{display:flex;flex-direction:column;min-width:0;min-height:0;padding:0;margin:0;border:0;background:none;box-shadow:none;text-align:left;position:relative}
.category-image{display:block;width:100%;aspect-ratio:4/3;overflow:hidden}
.category-image img{display:block;width:100%;height:100%;object-fit:contain}
.category-copy{display:flex;flex-direction:column;min-width:0}
.card-title{display:block}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-arrow{display:inline-grid;place-items:center}
.catalog-help{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px}
.catalog-help button{display:inline-flex;align-items:center;gap:10px}

/* ---- Services ---- */
.services{padding:112px 4%}
.services-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.services-head .section-lead{margin:0}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.service-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0}
.service-card h3,.service-card p{margin:0}
.service-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.service-link{display:inline-flex;align-items:center;gap:10px;margin-top:auto}

/* ---- Process ---- */
.process{padding:112px 4%}
.process-steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.process-steps li{min-width:0}
.process-steps h3,.process-steps p{margin:0}
.step-num{display:block}

/* ---- Water band (canvas fills the section; copy sits on top) ---- */
.water-band{position:relative;overflow:hidden;isolation:isolate;min-height:560px;display:grid;align-items:center;padding:96px 4%}
.water-media{position:absolute;inset:0;z-index:-2;background:#061a33}
.water-media canvas{display:block;width:100%;height:100%}
.water-shade{position:absolute;inset:0;z-index:-1;pointer-events:none}
.water-copy{position:relative;width:100%}
.water-copy h2,.water-copy p{margin:0}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap}

/* ---- Footer ---- */
.site-footer{display:block;padding:72px 4% 28px;margin:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;max-width:1360px;margin:0 auto}
.footer-col h4{margin:0 0 18px}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-col button{text-align:left;padding:2px 0}
.footer-about{margin:20px 0 0}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;max-width:1360px;margin:48px auto 0;padding-top:24px}

/* ---- Drawer panel contents ---- */
.panel-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.request-form{display:grid;gap:14px;margin-top:24px}
.request-form label{display:grid;gap:8px}
.request-form input,.request-form textarea,.request-form select{width:100%;min-width:0;font:inherit}
.request-form textarea{resize:vertical;min-height:110px}
.request-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-status{margin:4px 0 0}

/* ---- Responsive layout ---- */
@media(max-width:1240px){.systems .system-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1150px){
 .process-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
 .footer-grid{grid-template-columns:1fr 1fr 1fr}
 .footer-brand{grid-column:1/-1}
}
@media(max-width:900px){
 .systems .system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .service-grid{grid-template-columns:1fr}
 .header-cta{display:none}
}
@media(max-width:760px){
 .systems{padding:72px 20px 56px}
 .systems .section-heading{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:32px}
 .systems .system-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .catalog-help{flex-direction:column;align-items:flex-start;gap:10px;margin-top:28px}
 .services,.process{padding:80px 20px}
 .service-grid{margin-top:40px}
 .process-steps{grid-template-columns:1fr;row-gap:32px;margin-top:40px}
 .water-band{min-height:520px;padding:72px 20px}
 .cta-actions .btn{flex:1 1 auto}
 .site-footer{padding:56px 20px 24px}
 .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
 .footer-col:last-child{grid-column:1/-1}
 .request-form .form-row{grid-template-columns:1fr}
}
@media(max-width:380px){.systems .system-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}}