/* Fenwick Climate: inner pages (why, systems, install day, running costs). Sizes in rem; tokens from site.css. */
.nav a[aria-current]{background:rgba(255,255,255,.45)}
.mnav>a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:.25rem}
.display.sm{font-size:clamp(3.5rem,8vw,7.75rem)}
.phero{position:relative;padding:8rem 0 clamp(3rem,6vw,5rem);overflow:hidden}
.phero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.phero .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font:400 .9375rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.25rem}
.phero .crumb a{color:var(--ink-2)}
.phero .crumb i{font-style:normal}
.pcard{position:relative;aspect-ratio:16/11;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transform:rotate(-1.2deg)}
.pcard img{width:100%;height:100%;object-fit:cover}
.pcard figcaption{position:absolute;left:1rem;bottom:1rem;padding:.625rem .875rem;border-radius:var(--pill);background:rgba(20,10,5,.55);backdrop-filter:blur(.625rem);-webkit-backdrop-filter:blur(.625rem);color:#fff;font:400 1rem/1 var(--display);letter-spacing:.08em;border:1px solid rgba(255,255,255,.25)}
.phero .obj{opacity:.9}
.more{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.25rem;font:400 1.0625rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:.25rem}
.more:hover{gap:.875rem}

/* reason / feature cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:3rem}
.tile{border-radius:var(--r);background:rgba(255,255,255,.7);border:1px solid var(--glass-line);backdrop-filter:blur(.75rem);-webkit-backdrop-filter:blur(.75rem);padding:1.625rem 1.75rem;box-shadow:0 .5rem 1.5rem rgba(20,10,5,.08);display:flex;flex-direction:column;gap:.75rem}
.tile .n{font:400 2.5rem/1 var(--display);color:var(--ink-3);letter-spacing:.04em}
.tile h3{font:400 1.875rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.tile p{font-size:.9688rem;color:var(--ink-2);text-wrap:pretty}
.tile.dark{background:var(--ink);color:#fff}
.tile.dark h3,.tile.dark .n{color:#fff}
.tile.dark p{color:rgba(255,255,255,.85)}
.tile.dark .n{color:#8fd3ff}

/* photo + text rows */
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding:clamp(2.5rem,5vw,4rem) 0;border-top:1px solid var(--ink-line)}
.row:first-of-type{border-top:0}
.row.flip>.ph{order:2}
.row .ph{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/10}
.row .ph img{width:100%;height:100%;object-fit:cover}
.row h3{font:400 clamp(2rem,3.4vw,3rem)/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.row p{font-size:1.0625rem;color:var(--ink-2);margin-top:1rem;text-wrap:pretty;max-width:56ch}
.row .label{color:var(--ink-3);margin-bottom:.875rem;display:block}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.chips span{font:500 .8125rem/1 var(--sans);padding:.5rem .75rem;border-radius:var(--pill);background:rgba(20,10,5,.06);color:var(--ink-2)}

/* heat-pump cycle */
.cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem;counter-reset:c}
.cycle div{position:relative;padding:1.5rem 1.5rem 1.5rem;border-radius:var(--r);background:rgba(255,255,255,.7);border:1px solid var(--glass-line)}
.cycle div::before{counter-increment:c;content:"0" counter(c);display:block;font:400 2.25rem/1 var(--display);color:var(--ink-3);margin-bottom:.75rem}
.cycle h4{font:400 1.5rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase;margin-bottom:.5rem}
.cycle p{font-size:.9375rem;color:var(--ink-2);text-wrap:pretty}
.cycle div::after{content:"\2192";position:absolute;right:-.9rem;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--ink-3)}
.cycle div:last-child::after{content:none}

/* comparison table */
.compare{width:100%;border-collapse:collapse;margin-top:2.5rem;background:rgba(255,255,255,.7);border-radius:var(--r);overflow:hidden;border:1px solid var(--glass-line);font-size:.9688rem}
.compare th,.compare td{padding:1rem 1.125rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--ink-line)}
.compare th{font:400 1.0625rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:rgba(20,10,5,.04)}
.compare td:first-child{font:400 1.25rem/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.compare td:first-child a{border-bottom:2px solid var(--ink)}
.compare tr:last-child td{border-bottom:0}

/* system cards (systems overview) */
.sys{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:3rem}
.sys a{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);background:rgba(255,255,255,.72);border:1px solid var(--glass-line);overflow:hidden;box-shadow:0 .5rem 1.5rem rgba(20,10,5,.08);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.sys a:hover{transform:translateY(-.5rem);box-shadow:var(--shadow)}
.sys .ph{aspect-ratio:1/1;overflow:hidden}
.sys img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.sys a:hover img{transform:scale(1.04)}
.sys .body{padding:1.5rem 1.625rem;display:flex;flex-direction:column;gap:.625rem}
.sys h3{font:400 2.25rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.sys p{font-size:.9688rem;color:var(--ink-2);text-wrap:pretty}
.sys .go{margin-top:auto;font:400 1rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* install timeline */
.tl{display:grid;gap:0;margin-top:3rem;counter-reset:s}
.tl article{display:grid;grid-template-columns:5.5rem 1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--ink-line)}
.tl article:first-child{border-top:0}
.tl .n{font:400 clamp(2.5rem,4vw,3.75rem)/1 var(--display);color:var(--ink-3);letter-spacing:.02em}
.tl .ph{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/10}
.tl .ph img{width:100%;height:100%;object-fit:cover}
.tl article:nth-child(even) .ph{order:3}
.tl h3{font:400 clamp(1.75rem,3vw,2.5rem)/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.tl p{font-size:1.0625rem;color:var(--ink-2);margin-top:.875rem;text-wrap:pretty;max-width:52ch}
.tl .label{color:var(--ink-3);display:block;margin-bottom:.625rem}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}
.gallery figure{border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.7);border:1px solid var(--glass-line)}
.gallery .ph{aspect-ratio:3/2;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{font-size:.9rem;color:var(--ink-2);padding:.75rem .875rem}

/* faq */
.faq{margin-top:2.5rem;border-radius:var(--r);background:rgba(255,255,255,.7);border:1px solid var(--glass-line);padding:0 1.5rem}
.faq details{border-top:1px solid var(--ink-line)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.25rem 0;font:400 clamp(1.375rem,2vw,1.75rem)/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font-style:normal;font:400 1.75rem/1 var(--display);color:var(--ink-3);transition:transform .25s;flex:none}
.faq details[open] summary i{transform:rotate(45deg)}
.faq .a{padding:0 0 1.375rem;max-width:66ch;color:var(--ink-2);text-wrap:pretty;font-size:1rem}

/* running-cost table */
.costs{width:100%;border-collapse:collapse;margin-top:2rem;background:rgba(255,255,255,.7);border-radius:var(--r);overflow:hidden;border:1px solid var(--glass-line)}
.costs th,.costs td{padding:.875rem 1.125rem;text-align:left;border-bottom:1px solid var(--ink-line);font-size:.9688rem}
.costs th{font:400 1rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:rgba(20,10,5,.04)}
.costs td b{font:400 1.375rem/1 var(--display);letter-spacing:.03em}
.costs tr:last-child td{border-bottom:0}
.note.wide{max-width:none}

/* cta band */
.cta-band{margin-top:clamp(3rem,6vw,5rem);padding:clamp(2rem,4vw,3rem);border-radius:var(--r);background:var(--ink);color:#fff;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.cta-band h3{font:400 clamp(2rem,3.4vw,3rem)/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.cta-band p{color:rgba(255,255,255,.8);margin-top:.5rem;text-wrap:pretty;max-width:56ch}
.cta-band .pills{display:flex;flex-wrap:wrap;gap:.75rem}
.cta-band .pill-ink{background:#fff;color:var(--ink)}
.cta-band .pill-ink:hover{background:#e6f6ff}
.cta-band .pill-glass{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}

@media (max-width:1100px){.cycle{grid-template-columns:repeat(2,1fr)}.cycle div::after{content:none}.grid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:980px){
  .phero .wrap,.row,.grid2,.sys,.cta-band{grid-template-columns:1fr}
  .row.flip>.ph{order:0}
  .sys a{grid-template-columns:1fr}.sys .ph{aspect-ratio:16/10}
  .tl article{grid-template-columns:1fr}.tl article:nth-child(even) .ph{order:0}.tl .n{font-size:2rem}
  .gallery{grid-template-columns:1fr 1fr}
  .pcard{transform:none;max-width:40rem}
}
@media (max-width:760px){
  .phero{padding-top:6rem}
  .grid3,.gallery,.cycle{grid-template-columns:1fr}
  .compare{display:block;overflow-x:auto}
  .display.sm{font-size:clamp(3rem,15vw,4.5rem)}
}