/* Shower calculator landing — index3 */

/* —— HERO SLIDER (full-bleed) —— */
.cl-hero{
  position:relative;
  min-height:min(88vh,680px);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
  background:#0d2236;
}
.cl-hero-track{
  position:absolute;inset:0;z-index:0;
  display:flex;
  width:100%;
  height:100%;
  transition:transform .85s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.cl-hero-slide{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
  min-height:inherit;
  overflow:hidden;
  background:#0d2236;
}
.cl-hero-slide img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 45%;
  transform:scale(1.06);
  transition:transform 8s ease-out;
}
.cl-hero-slide.is-active img{transform:scale(1)}
.cl-hero-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(105deg,
      rgba(10,26,40,.88) 0%,
      rgba(13,34,54,.62) 42%,
      rgba(13,34,54,.22) 68%,
      rgba(13,34,54,.08) 100%),
    linear-gradient(180deg,
      rgba(10,26,40,.35) 0%,
      transparent 40%,
      transparent 70%,
      rgba(10,26,40,.4) 100%);
}
.cl-hero-copy{
  position:absolute;z-index:2;
  left:0;right:0;top:0;bottom:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,10vh,100px) max(var(--gutter),4vw);
  max-width:min(640px,92vw);
  pointer-events:none;
  animation:clFadeUp .85s cubic-bezier(.22,1,.36,1) both;
}
.cl-hero-copy > *{pointer-events:auto}
@keyframes clFadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
.cl-brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);
  font-weight:500;
  font-size:12px;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brass-soft);
  margin-bottom:18px;
}
.cl-brand::before{
  content:"";width:34px;height:2px;background:var(--brass);flex-shrink:0;
}
.cl-brand span{
  font-family:var(--sans);
  font-weight:400;
  letter-spacing:.04em;
  text-transform:none;
  color:rgba(255,255,255,.55);
}
.cl-hero h1{
  font-family:var(--disp);
  font-weight:700;
  font-size:clamp(36px,6vw,64px);
  line-height:.95;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#fff;
  max-width:14ch;
  margin-bottom:16px;
}
.cl-hero h1 em{font-style:normal;color:var(--brass-soft)}
.cl-hero-lead{
  font-size:15.5px;
  line-height:1.55;
  color:rgba(255,255,255,.78);
  max-width:42ch;
  margin-bottom:28px;
}
.cl-hero-nav{
  position:absolute;z-index:3;
  top:50%;transform:translateY(-50%);
  width:46px;height:46px;
  border:1.5px solid rgba(255,255,255,.35);
  background:rgba(10,26,40,.35);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
  transition:border-color .2s,background .2s;
}
.cl-hero-nav:hover{border-color:var(--brass-soft);background:rgba(10,26,40,.55)}
.cl-hero-nav svg{width:18px;height:18px}
.cl-hero-prev{left:max(10px,var(--gutter))}
.cl-hero-next{right:max(10px,var(--gutter))}
.cl-hero-pager{
  position:absolute;z-index:3;
  left:max(var(--gutter),4vw);
  bottom:28px;
  display:flex;align-items:center;gap:14px;
}
.cl-hero-frac{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:rgba(255,255,255,.7);
}
.cl-hero-frac b{color:#fff;font-size:14px}
.cl-hero-dots{display:flex;gap:8px}
.cl-hero-dots button{
  width:8px;height:8px;padding:0;border:none;border-radius:0;
  background:rgba(255,255,255,.35);cursor:pointer;transition:background .2s,width .2s;
}
.cl-hero-dots button.is-on{background:var(--brass);width:22px}

.cl-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:14px;
  padding:14px 26px;border:none;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.cl-btn:hover{transform:translateY(-1px)}
.cl-btn-brass{background:var(--brass);color:#241402}
.cl-btn-brass:hover{background:var(--brass-2)}
.cl-btn-ghost{
  background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.45);
}
.cl-btn-ghost:hover{border-color:var(--brass-soft);color:var(--brass-soft)}
.cl-btn svg{width:16px;height:16px}

/* —— JUMP NAV (sticky under site header) —— */
.cl-jump{
  position:sticky;
  top:74px;
  z-index:75;
  background:rgba(247,249,249,.94);
  backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--ink);
}
.cl-jump .wrap{
  display:flex;align-items:center;gap:4px;
  height:48px;
  overflow-x:auto;scrollbar-width:none;
  padding:0 max(var(--gutter),2.5vw);
}
.cl-jump .wrap::-webkit-scrollbar{display:none}
.cl-jump a{
  flex:0 0 auto;
  font-family:var(--disp);font-weight:500;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);padding:10px 14px;
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
  white-space:nowrap;
}
.cl-jump a:hover{color:var(--ink)}
.cl-jump a.is-on{color:var(--ink);border-bottom-color:var(--brass)}
.cl-jump-cta{
  margin-left:auto !important;
  background:var(--brass) !important;color:#241402 !important;
  border-bottom:none !important;
  padding:8px 16px !important;
  font-weight:600 !important;
}
.cl-jump-cta:hover{background:var(--brass-2) !important;color:#241402 !important}
#about,#why,#process,#calcSec,#siteFooter{scroll-margin-top:172px}

/* —— SECTIONS (full width) —— */
.cl-sec{padding:clamp(52px,7vw,96px) 0;border-bottom:1px solid var(--line)}
.cl-sec .wrap{
  width:100%;
  max-width:none;
  margin:0;
  padding:0 max(var(--gutter),2.5vw);
}
.cl-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.cl-kicker::before{content:"";width:34px;height:2px;background:var(--brass)}
.cl-sec h2{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,4vw,44px);line-height:.95;letter-spacing:.01em;
  color:var(--ink);margin-bottom:16px;max-width:22ch;
}
.cl-sec h2 em{font-style:normal;color:var(--blue)}
.cl-lead{
  font-size:15.5px;line-height:1.6;color:var(--ink-soft);
  max-width:62ch;margin-bottom:0;
}

/* —— PROJECTS (full-bleed mosaic) —— */
.cl-projects{padding-top:clamp(40px,5vw,64px)}
.cl-projects-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:end;
  margin-bottom:28px;
}
.cl-projects-head .cl-lead{max-width:48ch}
.cl-mosaic{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  grid-template-rows:minmax(280px,38vh) minmax(220px,28vh);
  gap:8px;
  width:100%;
}
.cl-mosaic a,.cl-mosaic figure{
  position:relative;margin:0;overflow:hidden;
  background:#cfd8df;border:0;
  display:block;min-height:0;
}
.cl-mosaic .m1{grid-row:1 / -1}
.cl-mosaic .m2{grid-column:2}
.cl-mosaic .m3{grid-column:3}
.cl-mosaic .m4{grid-column:2 / -1}
.cl-mosaic img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.22,1,.36,1);
}
.cl-mosaic a:hover img,.cl-mosaic figure:hover img{transform:scale(1.04)}
.cl-mosaic figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:18px 20px 16px;
  background:linear-gradient(transparent,rgba(10,26,40,.88));
  color:#fff;
  transform:translateY(6px);
  transition:transform .35s ease;
}
.cl-mosaic a:hover figcaption,.cl-mosaic figure:hover figcaption{transform:none}
.cl-mosaic .cap-sku{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass-soft);margin-bottom:4px;
}
.cl-mosaic .cap-title{
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(16px,1.8vw,22px);letter-spacing:.03em;line-height:1.15;
}

/* —— WHY: horizontal columns —— */
.cl-why-sec{background:var(--sheet)}
.cl-why-head{
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;
  margin-bottom:8px;
}
.cl-why-list{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border-top:1.5px solid var(--ink);
}
.cl-why-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  padding:28px 18px 8px 22px;
  border-right:1px solid var(--line);
  transition:background .25s;
}
.cl-why-row:last-child{border-right:none}
.cl-why-row:hover{background:linear-gradient(180deg,rgba(169,102,31,.07),transparent 70%)}
.cl-why-ico{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--ink);
  background:var(--paper-2);
  color:var(--blue);
  flex-shrink:0;
}
.cl-why-ico svg{width:30px;height:30px}
.cl-why-body{min-width:0}
.cl-why-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--brass);display:block;margin-bottom:8px;
}
.cl-why-body h3{
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:17px;line-height:1.15;letter-spacing:.03em;color:var(--ink);
  margin-bottom:10px;
}
.cl-why-body p{
  font-size:13.5px;line-height:1.5;color:var(--ink-soft);
}

/* —— PROCESS: dark timeline band (distinct from why) —— */
.cl-process{
  background:var(--blue-deep);
  color:#e8eef2;
  border-bottom:none;
  position:relative;overflow:hidden;
}
.cl-process::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 40% 60% at 100% 0%,rgba(169,102,31,.2),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%);
}
.cl-process .wrap{position:relative;z-index:1}
.cl-process .cl-kicker{color:var(--brass-soft)}
.cl-process .cl-kicker::before{background:var(--brass-soft)}
.cl-process h2{color:#fff}
.cl-process h2 em{color:var(--brass-soft)}
.cl-process .cl-lead{color:rgba(255,255,255,.68);margin-bottom:40px}
.cl-timeline{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  position:relative;
  margin:0;padding:0;
}
.cl-timeline::before{
  content:"";
  position:absolute;left:8%;right:8%;top:28px;
  height:2px;background:rgba(169,102,31,.45);
}
.cl-tl{
  position:relative;
  padding:0 18px 0 0;
  text-align:left;
}
.cl-tl-node{
  width:56px;height:56px;
  border:2px solid var(--brass);
  background:var(--blue-deep);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  position:relative;z-index:1;
}
.cl-tl-node span{
  font-family:var(--mono);font-size:14px;letter-spacing:.08em;color:var(--brass-soft);
}
.cl-tl h3{
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:20px;letter-spacing:.04em;margin-bottom:10px;color:#fff;
}
.cl-tl p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.65);max-width:28ch}

/* —— CALCULATOR —— */
.cl-calc-sec{background:var(--paper-2)}
.cl-calc-head{margin-bottom:28px}
.cl-types{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;
}
.cl-type{
  appearance:none;border:1.5px solid var(--line);background:var(--sheet);
  padding:0;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;
  transition:border-color .2s,box-shadow .2s,transform .2s;
  color:inherit;font:inherit;
}
.cl-type:hover{border-color:var(--ink);transform:translateY(-2px)}
.cl-type.is-on{
  border-color:var(--brass);
  box-shadow:inset 0 0 0 1px var(--brass);
}
.cl-type-img{
  aspect-ratio:1/1;background:#e8eef2;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line-soft);
  overflow:visible;
}
.cl-type-img img{width:100%;height:100%;object-fit:contain;object-position:center bottom;padding:6px 4px 10px}
.cl-type-meta{padding:10px 12px 12px}
.cl-type-sku{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--brass);margin-bottom:4px;
}
.cl-type-title{
  font-family:var(--disp);font-weight:500;text-transform:uppercase;
  font-size:12.5px;line-height:1.2;letter-spacing:.02em;
  color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.cl-type-kind{
  display:inline-block;margin-top:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);
  padding:3px 0;
}

.cl-panel{
  display:grid;
  grid-template-columns:1fr minmax(260px,340px);
  gap:20px;
  align-items:start;
}
.cl-form{
  border:1.5px solid var(--ink);
  background:var(--sheet);
  padding:22px 22px 18px;
}
.cl-form-h{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:22px;letter-spacing:.03em;margin-bottom:6px;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  color:var(--ink);line-height:1;
  padding-right:44px;
}
.cl-form-h .sku{
  font-family:var(--mono);font-size:13px;color:var(--brass);
  font-weight:500;letter-spacing:.06em;text-transform:none;
}
.cl-form-sub{
  font-family:var(--disp);font-weight:500;text-transform:uppercase;
  font-size:18px;letter-spacing:.02em;line-height:1.2;
  color:var(--ink-soft);margin-bottom:18px;max-width:48ch;
}

/* scheme */
.cl-viz{margin-bottom:18px}
.cl-viz-photo{
  border:1.5px solid var(--line);
  background:#eef2f4;
  display:flex;align-items:center;justify-content:center;
  min-height:200px;overflow:hidden;
}
.cl-viz-photo img{width:100%;height:100%;object-fit:contain;display:block;max-height:280px}

/* summary under type grid */
.cl-calc-summary{
  margin-top:24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:1.5px solid var(--ink);background:var(--sheet);padding:16px 18px;
}
.cl-calc-summary[hidden]{display:none !important}
.cl-calc-summary-text{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;min-width:0;
}
.cl-calc-summary-sku{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--brass);
}
.cl-calc-summary-title{
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:16px;letter-spacing:.02em;color:var(--ink);
}
.cl-calc-summary-price{
  font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink);
}

/* calc + shared modal */
.cl-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:max(12px,2vh) 12px;
}
.cl-modal[hidden]{display:none !important}
.cl-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(10,26,40,.55);
  backdrop-filter:blur(2px);
}
.cl-modal-dialog{
  position:relative;z-index:1;
  width:min(860px,100%);
  max-height:min(92vh,820px);
  overflow:auto;
  background:var(--sheet);
  border:1.5px solid var(--ink);
  padding:28px 28px 22px;
  box-shadow:0 24px 60px rgba(10,26,40,.28);
  animation:clModalIn .28s cubic-bezier(.22,1,.36,1) both;
}
.cl-modal-dialog--calc{
  width:min(1120px,100%);
  padding:20px;
  background:var(--paper-2,#eef1f3);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.cl-modal-dialog--calc .cl-panel{
  overflow:auto;
  min-height:0;
  flex:1;
  padding-right:2px;
}
@keyframes clModalIn{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:none}
}
.cl-modal-x{
  appearance:none;border:1.5px solid var(--line);background:var(--sheet);
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink);flex-shrink:0;transition:.2s;
}
.cl-modal-x--calc{
  position:absolute;top:16px;right:16px;z-index:5;
}
.cl-modal-x:hover{border-color:var(--ink);background:#fff}
.cl-modal-x svg{width:18px;height:18px}

.cl-mat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.cl-mat-card{
  appearance:none;border:1.5px solid var(--line);background:var(--sheet-2);
  text-align:left;cursor:pointer;padding:14px 14px 12px;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  color:inherit;font:inherit;min-height:0;
  transition:border-color .2s,background .2s;
}
.cl-mat-card:hover{border-color:var(--ink);background:#fff}
.cl-mat-card.is-on{
  border-color:var(--brass);
  background:#fffaf2;
  box-shadow:inset 0 0 0 1px var(--brass);
}
.cl-mat-card:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.cl-mat-n{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--brass);
}
.cl-mat-main{
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:17px;letter-spacing:.03em;line-height:1.1;color:var(--ink);
}
.cl-mat-tier{font-size:12.5px;font-weight:500;color:var(--ok)}
.cl-mat-desc{font-size:12.5px;line-height:1.4;color:var(--ink-soft)}

.cl-fields{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px 12px;
}
.cl-field{display:flex;flex-direction:column;gap:6px}
.cl-field.span2{grid-column:span 2}
.cl-field.span3{grid-column:span 3}
.cl-field label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
}
.cl-field input,.cl-field select{
  height:42px;border:1.5px solid var(--line);background:var(--sheet-2);
  padding:0 12px;font-family:var(--mono);font-size:13px;color:var(--ink);
}
.cl-field input:focus,.cl-field select:focus{
  outline:none;border-color:var(--brass);background:#fff;
}
.cl-chips{display:flex;flex-wrap:wrap;gap:8px}
.cl-chip{
  appearance:none;border:1.5px solid var(--line);background:var(--sheet);
  padding:8px 14px;font-family:var(--disp);font-weight:500;
  text-transform:uppercase;letter-spacing:.04em;font-size:12px;
  cursor:pointer;color:var(--ink-soft);transition:.2s;
}
.cl-chip:hover{border-color:var(--ink)}
.cl-chip.is-on{border-color:var(--brass);color:var(--brass);background:#fffaf2}

.cl-result{
  border:1.5px solid var(--ink);
  background:var(--blue-deep);
  color:#e8eef2;
  padding:24px 22px;
  position:sticky;top:12px;
}
.cl-result-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px;
}
.cl-result-price{
  font-family:var(--disp);font-weight:700;font-size:42px;
  letter-spacing:.01em;line-height:1;color:#fff;margin-bottom:6px;
}
.cl-result-price small{font-size:18px;font-weight:500;opacity:.7;margin-left:4px}
.cl-result-note{font-size:13px;line-height:1.45;color:rgba(255,255,255,.65);margin-bottom:18px}
.cl-result-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.cl-result-row{
  display:flex;justify-content:space-between;gap:12px;
  font-size:12.5px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12);
}
.cl-result-row span{color:rgba(255,255,255,.55)}
.cl-result-row b{font-weight:500;text-align:right}
.cl-result .cl-btn{width:100%;margin-top:4px}
.cl-result .cl-btn + .cl-btn{margin-top:10px}
.cl-result-form{
  display:flex;flex-direction:column;gap:14px;
  margin-top:8px;
}
.cl-result-form .cl-field label{color:rgba(255,255,255,.55);margin-top:8px}
.cl-result-form .cl-field input{
  background:#fff;
  border-color:rgba(255,255,255,.35);
  color:var(--ink);
}
.cl-result-form .cl-field input::placeholder{color:var(--ink-faint)}
.cl-result-form .cl-field input:focus{
  background:#fff;
  border-color:var(--brass);
}
.cl-result-form .cl-btn{margin-top:4px}

.cl-modal--ok{z-index:210}
.cl-ok-dialog{
  position:relative;z-index:1;
  width:min(420px,100%);
  background:var(--sheet);
  border:1.5px solid var(--ink);
  padding:36px 28px 28px;
  text-align:center;
  animation:clFadeUp .35s ease both;
}
.cl-ok-dialog .cl-modal-x{position:absolute;top:12px;right:12px}
.cl-ok-mark{
  width:52px;height:52px;margin:0 auto 16px;
  border:1.5px solid var(--brass);color:var(--brass);
  display:grid;place-items:center;
  font-size:24px;font-weight:700;line-height:1;
}
.cl-ok-dialog h2{
  font-family:var(--disp);font-weight:700;font-size:26px;
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px;
}
.cl-ok-dialog p{
  font-size:15px;line-height:1.5;color:var(--ink-soft);margin-bottom:22px;
}
.cl-ok-dialog .cl-btn{min-width:160px}

.cl-close{
  background:var(--blue-deep);color:#fff;
  padding:clamp(48px,7vw,80px) 0;
  border-bottom:none;
  position:relative;overflow:hidden;
}
.cl-close::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 80% at 90% 20%,rgba(169,102,31,.25),transparent 55%),
    linear-gradient(90deg,transparent 60%,rgba(255,255,255,.03));
  pointer-events:none;
}
.cl-close .wrap{position:relative;z-index:1;width:100%;max-width:none;padding:0 max(var(--gutter),2.5vw)}
.cl-close h2{color:#fff;max-width:18ch}
.cl-close .cl-lead{color:rgba(255,255,255,.7);margin-bottom:28px}

@media (prefers-reduced-motion:reduce){
  .cl-hero-slide img,.reveal,.cl-type,.cl-hero-track{animation:none!important;transition:none!important}
}

@media (max-width:1100px){
  .cl-timeline{grid-template-columns:repeat(2,1fr);gap:36px 20px}
  .cl-timeline::before{display:none}
  .cl-fields{grid-template-columns:repeat(2,1fr)}
  .cl-field.span2,.cl-field.span3{grid-column:span 2}
  .cl-why-list{grid-template-columns:repeat(3,1fr)}
  .cl-why-row{border-right:none;border-bottom:1px solid var(--line);padding:24px 16px 24px 16px}
  .cl-why-row:nth-child(3n){padding-right:0}
  .cl-mosaic{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }
  .cl-mosaic .m1{grid-row:auto;grid-column:1 / -1;min-height:42vh}
  .cl-mosaic .m2,.cl-mosaic .m3{min-height:28vh}
  .cl-mosaic .m4{grid-column:1 / -1;min-height:32vh}
}
@media (max-width:900px){
  .cl-projects-head,.cl-why-head{grid-template-columns:1fr}
  .cl-panel{grid-template-columns:1fr}
  .cl-result{position:static}
  .cl-hero-copy{max-width:100%;padding-right:70px}
  .cl-jump{top:0}
  .cl-why-list{grid-template-columns:repeat(2,1fr);gap:0 20px}
  .cl-why-row:nth-child(3n){padding-right:16px}
  .cl-why-row:nth-child(2n){padding-right:0}
  #about,#why,#process,#calcSec,#siteFooter{scroll-margin-top:128px}
}
@media (max-width:640px){
  .cl-hero{min-height:78vh}
  .cl-hero-copy{justify-content:flex-start;padding-top:clamp(40px,12vh,80px)}
  .cl-why-list{grid-template-columns:1fr}
  .cl-why-row{padding:22px 0 22px 4px;border-right:none}
  .cl-why-body h3{font-size:18px}
  .cl-mat-grid{grid-template-columns:1fr}
  .cl-mat-card{min-height:0}
  .cl-modal-dialog,.cl-modal-dialog--calc{padding:14px}
  .cl-modal-x--calc{top:18px;right:18px}
  .cl-form-h{padding-right:40px;font-size:18px}
  .cl-form-sub{font-size:15px}
  .cl-timeline{grid-template-columns:1fr;gap:28px}
  .cl-fields{grid-template-columns:1fr}
  .cl-field.span2,.cl-field.span3{grid-column:span 1}
  .cl-types{grid-template-columns:repeat(2,1fr)}
  .cl-cta-row .cl-btn{width:100%}
  .cl-mosaic{grid-template-columns:1fr;gap:6px}
  .cl-mosaic .m1,.cl-mosaic .m2,.cl-mosaic .m3,.cl-mosaic .m4{
    grid-column:auto;min-height:52vw;
  }
  .cl-hero-nav{display:none}
  .cl-jump-cta{display:none !important}
}