/* Pillar (service hub) pages. Loaded after styles.css; the homepage does not load this file. */

/* current page in the header navigation */
nav.main a[aria-current=page]{border-color:var(--g)}
.mnav a.l[aria-current=page]{color:var(--g-dk)}

/* breadcrumb */
.crumb{background:#fff;border-bottom:1px solid #e2e2e2;font-size:15px;font-weight:500}
.crumb .w{display:flex;gap:10px;align-items:center;min-height:48px}
.crumb a{color:#000;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#9aa39d}
.crumb a:hover{text-decoration-color:var(--g)}
.crumb span[aria-current]{color:var(--mut-dk)}
.crumb span[aria-hidden]{color:#888}

/* in-page navigation */
.jump{background:var(--panel);border-bottom:1px solid #ddd}
.jump .w{display:flex;gap:10px;align-items:center;padding-top:14px;padding-bottom:14px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.jump .w::-webkit-scrollbar{display:none}
.jump span{flex:none;font:600 15px/1 var(--bd);color:var(--mut-dk);margin-right:6px}
.jump a{flex:none;background:#fff;border:2px solid #000;border-radius:10px;padding:8px 14px;font:600 15px/1 var(--bd);text-decoration:none;color:#000;transition:background-color .15s}
.jump a:hover{background:var(--g-hi)}

/* keep hub section headings on one line, like the homepage */
.nx h2{white-space:nowrap}
.nx{background:#fff;padding:100px 0 90px}
.nx h2{font-size:var(--h2,56px);margin-bottom:38px}
.nx .at{margin-top:0}
.nx a.a{text-decoration:none;color:#fff;transition:transform .15s}
.nx a.a:hover{transform:translateY(-3px)}
.nx a.a:hover::before{background:var(--g-hi)}
.nx a.a p{margin-bottom:0}
.nx .arr{position:absolute;right:20px;top:18px;width:30px;height:30px;z-index:1}
.nx .arr svg{width:100%;height:100%;stroke:#000;stroke-width:2.6;fill:none}
.nx a.a:focus-visible{outline:3px solid #000;outline-offset:3px;box-shadow:0 0 0 6px #fff}

/* hub intro and cards */
.svc .lede{font-size:19px;color:var(--mut);max-width:60ch;margin:-14px 0 40px}
.hub{display:grid;grid-template-columns:repeat(6,1fr);gap:26px}
.sv{grid-column:span 3;background:#f4f4f4;color:#000;border-radius:30px;padding:10px;display:flex;flex-direction:column}
.sv .in{flex:1;border:2px solid #cfcfcf;border-radius:22px;display:flex;flex-direction:column;overflow:hidden}
.sv .txt{padding:26px 26px 22px}
.sv .tag{display:inline-block;background:var(--g);color:#000;font:600 16px/1 var(--hd);letter-spacing:.06em;text-transform:uppercase;padding:7px 12px 6px;margin-bottom:12px}
.sv h3{font-size:var(--h4);margin-bottom:10px}
.sv p{font-size:17px;color:#333;margin:0 0 14px;max-width:46ch}
.sv .pts{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:16px;font-weight:500;color:#222}
.sv .pts li{position:relative;padding-left:24px}
.sv .pts li::before{content:'';position:absolute;left:0;top:.42em;width:11px;height:11px;background:var(--g)}
.sv img{display:block;width:100%;height:250px;object-fit:cover;margin-top:auto;border-top:2px solid #cfcfcf}
/* featured: wet belt */
.sv.feat{grid-column:1/-1;background:#fff;box-shadow:0 0 0 3px var(--g)}
.sv.feat .in{flex-direction:row;align-items:stretch}
.sv.feat .txt{flex:1.05;padding:40px 40px 36px;display:flex;flex-direction:column;justify-content:center}
.sv.feat h3{font-size:var(--h3)}
.sv.feat p{font-size:19px}
.sv.feat .pic{flex:1;position:relative;min-height:380px;border-left:2px solid #cfcfcf}
.sv.feat .pic img{position:absolute;inset:0;width:100%;height:100%;margin:0;border-top:0;object-fit:cover}
/* text-only repair cards */
.sv.tx{grid-column:span 2}
.sv.tx .txt{padding:24px 24px 22px}
.sv .num{display:block;font:700 34px/1 var(--hd);color:var(--g-dk);margin-bottom:10px}
.hub-servicing .sv{grid-column:span 3}

@container (max-width:860px){
  .crumb .w{min-height:44px}
  .jump .w{padding-top:12px;padding-bottom:12px}
  .nx{padding:70px 0 60px}.nx .at{grid-template-columns:1fr}
  .svc .lede{margin:-10px 0 28px;font-size:18px}
  .hub{grid-template-columns:1fr;gap:16px}
  .sv,.sv.tx,.sv.feat,.hub-servicing .sv{grid-column:1/-1}
  .sv .txt,.sv.feat .txt{padding:22px 22px 20px}
  .sv.feat .in{flex-direction:column}
  .sv.feat .txt{padding:24px 22px 22px}
  .sv.feat .pic{flex:none;width:100%;min-height:0;height:240px;border-left:0;border-top:2px solid #cfcfcf}
  .sv.tx .txt{padding:20px 22px 18px}
  .sv.tx p{margin-bottom:0}
}

/* four-tile gallery: equal tiles */
.tiles.n4{grid-template-columns:repeat(4,1fr)}
.tiles.n4 .tile,.tiles.n4 .tile:nth-child(1),.tiles.n4 .tile:nth-child(4){grid-row:auto;grid-column:auto;aspect-ratio:4/5}
@container (max-width:1100px){.tiles.n4{grid-template-columns:1fr 1fr}.tiles.n4 .tile,.tiles.n4 .tile:nth-child(1),.tiles.n4 .tile:nth-child(4){grid-column:auto;aspect-ratio:4/5}}
@container (max-width:860px){.tiles.n4 .tile figcaption{padding:40px 12px 14px;letter-spacing:0}}

/* link row inside a service card */
.sv .lnk,.pkc .lnk{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font:600 17px/1.2 var(--bd);color:#000;text-decoration:underline;text-decoration-color:var(--g);text-decoration-thickness:3px;text-underline-offset:5px}
.sv .lnk svg,.pkc .lnk svg{width:18px;height:18px;flex:none;stroke:#000;stroke-width:2.6;fill:none}
.sv .lnk:hover,.pkc .lnk:hover{text-decoration-color:#000}
.sv .lnk:focus-visible,.pkc .lnk:focus-visible{outline:3px solid #000;outline-offset:4px;box-shadow:0 0 0 6px #fff}

/* ---------- wet belt service page ---------- */
.wbl{background:#fff;padding:100px 0}
.wbl h2{font-size:var(--h2,56px)}
.wbl .lede{font-size:19px;color:#222;max-width:62ch;margin:26px 0 40px}
.wbl .cta{margin-top:38px}
.wbl .cta .sub{font-size:16px;color:#444;margin:14px 0 0}
.pk{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pkc{background:#f4f4f4;border-radius:30px;padding:10px;display:flex}
.pkc .in{flex:1;border:2px solid #cfcfcf;border-radius:22px;padding:28px 28px 26px;display:flex;flex-direction:column;align-items:flex-start}
.pkc .tag{display:inline-block;background:var(--g);color:#000;font:600 16px/1 var(--hd);letter-spacing:.06em;text-transform:uppercase;padding:7px 12px 6px;margin-bottom:14px}
.pkc h3{font-size:var(--h4);margin-bottom:6px}
.pkc .pr{display:flex;align-items:baseline;gap:12px;margin:6px 0 16px}
.pkc .pr b{font:700 clamp(48px,calc(var(--h2,56px)*1.05),72px)/1 var(--hd);color:var(--g-dk)}
.pkc .pr span{font:600 15px/1 var(--bd);color:#444}
.ex{list-style:none;margin:0 0 16px;padding:0;width:100%;border-top:1px solid #d3d3d3}
.ex li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #d3d3d3;font-size:16.5px;font-weight:500}
.ex li b{font-weight:700;white-space:nowrap}
.pkc p{font-size:16.5px;color:#333;margin:0;max-width:46ch}
.pkc .lnk{margin-top:auto;padding-top:0}
.pkc p+.lnk{margin-top:18px}
h3.sub3{font-size:var(--h3);margin:84px 0 0}
.inc{display:grid;gap:14px}
.pkd{border:2px solid #cfcfcf;border-radius:22px;background:#f4f4f4;overflow:hidden}
.pkd summary{list-style:none;display:flex;align-items:center;gap:18px;padding:18px 22px;cursor:pointer}
.pkd summary::-webkit-details-marker{display:none}
.pkd .t{font:600 var(--h5)/1.05 var(--hd);text-transform:uppercase;margin-right:auto}
.pkd .p{font:700 var(--h5)/1 var(--hd);color:var(--g-dk);white-space:nowrap}
.pkd summary i{flex:none;width:44px;height:44px;border-radius:50%;background:var(--g);display:grid;place-items:center;transition:transform .2s}
.pkd summary svg{width:20px;height:20px;stroke:#000;stroke-width:3;fill:none}
.pkd[open] summary i{transform:rotate(45deg)}
.pkd .bd{padding:6px 22px 26px;background:#fff;border-top:2px solid #cfcfcf}
.pkd .gp{font-weight:700;margin:16px 0 14px;font-size:17px}
.pkd .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 44px}
.pkd h4{font-size:var(--h5);margin-bottom:10px}
.wbl .pts,.svc .pts{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:16.5px;font-weight:500}
.wbl .pts li,.svc .pts li{position:relative;padding-left:24px}
.wbl .pts li::before,.svc .pts li::before{content:'';position:absolute;left:0;top:.45em;width:11px;height:11px;background:var(--g)}
.pkd .ex{margin:22px 0 0}
.pkd .nt{margin:14px 0 0;font-size:16px;color:#333}

.svc.signs h2,.svc.explain h2{margin-bottom:26px}
.sgs{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sgi{background:#141414;border:2px solid #333;border-radius:22px;padding:26px 26px 22px}
.sgi h3{font-size:var(--h5);line-height:1;margin-bottom:10px;color:#fff}
.sgi p{font-size:17px;color:var(--mut);margin:0}
.snote{margin:30px 0 0;border-left:6px solid var(--g);padding:4px 0 4px 22px;font-size:19px;color:#fff;max-width:72ch}
.two{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:start}
.wbl .two h3,.svc .two h3{font-size:var(--h3);margin:0 0 20px}
.wbl .two p{font-size:19px;color:#222;max-width:58ch}
.wbl .two .pts{font-size:18px;margin-top:22px}
.svc.explain p{font-size:19px;color:var(--mut);max-width:58ch}
.svc.explain .two h2{margin-bottom:0}
.svc .kh{font-size:var(--h4);margin:30px 0 14px;color:#fff}
.svc.explain .pts{color:#e9ece9;font-size:18px}
.svc.mk .sv p{max-width:none}

@container (max-width:860px){
  .wbl{padding:70px 0}
  .wbl .lede{margin:22px 0 28px;font-size:18px}
  .pk{grid-template-columns:1fr;gap:16px}
  .pkc .in{padding:22px 22px 20px}
  h3.sub3{margin-top:60px}
  .pkd summary{padding:16px 16px}
  .pkd .bd{padding:4px 16px 22px}
  .pkd .grid{grid-template-columns:1fr;gap:22px}
  .pkd .p{font-size:calc(var(--h5)*.95)}
  .sgs{grid-template-columns:1fr;gap:14px}
  .sgi{padding:22px 22px 18px}
  .snote{font-size:17px;margin-top:24px}
  .two{grid-template-columns:1fr;gap:34px}
  .wbl .two p,.svc.explain p{font-size:18px}
  .svc.signs h2,.svc.explain h2{margin-bottom:20px}
}
@container (max-width:520px){
  .pkd summary{flex-wrap:wrap;row-gap:4px}
  .pkd .t{flex:1 1 calc(100% - 62px);margin-right:0}
  .pkd .p{order:3;flex:0 0 100%}
  .pkd summary i{order:2;position:absolute;right:16px;top:14px}
  .pkd summary{position:relative;padding-right:70px}
  .pkd .p{order:3}
  .wbl .cta .pill{display:flex;width:100%}
}

/* wet belt page: mobile refinements */
.crumb .w{overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.crumb .w::-webkit-scrollbar{display:none}
@container (max-width:860px){
  .crumb{font-size:14px}.crumb .w{gap:8px}
  .sgi h3,.pkd .t,.pkd .p,.pkd h4{font-size:var(--h4)}
  .pkd .t{line-height:1.05}
}
.pkc,.pkc .in{min-width:0}
@container (max-width:860px){.pk{grid-template-columns:minmax(0,1fr)}}

/* ---- package pages (/wet-belt-replacement/<package>/) ---- */
.wbl a:not(.pill):not(.lnk),.svc.explain a:not(.pill){color:inherit;text-decoration:underline;text-decoration-color:var(--g);text-decoration-thickness:2px;text-underline-offset:3px}
.svc.explain a:not(.pill){text-decoration-color:var(--g-hi)}
.wbl a:not(.pill):not(.lnk):hover,.svc.explain a:not(.pill):hover{text-decoration-color:currentColor}
.pkc .pts{margin-top:4px}
.pkc .nt2{margin:14px 0 0;font-size:16px;color:#333;max-width:46ch}
.sgi p+p{margin-top:12px}
.sgi .tg{display:inline-block;background:var(--g);color:#000;font:600 14px/1 var(--hd);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px 5px;margin-bottom:12px}
.sgi.bad .tg{background:#fff}
.srcs{margin:26px 0 0;font-size:15px;color:#555;max-width:72ch}
.svc .srcs{color:var(--mut)}
@container (min-width:861px){.sgs.n3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tiles.n3{grid-template-columns:repeat(3,1fr)}
.tiles.n3 .tile,.tiles.n3 .tile:nth-child(1),.tiles.n3 .tile:nth-child(3){grid-row:auto;grid-column:auto;aspect-ratio:4/5}
@container (max-width:860px){.tiles.n3{grid-template-columns:1fr 1fr}.tiles.n3 .tile:nth-child(3){grid-column:1/-1;aspect-ratio:16/10}}
@container (max-width:520px){.tiles.n3{grid-template-columns:1fr}.tiles.n3 .tile:nth-child(3){aspect-ratio:4/5}}
.two>*{min-width:0}
@container (max-width:860px){.two{grid-template-columns:minmax(0,1fr)}}
@container (max-width:640px){.hero h1.wr{white-space:normal;font-size:22px!important;line-height:1.15;letter-spacing:.04em}}

.hero .w.h1w{display:block;padding-top:54px;padding-bottom:30px}
.hero .w.h1w h1{margin:0}
.hero .w.h1w+.w{padding-top:0}
@container (max-width:860px){.hero .w.h1w{padding-top:34px;padding-bottom:18px}}

.pkc p.pli{font:600 16px/1.2 var(--bd);color:var(--g-dk);margin:-6px 0 16px}