@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

@font-face{
  font-family:"Pretendard Variable";
  src:url('assets/fonts/PretendardVariable.woff2') format('woff2-variations'), url('assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
}

:root{ color-scheme: light; }

:root{
  --cream:#F3EBDD;
  --cream-2:#FBF7F0;
  --brown:#795942;
  --brown-deep:#5B4230;
  --brown-soft:#C7AD90;
  --navy:#142D43;
  --navy-2:#1B3A55;
  --navy-3:#0F2434;
  --ink:#251A10;
  --ink-soft:rgba(37,26,16,.64);
  --ink-faint:rgba(37,26,16,.42);
  --on-navy:#F3EBDD;
  --on-navy-soft:rgba(243,235,221,.68);
  --on-navy-faint:rgba(243,235,221,.42);
  --line:rgba(37,26,16,.14);
  --line-navy:rgba(243,235,221,.18);
  --shadow:0 30px 70px -36px rgba(37,26,16,.4);
  --shadow-navy:0 30px 70px -34px rgba(0,0,0,.55);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
[id]{scroll-margin-top:96px;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Inter", -apple-system, "Apple SD Gothic Neo", "Pretendard", sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block; width:100%; height:100%; object-fit:cover;}
a{color:inherit; text-decoration:none;}
.serif{font-family:"Fraunces","Apple SD Gothic Neo",serif;}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;}

/* Korean UI: unify every element to a single base font (Pretendard) instead of mixing Fraunces/IBM Plex Mono/Inter fallbacks */
body[data-lang="kr"],
body[data-lang="kr"] *{
  font-family:"Pretendard Variable","Apple SD Gothic Neo",sans-serif !important;
  word-break:keep-all;
  overflow-wrap:break-word;
  line-height:1.7 !important;
}

/* Korean typography: headings (소제목) get a tighter line-height than body copy (본문) */
body[data-lang="kr"] h1,
body[data-lang="kr"] h2,
body[data-lang="kr"] h3,
body[data-lang="kr"] h4,
body[data-lang="kr"] h5{
  line-height:1.4 !important;
}

/* Exceptions: decorative/icon glyphs that rely on a tight line-height:1 to stay centered — not body text */
body[data-lang="kr"] .num-mark,
body[data-lang="kr"] .img-carousel .ic-nav{
  line-height:1 !important;
}

/* Simplified Chinese UI: unify every element to a single base font (PingFang SC / Microsoft YaHei) */
body[data-lang="zh"],
body[data-lang="zh"] *{
  font-family:"PingFang SC","Microsoft YaHei","Heiti SC",sans-serif !important;
  overflow-wrap:break-word;
  line-height:1.7 !important;
}

/* Chinese typography: headings get a tighter line-height than body copy */
body[data-lang="zh"] h1,
body[data-lang="zh"] h2,
body[data-lang="zh"] h3,
body[data-lang="zh"] h4,
body[data-lang="zh"] h5{
  line-height:1.4 !important;
}

/* Exceptions: decorative/icon glyphs that rely on a tight line-height:1 to stay centered — not body text */
body[data-lang="zh"] .num-mark,
body[data-lang="zh"] .img-carousel .ic-nav{
  line-height:1 !important;
}

h1,h2,h3{
  font-family:"Fraunces","Apple SD Gothic Neo",serif;
  font-weight:500;
  line-height:1.18;
  letter-spacing:-.01em;
  margin:0;
  text-wrap:balance;
}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

section{position:relative;}
.pad{padding:132px 0;}
@media (max-width:900px){ .pad{padding:88px 0;} }

.kicker{
  font-family:"IBM Plex Mono",monospace;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brown); font-weight:500; display:flex; align-items:center; gap:10px;
  margin-bottom:22px;
}
.kicker::before{content:""; width:26px; height:1px; background:var(--brown);}
section.on-navy .kicker{color:var(--brown-soft);}
section.on-navy .kicker::before{background:var(--brown-soft);}

.num-mark{
  font-family:"Fraunces",serif; font-weight:400; font-size:15vw; line-height:1;
  position:absolute; top:.02em; right:2%; color:var(--ink); opacity:.05;
  pointer-events:none; user-select:none;
}
section.on-navy .num-mark{color:var(--on-navy); opacity:.06;}
/* first section on each subpage carries extra top padding to clear the fixed header —
   its num-mark must shift down by the same amount or it renders hidden behind the header */
.pad.page-head{padding-top:176px;}
.pad.page-head .num-mark{top:176px;}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(30px); transition:opacity 1s cubic-bezier(.16,.8,.24,1), transform 1s cubic-bezier(.16,.8,.24,1);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal.d1.in{transition-delay:.08s;}
.reveal.d2.in{transition-delay:.16s;}
.reveal.d3.in{transition-delay:.24s;}
.reveal.d4.in{transition-delay:.32s;}

/* ---------- nav ---------- */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(243,235,221,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
header.site.scrolled{border-color:var(--line);}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; gap:20px;}
.brandmark{display:flex; align-items:center; gap:10px;}
.brandmark img{width:124px; height:auto; object-fit:contain;}
nav.primary{display:flex; gap:6px; font-size:13.5px; font-weight:500; color:var(--ink-soft); flex:1; justify-content:center;}
nav.primary a{padding:8px 16px; border-radius:999px; transition:background-color .18s, color .18s; white-space:nowrap;}
nav.primary a:hover{background:rgba(37,26,16,.08); color:var(--brown-deep);}
.nav-right{display:flex; align-items:center; gap:14px;}
.nav-cta{
  border:1px solid var(--ink); color:var(--ink);
  padding:9px 18px; border-radius:99px; font-size:13px; font-weight:600; white-space:nowrap;
}

/* ---------- mobile menu toggle + panel ---------- */
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:36px; height:36px; border:none; background:transparent; cursor:pointer; padding:0; flex-shrink:0;
}
.menu-toggle span{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease;}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  display:none; flex-direction:column; padding:6px 20px 22px; gap:2px;
  border-top:1px solid var(--line); background:var(--cream);
  box-shadow:0 16px 28px rgba(37,26,16,.1);
}
.mobile-nav a{padding:13px 10px; font-size:14.5px; font-weight:500; color:var(--ink-soft); border-radius:10px; transition:background-color .15s, color .15s;}
.mobile-nav a:active{background:rgba(37,26,16,.08); color:var(--brown-deep);}
.mobile-nav-divider{height:1px; background:var(--line); margin:10px 10px;}
.mobile-nav-bottom{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:4px 10px 0;}
.mobile-nav-bottom .nav-cta{flex-shrink:0;}
header.site.menu-open .mobile-nav{display:flex;}

@media (max-width:980px){
  nav.primary{display:none;}
  .nav-right > .lang-toggle, .nav-right > .nav-cta{display:none;}
  .menu-toggle{display:flex;}
}

/* ---------- language toggle ---------- */
.lang-toggle{display:flex; align-items:center; border:1px solid var(--line); border-radius:99px; padding:3px; gap:2px; flex-shrink:0;}
.lang-toggle .lg-btn{
  border:none; background:transparent; font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  font-weight:600; letter-spacing:.04em; padding:6px 13px; border-radius:99px; color:var(--ink-soft); cursor:pointer;
}
.lang-toggle .lg-btn.active{background:var(--ink); color:var(--cream);}

/* ---------- HERO ---------- */
.hero{padding:0; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden;}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media img{filter:saturate(1.02); object-position:56% 62%;}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,45,67,.05) 0%, rgba(20,45,67,.05) 45%, rgba(37,26,16,.62) 92%, rgba(37,26,16,.74) 100%);
}
.hero-content{position:relative; z-index:2; width:100%; padding:0 0 88px;}
.hero-content .wrap{max-width:1180px;}
.hero-eyebrow{
  font-family:"IBM Plex Mono",monospace; color:#fff; font-size:12.5px;
  letter-spacing:.18em; text-transform:uppercase; opacity:.86; margin-bottom:22px;
}
.hero h1{color:#fff; font-size:clamp(34px,5.4vw,68px); max-width:16ch;}
.hero p.lede{color:rgba(255,255,255,.86); font-size:17px; max-width:46ch; margin-top:22px;}
.scrolldown{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:2;
  color:#fff; opacity:.7; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.14em; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scrolldown .line{width:1px; height:34px; background:rgba(255,255,255,.6); animation:sd 1.8s ease-in-out infinite;}
@keyframes sd{0%{transform:scaleY(.3); opacity:.2;} 50%{transform:scaleY(1); opacity:.9;} 100%{transform:scaleY(.3); opacity:.2;}}

/* ---------- stat strip ---------- */
.statstrip{background:var(--navy); color:var(--on-navy);}
.statstrip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.statstrip .cell{padding:36px 28px; border-right:1px solid var(--line-navy);}
.statstrip .cell:last-child{border-right:none;}
.statstrip .cell .v{font-family:"Fraunces",serif; font-size:28px; font-weight:500;}
.statstrip .cell .k{margin-top:8px; font-size:12.5px; color:var(--on-navy-soft); line-height:1.5;}
@media (max-width:900px){
  .statstrip .wrap{grid-template-columns:repeat(2,1fr);}
  .statstrip .cell{border-bottom:1px solid var(--line-navy);}
  .statstrip .cell:nth-child(2n){border-right:none;}
}

/* ---------- company ---------- */
.company-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:start;}
.company-grid h2{font-size:clamp(28px,3.6vw,42px); max-width:15ch;}
.company-grid p{color:var(--ink-soft); font-size:15.5px; max-width:52ch; margin-top:20px;}
.ceo-card{
  background:var(--cream-2); border:1px solid var(--line); border-radius:16px;
  padding:30px 30px 26px; box-shadow:var(--shadow);
}
.ceo-card .role{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--brown);}
.ceo-card h3{font-size:22px; margin-top:8px;}
.ceo-card ul{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px;}
.ceo-card li{font-size:13.5px; color:var(--ink-soft); padding-left:16px; position:relative;}
.ceo-card li::before{content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--brown);}
@media (max-width:900px){ .company-grid{grid-template-columns:1fr;} }

/* ---------- product category teaser (home) ---------- */
.category-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:56px;}
.category-card{background:var(--cream-2); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;}
.category-card .cimg{position:relative; overflow:hidden; aspect-ratio:4/5;}
.category-card .cimg img{width:100%; height:100%; object-fit:cover; object-position:center; position:relative; z-index:1;}
.category-card .cimg picture{display:block; width:100%; height:100%;}
@media (min-width:601px){
  .category-card .cimg{aspect-ratio:16/9;}
}
.category-card .cbody{padding:28px 26px 32px;}
.category-card .ctag{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--brown);}
.category-card h3{font-size:23px; margin-top:10px;}
.category-card p{color:var(--ink-soft); font-size:14px; margin-top:12px; max-width:46ch;}
.category-card .clink{display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:13.5px; font-weight:700; color:var(--brown-deep);}
.category-card .clink .arrow{transition:transform .2s;}
.category-card:hover .clink .arrow{transform:translateX(4px);}
@media (max-width:900px){ .category-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .category-grid{grid-template-columns:1fr;} }

/* ---------- product sections ---------- */
.product-hero{
  display:grid; grid-template-columns:1fr; border-radius:22px; overflow:hidden;
  box-shadow:var(--shadow); margin-top:52px; position:relative;
}
.product-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--bgimg); background-size:cover; background-position:center;
  filter:blur(38px) saturate(1.15) brightness(.94); transform:scale(1.2);
}
.product-hero img{height:56vh; min-height:380px; max-height:620px; object-fit:contain; background:transparent; position:relative; z-index:1;}
.product-head{max-width:64ch;}
.product-head h2{font-size:clamp(30px,4vw,48px);}
.product-head p.lede{margin-top:20px; font-size:16.5px; color:var(--ink-soft); max-width:58ch;}
section.on-navy .product-head p.lede{color:var(--on-navy-soft);}

.problem-solution{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:64px;
  background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.problem-solution > div{background:var(--cream-2); padding:34px 32px;}
.problem-solution h4{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 18px;
}
.problem-solution .problem h4{color:var(--ink-faint);}
.problem-solution .solution h4{color:var(--brown);}
.problem-solution ul{margin:0; padding:0; list-style:none; display:grid; gap:13px;}
.problem-solution li{font-size:14.5px; color:var(--ink-soft); padding-left:18px; position:relative;}
.problem-solution .problem li::before{content:"\2013"; position:absolute; left:0; color:var(--ink-faint);}
.problem-solution .solution li::before{content:"+"; position:absolute; left:0; color:var(--brown); font-weight:700;}
.problem-solution .solution li strong{color:var(--ink); font-weight:700;}
@media (max-width:760px){ .problem-solution{grid-template-columns:1fr;} }

.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px;}
.feature-card{
  background:var(--cream-2); border:1px solid var(--line); border-radius:14px; padding:26px 24px;
}
section.on-navy .feature-card{background:var(--navy-2); border-color:var(--line-navy);}
.feature-card .fi{
  width:38px; height:38px; border-radius:10px; background:var(--brown); color:var(--cream);
  display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600;
  margin-bottom:16px;
}
.feature-card h4{font-size:16px; font-family:"Inter",sans-serif; font-weight:700; margin:0 0 8px;}
.feature-card p{font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.55;}
section.on-navy .feature-card p{color:var(--on-navy-soft);}
section.on-navy .feature-card h4{color:var(--on-navy);}
@media (max-width:900px){ .feature-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .feature-grid{grid-template-columns:1fr;} }

.media-duo{display:grid; grid-template-columns:1.3fr 1fr; gap:22px; margin-top:56px;}
.media-duo .m{border-radius:16px; overflow:hidden; box-shadow:var(--shadow); background:var(--cream-2); position:relative;}
.media-duo .m::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--bgimg); background-size:cover; background-position:center;
  filter:blur(30px) saturate(1.15) brightness(.94); transform:scale(1.2);
}
.media-duo .m img{height:100%; min-height:320px; object-fit:contain; position:relative; z-index:1; background:transparent;}
.media-duo .m.tall img{min-height:420px;}
.media-duo .m .m-badge{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--cream-2); color:var(--ink); font-family:"Inter",sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.01em; padding:6px 14px; border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.14); white-space:nowrap;
}
.media-duo.trio{grid-template-columns:1fr 1fr 1fr;}
.media-duo.quad{grid-template-columns:1fr 1fr;}
@media (max-width:800px){ .media-duo{grid-template-columns:1fr;} }
@media (max-width:980px){ .media-duo.trio{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .media-duo.trio{grid-template-columns:1fr;} }
@media (max-width:640px){ .media-duo.quad{grid-template-columns:1fr;} }

/* ---------- swipeable image carousel ---------- */
.img-carousel{margin-top:52px; border-radius:22px; overflow:hidden; box-shadow:var(--shadow); background:var(--cream-2);}
.img-carousel .ic-viewport{position:relative;}
.img-carousel .ic-track{display:flex; touch-action:pan-y; transition:transform .45s cubic-bezier(.4,0,.2,1);}
.img-carousel .ic-slide{position:relative; flex:0 0 100%; height:56vh; min-height:380px; max-height:620px; overflow:hidden;}
.img-carousel .ic-slide::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--bgimg); background-size:cover; background-position:center;
  filter:blur(38px) saturate(1.15) brightness(.94); transform:scale(1.2);
}
.img-carousel .ic-slide img{width:100%; height:100%; object-fit:contain; position:relative; z-index:1; background:transparent;}
.img-carousel .ic-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:none; background:rgba(250,249,245,.88); color:var(--ink); font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
  box-shadow:0 2px 10px rgba(0,0,0,.15); transition:background .15s, transform .15s;
}
.img-carousel .ic-nav:hover{background:#fff; transform:translateY(-50%) scale(1.06);}
.img-carousel .ic-nav.prev{left:16px;}
.img-carousel .ic-nav.next{right:16px;}
.img-carousel .ic-dots{position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:2;}
.img-carousel .ic-dot{width:8px; height:8px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; transition:background .15s, width .15s;}
.img-carousel .ic-dot.active{background:#fff; width:22px; border-radius:4px;}
.img-carousel .ic-caption{
  position:relative; display:none;
  font-size:12.5px; line-height:1.55; color:var(--ink-soft); background:var(--cream-2);
  padding:14px 20px; border-top:1px solid var(--line);
}
@media (max-width:640px){
  .img-carousel .ic-slide{height:46vh; min-height:280px;}
  .img-carousel .ic-nav{width:36px; height:36px; font-size:18px;}
  .img-carousel .ic-caption{font-size:11.5px; padding:12px 16px;}
}

/* Standalone framed diagram (e.g. the shower filter's labeled "How It Works" photo):
   same blurred-background + contained-image treatment as .product-hero / .ic-slide,
   sized independently of the image's own aspect ratio. */
.diagram-frame{
  position:relative; margin-top:28px; border-radius:22px; overflow:hidden;
  box-shadow:var(--shadow); background:var(--cream-2);
  height:56vh; min-height:380px; max-height:620px;
}
.diagram-frame::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--bgimg); background-size:cover; background-position:center;
  filter:blur(38px) saturate(1.15) brightness(.94); transform:scale(1.2);
}
@media (max-width:640px){
  .diagram-frame{height:46vh; min-height:300px;}
}

/* Annotated diagram: a wrapper locked to the source photo's own aspect ratio so the
   SVG lines and label pills (positioned by percentage) always land on the same pixels as the
   photo, regardless of any letterboxing object-fit:contain adds around it. */
.ic-slide .ic-annotated, .diagram-frame .ic-annotated{position:absolute; inset:0; margin:auto; aspect-ratio:1470/1070; max-width:100%; max-height:100%; z-index:1;}
.ic-slide .ic-annotated img, .diagram-frame .ic-annotated img{width:100%; height:100%; object-fit:contain;}
.ic-annot-svg{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;}
.ic-annot-labels{position:absolute; inset:0; z-index:3; pointer-events:none;}
.ic-annot-label{
  position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:6px;
  background:var(--cream-2); color:var(--ink); font-family:"Inter",sans-serif; font-weight:700; font-size:13.5px;
  padding:8px 16px; border-radius:999px; box-shadow:0 6px 18px -6px rgba(37,26,16,.35); white-space:nowrap;
}
.ic-annot-label .arrow{color:var(--brown); font-weight:800;}
.ic-annot-label.two-line{flex-direction:column; align-items:flex-start; gap:1px; white-space:normal; line-height:1.35;}
.ic-annot-label.two-line .line2{font-weight:500; color:var(--ink-soft); font-size:.86em;}
@media (max-width:760px){
  .ic-annot-label{font-size:11px; padding:6px 11px; gap:4px;}
}
@media (max-width:480px){
  .ic-annot-label{font-size:9.5px; padding:5px 9px;}
  /* Pull the leftmost/rightmost pills in from the image edges so they clear the
     carousel's prev/next nav buttons at narrow widths. */
  .ic-annot-label.lbl-prefilter{left:26% !important;}
  .ic-annot-label.lbl-postfilter{left:74% !important;}
}

/* filter layer cards */
.layer-row{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px;}
.layer-card{
  background:var(--navy-2); border:1px solid var(--line-navy); border-radius:14px; padding:28px 24px;
  position:relative;
}
.layer-card .li{
  width:100%; height:180px; border-radius:10px; background:#fdfcf9;
  display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:18px;
}
.layer-card .li img{max-width:100%; max-height:92%; object-fit:contain;}
.layer-card .ln{
  font-family:"Fraunces",serif; font-size:34px; color:var(--brown-soft); opacity:.7; margin-bottom:10px;
}
.layer-card h4{color:var(--on-navy); font-size:16.5px; font-family:"Inter",sans-serif; font-weight:700; margin:0 0 14px;}
.layer-card p.desc{color:var(--on-navy-soft); font-size:13px; margin:0 0 14px;}
.layer-card .stat{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--on-navy-soft); padding:8px 0; border-top:1px solid var(--line-navy);}
.layer-card .stat b{color:var(--on-navy); font-family:"IBM Plex Mono",monospace; font-weight:500; white-space:nowrap;}
@media (max-width:900px){ .layer-row{grid-template-columns:1fr;} }

/* install steps */
.install-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:28px;}
.install-step{background:var(--cream-2); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.install-step .ii{height:280px; display:flex; align-items:center; justify-content:center; background:var(--cream-2); overflow:hidden;}
.install-step .ii img{width:100%; height:100%; object-fit:contain;}
.install-step .ib{padding:20px 22px 24px; border-top:1px solid var(--line);}
.install-step h4{font-size:16px; font-family:"Inter",sans-serif; font-weight:700; margin:0 0 8px;}
.install-step p{font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.55;}
@media (max-width:900px){ .install-steps{grid-template-columns:1fr;} }
@media (max-width:640px){ .install-step .ii{height:240px;} }

/* spec table */
.spectable{margin-top:56px; border-top:1px solid var(--line);}
section.on-navy .spectable{border-color:var(--line-navy);}
.spectable .row{
  display:grid; grid-template-columns:220px 1fr; gap:24px; padding:16px 0;
  border-bottom:1px solid var(--line); font-size:14.5px;
}
section.on-navy .spectable .row{border-color:var(--line-navy);}
.spectable .row .k{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);}
section.on-navy .spectable .row .k{color:var(--on-navy-faint);}
.spectable .row .v{color:var(--ink); font-weight:500;}
section.on-navy .spectable .row .v{color:var(--on-navy);}
@media (max-width:640px){ .spectable .row{grid-template-columns:1fr;} }

/* ---------- compare ---------- */
.compare-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:8px; margin-bottom:56px;}
.compare-stats .cs{padding:24px 4px; border-top:1px solid var(--line-navy);}
section:not(.on-navy) .compare-stats .cs{border-color:var(--line);}
.compare-stats .cs .v{font-family:"Fraunces",serif; font-size:24px; color:var(--on-navy); font-weight:500;}
section:not(.on-navy) .compare-stats .cs .v{color:var(--ink);}
.compare-stats .cs .k{margin-top:8px; font-size:12.5px; color:var(--on-navy-soft);}
section:not(.on-navy) .compare-stats .cs .k{color:var(--ink-soft);}
@media (max-width:900px){ .compare-stats{grid-template-columns:repeat(2,1fr);} }

.compare-links{display:flex; gap:30px; margin-top:4px; flex-wrap:wrap;}
.compare-links a{font-size:13.5px; font-weight:600; color:var(--on-navy); border-bottom:1px solid var(--brown-soft); padding-bottom:3px;}
section:not(.on-navy) .compare-links a{color:var(--brown-deep); border-color:var(--brown);}

.cmp-block + .cmp-block{margin-top:76px;}
.cmp-block h3{font-size:20px; font-family:"Inter",sans-serif; font-weight:700; margin-bottom:22px;}
section.on-navy .cmp-block h3{color:var(--on-navy);}
.table-scroll{overflow-x:auto; border-radius:12px; border:1px solid var(--line);}
section.on-navy .table-scroll{border-color:var(--line-navy);}
/* font-size fixed here and text-size-adjust locked to 100% so mobile browsers never auto-shrink
   text differently across pages just because one table's content happens to be wider than another's */
table.cmp{width:100%; border-collapse:collapse; min-width:640px; font-size:13.5px; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
table.cmp th, table.cmp td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; font-size:13.5px;}
section.on-navy table.cmp th, section.on-navy table.cmp td{border-color:var(--line-navy);}
table.cmp th{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500; background:rgba(37,26,16,.03);
}
section.on-navy table.cmp th{color:var(--on-navy-soft); background:rgba(255,255,255,.03);}
table.cmp td{color:var(--ink-soft);}
section.on-navy table.cmp td{color:var(--on-navy-soft);}
table.cmp tr:last-child td{border-bottom:none;}
table.cmp td.hl, table.cmp th.hl{color:var(--brown-deep); background:rgba(121,89,66,.08); font-weight:600;}
section.on-navy table.cmp td.hl, section.on-navy table.cmp th.hl{color:var(--on-navy); background:rgba(199,173,144,.1);}
/* Rows whose content is too long for a single nowrap line: let them wrap across ~2 lines
   instead of forcing the whole table far wider than the viewport on mobile. */
table.cmp td.wrap{white-space:normal; max-width:240px; line-height:1.5;}

/* ---------- principle / performance-first banner ---------- */
.principle-banner{background:var(--brown); color:var(--cream);}
.principle-banner .wrap{padding:100px 32px;}
.principle-banner.mini .wrap{padding:64px 32px;}
@media (max-width:900px){ .principle-banner .wrap{padding:64px 20px;} .principle-banner.mini .wrap{padding:52px 20px;} }
.principle-banner h2, .principle-banner h3{color:var(--cream);}
.principle-banner h2{font-size:clamp(32px,4.4vw,54px); max-width:20ch; margin-top:18px;}
.principle-banner h3{font-size:clamp(22px,2.6vw,30px); max-width:24ch;}
.principle-banner p.sub{color:rgba(243,235,221,.84); margin-top:18px; max-width:62ch; font-size:15.5px;}
.principle-banner.mini p.sub{font-size:14.5px;}
.principle-banner .kicker{color:rgba(243,235,221,.85);}
.principle-banner .kicker::before{background:rgba(243,235,221,.85);}
.principle-row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:44px;}
.principle-row .pi{border-top:1px solid rgba(243,235,221,.25); padding-top:18px;}
.principle-row .pi .v{font-family:"Fraunces",serif; font-size:21px; color:var(--cream);}
.principle-row .pi .k{margin-top:8px; font-size:12.5px; color:rgba(243,235,221,.72); line-height:1.5;}
@media (max-width:900px){ .principle-row{grid-template-columns:repeat(2,1fr);} }

.note-line{margin-top:22px; font-size:13px; color:var(--ink-faint); max-width:70ch;}
section.on-navy .note-line{color:var(--on-navy-faint);}
.principle-banner .note-line{color:rgba(243,235,221,.68);}

.pagelink{display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-size:13.5px; font-weight:700; color:var(--brown-deep);}

/* ---------- page table-of-contents (prologue) ---------- */
.page-toc{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:40px; padding-top:26px; border-top:1px solid var(--line);}
.page-toc .ptoc-label{display:block; width:100%; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin-right:6px; margin-bottom:12px;}
.page-toc a{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink-soft); padding:8px 15px; border:1px solid var(--line); border-radius:99px; transition:border-color .15s, color .15s, background .15s;}
.page-toc a:hover{border-color:var(--brown); color:var(--brown); background:var(--cream-2);}
.page-toc a .tn{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-faint);}
@media (max-width:640px){ .page-toc{gap:8px 10px;} .page-toc a{padding:7px 12px; font-size:12px;} }

/* ---------- trust / certs ---------- */
.cert-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; align-items:stretch; gap:16px; margin-top:52px;}
.cert-tile{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  border:1px solid var(--line); border-radius:12px; padding:20px 16px; text-align:center;
  background:var(--cream-2);
}
.cert-tile .t{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600; color:var(--ink); letter-spacing:.02em; word-break:keep-all; overflow-wrap:break-word;}
.cert-tile .s{margin-top:6px; font-size:11.5px; color:var(--ink-faint); word-break:keep-all; overflow-wrap:break-word;}
@media (max-width:900px){ .cert-grid{grid-template-columns:repeat(2,1fr);} }

.patent-note{
  margin-top:36px; padding:22px 26px; border-left:3px solid var(--brown);
  background:var(--cream-2); border-radius:0 12px 12px 0; font-size:13.5px; color:var(--ink-soft); max-width:74ch;
}

.cta-row{
  margin-top:88px; padding-top:56px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1.2fr .8fr; gap:52px;
}
.cta-row h3{font-size:clamp(24px,3vw,32px); max-width:16ch;}
.cta-row .quote{font-family:"Fraunces",serif; font-style:normal; font-size:18px; color:var(--brown-deep); margin-top:16px; max-width:34ch;}
.contact-card{background:var(--navy); color:var(--on-navy); border-radius:16px; padding:30px 30px 26px;}
.contact-card .r{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line-navy); font-size:13.5px;}
.contact-card .r:last-child{border-bottom:none;}
.contact-card .r .k{color:var(--on-navy-soft);}
.contact-card .r .v{color:var(--on-navy); text-align:right; font-family:"IBM Plex Mono",monospace; font-size:12.5px;}
.contact-card .btn{
  display:block; text-align:center; margin-top:20px; background:var(--brown-soft); color:var(--navy-3);
  padding:13px; border-radius:8px; font-weight:700; font-size:13.5px;
}
.copy-hint{
  display:block; text-align:center; margin-top:12px; font-size:12px; color:var(--brown-soft);
  opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s; pointer-events:none;
}
.copy-hint.show{opacity:1; transform:translateY(0);}
@media (max-width:900px){ .cta-row{grid-template-columns:1fr;} }

/* ---------- footer ---------- */
footer{background:var(--navy-3); color:var(--on-navy-soft); padding:56px 0 30px;}
footer .fgrid{display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; gap:clamp(48px,14vw,180px);}
footer .flogo img{width:96px; opacity:.92;}
footer .fnote{font-size:12px; max-width:44ch; margin-top:14px; color:var(--on-navy-faint); line-height:1.6;}
footer .flinks{display:flex; gap:68px; flex-wrap:wrap;}
footer .flinks h5{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-navy-faint); margin:0 0 12px;
}
footer .flinks a, footer .flinks div{display:block; font-size:13px; color:var(--on-navy-soft); margin-bottom:8px;}
footer .fbottom{
  margin-top:48px; padding-top:22px; border-top:1px solid var(--line-navy);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:11.5px; color:var(--on-navy-faint);
}