/* ============================================================
   DEEP WATER — AGent Pool & Spa design system · v1 · 2026-08-06
   Committed dark theme: this brand surface is always deep navy.
   Flat colour only — no gradients, no glass, no shadows.
   ============================================================ */

:root{
  /* grounds */
  --dw-ground:#0d1b2e;      /* page */
  --dw-panel:#12233b;       /* cards, tools */
  --dw-panel-alt:#0f2036;   /* photo frames, wells */
  --dw-deep:#091425;        /* top note bar, footer */
  /* lines */
  --dw-line:#22344e;        /* default border */
  --dw-line-strong:#2a4162; /* inputs, table head rule */
  --dw-line-faint:#1a2c44;  /* table row rule */
  /* ink */
  --dw-ink:#c5d6ea;         /* body text */
  --dw-bright:#edf3fa;      /* headings, numerals */
  --dw-mid:#8fa9c8;         /* secondary text */
  --dw-dim:#5d7796;         /* labels, captions */
  /* brand accents — blue is the ACTION colour, nothing else */
  --dw-blue:#2f9de0;        /* buttons, accents, active */
  --dw-blue-soft:#7cc3ef;   /* links, outline-button text */
  --dw-powder:#a9c6e4;      /* icons, water lines */
  /* semantic — status only, never decoration */
  --dw-good:#5abf8f; --dw-warn:#e0b45a; --dw-bad:#e06a5a;
  /* type + rhythm */
  --dw-font:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --dw-gap:14px; --dw-pad:22px; --dw-radius:0;
}

body.dw{ margin:0; background:var(--dw-ground); color:var(--dw-ink);
         font:15px/1.65 var(--dw-font); -webkit-text-size-adjust:100% }
.dw ::placeholder{ color:var(--dw-dim) }

/* ---------- type roles ---------- */
.dw-display{ font-size:clamp(30px,4.8vw,44px); font-weight:250; letter-spacing:-.01em;
             color:var(--dw-bright); line-height:1.18; margin:0; text-wrap:balance }
.dw-display b{ font-weight:650 }
.dw-h3{ font-size:16px; font-weight:600; color:var(--dw-bright); margin:0 }
.dw-body{ font-size:15px; line-height:1.65; color:var(--dw-ink); margin:0 }
.dw-sub{ color:var(--dw-mid) }
.dw-small{ font-size:12.5px; color:var(--dw-dim) }
.dw-label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
           color:var(--dw-dim); font-weight:600 }
.dw-eyebrow{ font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--dw-blue);
             font-weight:600; display:flex; align-items:center; gap:14px; margin:0 }
.dw-eyebrow::before{ content:""; width:34px; height:1px; background:var(--dw-blue) }
.dw-sect{ font-size:12px; letter-spacing:.24em; text-transform:uppercase;
          color:var(--dw-blue); font-weight:600; margin:0 }
.dw-num{ font-variant-numeric:tabular-nums }

/* ---------- buttons & links ---------- */
.dw-btn{ display:inline-block; background:var(--dw-blue); border:0; color:var(--dw-ground);
         padding:13px 24px; font:700 15px var(--dw-font); cursor:pointer; text-decoration:none }
.dw-btn:hover{ background:var(--dw-blue-soft) }
.dw-btn-outline{ display:inline-block; background:transparent; border:1px solid var(--dw-blue);
         color:var(--dw-blue-soft); padding:9px 18px; font:600 13px var(--dw-font);
         cursor:pointer; text-decoration:none; transition:background .15s,color .15s }
.dw-btn-outline:hover{ background:var(--dw-blue); color:var(--dw-ground) }
.dw-link{ color:var(--dw-blue-soft); text-decoration:none; border-bottom:1px solid var(--dw-blue) }
.dw-phone{ color:#fff; text-decoration:none; font-weight:600; font-size:15px; white-space:nowrap }
.dw-btn:focus-visible,.dw-btn-outline:focus-visible,.dw-link:focus-visible,
.dw-field input:focus,.dw-field select:focus,.dw-search input:focus{
  outline:2px solid var(--dw-blue); outline-offset:-1px }

/* ---------- forms ---------- */
.dw-field label{ display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
                 color:var(--dw-dim); font-weight:600; margin-bottom:4px }
.dw-field input,.dw-field select{ 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) }
.dw-search{ display:flex; max-width:540px }
.dw-search input{ flex:1; min-width:0; background:var(--dw-panel); border:1px solid var(--dw-line-strong);
                  color:var(--dw-bright); padding:13px 15px; font:15px var(--dw-font) }
.dw-search button{ background:var(--dw-blue); border:0; color:var(--dw-ground);
                   padding:13px 24px; font:700 15px var(--dw-font); cursor:pointer }

/* ---------- cards ---------- */
.dw-card{ border:1px solid var(--dw-line); padding:18px; text-decoration:none; color:var(--dw-ink);
          display:flex; flex-direction:column; gap:12px; background:transparent;
          transition:border-color .15s, transform .15s }
.dw-card b{ display:block; color:var(--dw-bright); font-weight:600; font-size:14.5px }
.dw-card span{ font-size:12px; color:var(--dw-dim) }
.dw-card:hover{ border-color:var(--dw-blue); transform:translateY(-2px) }
.dw-tool{ border:1px solid var(--dw-line); background:var(--dw-panel); padding:var(--dw-pad);
          display:flex; flex-direction:column; transition:border-color .15s }
.dw-tool:hover{ border-color:var(--dw-line-strong) }
.dw-tool .head{ display:flex; align-items:center; gap:12px }
.dw-frm{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin:14px 0 }
.dw-frm .full{ grid-column:1/-1 }

/* ---------- photo frame ---------- */
.dw-photo{ position:relative; aspect-ratio:4/3; border:1px solid var(--dw-line-strong);
           background:var(--dw-panel-alt); overflow:hidden }
.dw-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
               filter:saturate(.82) brightness(.9) contrast(1.03) }
.dw-photo .shade{ position:absolute; inset:0; background:rgba(13,27,46,.22);
                  mix-blend-mode:multiply; pointer-events:none }
.dw-photo-cap{ font-size:12.5px; color:var(--dw-mid); margin:10px 2px 0 }
.dw-photo-cap b{ color:var(--dw-bright); font-weight:600; display:block; font-size:13px }

/* ---------- stats & results ---------- */
.dw-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px }
.dw-stats > div{ border-left:1px solid var(--dw-line); padding-left:22px }
.dw-stats > div:first-child{ border-left:0; padding-left:0 }
@media (max-width:760px){
  .dw-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:30px }
  .dw-stats > div:nth-child(3){ border-left:0; padding-left:0 } }
.dw-stats b{ display:block; font-size:clamp(23px,2.9vw,36px); font-weight:250; color:var(--dw-bright);
             font-variant-numeric:tabular-nums; margin-bottom:2px; white-space:nowrap }
.dw-stats span{ display:block; font-size:11.5px; color:var(--dw-dim);
                letter-spacing:.14em; text-transform:uppercase }
.dw-result{ border-top:1px solid var(--dw-line); padding-top:14px }
.dw-result .big{ display:block; font-size:30px; font-weight:250; color:var(--dw-bright);
                 font-variant-numeric:tabular-nums; line-height:1.25 }
.dw-result .big small{ font-size:15px; color:var(--dw-mid); font-weight:400 }
.dw-verdict{ font-weight:600 }
.dw-v-good{ color:var(--dw-good) } .dw-v-warn{ color:var(--dw-warn) } .dw-v-bad{ color:var(--dw-bad) }

/* ---------- table ---------- */
.dw-tablewrap{ overflow-x:auto }
table.dw-table{ width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums }
table.dw-table th{ text-align:left; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--dw-dim); padding:10px 28px 8px 0; border-bottom:1px solid var(--dw-line-strong);
    font-weight:600; white-space:nowrap }
table.dw-table td{ padding:11px 28px 11px 0; border-bottom:1px solid var(--dw-line-faint); white-space:nowrap }
table.dw-table td:nth-child(2){ white-space:normal }
table.dw-table tbody tr:hover td{ background:rgba(18,35,59,.5) }
.dw-code{ color:var(--dw-blue-soft) }

/* ---------- header / footer ---------- */
.dw-header{ background:rgba(13,27,46,.92); border-bottom:1px solid var(--dw-line);
            backdrop-filter:blur(5px) }
.dw-header .bar{ display:flex; align-items:center; gap:26px; padding:15px 24px; flex-wrap:wrap }
.dw-logo{ height:42px; display:block; filter:brightness(0) invert(1); opacity:.96 }
.dw-nav{ display:flex; gap:20px; flex-wrap:wrap }
.dw-nav a{ color:var(--dw-mid); text-decoration:none; font-size:13px; letter-spacing:.04em }
.dw-nav a:hover{ color:#fff }
.dw-header .actions{ margin-left:auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.dw-footer{ border-top:1px solid var(--dw-line); background:var(--dw-deep);
            padding:34px 24px 44px; color:var(--dw-dim); font-size:12.5px }
.dw-footer .cols{ display:flex; gap:28px 40px; flex-wrap:wrap; justify-content:space-between; align-items:center }
.dw-footer .dw-logo{ height:34px; opacity:.55 }

/* ---------- section furniture ---------- */
.dw-divider{ height:14px; overflow:hidden; margin-top:8px }
.dw-divider svg{ width:100%; height:14px; display:block }
.dw-rep{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; padding:32px 26px;
         border:1px solid var(--dw-line); border-left:3px solid var(--dw-blue); background:var(--dw-panel) }

/* ---------- icons ---------- */
svg.dw-ic{ width:22px; height:22px; stroke:var(--dw-powder); fill:none; stroke-width:1.5;
           stroke-linecap:round; stroke-linejoin:round; flex:none }

@media (prefers-reduced-motion:reduce){
  .dw-btn-outline,.dw-card,.dw-tool{ transition:none }
  .dw-card:hover{ transform:none }
}