/* AGent Pool & Spa — site layout on top of deepwater.css (tokens/components) */

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body.dw{ overflow-x:hidden }
.shell{ max-width:1160px; margin:0 auto; padding:0 24px }

/* header */
.site-header{ position:sticky; top:0; z-index:40 }
.site-header .dw-nav a.active{ color:#fff; border-bottom:1px solid var(--dw-blue); padding-bottom:2px }
.site-header .bar{ padding-left:0; padding-right:0 }
.site-header .shell{ width:100% }

/* home hero */
.hero{ position:relative; min-height:66vh; display:flex; align-items:center; overflow:hidden }
#water{ position:absolute; inset:0; width:100%; height:100%; display:block;
        -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 98%);
        mask-image:linear-gradient(180deg,#000 55%,transparent 98%) }
.ghost{ position:absolute; right:-10px; bottom:-4vw; font-size:clamp(140px,22vw,270px); font-weight:200;
        color:rgba(237,243,250,.04); letter-spacing:-.03em; line-height:1; user-select:none;
        pointer-events:none; font-variant-numeric:tabular-nums }
@media (max-width:720px){ .ghost{ display:none } }
.hero-in{ position:relative; z-index:2; padding:80px 0 68px }
.hero .dw-eyebrow{ margin-bottom:18px }
.hero .dw-display{ max-width:22ch }
.hero .sub{ color:var(--dw-mid); margin:20px 0 30px; max-width:54ch }

/* interior page head */
.page-head{ padding:52px 0 8px }
.page-head .dw-eyebrow{ margin-bottom:14px }
.page-title{ font-size:clamp(26px,3.8vw,38px); font-weight:250; letter-spacing:-.01em;
             color:var(--dw-bright); margin:0; line-height:1.2; text-wrap:balance }
.page-sub{ color:var(--dw-mid); margin:14px 0 0; max-width:60ch }

/* sections */
.sect-pad{ padding:38px 0 8px }
.sect-sub{ color:var(--dw-dim); font-size:13.5px; margin:6px 0 26px; max-width:64ch }
.dw-divider{ margin-top:8px }

/* grids */
.cats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding-bottom:52px }
@media (max-width:900px){ .cats-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .cats-grid{ grid-template-columns:1fr } }
.photos-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding-bottom:10px }
@media (max-width:900px){ .photos-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .photos-grid{ grid-template-columns:1fr } }
.photos-note{ font-size:12px; color:var(--dw-dim); padding:18px 0 50px }
.tools-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; padding-bottom:52px }
.two-col{ display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:start; padding-bottom:52px }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr } }

/* proof stats spacing on home */
.proof-pad{ padding:40px 0 56px }

/* products filter */
.filter-bar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:20px 0 24px }
.filter-bar .dw-field{ min-width:220px; flex:1; max-width:380px }
.filter-bar .dw-field.sel{ flex:0 0 240px }
.count-note{ font-size:12.5px; color:var(--dw-dim); margin-left:auto }
.tbl-pad{ padding-bottom:56px }

/* closed loop steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-bottom:16px }
@media (max-width:820px){ .steps{ grid-template-columns:1fr } }
.step{ border:1px solid var(--dw-line); padding:22px }
.step b.n{ display:block; font-size:34px; font-weight:250; color:var(--dw-blue); font-variant-numeric:tabular-nums }
.step h3{ margin:6px 0 8px }
.step p{ margin:0; font-size:13.5px; color:var(--dw-mid) }

/* contact form */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin-top:18px }
.form-grid .full{ grid-column:1/-1 }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr } }
textarea.dw-input{ width:100%; box-sizing:border-box; background:var(--dw-ground);
    border:1px solid var(--dw-line-strong); color:var(--dw-bright); padding:9px 10px;
    font:14px var(--dw-font); min-height:120px; resize:vertical }
textarea.dw-input:focus{ outline:2px solid var(--dw-blue); outline-offset:-1px }

/* rep strip spacing */
.rep-pad{ margin:10px 0 60px }

/* footer */
.site-footer{ margin-top:24px; padding-left:0; padding-right:0 }

/* calculator: highlight required fields left empty */
.dw-missing{ outline:2px solid var(--dw-warn) !important; outline-offset:-1px }

/* hidden (honeypot) */
.hp{ position:absolute; left:-9999px }