/* Hydrocell product page. Shared fonts, tokens and actions come from homepage.css. */
.product-page h1,.product-page h2,.product-page h3{font-family:var(--hc-font-heading);font-weight:400;line-height:1.13;margin:0 0 1.5rem}
.product-page{--hc-product-title-size:4.5rem;--hc-product-section-size:2.75rem;--hc-product-subheading-size:1.625rem}
.product-page h1{font-size:var(--hc-product-title-size);line-height:1.06;letter-spacing:-.02em}.product-page h2{font-size:var(--hc-product-section-size);letter-spacing:-.02em}.product-page h3{font-size:var(--hc-product-subheading-size);line-height:1.2}
.product-page p{margin:0 0 1.5rem}.product-page figure{margin:0}.product-page img{display:block;max-inline-size:100%}
.product-lead{padding-block:1.5rem 5rem;background:linear-gradient(to top,#EBEEEB 0%,#EEF1EE 48%,#F2F4F1 100%)}.product-lead__crumbs{height:auto;justify-content:flex-start;gap:.75rem;font-size:var(--hc-text-s);margin-block-end:3rem;flex-wrap:wrap}.product-lead__crumbs a{text-decoration:underline;text-underline-offset:.25rem;min-height:2.75rem;display:flex;align-items:center}
.product-lead__grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4rem}.product-lead__eyebrow{font-size:.8125rem;font-weight:500;letter-spacing:.035em}.product-lead__intro{font-size:var(--hc-hero-intro-size);line-height:var(--hc-hero-intro-leading);color:var(--hc-color-muted);max-width:32rem}.product-lead__grid figure img{inline-size:100%;block-size:30rem;object-fit:cover;border-radius:var(--hc-radius-panel)}.product-lead figcaption{font-size:.8125rem;color:var(--hc-color-muted);margin-top:.75rem}.product-lead__secondary{display:table;margin-top:1rem;min-height:2.75rem;font-size:.9375rem;text-decoration:underline;text-underline-offset:.3rem}
.product-section-heading{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;margin-bottom:2.5rem}.product-section-heading p{color:var(--hc-color-muted);max-width:32rem}.product-models{padding-block:1rem 5rem}.product-models__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}.product-models__grid article{padding:2.5rem;border-radius:var(--hc-radius-panel);background:var(--hc-product-card-bg)}.product-models__grid article+article{background:var(--hc-product-card-bg)}.product-models__grid .product-models__code{font:400 4rem/1 var(--hc-font-heading);color:var(--hc-product-card-fg);margin-bottom:2rem}.product-models__grid p{max-width:33rem}.product-models__note{border-top:var(--hc-border-thin) solid #0003;padding-top:1.25rem;font-size:.9375rem;margin-bottom:0!important}
.product-process{color:var(--hc-color-paper);background:linear-gradient(to top,#202323,#242626);padding-block:4rem}.product-process__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:center}.product-process__grid>img{height:32rem;width:100%;object-fit:cover;border-radius:var(--hc-radius-panel)}.product-process p{color:#d4d8d5}.product-process__routes{display:grid;grid-template-columns:1fr 1fr;gap:2rem;border-top:var(--hc-border-thin) solid #ffffff40;padding-top:1.75rem}.product-process__routes h3{font-size:1.5rem;margin-bottom:1rem}.product-process__routes p{font-size:1rem}.product-process .hex-button{color:var(--hc-color-paper)}.product-process .hex-button:hover,.product-process .hex-button:focus-visible{color:var(--hc-color-link-inverse-hover)}
.product-context{display:grid;grid-template-columns:1fr 1fr;gap:4rem;padding-block:5rem}.product-context p{color:var(--hc-color-muted)}.product-specs{padding-bottom:5rem}.product-specs__grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}.product-specs dl{margin:0}.product-specs dl>div{border-top:var(--hc-border-thin) solid #d7dcd9;padding-block:1.25rem}.product-specs dt{font-weight:500;margin-bottom:.375rem}.product-specs dd{margin:0;color:var(--hc-color-muted);font-size:1rem}
.product-sizing{padding-bottom:5rem;scroll-margin-top:2rem}.product-sizing__panel{background:var(--hc-surface-cta);padding:3rem;border-radius:var(--hc-radius-panel);display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.product-sizing ul{margin:0;padding-left:1.25rem}.product-sizing li{padding-left:.375rem;margin-bottom:1rem}.product-page section[id]{scroll-margin-top:2rem}
@media(max-width:60rem){.product-lead__grid,.product-section-heading,.product-context,.product-specs__grid,.product-sizing__panel,.product-process__grid{gap:2rem}.product-page{--hc-product-title-size:3.5rem;--hc-product-section-size:2.5rem}.product-lead__grid figure img{height:25rem}.product-models__grid article{padding:1.75rem}.product-process__routes{grid-template-columns:1fr;gap:.5rem}.product-sizing__panel{padding:2rem}}
@media(max-width:40rem){.product-page{--hc-product-title-size:3rem;--hc-product-section-size:2.125rem;--hc-product-subheading-size:1.5rem}.product-page h1{overflow-wrap:anywhere;hyphens:auto}.product-page h3{overflow-wrap:anywhere;hyphens:auto}.product-lead__grid,.product-section-heading,.product-context,.product-specs__grid,.product-sizing__panel,.product-process__grid,.product-models__grid{grid-template-columns:1fr}.product-lead__crumbs{margin-bottom:2rem}.product-lead,.product-models,.product-specs{padding-bottom:3rem}.product-lead__grid figure img{height:21rem}.product-process{padding-block:3rem}.product-process__grid>img{height:17rem}.product-context{padding-block:3rem}.product-sizing{padding-bottom:3rem}.product-sizing__panel{padding:1.5rem;gap:2.5rem}.product-models__grid .product-models__code{font-size:3.25rem}.product-page .hero-cta{max-inline-size:100%;font-size:.875rem}.product-page .hero-cta span{min-inline-size:0}.product-page h2 br{display:none}.product-page h2{white-space:normal}}

/* Product-page material palette: copper, green turquoise, steel and graphite. */
.product-models{--hc-product-card-bg:var(--hc-product-copper-light);--hc-product-card-fg:var(--hc-neutral-graphite)}
.product-models__heading{display:flex;align-items:center;gap:1.25rem;margin-bottom:2rem}
.product-models__heading .product-models__code{margin:0}
.product-models__number{position:relative;display:grid;place-items:center;flex:none;inline-size:3.5rem;block-size:3.031rem;color:var(--hc-product-card-fg);font:500 1.5rem/1 var(--hc-font-heading)}
.product-models__number svg{position:absolute;inset:0;inline-size:100%;block-size:100%;fill:currentColor;stroke:none}
.product-models__number>span{position:relative;color:#fff}

.product-models__grid article+article{--hc-product-card-bg:var(--hc-product-turquoise-light);--hc-product-card-fg:var(--hc-neutral-graphite)}

/* Graphite foregrounds on light material surfaces. */
.product-models__grid article{color:var(--hc-product-card-fg)}
.product-models__heading .product-models__code,.product-models__number{color:var(--hc-product-card-fg)}
.product-models__number>span{color:var(--hc-product-card-bg)}
.product-models__note{border-top-color:#08090940}

.product-models__grid article+article .product-models__note{border-top-color:#08090940}

/* Subtle model-card hover, using the next shade in the shared palette. */
.product-models__grid article{transition:background-color var(--hc-motion-reveal)}
@media(hover:hover){
.product-models__grid article:hover{--hc-product-card-bg:var(--hc-product-copper-semi-light)}
.product-models__grid article+article:hover{--hc-product-card-bg:var(--hc-product-turquoise-semi-light)}
}
@media(prefers-reduced-motion:reduce){.product-models__grid article{transition:none}}

.product-models__number>span{font-weight:700}

/* Restrained product typography: original headings with selective emphasis. */

.product-models__number>span{font-family:var(--hc-font-heading);font-weight:700}
.product-models__grid .product-models__code{font-weight:500}
.product-specs dt{font-weight:500}

/* Softer text contrast on colored model panels. */
.product-models__grid article{color:var(--hc-neutral-ink)}
.product-models__grid h3{color:var(--hc-neutral-graphite)}
.product-models__note,.product-models__grid article+article .product-models__note{border-top-color:#24262640}

/* Scoped trial: shared brand-guide palette remains unchanged. */
.product-page{
  --hc-product-copper:#B87545;
  --hc-product-copper-light:#F5D8C5;
  --hc-product-copper-semi-light:#E9BEA1;
  --hc-product-turquoise:#319D8D;
  --hc-product-turquoise-light:#C4E9E2;
  --hc-product-turquoise-semi-light:#91CFC2;
}

/* Body-copy emphasis trial: actual Roboto Bold, scoped to the product content. */

.product-page p strong{font-family:var(--hc-font-body);font-weight:700;color:inherit}

/* Technical labels use the actual Roboto Bold face. */
.product-specs dt{font-family:var(--hc-font-body);font-weight:700;font-size:.875rem;line-height:1.45;letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}

/* Branded list markers, aligned with the first line of multi-line items. */
.product-sizing ul{list-style:none;padding-inline-start:0}
.product-sizing li{position:relative;padding-inline-start:1.5rem}
.product-sizing__bullet{position:absolute;inset-inline-start:0;inset-block-start:.5em;inline-size:.625rem;block-size:.5465rem;fill:var(--hc-neutral-graphite);pointer-events:none}

/* Softer graphite trial on the product page only. */
.footer-v5{background:#202323}
.footer-v5::before{background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) .0625rem,transparent .0625rem,transparent .25rem),linear-gradient(to top,#202323,#242626)}

/* Transparent product photograph blends into the section background. */
.product-process__grid>img{border:0;border-radius:0}

/* Crop the empty left side while keeping the photograph in its grid column. */
.product-process__grid>img{object-position:65% center}

/* Breadcrumb navigation on the page background below the hero. */

.product-breadcrumbs .product-lead__crumbs{margin-block:0;font-size:.8125rem;gap:.625rem}

/* Light turquoise emphasis on the graphite surface. */
.product-page .product-process p strong.product-process__highlight{color:#A0B0B8}

/* A distinct section for applications and domestic manufacturing. */
.product-origin{background:var(--hc-surface-neutral);padding-block:4rem;margin-block:0 4rem;border-block:var(--hc-border-thin) solid #D7D7D7}
.product-origin__grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.product-origin p{color:var(--hc-neutral-ink)}
.product-origin__made{display:flex;align-items:center;gap:1.25rem;border-top:var(--hc-border-thin) solid #D8C7BA;padding-top:1.5rem;margin-top:1.75rem}
.product-origin__made img{inline-size:5rem;block-size:5rem;object-fit:contain;flex:none}
.product-origin__made p{margin:0}
@media(max-width:60rem){.product-origin__grid{gap:2rem}}
@media(max-width:40rem){.product-origin{padding-block:2.5rem;margin-block:0 3rem}.product-origin__grid{grid-template-columns:1fr;gap:1rem}.product-origin__made img{inline-size:4rem;block-size:4rem}}

/* Highlight the technical row under the pointer without shifting its text. */
.product-specs dl>div{position:relative;isolation:isolate}
.product-specs dl>div::before{content:"";position:absolute;inset:0 -.875rem;z-index:-1;background:transparent;border-inline-start:.3125rem solid transparent;transition:background-color .2s ease,border-color .2s ease;pointer-events:none}
@media(hover:hover){.product-specs dl>div:hover::before{background:#F7F5E8;border-inline-start-color:#B3A578}}
.product-specs dl>div:focus-within::before{background:#F7F5E8;border-inline-start-color:#B3A578}
@media(prefers-reduced-motion:reduce){.product-specs dl>div::before{transition:none}}

/* Stronger product hero: larger photograph and a shared top alignment. */
.product-lead{padding-block:3.5rem 4rem;margin-block-end:3rem}
.product-lead__grid{align-items:start}
@media(min-width:60.001rem){
 .product-lead__grid{grid-template-columns:.85fr 1.15fr;gap:3rem}
 .product-lead__grid figure{margin-inline-end:0}
 .product-lead__grid figure img{block-size:34.5rem}
}
@media(max-width:40rem){.product-lead{padding-block:2rem 2.5rem;margin-block-end:2rem}}

/* Keep the hero photograph inside the content gutter and soften the panel corners. */
.product-lead{border-radius:1rem}

/* More breathing room around the model comparison. */
.product-models{padding-block:4rem 8rem}
@media(max-width:40rem){.product-models{padding-block:2.5rem 4.5rem}}

/* Breadcrumbs connect the hero to the product content. */
.product-lead{margin-block-end:0}



/* Compact breadcrumb strip inspired by the supplied Ratecon reference. */
.product-breadcrumbs{display:flex;align-items:center;padding-block:2rem}
.product-breadcrumbs .product-lead__crumbs{display:inline-flex;width:fit-content;max-width:100%;height:auto;min-height:2.75rem;padding:.375rem 1rem;background:var(--hc-surface-grey);border-radius:.625rem;gap:1rem;font-size:.75rem;line-height:1.5;letter-spacing:.025em;text-transform:uppercase;justify-content:flex-start}
.product-breadcrumbs .product-lead__crumbs a{min-height:2rem;text-decoration:none}
.product-breadcrumbs .product-lead__crumbs a:hover{text-decoration:underline;text-underline-offset:.2em}
.product-breadcrumbs [aria-current="page"]{font-weight:700}
.product-breadcrumbs [aria-hidden="true"]{color:var(--hc-neutral-muted)}
@media(max-width:40rem){.product-breadcrumbs{padding-block:1.25rem}.product-breadcrumbs .product-lead__crumbs{gap:.625rem;padding-inline:.75rem}}

/* Keep hero actions below the introduction with a deliberate, bounded gap. */
.product-lead__copy{display:flex;flex-direction:column;justify-content:flex-start;align-self:start;gap:3rem;min-inline-size:0}
.product-lead__text .product-lead__intro{margin-bottom:0}
.product-lead__actions{margin-block-start:0}
.product-lead__actions .product-lead__secondary{margin-block-end:0}
@media(max-width:40rem){.product-lead__copy{gap:2rem}}

/* Keep long Finnish headings inside their column at every viewport and zoom level. */
.product-lead__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.product-lead__grid>*,.product-lead__text{min-inline-size:0}
.product-lead h1{max-inline-size:100%;white-space:normal;overflow-wrap:anywhere;hyphens:manual}
@media(min-width:60.001rem){.product-lead__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
@media(max-width:60rem){.product-lead__grid{grid-template-columns:minmax(0,1fr)}.product-lead__grid figure img{block-size:25rem}}
@media(max-width:40rem){.product-lead__grid figure img{block-size:21rem}}



/* Shared vertical rhythm for the product-page sections. */
:root{--hc-product-section-space:6rem;--hc-product-section-gap:7rem;--hc-product-panel-space:4rem}
.product-lead{padding-block:4.5rem 5rem}
.product-process,.product-origin{padding-block:var(--hc-product-section-space)}
.product-origin{margin-block:0}
.product-specs{padding-block:var(--hc-product-section-space) var(--hc-product-section-gap)}
.product-section-heading{margin-block-end:3rem}
.product-specs dl>div{padding-block:1.5rem}
.product-sizing{padding-block-end:var(--hc-product-section-gap)}
.product-sizing__panel{padding-block:var(--hc-product-panel-space)}
.footer-contact{padding-block:var(--hc-product-section-space)}
.footer-bottom{padding-block:3rem}
@media(max-width:40rem){
 :root{--hc-product-section-space:3.5rem;--hc-product-section-gap:4.5rem;--hc-product-panel-space:2.5rem}
 .product-lead{padding-block:2.75rem 3.25rem}
 .product-section-heading{margin-block-end:2rem}
 .product-specs dl>div{padding-block:1.25rem}
 .footer-bottom{padding-block:2.5rem}
}

/* Editorial hero trial: a continuous panel with an edge-to-edge photograph. */
.product-lead{padding-block:0;overflow:hidden;background:#242626;color:#fff}
.product-lead>.shell{max-width:none;padding-inline:0}
.product-lead__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch}
.product-lead__copy{padding-block:5rem;padding-inline:max(var(--hc-gutter),calc((100vw - var(--hc-content-width))/2 + var(--hc-gutter))) 3rem;align-self:center}
.product-lead h1{font-size:var(--hc-product-title-size)}
.product-lead__grid figure{margin:0;min-inline-size:0;position:relative}
.product-lead__grid figure img{inline-size:100%;block-size:100%;min-block-size:0;border-radius:0;object-fit:cover;position:absolute;inset:0}
@media(max-width:75rem) and (min-width:60.001rem){.product-lead__copy{padding-inline-end:2rem;padding-block:4rem}}
@media(max-width:60rem){
 .product-lead__grid{grid-template-columns:minmax(0,1fr)}
 .product-lead__copy{padding:3.5rem var(--hc-gutter)}
 .product-lead__grid figure img{position:static;block-size:25rem;min-block-size:0}
}
@media(max-width:40rem){
 .product-lead__copy{padding-block:2.75rem}
 .product-lead h1{font-size:3rem}
 .product-lead__grid figure img{block-size:21rem}
}

/* The photograph meets the right viewport edge with square corners. */
.product-lead{border-top-right-radius:0;border-bottom-right-radius:0}

/* Square outer corners on the stacked mobile hero. */
@media(max-width:40rem){.product-lead{border-radius:0}}

/* Mobile image fills the content width inside the shared page gutters. */
@media(max-width:60rem){.product-lead__grid>figure{padding-inline:var(--hc-gutter);padding-block-end:var(--hc-gutter)}.product-lead__grid>figure img{border-radius:var(--hc-radius-panel)}}

/* Align the comparison introduction with the bottom of its two-line heading. */
@media(min-width:40.001rem){
 .product-models>.product-section-heading{align-items:end}
 .product-models>.product-section-heading>h2,
 .product-models>.product-section-heading>p{margin-block-end:0}
}

/* Match the homepage hero graphite and light typography. */
.product-lead h1{color:#fff}
.product-lead .product-lead__eyebrow,.product-lead .product-lead__intro,.product-lead figcaption{color:#eef0ef}
.product-lead .product-lead__secondary{color:#eef0ef}
.product-lead .product-lead__secondary:hover{color:#fff}

/* Full-width hero background has square outer corners. */
.product-lead{border-radius:0}

/* Trial: model badges follow each card material colour. */
.product-models__grid>article:first-child .product-models__number,
.product-models__grid>article:first-child .product-models__code{color:#70422E}
.product-models__grid>article:nth-child(2) .product-models__number,
.product-models__grid>article:nth-child(2) .product-models__code{color:#1B554E}