:root{--ink:#172238;--ink-2:#26334a;--muted:#657080;--paper:#f7f8f7;--white:#fff;--line:#d9dee2;--yellow:#f4df2b;--red:#e3443e;--side:clamp(1.25rem,5vw,5rem)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:4px}
::selection{background:var(--yellow);color:var(--ink)}
.shell{width:min(100%,1600px);padding-inline:var(--side);margin-inline:auto}
.section-pad{padding-block:clamp(5rem,9vw,9rem)}
.skip-link{position:absolute;left:1rem;top:-5rem;z-index:100;background:var(--yellow);padding:.75rem 1rem;font-weight:700}
.skip-link:focus{top:1rem}
.site-header{position:relative;z-index:30;background:var(--white);border-bottom:1px solid #e9ecee}
.header-inner{height:5.4rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:block;flex:none;width:205px;line-height:0}
.brand img{width:100%;height:auto}
.main-nav{display:flex;align-items:center;gap:clamp(1rem,2.3vw,2.8rem);font-size:.88rem;font-weight:700;letter-spacing:.015em}
.main-nav>a:not(.nav-contact){position:relative;padding:.7rem 0}
.main-nav>a:not(.nav-contact)::after{content:"";position:absolute;bottom:.4rem;left:0;width:0;height:2px;background:var(--red);transition:width .2s ease}
.main-nav>a:not(.nav-contact):hover::after,.main-nav>a:not(.nav-contact):focus-visible::after{width:100%}
.nav-contact{padding:.82rem 1.15rem;background:var(--ink);color:var(--white);transition:background .2s ease}
.nav-contact:hover{background:#384961}
.menu-toggle{display:none}
.eyebrow{display:flex;align-items:center;gap:.75rem;margin:0 0 1.6rem;text-transform:uppercase;font-weight:800;letter-spacing:.14em;font-size:.73rem;line-height:1.3;color:#4d5b69}
.eyebrow-line{display:inline-block;width:1.55rem;height:2px;flex:none;background:var(--red)}
.eyebrow-light{color:#c4cbd5}
.eyebrow-light .eyebrow-line{background:var(--yellow)}
h1,h2,h3,p,figure{margin-top:0}
h1,h2,h3{letter-spacing:-.05em;line-height:1.02}
.hero{display:grid;grid-template-columns:minmax(0,52%) minmax(0,48%);min-height:min(730px,calc(100svh - 5.4rem));background:var(--ink);color:var(--white)}
.hero-copy{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:clamp(3rem,6vw,6.5rem) clamp(2rem,5vw,6rem) 1.7rem var(--side)}
.hero-content{margin:auto 0}
.hero h1{font-size:clamp(3.9rem,7.35vw,8.1rem);line-height:.96;max-width:11ch;margin:0 0 2rem;font-weight:800}
.hero h1 em,.electric h2 em{font-style:normal;color:var(--yellow)}
.hero-lead{max-width:36rem;color:#d5dbe2;font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.55;margin-bottom:2.5rem}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1.6rem}
.button{display:inline-flex;align-items:center;justify-content:center;gap:2rem;min-height:3.6rem;padding:.95rem 1.35rem;font-weight:800;font-size:.9rem;line-height:1.2;transition:transform .2s ease,background .2s ease}
.button:hover{transform:translateY(-2px)}
.button-yellow{background:var(--yellow);color:var(--ink)}
.button-yellow:hover{background:#fff04e}
.button-dark{background:var(--ink);color:#fff}
.button-dark:hover{background:#30405b}
.text-link{display:inline-flex;align-items:center;gap:1rem;border-bottom:1px solid currentColor;padding:.35rem 0;font-size:.9rem;font-weight:800;line-height:1.25;transition:opacity .2s ease}
.text-link:hover{opacity:.64}
.text-link-light{color:#fff}
.hero-foot{display:flex;justify-content:space-between;gap:1rem;margin-top:4rem;padding-top:1.05rem;border-top:1px solid #536074;color:#aeb9c5;text-transform:uppercase;font-size:.66rem;font-weight:800;letter-spacing:.12em}
.hero-media{position:relative;overflow:hidden;margin:0;min-height:100%;background:#9ba8ad}
.hero-media>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:48% 50%}
.intro{padding-bottom:clamp(5rem,8vw,8rem)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(17rem,.6fr);gap:clamp(3rem,9vw,9rem);align-items:end}
.intro h2{font-size:clamp(3rem,5.2vw,6.1rem);margin:0;max-width:13ch}
.intro h2 span{color:#8894a0}
.intro-side{padding-bottom:.3rem}
.intro-side p{color:#4c5969;font-size:1.12rem;line-height:1.65;margin:0 0 1.8rem}
.products{background:#e9eef0}
.section-heading{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(16rem,.6fr);align-items:end;gap:clamp(2.5rem,8vw,8rem);margin-bottom:3.2rem}
.section-heading h2{font-size:clamp(2.7rem,4.6vw,5.5rem);margin:0;max-width:13ch}
.section-heading>p{font-size:1.08rem;line-height:1.6;color:#4c5b6a;margin:0 0 .3rem}
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.product-card{min-width:0;overflow:hidden;display:flex;flex-direction:column}
.product-card-photo{background:#fff;min-height:37rem}
.product-image{height:clamp(16rem,26vw,24rem);overflow:hidden;background:#f5f6f6}
.product-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover .product-image img{transform:scale(1.025)}
.product-image-vasca img{object-fit:contain;object-position:center;background:#fff;padding:.4rem}
.product-image-press img{object-position:50% 56%}
.product-info{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:2.1rem clamp(1.6rem,3vw,3rem) 2.3rem}
.product-number{display:block;text-transform:uppercase;font-weight:900;font-size:.67rem;letter-spacing:.13em;line-height:1.4}
.product-info .product-number{color:var(--red);margin-bottom:1.1rem}
.product-info h3,.product-card-text h3{font-size:clamp(1.95rem,2.4vw,3rem);margin:0 0 1rem}
.product-info p,.product-card-text p{font-size:.99rem;color:#536171;line-height:1.65;max-width:35rem;margin:0 0 1.9rem}
.product-info a,.product-card-text a{margin-top:auto;padding-bottom:.3rem;border-bottom:1px solid currentColor;font-size:.83rem;font-weight:800}
.product-info a:hover,.product-card-text a:hover{opacity:.63}
.product-card-text{min-height:28rem;justify-content:space-between;padding:2rem clamp(1.6rem,3vw,3rem) 2.4rem}
.card-top{display:flex;justify-content:space-between;align-items:start}
.plus{font-size:2rem;line-height:.8;font-weight:300}
.product-card-multi{background:var(--ink);color:#fff}
.product-card-multi p{color:#c8d2dc}
.product-image-secondary{height:clamp(15rem,19vw,19rem);flex:none;margin:1.2rem 0 1.8rem;border:1px solid rgba(255,255,255,.18)}
.product-image-multi img{object-position:50% 47%}
.product-card-wash{background:#d6dcdf}
.product-image-wash{background:#c9d2d4;border-color:#bfc9cc}
.product-image-wash img{object-fit:contain}
.product-note{font-size:.75rem;color:#65717b;line-height:1.5;margin:1.15rem 0 0}
.electric{background:#1c2b40;color:#fff;overflow:hidden}
.electric-inner{position:relative;display:grid;grid-template-columns:42% 58%;align-items:center;min-height:34rem;gap:1rem}
.electric-symbol{position:relative;width:min(26vw,24rem);height:min(26vw,24rem);border:1.5rem solid var(--yellow);border-radius:50%;display:grid;place-items:center;transform:rotate(-14deg);margin:3rem auto;box-shadow:0 0 0 3rem rgba(244,223,43,.055)}
.electric-symbol span{font-size:clamp(8rem,19vw,18rem);font-weight:900;line-height:.7;letter-spacing:-.16em;color:var(--yellow);margin:-.65rem 2rem 0 0}
.electric-symbol i{position:absolute;width:5rem;height:1.5rem;background:var(--red);right:-3.5rem;top:30%;transform:rotate(-20deg)}
.electric-copy{padding:6rem 0;max-width:47rem}
.electric h2{font-size:clamp(3.25rem,5vw,6rem);margin:0 0 1.6rem}
.electric-copy>p:last-child{font-size:1.08rem;line-height:1.65;color:#c5d0dc;max-width:37rem;margin-bottom:0}
.electric-corner{position:absolute;bottom:2rem;right:var(--side);font-size:.68rem;letter-spacing:.13em;font-weight:800;color:#aeb9c5}
.method-heading{margin-bottom:4rem}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid #bfc8ce}
.steps article{padding:2rem 2rem 2rem 0;border-right:1px solid #bfc8ce;display:flex;flex-direction:column;min-height:17rem}
.steps article+article{padding-left:2rem}
.steps article:last-child{border-right:0}
.step-n{font-size:2.7rem;line-height:1;font-weight:800;letter-spacing:-.07em;color:var(--red);margin-bottom:2.4rem}
.steps h3{font-size:1.45rem;margin:0 0 .7rem}
.steps p{color:#586777;line-height:1.6;margin:0}
.story{background:#28374d;color:#fff;overflow:hidden}
.story-inner{display:grid;grid-template-columns:43% 57%;min-height:34rem;align-items:center;gap:2rem}
.story-mark{position:relative;display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(9rem,18vw,20rem);letter-spacing:-.12em;line-height:.68;font-weight:900;color:transparent;-webkit-text-stroke:2px #6c7b8f;opacity:.55;transform:rotate(-10deg);margin-left:-2rem;pointer-events:none}
.story-mark span+span{margin-left:1.1em}
.story-content{position:relative;z-index:1;max-width:42rem;padding:6rem 2rem 6rem 0}
.story h2{font-size:clamp(3rem,4.5vw,5.5rem);margin:0 0 1.8rem}
.story-content>p:not(.eyebrow){font-size:1.08rem;line-height:1.7;color:#d2dbe4;margin-bottom:2rem}
.contact{background:var(--yellow)}
.contact-inner{display:grid;grid-template-columns:1fr .75fr;gap:clamp(3rem,10vw,11rem);align-items:start}
.contact .eyebrow{color:#273447}.contact .eyebrow-line{background:var(--red)}
.contact h2{font-size:clamp(4rem,6.5vw,8rem);margin:0 0 1.5rem}
.contact-inner>div:first-child>p:not(.eyebrow){font-size:1.1rem;line-height:1.6;max-width:32rem;margin-bottom:2rem}
.contact-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.5rem}
.contact-actions .button{border:0;cursor:pointer}
.contact-feedback{min-height:1.5rem;margin-top:.9rem;font-size:.9rem;font-weight:700}
.contact-details{border-top:1px solid rgba(23,34,56,.45)}
.contact-details>div{padding:1.45rem 0;border-bottom:1px solid rgba(23,34,56,.45)}
.contact-details span{display:block;font-size:.7rem;font-weight:900;letter-spacing:.14em;margin-bottom:.55rem}
.contact-details a{font-size:clamp(1.15rem,1.8vw,1.65rem);font-weight:800;letter-spacing:-.035em;overflow-wrap:anywhere}
.contact-details a:hover{text-decoration:underline}
.contact-person a{display:block}
.contact-person a+a{margin-top:.35rem;font-size:1.05rem;font-weight:700;letter-spacing:0}
.contact-details p{font-size:1.12rem;line-height:1.55;margin:0}
.site-footer{background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:2.1rem}
.footer-inner img{width:180px;height:auto}
.footer-inner>div{display:flex;flex-direction:column;gap:.15rem;color:#596472;font-size:.78rem}
.footer-inner>a{font-size:.8rem;font-weight:800;border-bottom:1px solid currentColor;padding-bottom:.2rem}
@media(max-width:1000px){
  .hero{grid-template-columns:55% 45%;min-height:42rem}
  .hero h1{font-size:clamp(3.5rem,7vw,5.7rem)}
  .hero-copy{padding-right:2rem}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:.7rem}
  .intro-grid,.section-heading{gap:3rem}
  .electric-symbol{border-width:1rem}
}
@media(max-width:760px){
  .header-inner{height:4.7rem}.brand{width:167px}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:2.75rem;height:2.75rem;background:transparent;border:0;padding:.6rem;cursor:pointer}
  .menu-toggle span{height:2px;background:var(--ink);width:100%;transition:transform .2s ease,opacity .2s ease}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg)}
  .main-nav{display:none;position:absolute;top:4.7rem;left:0;right:0;padding:1.2rem var(--side) 1.8rem;background:#fff;box-shadow:0 15px 22px rgba(0,0,0,.14);flex-direction:column;align-items:stretch;gap:.15rem}
  .main-nav.is-open{display:flex}.main-nav a{padding:.8rem 0}.main-nav .nav-contact{padding:.85rem 1rem;margin-top:.5rem;text-align:center}
  .hero{display:flex;flex-direction:column;min-height:0}
  .hero-copy{padding:4.4rem var(--side) 1.5rem;min-height:36rem}
  .hero h1{font-size:clamp(3.7rem,10vw,6.5rem)}
  .hero-lead{max-width:35rem}
  .hero-actions{flex-direction:row;align-items:center;gap:1.1rem}
  .hero-foot{margin-top:3rem}
  .hero-media{height:clamp(20rem,60vw,34rem);min-height:0}
  .intro-grid,.section-heading,.contact-inner{grid-template-columns:1fr;gap:1.8rem}
  .intro h2,.section-heading h2{max-width:16ch}
  .intro-side{max-width:38rem}
  .product-grid{gap:.8rem}
  .product-card-photo{min-height:34rem}.product-image{height:16rem}
  .product-card-text{min-height:27rem}
  .electric-inner{grid-template-columns:1fr;gap:0;padding-top:3rem}
  .electric-symbol{width:13rem;height:13rem;margin:2rem auto 0}
  .electric-symbol span{font-size:10rem}
  .electric-copy{padding:4rem 0 5rem}
  .story-inner{grid-template-columns:1fr;gap:0}
  .story-mark{position:absolute;opacity:.17;font-size:17rem;right:-1rem;top:3rem;pointer-events:none}
  .story-inner{position:relative}
  .story-content{position:relative;z-index:1;padding:6rem 0}
  .contact-details{margin-top:2rem}
}
@media(max-width:560px){
  .section-pad{padding-block:4.5rem}
  .hero-copy{min-height:0;padding-top:3.8rem}
  .hero h1{font-size:clamp(3.4rem,13.5vw,5.2rem);margin-bottom:1.5rem}
  .hero-lead{font-size:1.03rem;margin-bottom:2rem}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:.85rem}
  .hero-foot{font-size:.58rem;letter-spacing:.07em;gap:.8rem}
  .hero-foot span:last-child{text-align:right}
  .hero-media{height:21rem}
  .intro h2,.section-heading h2{font-size:clamp(2.8rem,10vw,4rem)}
  .intro-side p,.section-heading>p{font-size:1rem}
  .product-grid{grid-template-columns:1fr}
  .product-card-photo{min-height:0}
  .product-image{height:15.5rem}
  .product-card-text{min-height:24rem}
  .electric h2{font-size:clamp(3rem,10vw,4.6rem)}
  .steps{grid-template-columns:1fr}
  .steps article,.steps article+article{border-right:0;border-bottom:1px solid #bfc8ce;padding:1.8rem 0;min-height:0;flex-direction:row;gap:2rem}
  .steps article:last-child{border-bottom:0}
  .step-n{margin:0;flex:none;font-size:2.2rem}
  .steps h3{font-size:1.3rem}
  .story h2{font-size:clamp(2.7rem,9vw,4.2rem)}
  .contact h2{font-size:clamp(3.8rem,13vw,5.5rem)}
  .footer-inner{flex-wrap:wrap;align-items:flex-end}
  .footer-inner img{width:150px}.footer-inner>div{order:3;width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
