:root{color-scheme:light;--bg:#faf7f8;--panel:#ffffff;--line:#e5d8dd;--accent:#c20a32;--text:#1c171a;--muted:#5f5158;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.wrap{width:min(1200px,calc(100% - 96px));margin-inline:auto}.bar{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:76px}header,footer{border-bottom:1px solid var(--line)}.logo{display:flex;align-items:center;font-size:25px;font-weight:780;letter-spacing:-.07em}.logo img{margin-right:10px}.logo span,h1 span,h2 span{color:var(--accent)}nav{display:flex;flex-wrap:wrap;align-items:center;gap:32px;font-size:14px;font-weight:650}nav a:hover,footer a:hover,address a:hover{color:var(--accent)}.nav-contact{padding:10px 16px;border:1px solid var(--line);border-radius:7px}.hero{padding:76px 0;background:radial-gradient(ellipse at 70% 35%,#f8e2e9 0,transparent 57%)}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--accent);font:650 12px/1.4 ui-monospace,monospace;letter-spacing:.12em;margin:0 0 21px}.eyebrow i{height:7px;width:7px;background:var(--accent);display:inline-block;transform:rotate(45deg)}h1,h2,h3,p,figure{margin:0}h1{font-size:clamp(38px,5.35vw,77px);line-height:1;letter-spacing:-.072em;font-weight:770}h2{font-size:clamp(35px,4vw,58px);line-height:1.04;letter-spacing:-.06em}h3{font-size:21px;letter-spacing:-.035em}p{color:var(--muted);line-height:1.65}.intro{margin-top:24px;max-width:440px;font-size:18px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:29px}.btn{display:inline-flex;gap:14px;align-items:center;justify-content:center;padding:13px 16px;border-radius:7px;font-weight:700;font-size:14px;min-height:46px;transition:background-color .18s,border-color .18s,color .18s}.primary{color:#ffffff;background:var(--accent);border:1px solid var(--accent)}.ghost{border:1px solid var(--line)}figure{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#271b21}figure img{display:block;width:100%;height:auto}figcaption{display:flex;justify-content:space-between;gap:10px;padding:15px 18px;color:var(--muted);font:11px ui-monospace,monospace;letter-spacing:.09em;border-top:1px solid var(--line)}.services,.approach,.contact{border-top:1px solid var(--line);padding:76px 0}.services{background:#f4edf0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:34px}.section-head p{max-width:300px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}article{display:flex;flex-direction:column;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:11px}article:hover{border-color:#bf7789}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;color:var(--muted);font:12px ui-monospace,monospace}.card-top svg{box-sizing:content-box;width:22px;height:22px;padding:9px;border-radius:7px;background:#f5dbe3;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}article p{margin:8px 0 18px}article a{margin-top:auto;align-self:start;color:var(--accent);font-size:14px;font-weight:680}article a:hover{text-decoration:underline}.split{display:grid;grid-template-columns:1fr 1fr;gap:56px}.split p{margin-top:14px;max-width:440px}ol{margin:0;padding:0;list-style:none}li{display:flex;gap:19px;border-bottom:1px solid var(--line);padding:15px 0 20px}li:first-child{padding-top:0}li b{color:var(--accent);font:600 13px/2 ui-monospace,monospace}li p{margin-top:5px!important}.contact{background:#f4e4e9}.contact .btn{margin-top:23px}address{font-style:normal;border-left:1px solid var(--line);padding-left:30px}address a{display:block;width:fit-content;font-size:clamp(20px,2.5vw,32px);font-weight:720;letter-spacing:-.04em;margin-bottom:6px}address small{display:block;color:var(--muted);line-height:1.6;margin-top:10px}footer{border-top:1px solid var(--line);border-bottom:0;color:var(--muted);font-size:13px}.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip:focus{position:absolute;top:5px;left:5px;z-index:2;padding:12px;background:var(--bg)}
@media(max-width:920px){.wrap{width:calc(100% - 56px)}.hero{padding:52px 0}.hero-grid{gap:24px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:690px){.wrap{width:calc(100% - 36px)}.bar{flex-wrap:wrap;padding:14px 0}.logo{font-size:22px}.logo img{width:29px;height:29px}nav{gap:14px;font-size:13px}.nav-contact{padding:7px 8px}.hero-grid,.split{grid-template-columns:1fr}.hero-grid{gap:30px}.hero,.services,.approach,.contact{padding:46px 0}.section-head{display:block}.section-head p{margin-top:12px}.split{gap:28px}h1{font-size:clamp(38px,9.2vw,64px)}figcaption{font-size:9px}}
@media(max-width:460px){.cards{grid-template-columns:1fr}.actions{gap:8px}.btn{gap:8px;padding-inline:11px}.bar{gap:12px}.logo img{margin-right:7px}nav{gap:11px}address{padding-left:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}


:root{--brand:#dc0b37}
.logo img{width:auto;height:54px;margin:0}
h1 span,h2 span{color:var(--brand)}
h1{font-size:clamp(39px,5.3vw,74px);overflow-wrap:anywhere}
.hero figure figcaption{color:#f3c3cf;border-color:#51323d}
.project{padding:76px 0;border-top:1px solid var(--line)}
.project .split{align-items:center}
.project figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.project .btn{margin-top:24px}
.core{grid-template-columns:repeat(2,minmax(0,1fr))}
.core article{padding:30px;border-top:3px solid var(--brand)}
.core .card-top{color:var(--accent);letter-spacing:.08em}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.tags li{padding:5px 9px;border:0;border-radius:4px;background:#f8e2e9;color:#84213b;font-size:13px}
.secondary article p{margin-bottom:0}
@media(max-width:690px){.logo img{width:auto;height:44px}.project{padding:46px 0}.hero h1{font-size:clamp(38px,9.3vw,60px)}}
@media(max-width:530px){.core{grid-template-columns:1fr}.core article{padding:23px}.bar{column-gap:12px}nav{gap:10px;font-size:12px}}


.hero{padding:26px 0 54px;background:none}
.banner{overflow:hidden;isolation:isolate;border-radius:22px;background:#21171c;color:#fff;border:1px solid #40252f}
.banner .hero-grid{position:relative;grid-template-columns:1.15fr 1fr;gap:0;min-height:470px;padding:54px 52px}
.banner .hero-copy{position:relative;z-index:1}
.banner h1{font-size:clamp(50px,7vw,98px);letter-spacing:-.077em}
.banner h1 span,.banner .eyebrow{color:#ff6986}
.banner .eyebrow i{background:#ff6986}
.banner .intro{color:#e0cbd2;max-width:445px}
.banner .ghost{border-color:#795664;color:#fff}

.banner-visual{position:absolute;right:0;top:0;width:55%;height:100%;object-fit:cover;opacity:.88;mask-image:linear-gradient(90deg,transparent,#000 24%);pointer-events:none}
.banner-links{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #553644;background:#2b1c24}
.banner-links a{display:flex;align-items:center;gap:10px;padding:20px 23px}
.banner-links a+a{border-left:1px solid #553644}
.banner-links a:hover{background:#4a2937}
.banner-links a>span{color:#ff7894}
.banner-links a>span{margin-left:auto}
.contact address{border:0;padding:0;margin-top:23px}
.inquiry{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;gap:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inquiry label{display:grid;gap:6px;font-size:14px;font-weight:700}
.inquiry input,.inquiry select,.inquiry textarea{width:100%;min-width:0;font:inherit;font-weight:400;color:var(--text);background:#faf7f8;border:1px solid #cbbbc2;border-radius:6px;padding:10px}
.inquiry textarea{resize:vertical}
.inquiry :is(input,select,textarea,button):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.inquiry .btn{justify-self:start;margin:0;cursor:pointer}
.form-note{font-size:13px}
@media(max-width:920px){.banner .hero-grid{padding:42px 33px;min-height:410px}.banner-links a{padding:15px}.banner-links strong{font-size:14px}}
@media(max-width:690px){.hero{padding:15px 0 36px}.banner .hero-grid{display:block;padding:34px 22px;min-height:0}.banner h1{font-size:clamp(49px,11vw,72px)}.banner-visual{width:82%;opacity:.30}.banner-links{grid-template-columns:1fr}.banner-links a+a{border-left:0;border-top:1px solid #553644}.form-grid{grid-template-columns:1fr}}

.hydrostrux{background:#fff}
.hydrostrux-intro,.wapka-intro{margin-bottom:34px}
.hydrostrux-intro .eyebrow{margin-top:0}
.hydrostrux-logo{display:block;width:min(100%,360px);height:auto;justify-self:center}
.hydrostrux-topic-icon, .design-service-icon, .wapka-product-icon, .service-topic-icon {
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  margin-bottom: 14px;
  padding: 10px;
  border-radius: 10px;
  background: #e7f5f2;
  color: #176e64;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.core .design-service { grid-column: 1 / -1; }
.design-details { gap: 24px; }
.design-details h4 { margin: 0; font-size: 17px; }
.design-service-icon, .wapka-product-icon, .service-topic-icon { display: block; background: #f8e2e9; color: var(--accent); }

.smart-home-intro p { margin-top: 0; }

.smart-home-topics { margin-top: 34px; }

.contact address .contact-email { font-size: inherit; letter-spacing: normal; text-decoration: underline; }

.form-status { padding: 12px; border: 1px solid #176e64; border-radius: 6px; }
.form-error { border-color: var(--accent); }

.product-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.comfort-brand-logo { display: block; width: 122px; height: auto; flex-shrink: 0; }
.solidworks-brand-logo { display: block; width: 115px; height: auto; flex-shrink: 0; }
.topic-heading { display: flex; align-items: center; gap: 14px; }
.topic-heading > svg { flex-shrink: 0; margin: 0; }
.topic-heading > :is(h2, h3, h4) { min-width: 0; margin: 0; overflow-wrap: anywhere; }

.inquiry-success {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 16px 20px;
  border-radius: 10px;
  background: #166534;
  color: #fff;
  box-shadow: 0 8px 28px #0003;
  font-weight: 600;
  line-height: 1.5;
}
.inquiry-success button {
  flex-shrink: 0;
  padding: 0 4px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 24px;
  cursor: pointer;
}
.inquiry-success button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.design-heading { display: flex; align-items: center; gap: 20px; }
.design-heading > h3 { min-width: 0; }
@media(max-width:460px) {
  .design-heading { gap: 12px; }
  .design-heading .solidworks-brand-logo { width: 90px; }
}
.btn:hover,
.banner .btn:hover,
.inquiry-success button:hover {
  background: #fff;
  border: 1px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.contact address .contact-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: inherit;
  letter-spacing: normal;
}
.contact-phone svg {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.header-logo { flex-shrink: 0; }
.header-logo img { width: 220px; max-width: 100%; height: auto; flex-shrink: 0; }

.menu-toggle { display: none; cursor: pointer; font: inherit; font-weight: 700; }
.menu-toggle .menu-close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-lines { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close { display: block; }
.menu-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 920px) {
  header .bar { flex-wrap: wrap; padding-block: 14px; }
  .header-logo img { width: min(220px, 49vw); }
  .menu-toggle:not([hidden]) { display: inline-flex; gap: 8px; padding: 10px 12px; }
  #main-navigation { width: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; }
  #main-navigation a { padding: 12px 14px; border-radius: 7px; }
  header.menu-ready #main-navigation { display: none; }
  header.menu-ready.menu-open #main-navigation { display: flex; }
}