:root{
  --navy:#0A2B3B;
  --navy2:#063145;
  --teal:#0B6A78;
  --bg:#F6FAFB;
  --text:#0C1B24;
  --muted:#5B6B76;
  --line:#E6EEF2;
  --white:#ffffff;
  --shadow: 0 14px 40px rgba(10, 43, 59, .10);
  --shadow2: 0 10px 24px rgba(10, 43, 59, .12);
  --radius: 18px;
  --radius2: 22px;
  --container: 1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.45;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--container), calc(100% - 48px)); margin:0 auto}

.topbar{
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.topbar .row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
  gap:14px;
}
.badges{display:flex; align-items:center; gap:10px; color:var(--muted)}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff}
.badge .dot{width:8px;height:8px;border-radius:99px;background:var(--teal)}
.top-actions{display:flex; align-items:center; gap:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--navy); font-weight:700; font-size:13px;
  transition:.2s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow: 0 10px 18px rgba(10,43,59,.10)}
.btn.primary{background:var(--navy); border-color:var(--navy); color:#fff}
.btn.ghost{background:transparent}

.header{
  position:sticky; top:0; z-index:30;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(230,238,242,.75);
}
.header .row{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:26px}
.nav{display:flex; gap:18px; align-items:center; font-size:13px; color:var(--navy2); font-weight:700}
.nav a{padding:8px 10px; border-radius:999px}
.nav a:hover{background:rgba(11,106,120,.08)}
.hamb{display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:#fff; align-items:center; justify-content:center}
.hamb span{width:18px; height:2px; background:var(--navy); position:relative}
.hamb span:before,.hamb span:after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--navy)}
.hamb span:before{top:-6px}
.hamb span:after{top:6px}
.mobile-panel{display:none; border-top:1px solid var(--line); background:#fff}
.mobile-panel .links{display:flex; flex-direction:column; padding:10px 0}
.mobile-panel a{padding:12px 10px; border-radius:12px; color:var(--navy2); font-weight:700}

.hero{
  position:relative;
  overflow:hidden;
  min-height: clamp(560px, 70vh, 760px);
  background:#fff;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  filter:saturate(.95) contrast(1.05);
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  /* Soft wash so text/buttons never clash with the footage */
  background:
    radial-gradient(1200px 520px at 20% 25%, rgba(255,255,255,.78), rgba(255,255,255,.35) 55%, rgba(255,255,255,.18) 100%),
    linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.30) 55%, rgba(255,255,255,.12) 100%);
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.22;
  background: url("assets/hero-bg.svg") center/cover no-repeat;
  mix-blend-mode: multiply;
}
.hero .container{position:relative; z-index:3;}
.hero .inner{padding:44px 0 28px}
.hero-grid{display:grid; grid-template-columns: 1fr; gap:28px; align-items:center}
.kicker{display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--navy2); font-weight:800}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(11,106,120,.10); color:var(--navy)}
.hero h1{margin:12px 0 12px; font-size:40px; line-height:1.05; color:var(--navy)}
.hero p{margin:0 0 18px; color:var(--muted); max-width:62ch}
.hero-ctas{display:flex; flex-wrap:wrap; gap:10px}
.hero-card{background:rgba(255,255,255,.86); border:1px solid rgba(10,43,59,.10); border-radius:18px; box-shadow:0 14px 40px rgba(0,0,0,.08); padding:18px; backdrop-filter:saturate(160%) blur(6px);}

.section{padding:54px 0}
.section.compact{padding:36px 0}
.section-title{text-align:center; margin-bottom:22px}
.section-title h2{margin:0; font-size:26px; color:var(--navy)}
.section-title p{margin:8px auto 0; color:var(--muted); max-width:70ch}

.device-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: 0 10px 24px rgba(10,43,59,.06);
}
.device-card{padding:16px; display:flex; flex-direction:column; gap:12px}
.device-card .thumb{border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#fff}
.device-card h3{margin:0; font-size:15px; color:var(--navy)}
.device-card .meta{margin:0; font-size:12.5px; color:var(--muted)}
.device-card .actions{display:flex; gap:10px; align-items:center}
.device-card .btn{padding:9px 12px; font-size:12.5px}

.split{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:26px;
  align-items:center;
}
.photo-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
}
.photo-card .shade{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(11,106,120,.10), rgba(10,43,59,.0) 55%);
  pointer-events:none;
}
.photo-card .person{
  height: 380px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(255,214,230,.55), rgba(207,233,234,.55));
}
.copy h3{margin:0 0 10px; color:var(--navy); font-size:22px}
.copy p{margin:0 0 14px; color:var(--muted)}
.copy ul{margin:0; padding:0 0 0 18px; color:var(--muted)}
.copy li{margin:8px 0}
.copy .btn{margin-top:14px}

.treat-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.treat{overflow:hidden}
.treat .img{aspect-ratio: 16/10; background:#fff; border-bottom:1px solid var(--line)}
.treat .body{padding:14px}
.treat h3{margin:0 0 6px; font-size:15px; color:var(--navy)}
.treat p{margin:0 0 10px; font-size:12.5px; color:var(--muted)}

.ribbon{
  background: var(--navy);
  color:#fff;
  padding:22px 0;
  position:relative;
  overflow:hidden;
}
.ribbon:before{
  content:"";
  position:absolute; left:-20%; top:0; bottom:0; width:140%;
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%);
}
.ribbon .row{position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px}
.marquee{display:flex; gap:26px; white-space:nowrap; overflow:hidden; flex:1; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent)}
.marquee .track{display:flex; gap:26px; animation: scroll 22s linear infinite}
.marquee span{display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.06); font-weight:800; font-size:12.5px}
.marquee .ico{width:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.75)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.match{
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.match .inner{padding:42px 0}
.match-card{
  border-radius: 26px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.85)),
    linear-gradient(135deg, rgba(10,43,59,.18), rgba(11,106,120,.14));
  border:1px solid rgba(230,238,242,.9);
  box-shadow: var(--shadow);
}
.match-card .content{padding:26px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:center}
.match-card h2{margin:0 0 10px; color:var(--navy); font-size:24px}
.match-card p{margin:0 0 16px; color:var(--muted)}
.match-card .img{height:240px; border-radius: 22px; border:1px solid rgba(230,238,242,.9); background:
  radial-gradient(circle at 30% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
  linear-gradient(135deg, rgba(255,214,230,.55), rgba(207,233,234,.65));
}

.news-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.post{overflow:hidden}
.post .thumb{aspect-ratio:16/10; background-color:#e8eef2; background-size:cover; background-position:center; background-repeat:no-repeat; border-bottom:1px solid var(--line)}
.post .body{padding:14px}
.post h3{margin:0 0 8px; font-size:15px; color:var(--navy)}
.post p{margin:0 0 10px; font-size:12.5px; color:var(--muted)}
.post .read{font-size:12.5px; font-weight:800; color:var(--teal)}

.brochure{
  background: var(--navy);
  color:#fff;
  position:relative;
}
.brochure .inner{padding:44px 0}
.brochure .grid{display:grid; grid-template-columns: .9fr 1.1fr; gap:18px; align-items:center}
.brochure h2{margin:0 0 10px; font-size:24px}
.brochure p{margin:0 0 14px; color: rgba(255,255,255,.85)}
.brochure .img{border-radius: 22px; overflow:hidden; border:1px solid rgba(255,255,255,.18)}
.brochure .img img{width:100%; height:auto; display:block; transform: translateZ(0)}

.reviews{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.review-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.review{padding:16px}
.stars{letter-spacing:2px; color: #F2B01E; font-size:14px; margin-bottom:8px}
.review p{margin:0 0 12px; color:var(--muted); font-size:13px}
.reviewer{display:flex; align-items:center; gap:10px}
.avatar{width:34px;height:34px;border-radius:999px;background:linear-gradient(135deg, rgba(11,106,120,.18), rgba(10,43,59,.08)); border:1px solid var(--line)}
.reviewer b{font-size:13px; color:var(--navy)}
.reviewer span{display:block; font-size:12px; color:var(--muted)}

.demo{background:#fff}
.form-shell{max-width:780px; margin:0 auto; padding:16px; border-radius: 26px; border:1px solid var(--line); box-shadow: var(--shadow); background: #fff}
.form-grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.field{display:flex; flex-direction:column; gap:6px}
label{font-size:12.5px; color:var(--muted); font-weight:700}
input, select, textarea{
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius: 14px;
  outline:none;
  background:#fff;
  font-size:14px;
}
input:focus, select:focus, textarea:focus{border-color: rgba(11,106,120,.55); box-shadow: 0 0 0 4px rgba(11,106,120,.12)}
textarea{min-height:120px; resize:vertical}
.form-actions{display:flex; justify-content:flex-start; gap:10px; padding-top:12px}

.insta{background: var(--bg)}
.insta-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px}
.insta .tile{border-radius: 18px; overflow:hidden; border:1px solid var(--line); background:#fff}

.footer{
  background: var(--navy);
  color:#fff;
  padding:46px 0 22px;
}
.footer .cols{display:grid; grid-template-columns: 1.2fr .8fr .8fr 1.2fr; gap:18px}
.footer h4{margin:0 0 12px; font-size:13px; letter-spacing:.2px; opacity:.92}
.footer p, .footer a{color: rgba(255,255,255,.84); font-size:13px}
.footer a:hover{color:#fff}
.footer .mini{display:flex; gap:10px; align-items:center; margin-bottom:12px}
.footer .mini img{height:24px; filter: brightness(1.15)}
.footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.footer .sub{display:flex; gap:10px}
.footer input{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color:#fff}
.footer input::placeholder{color: rgba(255,255,255,.65)}
.footer .bottom{margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px; color: rgba(255,255,255,.72)}

.wave-sep{height:56px; background: url("assets/wave.svg") center/cover no-repeat}

@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr;}
  .device-grid{grid-template-columns: repeat(2, 1fr)}
  .treat-grid{grid-template-columns: repeat(2, 1fr)}
  .news-grid{grid-template-columns: repeat(2, 1fr)}
  .review-grid{grid-template-columns: repeat(2, 1fr)}
  .split{grid-template-columns: 1fr;}
  .match-card .content{grid-template-columns: 1fr;}
  .brochure .grid{grid-template-columns: 1fr;}
  .insta-grid{grid-template-columns: repeat(2, 1fr)}
  .footer .cols{grid-template-columns: 1fr 1fr;}
  .nav{display:none}
  .hamb{display:inline-flex}
}
@media (max-width: 560px){
  .device-grid{grid-template-columns: 1fr}
  .treat-grid{grid-template-columns: 1fr}
  .news-grid{grid-template-columns: 1fr}
  .review-grid{grid-template-columns: 1fr}
  .form-grid{grid-template-columns: 1fr}
  .hero h1{font-size:32px}
}

.hero-grid > div{max-width: 860px}


/* Treatments page */
.nav a.active{background:rgba(11,106,120,.10)}
.header-actions{display:flex; gap:10px; align-items:center}
@media (max-width: 920px){
  .header-actions{display:none}
}

.page-hero{
  padding:54px 0 26px;
  background:
    url("wave.svg") center top / cover no-repeat,
    linear-gradient(180deg, rgba(244,248,250,.95), rgba(255,255,255,1));
  border-bottom:1px solid rgba(230,238,242,.8);
}
.page-hero-inner{max-width:980px}
.page-hero h1{margin:0 0 10px; font-size:38px; letter-spacing:-.02em; color:var(--navy)}
.page-hero p{margin:0; color:var(--muted); line-height:1.6}

.treat-row{padding:62px 0; background:#fff}
.treat-row.alt{background:rgba(244,248,250,.9)}
.treat-wrap{display:grid; grid-template-columns: 220px 1fr; gap:56px; align-items:center}
.treat-wrap.reverse{grid-template-columns: 1fr 220px}
.treat-wrap.reverse .treat-circle{grid-column:2}
.treat-wrap.reverse .treat-copy{grid-column:1}
.treat-circle{
  width:190px; height:190px; border-radius:999px; overflow:hidden;
  box-shadow: 0 22px 40px rgba(10,43,59,.12);
  border:1px solid rgba(230,238,242,.95);
  background:#fff;
}
.treat-circle img{width:100%; height:100%; object-fit:cover; display:block}
.treat-copy h3{margin:0 0 10px; font-size:20px; color:var(--navy)}
.treat-copy p{margin:0 0 16px; color:var(--muted); line-height:1.7; max-width:760px}

.section-title.centered{text-align:center}
.form-shell.slim{max-width:520px; margin:0 auto}
.radio-list{display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:6px}
.radio-list label,
.radio-inline label{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--navy2); font-weight:600}
.radio-inline{display:flex; flex-wrap:wrap; gap:14px; margin-top:6px}
@media (max-width: 820px){
  .page-hero h1{font-size:30px}
  .treat-wrap{grid-template-columns: 1fr; gap:18px}
  .treat-wrap.reverse{grid-template-columns: 1fr}
  .treat-wrap.reverse .treat-circle,
  .treat-wrap.reverse .treat-copy{grid-column:auto}
  .treat-circle{width:160px; height:160px}
  .radio-list{grid-template-columns:1fr}
}




/* Treatment detail pages */
.treat-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.treat-detail{padding:44px 0}
.treat-detail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.treat-detail-image{border-radius:22px;overflow:hidden;box-shadow:0 18px 50px rgba(10,43,59,.12)}
.treat-detail-image img{width:100%;height:auto;display:block;object-fit:cover}
.treat-bullets{margin:14px 0 0;padding-left:18px;color:var(--muted);line-height:1.7}
.treat-mini-cta{margin-top:18px;display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.card-mini{flex:1;min-width:240px;padding:16px 16px;border:1px solid rgba(10,43,59,.10);border-radius:18px;background:rgba(255,255,255,.85);backdrop-filter: blur(6px)}
.card-mini-title{font-weight:700;color:var(--navy)}
.card-mini-text{margin-top:6px;color:var(--muted);line-height:1.6}
.treat-detail-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.badge{padding:8px 10px;border-radius:999px;border:1px solid rgba(10,43,59,.10);background:rgba(255,255,255,.85);color:var(--navy);font-size:12px}
.treat-products{padding:34px 0 52px}
.section-head h2{margin:0;color:var(--navy);font-size:24px}
.section-head p{margin:8px 0 0;color:var(--muted);max-width:820px;line-height:1.6}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.product-card{border:1px solid rgba(10,43,59,.10);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 14px 40px rgba(10,43,59,.08)}
.product-thumb{height:180px;overflow:hidden}
.product-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.product-card h3{margin:14px 14px 0;color:var(--navy);font-size:16px}
.product-card p{margin:8px 14px 14px;color:var(--muted);line-height:1.6}
.btn.small{padding:9px 12px;border-radius:12px;margin:0 14px 16px;display:inline-flex}
.treat-bottom-cta{padding:10px 0 56px}
.cta-panel{display:flex;gap:18px;justify-content:space-between;align-items:center;border-radius:26px;padding:22px 22px;border:1px solid rgba(10,43,59,.10);background:linear-gradient(135deg, rgba(11,106,123,.08), rgba(255,255,255,.9))}
.cta-panel h2{margin:0;color:var(--navy);font-size:20px}
.cta-panel p{margin:8px 0 0;color:var(--muted);line-height:1.6}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Contact page */
.contact-section{padding:44px 0 64px}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start}
.contact-card{background:#fff;border:1px solid rgba(10,43,59,.10);border-radius:22px;padding:18px;box-shadow:0 14px 40px rgba(10,43,59,.08)}
.contact-card h2{margin:0 0 12px;color:var(--navy)}
.form label{display:block;font-size:13px;color:var(--navy);margin:10px 0 0}
.form input,.form textarea,.form select{width:100%;margin-top:6px;padding:12px 12px;border-radius:14px;border:1px solid rgba(10,43,59,.14);outline:none;background:#fff}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-note{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.contact-list{display:grid;gap:10px;color:var(--muted);line-height:1.6}
.map-placeholder{margin-top:14px;border-radius:18px;overflow:hidden;border:1px dashed rgba(10,43,59,.22);background:rgba(10,43,59,.03)}
.map-inner{padding:54px 12px;text-align:center;color:rgba(10,43,59,.55)}

/* Responsive */
@media (max-width: 980px){
  .treat-detail-grid,.contact-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .cta-panel{flex-direction:column;align-items:flex-start}
  .form-row{grid-template-columns:1fr}
}

/* ===== Brochure download page ===== */
.brochure-page{padding:58px 0 78px; background:#fff}
.brochure-top{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px}
.brochure-float{
  width:min(340px, 78vw);
  height:auto;
  transform: rotate(-10deg);
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.18));
  margin-top:-18px;
}
.brochure-title{margin:0; font-size:30px; letter-spacing:-.02em; color:var(--navy)}
.brochure-sub{max-width:78ch; color: rgba(10,43,59,.72); line-height:1.6; margin:0}
.brochure-hint{font-size:12.5px; color:rgba(10,43,59,.55); margin:4px 0 0}

.brochure-form-wrap{display:flex; justify-content:center; margin-top:34px}
.brochure-form-box{
  width:min(520px, 92vw);
  background:#c9c1bb;
  border:1px solid rgba(10,43,59,.10);
  border-radius: 2px;
  padding:18px 18px 16px;
  box-shadow: 0 22px 50px rgba(10,43,59,.10);
}
.brochure-form-box .form-grid{grid-template-columns:1fr 1fr 1fr}
.brochure-form-box label{font-size:11.5px; color: rgba(10,43,59,.68)}
.brochure-form-box input,
.brochure-form-box select,
.brochure-form-box textarea{
  border-radius: 2px;
  border-color: rgba(10,43,59,.18);
  padding:9px 10px;
  font-size:13px;
}
.brochure-form-box textarea{min-height:86px}
.brochure-form-box .form-grid.two{grid-template-columns:1fr 1fr 1fr}
.brochure-form-box .form-grid.two .field{grid-column:auto}

.brochure-split{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:8px}
.brochure-split .stack{display:flex; flex-direction:column; gap:8px}

.check-stack{display:grid; gap:7px; margin-top:6px; max-height:210px; overflow:auto; padding-right:6px}
.check-stack label{display:flex; align-items:center; gap:8px; font-weight:700; color: rgba(10,43,59,.78)}
.check-stack input{width:auto; margin:0}
.small-note{font-size:11px; color: rgba(10,43,59,.55); margin-top:6px}

.brochure-form-box .form-actions{justify-content:flex-start}
.brochure-form-box .btn{border-radius: 2px; padding:10px 16px}

@media (max-width: 720px){
  .brochure-form-box .form-grid,
  .brochure-form-box .form-grid.two{grid-template-columns:1fr}
  .brochure-split{grid-template-columns:1fr}
}

/* Brochure.html class hooks (kept separate so the markup can stay close to the reference) */
.brochure-hero .brochure-hero-inner{max-width: 920px; margin:0 auto; text-align:center}
.brochure-hero h1{margin:0 0 10px; font-size:32px; letter-spacing:-.02em; color:var(--navy)}
.brochure-lead{margin:0 auto 10px; max-width:86ch; color: rgba(10,43,59,.74); line-height:1.65}
.brochure-hero .brochure-sub{max-width:86ch; margin:0 auto; color: rgba(10,43,59,.62)}

.brochure-download{padding:44px 0 78px}
.brochure-form-shell{display:flex; justify-content:center}
.brochure-form{
  width:min(520px, 92vw);
  background:#c9c1bb;
  border:1px solid rgba(10,43,59,.10);
  box-shadow: 0 22px 50px rgba(10,43,59,.10);
  padding:18px 18px 16px;
}
.brochure-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.bfield{display:flex; flex-direction:column; gap:6px}
.brochure-form label{font-size:11.5px; color: rgba(10,43,59,.72); font-weight:700}
.brochure-form .req{color:#b3261e}
.brochure-form input,
.brochure-form select,
.brochure-form textarea{border-radius: 2px; border:1px solid rgba(10,43,59,.18); padding:9px 10px; font-size:13px; background:#fff}
.brochure-form textarea{min-height:86px; resize:vertical}
.brochure-block{margin-top:10px}
.brochure-block .title{font-size:12px; font-weight:800; color: rgba(10,43,59,.82)}
.brochure-radio-list{display:grid; gap:8px; margin-top:6px}
.brochure-radio-list label{display:flex; align-items:center; gap:8px; font-weight:700; color: rgba(10,43,59,.78)}
.brochure-years{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.brochure-years label{display:flex; align-items:center; gap:8px; font-weight:700}
.brochure-checks{display:grid; gap:7px; margin-top:6px; max-height:210px; overflow:auto; padding-right:6px}
.brochure-checks label{display:flex; align-items:center; gap:8px; font-weight:700; color: rgba(10,43,59,.78)}
.brochure-actions{margin-top:12px}
.brochure-actions .btn{border-radius:2px; padding:10px 16px}

@media (max-width: 720px){
  .brochure-grid-3{grid-template-columns:1fr}
}


/* ===== Contact + About pages (wave hero + form) ===== */
.page-hero{
  position:relative;
  padding:72px 0 64px;
  overflow:hidden;
  background:#fff;
}
.hero-wave{
  position:absolute; inset:0;
  background: url("wave.svg") center/cover no-repeat;
  opacity:.70;
  transform: translateY(-10px);
  pointer-events:none;
}
.page-hero .container{ position:relative; z-index:1; }
.hero-rule{
  width:64px; height:3px; border-radius:99px;
  background: rgba(10,43,59,.35);
  margin:14px 0 18px;
}
.lead{ max-width:62ch; color: rgba(10,43,59,.80); }

.contact-hero{ padding:86px 0 90px; }
.contact-hero-grid{
  display:grid; grid-template-columns: 1.1fr .9fr;
  gap:32px; align-items:center;
}
.contact-hero-copy h1{ font-size:54px; letter-spacing:-.02em; }
.contact-hero-card{
  justify-self:end;
  background: rgba(245,247,249,.92);
  border:1px solid rgba(10,43,59,.10);
  border-radius: 14px;
  padding:22px 24px;
  width:min(420px,100%);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.contact-mini{ padding:12px 0; }
.contact-mini + .contact-mini{ border-top:1px solid rgba(10,43,59,.12); }
.contact-mini .k{ font-weight:800; color:rgba(10,43,59,.90); text-align:center; }
.contact-mini .v{ font-weight:700; color:rgba(10,43,59,.85); text-align:center; margin-top:4px; }

.info-pack{ padding:58px 0 72px; background:#fff; }
.info-pack-head{ text-align:center; max-width:820px; margin:0 auto 26px; }
.info-pack-head h2{ font-size:28px; }
.info-pack-head p{ color:rgba(10,43,59,.65); }
.info-pack-wrap{ display:flex; justify-content:center; }
.info-form{
  width:min(720px,100%);
  background: #cfc8c2;
  border-radius: 4px;
  padding: 18px;
  border: 1px solid rgba(10,43,59,.10);
}
.info-form label span{ font-size:12px; font-weight:700; color: rgba(10,43,59,.80); display:block; margin:0 0 6px; }
.info-form label em{ color:#a02a2a; font-style:normal; }
.if-row{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
  margin-bottom: 12px;
}
.if-row-2{ grid-template-columns: 1fr 1fr; }
.info-form input, .info-form select, .info-form textarea{
  width:100%;
  background:#fff;
  border:1px solid rgba(10,43,59,.18);
  border-radius: 3px;
  padding: 10px 10px;
  font: inherit;
  outline:none;
}
.info-form textarea{ resize:vertical; }
.if-grid2{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
  margin: 8px 0 12px;
}
.if-block{ background: rgba(255,255,255,.35); border:1px solid rgba(10,43,59,.12); border-radius:4px; padding:12px; }
.if-label{ font-weight:800; font-size:12px; color: rgba(10,43,59,.82); margin-bottom: 8px; }
.if-options{ display:grid; grid-template-columns: 1fr 1fr; gap:6px 10px; }
.if-years{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.radio{ font-size:12px; color: rgba(10,43,59,.82); display:flex; gap:8px; align-items:center; }
.radio.inline{ margin-right:8px; }
.mt10{ margin-top:10px; }
.if-actions{ display:flex; justify-content:flex-start; padding: 10px 2px 2px; }
.btn-light{
  background:#fff !important;
  color: rgba(10,43,59,.92) !important;
  border:1px solid rgba(10,43,59,.20) !important;
}
.btn-light:hover{ transform: translateY(-1px); box-shadow:0 14px 30px rgba(0,0,0,.10); }

.about-hero{ padding:72px 0 62px; }
.about-hero-inner h1{ font-size:44px; }
.about-story{ padding:40px 0 18px; }
.about-story-top{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:26px; align-items:center;
}
.about-phone{ width:100%; height:auto; border-radius:18px; border:1px solid rgba(10,43,59,.10); background:#f7f9fb; }
.about-media{ width:100%; height:auto; border-radius:18px; border:1px solid rgba(10,43,59,.10); box-shadow: 0 18px 40px rgba(0,0,0,.10); display:block; }
.about-story-left h2{ font-size:22px; margin-bottom:8px; }
.about-story-mid{
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap:26px; align-items:start;
  margin-top: 20px;
}
.about-collage img{ width:100%; height:auto; border-radius:18px; border:1px solid rgba(10,43,59,.10); }
.about-text p{ color: rgba(10,43,59,.70); margin: 0 0 12px; }
.ethos{
  margin-top:14px;
  padding:14px 14px;
  border-left: 3px solid rgba(10,43,59,.35);
  background: rgba(245,247,249,.70);
  border-radius: 10px;
}
.ethos h3{ margin: 0 0 6px; font-size:14px; }
.about-values{
  background:#cfc8c2;
  padding:28px 0;
  margin-top: 18px;
}
.value-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
.value h3{ font-size:26px; margin-bottom:10px; }
.value p{ color: rgba(10,43,59,.72); }

.about-people{ padding:40px 0; }
.people-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:24px; align-items:center; }
.people-art img{ width:min(420px,100%); height:auto; border-radius:18px; display:block; margin-left:auto; }

.productmatch-banner{
  position:relative;
  overflow:hidden;
  padding: 84px 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.85)),
    url('hero-bg.svg');
  background-size: cover;
  background-position: center;
  border-top:1px solid var(--line);
}
.productmatch-banner .overlay{
  position:absolute; inset:0;
  background: radial-gradient(circle at 70% 35%, rgba(10,43,59,.18), rgba(10,43,59,0) 55%);
  pointer-events:none;
}
.productmatch-inner{
  position:relative;
  max-width: 760px;
  margin: 0 auto;
  text-align:center;
}
.productmatch-inner h2{ margin:0 0 10px; font-size:28px; color: var(--navy); }
.productmatch-inner p{ margin:0 0 18px; color: var(--muted); }
.productmatch-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.about-guarantee{
  background: var(--navy);
  color:#fff;
  padding: 34px 0;
}
.guarantee-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap:24px; align-items:center; }
.guarantee-art img{ width:100%; height:auto; }
.guarantee-copy p{ color: rgba(255,255,255,.82); }


.productmatch-banner .btn.btn-ghost:hover{ background: rgba(255,255,255,.10); }


@media (max-width: 980px){
  .contact-hero-grid, .about-story-top, .about-story-mid, .people-grid, .guarantee-grid{
    grid-template-columns: 1fr;
  }
  .contact-hero-card{ justify-self:start; }
  .if-row{ grid-template-columns: 1fr; }
  .if-row-2{ grid-template-columns: 1fr; }
  .if-grid2{ grid-template-columns: 1fr; }
  .value-grid{ grid-template-columns: 1fr; }
}


/* Resources dropdown */
.nav-item{position:relative; display:flex; align-items:center}
.nav-item > a{display:flex; align-items:center; gap:8px}
.nav-item .caret{font-size:11px; opacity:.75}
.nav-item.has-dropdown{padding:0; border-radius:999px}
.nav-item.has-dropdown > a{padding:8px 10px; border-radius:999px}
.nav-item.has-dropdown:hover > a,
.nav-item.has-dropdown:focus-within > a{background:rgba(11,106,120,.08)}
.nav-item.has-dropdown.active > a{background:rgba(11,106,120,.12)}
.dropdown{position:absolute; top:44px; left:0; min-width:180px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.10); padding:8px; display:none; z-index:50}
.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown{display:block}
.dropdown a{display:block; padding:10px 12px; border-radius:12px; font-size:13px; color:var(--navy2); font-weight:700}
.dropdown a:hover{background:rgba(11,106,120,.08)}
.dropdown a.active{background:rgba(11,106,120,.12)}
.mobile-label{padding:10px 16px; font-weight:800; color:rgba(10,43,59,.65); font-size:12px; text-transform:uppercase; letter-spacing:.06em}

/* Videos page */
.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.video-card{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.06)}
.video-media{background:#000}
.video-media video{width:100%; height:220px; object-fit:cover; display:block}
.video-body{padding:14px 14px 16px}
.video-body h3{margin:0 0 6px; font-size:15px; color:var(--navy2)}
.video-body p{margin:0 0 10px; color:rgba(10,43,59,.72); font-size:13px; line-height:1.5}
.video-tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(11,106,120,.18); background:rgba(11,106,120,.06); font-size:12px; font-weight:700; color:var(--navy2)}
@media (max-width: 980px){.video-grid{grid-template-columns:1fr;}.video-media video{height:240px}}


/* --- Full-width photo banners (Index) --- */
.banner{
  position: relative;
  padding: 72px 0;
  overflow: hidden;
  color: #0b1f2a;
}
.banner .container{ position: relative; z-index: 2; }
.banner .banner-content{
  max-width: 760px;
}
.banner .banner-content.center{
  margin: 0 auto;
  text-align: center;
}
.banner .banner-content h2{
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.banner .banner-content p{
  margin: 0 0 18px;
  font-size: 16px;
  color: rgba(11,31,42,.82);
}
.banner .banner-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.76) 45%, rgba(255,255,255,.45) 100%);
  z-index: 1;
}
.banner.understand-banner{
  background: url("banners/understand-banner.jpg") center/cover no-repeat;
}
.banner.match-banner{
  background: url("banners/productmatch-banner.jpg") center/cover no-repeat;
}
.banner.match-banner .banner-overlay{
  background: linear-gradient(180deg, rgba(6,30,40,.55) 0%, rgba(6,30,40,.58) 100%);
}
.banner.match-banner .banner-content,
.banner.match-banner .banner-content p,
.banner.match-banner .banner-content h2{
  color: #fff;
}
.banner.match-banner .banner-content p{ color: rgba(255,255,255,.85); }

/* Treatment grid photos on Index */
.treat-grid .card.treat .img{
  height: 170px;
  border-radius: 18px;
  overflow: hidden;
  background: #f2f6f7;
}
.treat-grid .card.treat .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}




/* =============================
   Device Detail (device-detail.html)
   ============================= */
.detail-hero{padding-bottom:34px;}
.detail-hero .detail-hero-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;}
.detail-hero h1{margin:0;font-size:28px;letter-spacing:.2px;}
.detail-breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted,#6b7a86);white-space:nowrap;}
.detail-breadcrumb a{color:inherit;text-decoration:none;}
.detail-breadcrumb a:hover{text-decoration:underline;}
.detail-hero-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:18px 22px;min-width:260px;box-shadow:0 10px 26px rgba(3,33,52,.08);}
.detail-hero-card .label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6b7a86);}
.detail-hero-card .val{font-weight:700;color:var(--ink,#0a2a3a);margin-top:2px;}

.product-detail{padding:30px 0 14px;}
.product-detail-grid{display:grid;grid-template-columns:96px 1fr 420px;gap:28px;align-items:start;}
.product-gallery{display:flex;flex-direction:column;gap:12px;}
.product-gallery .thumb{border:0;background:transparent;padding:0;border-radius:12px;cursor:pointer;outline:none;}
.product-gallery .thumb img{width:96px;height:72px;object-fit:cover;border-radius:12px;display:block;border:2px solid transparent;box-shadow:0 8px 18px rgba(3,33,52,.10);}
.product-gallery .thumb.is-active img{border-color:rgba(0,92,120,.55);}

.product-main{position:relative;border-radius:18px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 34px rgba(3,33,52,.10);}
.product-main img{width:100%;height:100%;max-height:520px;object-fit:contain;display:block;background:linear-gradient(180deg,#f8fbfd 0%,#ffffff 55%,#f6fafc 100%);}

.product-summary{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:22px;box-shadow:0 18px 34px rgba(3,33,52,.08);}
.product-summary h2{margin:0 0 10px;font-size:18px;}
.product-summary p{margin:0 0 14px;color:var(--muted,#6b7a86);line-height:1.55;}
.product-specs{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.product-specs li{display:flex;gap:10px;align-items:flex-start;}
.product-specs .k{min-width:150px;color:var(--ink,#0a2a3a);font-weight:600;}
.product-specs .v{color:var(--muted,#6b7a86);}
.product-cta{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;}
.btn-success{background:#33b358;color:#fff;border-color:transparent;}
.btn-success:hover{filter:brightness(.95);}

.product-long{padding:10px 0 52px;max-width:1100px;margin:0 auto;}
.product-long h2{margin:24px 0 12px;font-size:20px;}
.long-block{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:18px 22px;margin:14px 0;box-shadow:0 12px 24px rgba(3,33,52,.06);}
.long-block h3{margin:0 0 10px;font-size:16px;}
.long-block ul{margin:0;padding-left:18px;color:var(--muted,#6b7a86);line-height:1.6;}
.long-note{margin:14px 0 0;color:var(--muted,#6b7a86);font-size:13px;}

@media (max-width: 1100px){
  .product-detail-grid{grid-template-columns:96px 1fr;}
  .product-summary{grid-column:1 / -1;}
}
@media (max-width: 720px){
  .detail-hero .detail-hero-inner{flex-direction:column;align-items:flex-start;}
  .detail-hero-card{width:100%;}
  .product-detail-grid{grid-template-columns:1fr;}
  .product-gallery{order:2;flex-direction:row;overflow:auto;padding-bottom:6px;}
  .product-gallery .thumb img{width:88px;height:68px;}
}

/* =============================
   Device Detail (device-detail.html)
   ============================= */
.detail-hero{padding-bottom:34px;}
.detail-hero .detail-hero-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;}
.detail-hero h1{margin:0;font-size:28px;letter-spacing:.2px;}
.detail-breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap;}
.detail-breadcrumb a{opacity:.85;}
.detail-breadcrumb a:hover{opacity:1;text-decoration:underline;}

.product-detail-wrap{padding:34px 0 10px;}
.product-detail-grid{display:grid;grid-template-columns:92px 1.2fr .9fr;gap:34px;align-items:start;}

.product-gallery{position:sticky;top:110px;align-self:start;}
.product-gallery .thumb{width:92px;height:92px;border-radius:14px;border:1px solid var(--line);background:#fff;overflow:hidden;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 18px rgba(10,43,59,.06);transition:.15s ease;}
.product-gallery .thumb + .thumb{margin-top:12px;}
.product-gallery .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.product-gallery .thumb:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(10,43,59,.10);}
.product-gallery .thumb.is-active{outline:3px solid rgba(11,106,120,.22);border-color:rgba(11,106,120,.35);}

.product-main{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow2);padding:18px;}
.product-main img{width:100%;height:auto;border-radius:16px;}

.product-summary{padding-top:4px;}
.product-summary h2{margin:0 0 10px;font-size:22px;color:var(--navy);}
.product-summary p{margin:0 0 16px;color:var(--muted);}

.spec-title{margin:18px 0 10px;font-size:15px;color:var(--navy);font-weight:800;}
.spec-list{list-style:none;padding:0;margin:0;border:1px solid var(--line);background:#fff;border-radius:18px;overflow:hidden;}
.spec-list li{display:flex;gap:10px;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);}
.spec-list li:last-child{border-bottom:none;}
.spec-list .k{color:var(--muted);font-weight:700;}
.spec-list .v{color:var(--navy);font-weight:800;}

.product-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;}
.btn.btn-pill{padding:12px 16px;}
.btn-success{background:#2FB861;border-color:#2FB861;color:#fff;}
.btn-success:hover{box-shadow:0 14px 26px rgba(47,184,97,.25);}

.product-long{padding:26px 0 70px;}
.product-long h2{margin:0 0 14px;font-size:22px;color:var(--navy);}
.long-block{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 22px rgba(10,43,59,.08);padding:18px 18px 14px;margin:12px 0;}
.long-block h3{margin:0 0 8px;font-size:16px;color:var(--navy);}
.long-block ul{margin:0;padding-left:18px;color:var(--muted);}
.long-block li{margin:8px 0;}
.long-note{margin:16px 0 0;color:var(--muted);}

@media (max-width: 980px){
  .detail-hero .detail-hero-inner{flex-direction:column;align-items:flex-start;}
  .product-detail-grid{grid-template-columns:1fr;}
  .product-gallery{position:relative;top:auto;display:flex;gap:12px;overflow:auto;padding-bottom:6px;}
  .product-gallery .thumb + .thumb{margin-top:0;}
}
/* Device Detail: missing utility classes */
.product-info{padding-top:6px;}
.product-title{margin:0 0 10px 0;font-size:22px;letter-spacing:.2px;color:var(--navy);}
.product-meta{margin:0 0 14px 0;color:var(--muted);font-size:14px;line-height:1.55;}
.detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px 0;}
.btn-success{background:linear-gradient(135deg,#31c56a,#16a34a);border:1px solid rgba(0,0,0,.06);color:#fff;}
.btn-success:hover{filter:brightness(0.98);}
.doc-link{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:800;text-decoration:none;}
.doc-link:hover{text-decoration:underline;}