/* ============================================
   WATERAX PAGE — drop this file into /assets/css/
   It loads automatically via the auto-loader.
   ============================================ */

/* Image placeholder treatment — only shows when no image URL is set */
[data-placeholder]{
  position:relative;
  background:repeating-linear-gradient(
    45deg,
    #1a1a1a, #1a1a1a 12px,
    #1f1f1f 12px, #1f1f1f 24px
  );
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:200px;
}
[data-placeholder]::after{
  content:attr(data-placeholder);
  font-family:var(--fs-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel);
  border:1px dashed var(--rule);
  padding:10px 16px;
  background:rgba(0,0,0,.4);
  text-align:center;
  max-width:80%;
}

/* ============ HERO ============ */
.wx-hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  min-height:75vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.wx-hero-img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(.9);
  z-index:0;
}
.wx-hero-img--placeholder{
  background:repeating-linear-gradient(45deg,#1a1a1a,#1a1a1a 12px,#1f1f1f 12px,#1f1f1f 24px);
}
.wx-hero-img--placeholder::after{
  content:attr(data-placeholder);
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--fs-mono);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel);
  border:1px dashed var(--rule);
  padding:14px 22px;
  background:rgba(0,0,0,.5);
}
.wx-hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(13,13,13,0) 0%, rgba(13,13,13,.3) 50%, rgba(13,13,13,.92) 100%),
    linear-gradient(90deg, rgba(13,13,13,.6) 0%, rgba(13,13,13,0) 70%);
  z-index:1;
  pointer-events:none;
}
.wx-hero-inner{
  position:relative;
  z-index:2;
  max-width:var(--max);
  margin:0 auto;
  padding:80px var(--gutter) 60px;
  width:100%;
}
.wx-tag{
  display:inline-block;
  font-family:var(--fs-mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--red);
  padding:8px 14px;
  margin-bottom:32px;
}
.wx-hero-title{
  font-family:var(--fs-display);
  font-size:clamp(96px, 16vw, 240px);
  line-height:.84;
  letter-spacing:-.02em;
  color:var(--paper);
  margin-bottom:32px;
}
.wx-hero-lead{
  font-family:var(--fs-display);
  font-size:clamp(28px, 3.5vw, 48px);
  line-height:1.05;
  letter-spacing:.005em;
  color:var(--paper);
  max-width:36ch;
  margin-bottom:48px;
}
.wx-hero-lead em{font-style:normal; color:var(--red)}
.wx-hero-foot{
  display:flex;
  gap:48px;
  border-top:1px solid var(--rule-soft);
  padding-top:24px;
  flex-wrap:wrap;
}
.wx-hero-stat{display:flex; flex-direction:column; gap:4px}
.wx-hero-stat-num{
  font-family:var(--fs-display);
  font-size:42px;
  color:var(--red);
  line-height:1;
}
.wx-hero-stat-label{
  font-family:var(--fs-mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper-3);
}

/* ============ STORY ============ */
.wx-story{background:var(--paper); color:var(--ink); padding:120px 0}
.wx-story-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:80px;
  align-items:start;
}
.wx-story-copy .eyebrow{display:block; margin-bottom:18px}
.wx-story-h2{
  font-family:var(--fs-display);
  font-size:clamp(48px, 6vw, 88px);
  line-height:.9;
  margin-bottom:36px;
}
.wx-story-h2 em{font-style:normal; color:var(--red)}
.wx-story-body p{
  font-size:18px;
  line-height:1.6;
  color:var(--ink-3);
  margin-bottom:18px;
  max-width:60ch;
}
.wx-story-body strong{color:var(--ink); font-weight:600}
.wx-story-img-wrap{display:flex; flex-direction:column; gap:14px}
.wx-story-img{
  aspect-ratio:4/5;
  background-size:cover;
  background-position:center;
  background-color:var(--paper-2);
  border:1px solid var(--paper-3);
}
.wx-story-img--placeholder{
  background:repeating-linear-gradient(45deg,#e8e3d9,#e8e3d9 12px,#dad4c5 12px,#dad4c5 24px);
}
.wx-story-img--placeholder::after{
  color:var(--ink-3);
  background:rgba(255,255,255,.6);
  border-color:var(--ink-3);
}
.wx-story-img-caption{
  font-family:var(--fs-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  border-left:2px solid var(--red);
  padding-left:10px;
}
@media(max-width:980px){.wx-story-inner{grid-template-columns:1fr; gap:48px}}

/* ============ COLLAB — WARD BURTON × WATERAX × HEIMAN ============ */
.wx-collab{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:140px 0;
  overflow:hidden;
  border-top:3px solid var(--red);
  border-bottom:3px solid var(--red);
}
.wx-collab-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:.35;
  z-index:0;
}
.wx-collab-bg--placeholder{
  background:repeating-linear-gradient(45deg,#1a1a1a,#1a1a1a 12px,#1f1f1f 12px,#1f1f1f 24px);
  opacity:1;
}
.wx-collab-bg--placeholder::after{
  content:attr(data-placeholder);
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--fs-mono);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel);
  border:1px dashed var(--rule);
  padding:14px 22px;
  background:rgba(0,0,0,.5);
  text-align:center;
}
.wx-collab-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,13,13,.3) 0%, rgba(13,13,13,.45) 100%);
  z-index:1;
}
.wx-collab-inner{
  position:relative;
  z-index:2;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
}
.wx-collab-tic{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--fs-mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:36px;
}
.wx-collab-tic-sep{
  width:40px;
  height:1px;
  background:var(--red);
  display:inline-block;
}
.wx-collab-lockup{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:18px;
  margin-bottom:32px;
  font-family:var(--fs-display);
  font-size:clamp(40px, 6vw, 84px);
  line-height:.95;
  color:var(--paper);
}
.wx-collab-x{
  font-family:var(--fs-mono);
  font-size:.5em;
  color:var(--red);
  font-weight:400;
  position:relative;
  top:-.15em;
}
.wx-collab-brand{
  letter-spacing:.005em;
  border-bottom:3px solid var(--red);
  padding-bottom:4px;
}
.wx-collab-h2{
  font-family:var(--fs-display);
  font-size:clamp(40px, 5vw, 72px);
  line-height:.95;
  margin-bottom:40px;
  max-width:24ch;
}
.wx-collab-h2 em{font-style:normal; color:var(--red)}
.wx-collab-body{margin-bottom:60px; max-width:62ch}
.wx-collab-lead{
  font-family:var(--fs-display);
  font-size:clamp(22px, 2.4vw, 30px);
  line-height:1.25;
  color:var(--paper);
  margin-bottom:24px;
}
.wx-collab-body p{
  font-size:17px;
  line-height:1.65;
  color:var(--paper-2);
  margin-bottom:18px;
}
.wx-collab-foot{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:48px;
  align-items:center;
  border-top:1px solid var(--rule);
  padding-top:48px;
}
.wx-collab-detail{
  aspect-ratio:16/9;
  background-size:cover;
  background-position:center;
  background-color:var(--ink-2);
  border:1px solid var(--rule);
  overflow:hidden;
  position:relative;
}
.wx-collab-detail--video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
}
.wx-collab-detail--placeholder{
  background:repeating-linear-gradient(45deg,#1a1a1a,#1a1a1a 12px,#1f1f1f 12px,#1f1f1f 24px);
  position:relative;
  min-height:240px;
}
.wx-collab-cta-wrap{display:flex; flex-direction:column; gap:14px}
.wx-collab-cta-label{
  font-family:var(--fs-mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--red);
}
.wx-collab-cta-body{
  font-size:15px;
  line-height:1.55;
  color:var(--paper-2);
  margin-bottom:14px;
}
.wx-collab-cta-buttons{display:flex; gap:12px; flex-wrap:wrap}
.wx-collab-btn{
  font-family:var(--fs-cond);
  font-weight:700;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:var(--red);
  color:var(--paper);
  padding:14px 22px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background .2s ease;
}
.wx-collab-btn:hover{background:var(--paper); color:var(--ink)}
.wx-collab-btn--ghost{
  background:transparent;
  color:var(--paper);
  border:1px solid var(--paper);
}
.wx-collab-btn--ghost:hover{background:var(--paper); color:var(--ink); border-color:var(--paper)}
@media(max-width:880px){
  .wx-collab-foot{grid-template-columns:1fr; gap:32px}
}

/* ============ MODELS ============ */
.wx-models{background:var(--ink); color:var(--paper); padding:120px 0}
.wx-models-head{max-width:980px; margin:0 auto 64px; padding:0 var(--gutter)}
.wx-models-head .eyebrow{display:block; margin-bottom:18px}
.wx-models-h2{
  font-family:var(--fs-display);
  font-size:clamp(48px, 7vw, 96px);
  line-height:.88;
  margin-bottom:24px;
}
.wx-models-h2 em{font-style:normal; color:var(--red)}
.wx-models-intro{
  font-size:18px;
  line-height:1.6;
  color:var(--paper-2);
  max-width:62ch;
}
.wx-models-intro a{color:var(--paper); border-bottom:1px solid var(--red)}
.wx-models-grid{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.wx-model{
  background:var(--ink-2);
  border:1px solid var(--rule);
  display:flex;
  flex-direction:column;
}
.wx-model-img{
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
  background-color:var(--ink-3);
  position:relative;
}
.wx-model-body{
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-top:3px solid var(--red);
  flex:1;
}
.wx-model-num{
  font-family:var(--fs-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--steel);
}
.wx-model-name{
  font-family:var(--fs-display);
  font-size:48px;
  line-height:.92;
  color:var(--paper);
  letter-spacing:.005em;
}
.wx-model-tag{
  font-family:var(--fs-cond);
  font-weight:700;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--red);
}
.wx-model-desc{
  font-size:15px;
  line-height:1.55;
  color:var(--paper-2);
  margin-top:6px;
}
.wx-model-spec{
  list-style:none;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.wx-model-spec li{
  font-family:var(--fs-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--paper-2);
}
.wx-model-spec li strong{color:var(--paper); font-weight:500}
.wx-models-foot{max-width:62ch; margin:48px auto 0; padding:0 var(--gutter)}
.wx-models-foot p{font-size:15px; line-height:1.6; color:var(--paper-3)}
.wx-models-foot a{color:var(--paper); border-bottom:1px solid var(--red)}
.wx-models-foot em{font-style:italic}
@media(max-width:980px){.wx-models-grid{grid-template-columns:repeat(2, 1fr)}}
@media(max-width:640px){.wx-models-grid{grid-template-columns:1fr}}

/* ============ KEILA ============ */
.wx-keila{
  background:var(--paper);
  color:var(--ink);
  padding:120px 0;
  border-top:1px solid var(--paper-3);
  border-bottom:1px solid var(--paper-3);
}
.wx-keila-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:80px;
  align-items:center;
}
.wx-keila-photo-wrap{position:relative}
.wx-keila-photo{
  aspect-ratio:4/5;
  background-size:cover;
  background-position:center top;
  background-color:var(--paper-2);
  border:1px solid var(--paper-3);
}
.wx-keila-photo--placeholder{
  background:repeating-linear-gradient(45deg,#e8e3d9,#e8e3d9 12px,#dad4c5 12px,#dad4c5 24px);
}
.wx-keila-tic{
  position:absolute;
  bottom:-12px; left:24px;
  font-family:var(--fs-mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--red);
  padding:8px 14px;
}
.wx-keila-copy .eyebrow{display:block; margin-bottom:18px}
.wx-keila-name{
  font-family:var(--fs-display);
  font-size:clamp(56px, 8vw, 116px);
  line-height:.86;
  margin-bottom:8px;
}
.wx-keila-role{
  display:block;
  font-family:var(--fs-cond);
  font-weight:700;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:32px;
}
.wx-keila-lead{
  font-family:var(--fs-display);
  font-size:clamp(24px, 2.4vw, 32px);
  line-height:1.15;
  color:var(--ink);
  margin-bottom:24px;
  max-width:36ch;
}
.wx-keila-body{
  font-size:17px;
  line-height:1.65;
  color:var(--ink-3);
  margin-bottom:18px;
  max-width:60ch;
}
.wx-keila-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap}
.wx-keila-btn{
  font-family:var(--fs-cond);
  font-weight:700;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:var(--ink);
  color:var(--paper);
  padding:16px 24px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:background .2s ease;
}
.wx-keila-btn:hover{background:var(--red); color:var(--paper)}
.wx-keila-btn--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
}
.wx-keila-btn--ghost:hover{background:var(--ink); color:var(--paper)}
@media(max-width:880px){.wx-keila-inner{grid-template-columns:1fr; gap:48px}}

/* ============ VIDEO ============ */
.wx-video{background:var(--ink); color:var(--paper); padding:120px 0}
.wx-video-inner{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.wx-video-inner .eyebrow{display:block; margin-bottom:18px}
.wx-video-h2{
  font-family:var(--fs-display);
  font-size:clamp(48px, 7vw, 96px);
  line-height:.88;
  margin-bottom:48px;
}
.wx-video-h2 em{font-style:normal; color:var(--red)}
.wx-video-frame{
  aspect-ratio:16/9;
  background:var(--ink-2);
  border:1px solid var(--rule);
}
.wx-video-frame iframe{width:100%; height:100%; display:block}

/* ============ PILLARS ============ */
.wx-pillars{background:var(--paper); color:var(--ink); padding:120px 0}
.wx-pillars-inner{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.wx-pillars-head{margin-bottom:64px; max-width:62ch}
.wx-pillars-head .eyebrow{display:block; margin-bottom:18px}
.wx-pillars-h2{
  font-family:var(--fs-display);
  font-size:clamp(48px, 7vw, 96px);
  line-height:.88;
}
.wx-pillars-h2 em{font-style:normal; color:var(--red)}
.wx-pillars-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:48px;
}
.wx-pillar{
  display:flex;
  flex-direction:column;
  gap:14px;
  border-top:3px solid var(--red);
  padding-top:24px;
}
.wx-pillar-num{
  font-family:var(--fs-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--red);
}
.wx-pillar-h3{
  font-family:var(--fs-display);
  font-size:clamp(28px, 3vw, 36px);
  line-height:1;
  letter-spacing:.005em;
}
.wx-pillar p{
  font-size:16px;
  line-height:1.6;
  color:var(--ink-3);
}
@media(max-width:880px){.wx-pillars-grid{grid-template-columns:1fr; gap:32px}}

/* ============ SERVICE ============ */
.wx-service{background:var(--ink-2); color:var(--paper); padding:120px 0}
.wx-service-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.wx-service-copy .eyebrow{display:block; margin-bottom:18px}
.wx-service-h2{
  font-family:var(--fs-display);
  font-size:clamp(40px, 5.5vw, 72px);
  line-height:.92;
  margin-bottom:28px;
}
.wx-service-copy p{
  font-size:17px;
  line-height:1.6;
  color:var(--paper-2);
  margin-bottom:24px;
}
.wx-service-copy strong{color:var(--paper); font-weight:600}
.wx-service-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-top:1px solid var(--rule);
  padding-top:18px;
}
.wx-service-list li{
  font-family:var(--fs-mono);
  font-size:13px;
  color:var(--paper-2);
  padding-left:18px;
  position:relative;
}
.wx-service-list li::before{
  content:"●";
  position:absolute;
  left:0;
  color:var(--red);
  font-size:8px;
  top:6px;
}
.wx-service-img{
  aspect-ratio:4/5;
  background-size:cover;
  background-position:center;
  background-color:var(--ink);
  border:1px solid var(--rule);
}
.wx-service-img--placeholder{
  background:repeating-linear-gradient(45deg,#1a1a1a,#1a1a1a 12px,#1f1f1f 12px,#1f1f1f 24px);
}
@media(max-width:980px){.wx-service-inner{grid-template-columns:1fr; gap:48px}}

/* ============ CTA ============ */
.wx-cta{
  background:var(--ink);
  color:var(--paper);
  padding:120px 0;
  border-top:3px solid var(--red);
  position:relative;
  overflow:hidden;
}
.wx-cta::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width:60%; height:100%;
  background:radial-gradient(circle at 80% 50%, rgba(194,36,31,.12) 0%, transparent 60%);
  pointer-events:none;
}
.wx-cta-inner{
  position:relative;
  max-width:880px;
  margin:0 auto;
  padding:0 var(--gutter);
  text-align:left;
}
.wx-cta-inner .eyebrow{display:block; margin-bottom:18px}
.wx-cta-h2{
  font-family:var(--fs-display);
  font-size:clamp(56px, 8vw, 116px);
  line-height:.88;
  margin-bottom:24px;
}
.wx-cta-h2 em{font-style:normal; color:var(--red)}
.wx-cta-lead{
  font-size:19px;
  line-height:1.55;
  color:var(--paper-2);
  margin-bottom:40px;
  max-width:62ch;
}
.wx-cta-buttons{display:flex; gap:14px; flex-wrap:wrap}
.wx-cta-btn{
  font-family:var(--fs-cond);
  font-weight:700;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:18px 28px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:background .2s ease, color .2s ease;
}
.wx-cta-btn--primary{background:var(--red); color:var(--paper)}
.wx-cta-btn--primary:hover{background:var(--paper); color:var(--ink)}
.wx-cta-btn--secondary{
  background:transparent;
  color:var(--paper);
  border:1px solid var(--rule);
}
.wx-cta-btn--secondary:hover{border-color:var(--red); color:var(--paper)}