/* Warm editorial surfaces and a persistent floating navigation capsule. */
:root {
  --color-accent-soft-red: #B44A4A;
  --color-accent-soft-red-hover: #9F3F3F;
  --color-accent-soft-red-active: #8B3737;
  --color-accent-soft-red-light: #D98A8A;
}
html { scroll-padding-top: 118px; }
body { background: var(--color-bg); }
.surface { color: var(--color-text); }
.contrast {
  --line: rgba(248,247,244,.22);
  background: var(--color-primary);
  color: var(--color-bg);
}
.section-label { color: var(--color-primary-light); }
.contrast .section-label { color: var(--color-primary-soft); }
.header {
  inset: auto;
  top: max(24px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 48px);
  height: 68px;
  padding: 8px 10px 8px 25px;
  gap: 32px;
  border: 1px solid rgba(64,24,25,.12);
  border-radius: 999px;
  background: rgba(248,247,244,.76);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--color-text);
  z-index: 1000;
  transition: background .35s, border-color .35s, box-shadow .35s;
}
.header.scrolled {
  background: rgba(248,247,244,.94);
  border-color: rgba(64,24,25,.16);
  backdrop-filter: blur(18px);
  box-shadow: 0 4px 24px rgba(64,24,25,.035);
}
.header .brand-symbol { width: 63px; height: 44px; }
.header .brand-caption { display: none; }
.desktop-nav { margin: 0; gap: clamp(17px,1.6vw,28px); align-items: center; }
.desktop-nav a { position: relative; padding: 14px 0; font-size: 10px; color: var(--color-text-secondary); }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--color-primary); }
.desktop-nav a::after {
  content: ''; position: absolute; left: 50%; bottom: 6px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-primary); transform: translateX(-50%) scale(0);
  transition: transform .25s;
}
.desktop-nav a.active::after { display: block; width: 4px; height: 4px; margin: 0; transform: translateX(-50%) scale(1); }
.header-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; border: 0; border-radius: 999px; padding: 12px 21px;
  background: var(--color-accent-soft-red); color: var(--color-bg);
  transition: background .25s;
}
.header-cta:hover { background: var(--color-accent-soft-red-hover); }
.header-cta:active { background: var(--color-accent-soft-red-active); }
.menu-toggle { color: var(--color-primary); }
.hero {
  --hero-nav-inset: max(24px, env(safe-area-inset-top));
  --hero-nav-height: 68px;
  /* Reserve the floating navbar and one explicit clearance before meaningful content. */
  padding-top: calc(var(--hero-nav-inset) + var(--hero-nav-height) + 24px);
  min-height: auto;
  background: radial-gradient(ellipse at 83% 47%,rgba(233,221,218,.52),transparent 46%),var(--color-bg);
}
.hero-description { font-size: 14px; }
/* Keep the main composition independent of the full-width service index. */
.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: clamp(18px,1.6vw,28px);
}
.hero-corporate-logo {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: clamp(160px,14vw,200px);
  height: auto;
  object-fit: contain;
}
.hero-services { padding-bottom: 40px; }
.hero-services-label {
  max-width: none;
  margin-bottom: 14px;
  text-align: center;
  color: var(--color-primary-light);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
}
.hero-services-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero-services-grid>li { min-width: 0; }
.hero-services-grid>.hero-service-onsite { grid-column: 1 / -1; }
.hero-service-link {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1fr);
  align-items: center;
  gap: 12px;
  min-height: 80px;
  height: 100%;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
  transition: border-color .25s;
}
.hero-service-media {
  display: block;
  aspect-ratio: 2 / 1;
  min-width: 0;
}
.hero-service-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Feather the empty raster edges, keeping pipe ends and fittings opaque. */
  -webkit-mask-image: linear-gradient(to right,transparent,#000 5%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  mask-image: linear-gradient(to right,transparent,#000 5%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  transition: transform .35s ease;
}
.hero-service-onsite .hero-service-link {
  grid-template-columns: clamp(96px,9vw,160px) max-content;
  justify-content: center;
}
.hero-service-onsite .hero-service-media { aspect-ratio: 1672 / 941; }
/* The installation scene needs its complete frame, including the suspension rods. */
.hero-service-onsite img { -webkit-mask-image: none; mask-image: none; }
.hero-service-name {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  color: var(--color-text);
  font: 600 clamp(12px,.9vw,14px)/1.5 var(--display);
  letter-spacing: -.02em;
  transition: color .25s;
}
.hero-service-name>span:first-child { min-width: 0; }
.hero-service-arrow {
  flex-shrink: 0;
  color: var(--color-primary-light);
  font-size: 16px;
  line-height: 1.3;
  transition: transform .25s;
}
.hero-service-link:hover, .hero-service-link:focus-visible { border-color: var(--color-primary-light); }
.hero-service-link:hover .hero-service-name, .hero-service-link:focus-visible .hero-service-name { color: var(--color-primary); }
.hero-service-link:hover img, .hero-service-link:focus-visible img { transform: translateY(-2px); }
.hero-service-link:hover .hero-service-arrow, .hero-service-link:focus-visible .hero-service-arrow { transform: translate(2px,-2px); }
.hero-service-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
/* The root scroll padding already accounts for the floating navigation. */
.service[id] { scroll-margin-top: 12px; }
/* Align the copy with the visual column instead of centering it against all five services. */
@media(min-width:601px) {
  .hero-layout { min-height: 0; align-items: start; padding-block: 0 40px; }
}
@media(max-width:900px) {
  .hero-services-grid { column-gap: 16px; }
  .hero-service-link { grid-template-columns: minmax(0,1fr); align-content: start; gap: 8px; padding-block: 12px; }
  .hero-service-name { font-size: 12px; }
}
@media(max-width:600px) {
  .hero-layout { padding-top: 0; }
  .hero-visual { margin-top: 16px; margin-bottom: 24px; gap: 20px; }
  .hero-services-label { font-size: 8px; margin-bottom: 12px; }
  .hero-services-grid { column-gap: 20px; }
  .hero-services { padding-bottom: 24px; }
}
@media(min-width:601px) {
  .hero-services-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hero-services-grid>.hero-service-onsite { grid-column: auto; }
  .hero-service-link, .hero-service-onsite .hero-service-link {
    grid-template-columns: minmax(0,1fr);
    align-content: start;
    justify-content: normal;
    gap: 12px;
  }
  .hero-service-media, .hero-service-onsite .hero-service-media {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 2 / 1;
  }
}
@media(min-width:1280px) {
  .hero-services-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
.contact-person .contact-email {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 12px;
  font-size: clamp(15px,1.4vw,20px);
  line-height: 1.5;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.hero .hero-stage {
  height: auto;
  width: 100%;
  aspect-ratio: 1671 / 941;
  margin: 0;
  align-self: center;
}
.hero-product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Feather the empty perimeter, keeping suspension plates and stacked pipes opaque. */
  -webkit-mask-image: linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 97%,transparent);
  mask-image: linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 97%,transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero-copy { min-width: 0; }
.hero h1 {
  --headline-pad-x: clamp(20px,2.2vw,40px);
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0 var(--headline-pad-x);
  background: transparent;
  color: #3D1719;
  font-size: clamp(42px,4.1vw,79px);
  line-height: 1.5;
  letter-spacing: -.055em;
}
.hero h1>.headline-line {
  display: block;
  width: fit-content;
  color: inherit;
  white-space: nowrap;
}
.hero h1>.hero-headline-emphasis {
  max-width: 100%;
  color: #B44949;
  font-family: 'Space Grotesk', var(--display);
  font-size: clamp(32px,3.7vw,70px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.035em;
  white-space: normal;
  text-wrap: balance;
}
/* The fluid size fits the left column, including the headline's inline padding. */
@media(min-width:1280px) {
  .hero h1>.hero-headline-emphasis { white-space: nowrap; }
}
@media(max-width:767px) {
  .hero h1>.hero-headline-emphasis { font-size: inherit; }
}
.hero .primary-button { background: var(--color-accent-soft-red); }
.hero .primary-button:hover { background: var(--color-accent-soft-red-hover); }
.hero .primary-button:active { background: var(--color-accent-soft-red-active); }
.hero .primary-button:focus-visible, .header-cta:focus-visible { outline-color: var(--color-accent-soft-red); }
.expertise { background: var(--color-bg-pure); }
.services { background: var(--color-bg); padding-top: 96px; }
.service h3 { margin-top: 0; }
.service-copy>p, .section-heading>p { color: var(--color-text-secondary); }
.service-art { background: var(--color-bg-secondary); }
.service-art.art-epoxy {
  width: 100%;
  height: auto;
  aspect-ratio: 1774 / 887;
  background: transparent;
}
.epoxy-product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Blend the empty perimeter without filtering the approved product colors. */
  -webkit-mask-image: linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  mask-image: linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.service-art.art-laser {
  width: 100%;
  height: auto;
  aspect-ratio: 1774 / 887;
  background: transparent;
}
.laser-product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.service-art.art-groove {
  width: 100%;
  height: auto;
  aspect-ratio: 1774 / 887;
  background: transparent;
}
.grooved-product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Soften only the empty perimeter while preserving the groove and opening. */
  -webkit-mask-image: linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  mask-image: linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.service-art.art-tee {
  width: 100%;
  height: auto;
  aspect-ratio: 1774 / 887;
  background: transparent;
}
.tee-product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Blend the empty perimeter without filtering the fitting or pipe finish. */
  -webkit-mask-image: linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  mask-image: linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.service-art.art-onsite {
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  background: transparent;
}
.onsite-product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
#service-onsite-installation .onsite-product-image {
  /* Feather only the perimeter, leaving the central pipework fully opaque and unfiltered. */
  --onsite-edge-mask:
    linear-gradient(to right,transparent,rgba(0,0,0,.1) 1.5%,rgba(0,0,0,.5) 4%,rgba(0,0,0,.9) 6.5%,#000 8.5%,#000 91.5%,rgba(0,0,0,.9) 93.5%,rgba(0,0,0,.5) 96%,rgba(0,0,0,.1) 98.5%,transparent),
    linear-gradient(to bottom,transparent,rgba(0,0,0,.25) .75%,rgba(0,0,0,.7) 2%,rgba(0,0,0,.96) 3.5%,#000 4.5%,#000 88%,rgba(0,0,0,.95) 91%,rgba(0,0,0,.65) 95%,rgba(0,0,0,.15) 98.5%,transparent);
  -webkit-mask-image: var(--onsite-edge-mask);
  mask-image: var(--onsite-edge-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.art-top, .art-bottom { color: var(--color-text-secondary); }
.art-bottom strong { color: var(--color-primary); }
.diameters { background: var(--color-bg-secondary); }
.diameter:hover { background: rgba(233,221,218,.7); }
.precision { background: var(--color-primary); }
.precision h2 { color: var(--color-bg); }
.precision h2>span, .contact h2 span { color: #D4BCB7; }
.precision-aside p, .contact-description { color: var(--color-primary-soft); }
.precision-aside li span { color: #D4BCB7; }
.precision-art { background: linear-gradient(135deg,#683234,#371315); border-color: rgba(233,221,218,.22); }
.precision-art>div { border-color: rgba(233,221,218,.4); box-shadow: 0 0 0 25px #e9ddda06,0 0 0 26px #e9ddda30,0 0 0 65px #e9ddda03,0 0 0 66px #e9ddda20; }
.benefits { background: var(--color-bg-pure); }
.benefit-grid article { position: relative; }
.benefit-grid article::before { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.benefit-grid article:hover::before { transform: scaleX(1); }
.benefit-grid article>span i { transition: transform .3s; }
.benefit-grid article:hover>span i { transform: translate(3px,-3px); }
.contact .primary-button { background: var(--color-bg); color: var(--color-primary); }
.contact .primary-button:hover { background: var(--color-primary-soft); }
.contact-arrow, .footer-main>a:last-child span { color: #D4BCB7; }
.contact a:focus-visible, .footer a:focus-visible { outline-color: var(--color-bg); }
.footer { background: var(--color-primary); }
.footer .brand-caption { border-color: rgba(233,221,218,.3); }
.intro.play { background: var(--color-bg); color: var(--color-primary); z-index: 1100; }
.skip { z-index: 1200; color: var(--color-primary); }
.mobile-menu {
  color: var(--color-text); background: rgba(248,247,244,.98);
  padding: max(24px,env(safe-area-inset-top)) 28px max(28px,env(safe-area-inset-bottom));
}
.mobile-menu::backdrop { background: rgba(64,24,25,.16); backdrop-filter: blur(12px); }
.menu-close { color: var(--color-primary); border-color: var(--color-border); border-radius: 50%; }
.mobile-menu nav a { min-height: 44px; }
.mobile-menu nav a:hover { color: var(--color-primary-light); }
.menu-phone { color: var(--color-primary-light); }
@media(min-width:1600px) { .header { gap: 40px; } .desktop-nav { gap: 30px; } .desktop-nav a { font-size: 11px; } }
@media(max-width:1150px) {
  .header { gap: 23px; }
  .desktop-nav { gap: 16px; }
  .header-cta { padding-inline: 18px; }
  .hero-corporate-logo { width: min(160px,calc(45vw - 352px)); }
}
/* Use actual logo content, rather than extra top padding, when the navbar fills the upper margin. */
@media(max-width:1023px) {
  .hero-corporate-logo { position: static; display: block; width: 160px; margin-bottom: 12px; }
}
@media(max-width:900px) {
  .header { width: min(440px,calc(100% - 40px)); height: 64px; padding: 8px 12px 8px 23px; gap: 16px; }
  .header-cta { display: none; }
  .menu-toggle { margin-left: auto; }
  .hero { --hero-nav-height: 64px; }
  .hero h1 { font-size: clamp(34px,4.4vw,40px); --headline-pad-x: 20px; }
  .services { padding-top: 65px; }
}
@media(max-width:600px) {
  html { scroll-padding-top: 104px; }
  .header { top: max(16px,env(safe-area-inset-top)); max-width: calc(100% - 32px); height: 60px; }
  .hero { --hero-nav-inset: max(16px,env(safe-area-inset-top)); --hero-nav-height: 60px; }
  .hero-corporate-logo { width: 140px; }
  .hero h1 { font-size: clamp(32px,9.2vw,48px); }
  .hero-description { font-size: 12px; }
  .services { padding-top: 50px; }
}
@media(prefers-reduced-motion:reduce) { .benefit-grid article::before, .desktop-nav a::after { transition: none; } }