/* pvcpools.ca/en/<page>/ — what the inner pages add to home.css.
   Same tokens, same type, same weld line under every heading; this file only holds the
   building blocks the home page has no use for: the page hero, alternating photo rows,
   numbered process steps, before/after pairs, the story layout, the gallery with its
   lightbox, the estimate form, and the band that closes every page. */

/* ── page hero ────────────────────────────────────────────────────── */
/* Text on navy, the photograph in a panel beside it — NOT stretched across the screen. The
   card caps every upload at 1600 px; the panel is never wider than 800 CSS px, so on a retina
   screen the file is drawn at exactly its own size and on an ordinary one at half. Nothing is
   enlarged and nothing is cropped to a strip, which is what he saw before (2026-09-22). */
.phero{position:relative;overflow:hidden;isolation:isolate;color:#fff;background:radial-gradient(120% 140% at 85% 0%,#123A78 0%,var(--navy) 55%)}
.phero .hero-caustics{opacity:.14}
.phero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center;padding-top:118px;padding-bottom:clamp(44px,6vw,72px)}
.phero-text{min-width:0}
.phero-h{font-size:clamp(30px,3.7vw,56px)}
.phero-h .ln>span{white-space:normal}
.phero-photo{position:relative;margin:0;width:100%;max-width:800px;justify-self:end;border-radius:var(--r);overflow:hidden;background:var(--navy-2);box-shadow:0 40px 90px -40px rgba(0,0,0,.8);aspect-ratio:4/3;animation:slideUp .7s var(--ease) both}
@keyframes slideUp{from{transform:translateY(18px)}to{transform:none}}
.phero-photo picture,.phero-photo img{width:100%;height:100%}
.phero-photo img{object-fit:cover;object-position:50% 50%}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px;font:600 13px/1 var(--head);letter-spacing:.04em;color:#B9CFEA;opacity:0;animation:rise .9s var(--ease) .1s forwards}
.crumbs a{color:#B9CFEA;text-decoration:none;display:inline-flex;align-items:center;min-height:32px;padding:0 3px;margin:0 -3px}
.crumbs a:hover{color:#fff}
.crumbs i{font-style:normal;color:#8AA4C6}
.crumbs span{color:#fff}
@media (max-width:1000px){
  .phero-in{grid-template-columns:1fr;padding-top:104px;gap:28px}
  .phero-photo{order:-1;aspect-ratio:16/10}
  .phero-h{font-size:clamp(28px,8.6vw,54px)}
}

/* ── the introduction: a lead on the left, the facts on the right ────── */
.intro{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,6vw,90px);align-items:start}
.intro-lead{font-size:clamp(19px,1.7vw,24px);line-height:1.5;color:var(--ink);max-width:40ch;text-wrap:pretty}
.intro-lead+p,.prose p+p{margin-top:18px}
.intro-text p:not(.intro-lead){color:var(--sub);max-width:58ch}
.facts{display:grid;gap:12px}
.facts li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:18px 20px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.facts li b{font:900 clamp(24px,2.6vw,34px)/1 var(--head);letter-spacing:-.03em;color:var(--blue-ink);min-width:2.2ch;font-variant-numeric:tabular-nums}
.facts li span{color:var(--sub);font-size:15.5px;line-height:1.45;padding-top:4px}
.facts li span strong{color:var(--ink);font-weight:700}
.sec-tint .facts li{background:#fff}
@media (max-width:900px){.intro{grid-template-columns:1fr}}

/* ── a row: photograph beside text, and the next row the other way round ── */
.duo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:center}
.duo+.duo{margin-top:clamp(56px,8vw,110px)}
.duo-rev .duo-fig{order:2}
.duo-fig{position:relative;border-radius:var(--r);overflow:hidden;background:var(--navy)}
.duo-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--ease)}
.duo-fig.is-tall img{aspect-ratio:3/3.6}
.duo-fig:hover img{transform:scale(1.05)}
.duo-fig figcaption,.pair figcaption,.gal figcaption,.story-shots figcaption{position:absolute;left:14px;bottom:14px;font:700 12px/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:9px 12px;border-radius:999px;background:rgba(7,27,58,.72)}
.duo-text h2,.duo-text h3{font:800 clamp(26px,3vw,40px)/1.08 var(--head);letter-spacing:-.025em;color:var(--navy);text-wrap:balance}
.duo-text .kicker{margin-bottom:14px}
.duo-text p{margin-top:16px;color:var(--sub);max-width:52ch}
.duo-text p strong{color:var(--ink)}
.duo-text .btn{margin-top:26px}
.duo-text ul{margin-top:18px;display:grid;gap:9px}
.duo-text li{position:relative;padding-left:26px;color:var(--sub)}
.duo-text li::before{content:'';position:absolute;left:0;top:.55em;width:14px;height:2px;border-radius:2px;background:var(--blue)}
@media (max-width:900px){.duo{grid-template-columns:1fr}.duo-rev .duo-fig{order:0}.duo+.duo{margin-top:56px}}

/* ── process: numbered steps, each with its photograph ───────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.step{position:relative;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.step-fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy)}
.step-fig picture,.step-fig img{width:100%;height:100%}
.step-fig img{object-fit:cover;transition:transform 1.1s var(--ease)}
.step:hover .step-fig img{transform:scale(1.06)}
.step-n{position:absolute;top:14px;left:14px;z-index:2;font:800 13px/1 var(--head);letter-spacing:.14em;padding:8px 11px;border-radius:999px;color:#fff;background:rgba(7,27,58,.72);border:1px solid rgba(255,255,255,.3)}
.step-t{padding:20px 22px 24px}
.step-t h3{font:800 20px/1.2 var(--head);letter-spacing:-.015em;color:var(--navy)}
.step-t p{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--sub)}
@media (max-width:1000px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}

/* ── before / after ───────────────────────────────────────────────── */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pair figure{position:relative;border-radius:var(--r);overflow:hidden;background:var(--navy)}
.pair img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--ease)}
.pair figure:hover img{transform:scale(1.05)}
.pair-note{margin-top:14px;color:var(--sub);max-width:70ch}
@media (max-width:600px){.pair{grid-template-columns:1fr}}

/* ── the story (About): text with photographs set into it ─────────── */
.story{max-width:760px;margin:0 auto}
.story p{color:var(--ink);font-size:clamp(17px,1.35vw,19px);line-height:1.65}
.story p+p{margin-top:20px}
.story h2{margin:clamp(56px,7vw,90px) 0 24px;font-size:clamp(28px,3.4vw,44px)}
.story h2:first-child{margin-top:0}
.story-shots{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:34px 0}
.story-shots figure{position:relative;border-radius:14px;overflow:hidden;background:var(--navy)}
.story-shots img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--ease)}
.story-shots figure:hover img{transform:scale(1.05)}
.story-shots .is-wide{grid-column:1/-1}
.story-shots .is-wide img{aspect-ratio:16/9}
.story-shots.is-four{grid-template-columns:repeat(4,1fr)}
.story-shots.is-four img{aspect-ratio:3/4}
/* the sample books are wide photographs: two to a row, not four portrait crops */
.story-shots.is-three{grid-template-columns:repeat(3,1fr);margin:0}
.story-shots.is-books{grid-template-columns:1fr 1fr}
.story-shots.is-books img{aspect-ratio:16/10}
.story-cap{margin-top:-22px;margin-bottom:34px;text-align:center;font-size:14.5px;color:var(--sub)}
.quote{margin:clamp(40px,6vw,70px) 0;padding:0 0 0 28px;border-left:4px solid var(--blue);font:800 clamp(22px,2.6vw,34px)/1.25 var(--head);letter-spacing:-.02em;color:var(--navy);text-wrap:balance}
@media (max-width:600px){.story-shots.is-four{grid-template-columns:1fr 1fr}.story-shots.is-three{grid-template-columns:1fr}}

/* ── wide photograph between sections ─────────────────────────────── */
.wide{position:relative;overflow:hidden;background:var(--navy);max-height:70vh}
.wide picture,.wide img{width:100%;height:100%}
.wide img{object-fit:cover;aspect-ratio:21/9}
.wide figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px var(--pad) 26px;color:#fff;font:600 16px/1.4 var(--head);background:linear-gradient(0deg,rgba(7,27,58,.85),transparent)}
.wide figcaption>div{max-width:var(--wrap);margin:0 auto}

/* ── the gallery ──────────────────────────────────────────────────── */
.gal-groups{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.gal-groups button{padding:11px 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--navy);font:700 14px/1 var(--head);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.gal-groups button:hover{border-color:var(--navy)}
.gal-groups button.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.gal{columns:3;column-gap:16px}
.gal figure{position:relative;break-inside:avoid;margin:0 0 16px;border-radius:var(--r);overflow:hidden;background:var(--navy);cursor:zoom-in}
.gal figure.is-off{display:none}
.gal img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
/* gallery captions are full sentences now (2026-09-23): sentence case on a soft band at the foot of
   the photograph, two lines at most — the uppercase pill of the short labels covered half a phone photo */
.gal figcaption{left:0;right:0;bottom:0;padding:34px 14px 12px;border-radius:0;background:linear-gradient(0deg,rgba(7,27,58,.88),rgba(7,27,58,0));
  font:500 13.5px/1.35 var(--body);letter-spacing:0;text-transform:none;color:#EAF2FC;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease)}
.gal figure:hover figcaption{opacity:1;transform:none}
@media (max-width:900px){.gal{columns:2}}
@media (max-width:520px){.gal{columns:1}.gal figcaption{opacity:1;transform:none}}

.gal.is-folded figure:nth-child(n+25){display:none}
.gal.is-folded.fold-48 figure:nth-child(n+25):nth-child(-n+48){display:block}
.gal-more{display:flex;justify-content:center;margin-top:8px}

.lbx{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(4,18,42,.96);animation:lbxIn .25s ease}
.lbx img{max-width:min(96vw,1400px);max-height:84vh;width:auto;height:auto;border-radius:10px;box-shadow:0 40px 90px -30px #000;animation:rise .35s var(--ease)}
.lbx-cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:#CFE2FA;font:600 15px/1.3 var(--head);padding:0 80px}
.lbx-cap span{color:var(--aqua);margin-right:12px;font-size:12px;letter-spacing:.14em}
.lbx button{position:absolute;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:rgba(7,27,58,.6);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s}
.lbx button:hover{background:var(--blue);border-color:var(--blue)}
.lbx-x{top:18px;right:18px}
.lbx-p{left:18px;top:50%;transform:translateY(-50%)}
.lbx-n{right:18px;top:50%;transform:translateY(-50%)}
@keyframes lbxIn{from{opacity:0}to{opacity:1}}
@media (max-width:700px){.lbx img{max-height:72vh}.lbx-p,.lbx-n{top:auto;bottom:70px;transform:none}.lbx-cap{bottom:auto;top:24px;padding:0 80px}}

/* ── work details: one block per category ──────────────────────────── */
.cat-block+.cat-block{margin-top:clamp(56px,8vw,100px)}
.cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.cat-head h2{font-size:clamp(26px,3vw,40px)}
.cat-head span{font:700 13px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.cat-soon{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.cat-soon li{font:600 13.5px/1.2 var(--head);padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--sub)}

/* ── swatches (Membranes) ─────────────────────────────────────────── */
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.swatch{position:relative;border-radius:var(--r);overflow:hidden;background:var(--navy);cursor:zoom-in}
.swatch img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform 1.1s var(--ease)}
.swatch:hover img{transform:scale(1.06)}
.swatch figcaption{position:absolute;left:14px;bottom:14px;font:700 12px/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:9px 12px;border-radius:999px;background:rgba(7,27,58,.72)}
@media (max-width:700px){.swatches{grid-template-columns:1fr 1fr}}
.brands{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.brand{padding:28px 26px;border-radius:var(--r);background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.brand h3{font:900 clamp(24px,2.4vw,32px)/1 var(--head);letter-spacing:.04em;color:var(--navy)}
.brand p{color:var(--sub);font-size:15.5px;flex:1}
.brand .btn{align-self:flex-start}
.brand-soon{font:600 12.5px/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}
@media (max-width:860px){.brands{grid-template-columns:1fr}}

/* ── the estimate form ────────────────────────────────────────────── */
.est{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:start}
.est-side{position:sticky;top:110px}
.est-side .facts{margin-top:28px}
.form{padding:clamp(24px,3.4vw,40px);border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px -50px rgba(7,27,58,.45)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-grid .f-full{grid-column:1/-1}
.f{display:flex;flex-direction:column;gap:7px}
.f>span{font:700 12.5px/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}
.f-in{width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--ground);color:var(--ink);font:400 16px/1.4 var(--body);transition:border-color .2s,background .2s}
.f-in:focus{outline:0;border-color:var(--blue);background:#fff}
textarea.f-in{min-height:150px;resize:vertical}
.f-hint{font-size:14px;color:var(--sub)}
.f-pick{display:inline-flex;align-items:center;gap:10px;padding:13px 18px;border-radius:999px;border:1.5px dashed rgba(47,123,255,.6);color:var(--blue-ink);font:700 15px/1 var(--head);cursor:pointer;transition:background .2s,border-color .2s;align-self:flex-start}
.f-pick:hover{background:rgba(47,123,255,.07);border-style:solid}
.f-pick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.f-pick input:focus-visible+span{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.f-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.f-files:not(:empty){margin-top:12px}
.f-file{position:relative;border-radius:12px;overflow:hidden;background:var(--tint);border:1px solid var(--line)}
.f-file img{width:100%;aspect-ratio:4/3;object-fit:cover}
.f-file span{display:block;padding:8px 10px;font-size:12.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-file button{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(7,27,58,.8);color:#fff;cursor:pointer;font-size:14px;line-height:1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-holder:not(:empty){margin-top:8px;min-height:65px}
.f-msg{margin-top:14px;padding:14px 16px;border-radius:12px;font-size:15px;line-height:1.45;background:var(--tint);color:var(--ink)}
.f-msg.is-good{background:#E4F7EC;color:#0F5A32}
.f-msg.is-bad{background:#FCE8E8;color:#8A1F1F}
.f-msg.is-warn{background:#FFF3E0;color:#7A4A00}
.f-after{margin-top:22px;font-size:15px;line-height:1.55;color:var(--sub)}
.f-after strong{color:var(--ink)}
@media (max-width:900px){.est{grid-template-columns:1fr}.est-side{position:static}}
@media (max-width:560px){.f-grid{grid-template-columns:1fr}}

/* ── contact page ─────────────────────────────────────────────────── */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.way{display:flex;flex-direction:column;gap:6px;padding:24px 24px 26px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .3s var(--ease),box-shadow .3s}
a.way:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(7,27,58,.5)}
.way small{font:700 12px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-ink)}
.way b{font:700 clamp(18px,1.7vw,22px)/1.3 var(--head);color:var(--navy);letter-spacing:-.01em;overflow-wrap:anywhere}
.way span{font-size:14.5px;color:var(--sub)}
.way-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:14px}
.wbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
  color:var(--navy);font:700 14.5px/1 var(--head);text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.wbtn:hover{border-color:var(--navy)}
.wbtn-go{background:var(--blue-ink);border-color:var(--blue-ink);color:#fff}
.wbtn-go:hover{background:#174FBE;border-color:#174FBE}
.wbtn.is-done{background:#E4F7EC;border-color:#9BD8B3;color:#0F5A32}
@media (max-width:900px){.ways{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ways{grid-template-columns:1fr}}

/* ── the band that closes every page ──────────────────────────────── */
.cta{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(120% 140% at 85% 0%,#123A78 0%,var(--navy) 55%);color:#fff;padding:clamp(70px,9vw,120px) 0}
.cta-in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:30px}
.cta h2{color:#fff;max-width:16ch}
.cta p{margin-top:14px;max-width:46ch;color:#CFE2FA;font-size:18px}
.cta .hero-cta{margin-top:0}

/* ── related pages ────────────────────────────────────────────────── */
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.more a{display:flex;flex-direction:column;gap:8px;padding:24px 24px 26px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .3s var(--ease),box-shadow .3s}
.more a:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(7,27,58,.5)}
.more b{font:800 20px/1.2 var(--head);letter-spacing:-.015em;color:var(--navy)}
.more b::after{content:'→';margin-left:10px;color:var(--aqua)}
.more span{font-size:15px;color:var(--sub)}
@media (max-width:860px){.more{grid-template-columns:1fr}}

/* phones: a heading row wraps instead of pushing its button off-screen, and the hero text
   stops short of the Simple-view tab on the right edge */
@media (max-width:700px){.sec-h-row{flex-wrap:wrap;align-items:flex-start}.sec-h-row .btn{white-space:normal;text-align:center;max-width:100%}.pair-note a{display:inline-block;padding:6px 0}.phero-in{padding-right:calc(var(--pad) + 34px)}}

@media (prefers-reduced-motion:reduce){.crumbs{opacity:1}}