/* ==========================================================================
   Cloubay — Custom Gift Packaging
   Design notes:
   Palette learned from the strongest players in the category —
   noissue's warm paper neutrals (#f7f1ec family), Better Package's deep
   ink navy (#001c38) and EPACK's navy + accent. Type is deliberately
   system-common: Georgia for display, Helvetica/Arial stack for UI.
   ========================================================================== */

:root{
  /* ink */
  --ink:        #16303c;
  --ink-deep:   #0d1f27;
  --ink-soft:   #2c4a57;

  /* paper */
  --paper:      #f5f0e7;
  --paper-2:    #ece4d6;
  --paper-3:    #e2d8c6;
  --white:      #ffffff;

  /* accents */
  --brass:      #9c7736;
  --brass-lt:   #bb9553;
  --kraft:      #c3a077;
  --clay:       #96452f;

  /* text */
  --text:       #23272a;
  --text-2:     #55575a;
  --muted:      #7a776f;
  --line:       #ddd4c3;
  --line-soft:  #ebe4d8;

  --maxw: 1240px;
  --serif: Georgia, "Times New Roman", Times, "Songti SC", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial,
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; color:var(--ink); margin:0; letter-spacing:-.01em}
h1{font-size:clamp(34px,4.6vw,58px); line-height:1.08}
h2{font-size:clamp(26px,3vw,40px); line-height:1.16}
h3{font-size:20px; line-height:1.3}
p{margin:0 0 1em}
hr{border:0; border-top:1px solid var(--line); margin:0}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.wrap-wide{max-width:1480px; margin:0 auto; padding:0 28px}

/* ---------- small type utilities ---------- */
.eyebrow{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); font-weight:700; margin:0 0 14px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--brass); flex:none}
.eyebrow.center{justify-content:center}
.lede{font-size:17px; color:var(--text-2); max-width:62ch}
.small{font-size:13px; color:var(--muted)}
.mono{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  padding:14px 26px; border-radius:2px; border:1px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{background:var(--brass)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:#fff}
.btn-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.btn-light:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn-brass{background:var(--brass); color:#fff}
.btn-brass:hover{background:var(--ink)}
.btn-sm{padding:10px 18px; font-size:11px}
.arrow{font-family:var(--sans); font-size:14px; line-height:1}

.link-underline{
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  border-bottom:1px solid var(--brass); padding-bottom:3px; color:var(--ink);
  display:inline-block;
}
.link-underline:hover{color:var(--brass)}

/* ==========================================================================
   Header
   ========================================================================== */
.topbar{background:var(--ink-deep); color:#cfd8db; font-size:12px}
.topbar .wrap-wide{display:flex; justify-content:space-between; align-items:center; height:38px; gap:20px}
.topbar a:hover{color:#fff}
.topbar-l{display:flex; gap:26px; align-items:center}
.topbar-r{display:flex; gap:20px; align-items:center}
.topbar .dot{color:var(--brass-lt)}

.site-header{
  position:sticky; top:0; z-index:60; background:var(--white);
  border-bottom:1px solid var(--line-soft);
}
.site-header .wrap-wide{display:flex; align-items:center; gap:34px; height:78px}

.logo{display:flex; align-items:center; gap:11px; flex:none}
.logo svg{flex:none}
.logo-word{
  font-family:var(--serif); font-size:25px; letter-spacing:.055em;
  color:var(--ink); line-height:1;
}
.logo-sub{
  display:block; font-family:var(--sans); font-size:8.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted); margin-top:4px;
}

.nav{display:flex; gap:30px; margin-left:12px}
.nav > a{
  font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--text);
  padding:8px 0; border-bottom:2px solid transparent;
}
.nav > a:hover,.nav > a.active{color:var(--ink); border-bottom-color:var(--brass)}
.header-actions{margin-left:auto; display:flex; align-items:center; gap:18px}
.header-phone{font-size:13px; color:var(--text-2)}
.header-phone strong{color:var(--ink); font-weight:600}

.burger{display:none; background:none; border:1px solid var(--line); border-radius:2px;
  width:42px; height:38px; cursor:pointer; padding:0; align-items:center; justify-content:center}
.burger span{display:block; width:18px; height:1.5px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{background:var(--paper); position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:600px}
.hero-copy{padding:88px 60px 88px 0; display:flex; flex-direction:column; justify-content:center}
.hero-copy .wrapin{max-width:620px; margin-left:auto; padding-right:20px}
.hero h1{margin-bottom:22px}
.hero h1 em{font-style:italic; color:var(--brass)}
.hero-lede{font-size:17.5px; color:var(--text-2); margin-bottom:30px; max-width:48ch}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px}
.hero-facts{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding-top:26px; border-top:1px solid var(--line)}
.hero-fact b{display:block; font-family:var(--serif); font-size:26px; color:var(--ink); line-height:1.1}
.hero-fact span{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); display:block; margin-top:4px}
.hero-media{position:relative; background:var(--paper-2)}
.hero-media img{width:100%; height:100%; object-fit:cover; min-height:600px}
.hero-badge{
  position:absolute; left:-46px; bottom:52px; background:var(--white);
  border:1px solid var(--line); padding:20px 24px; max-width:290px; border-radius:2px;
  box-shadow:0 18px 40px rgba(22,48,60,.09);
}
.hero-badge b{display:block; font-family:var(--serif); font-size:17px; color:var(--ink); margin-bottom:5px}
.hero-badge p{margin:0; font-size:13px; color:var(--text-2); line-height:1.55}

/* ---------- logo strip ---------- */
.trust{background:var(--white); border-bottom:1px solid var(--line-soft)}
.trust .wrap{display:flex; align-items:center; gap:44px; padding-top:26px; padding-bottom:26px; flex-wrap:wrap}
.trust-label{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); flex:none}
.trust-items{display:flex; gap:40px; flex-wrap:wrap; align-items:center}
.trust-items span{
  font-family:var(--serif); font-size:19px; color:#9d9a94; letter-spacing:.09em;
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{padding:96px 0}
.section-tight{padding:70px 0}
.section-paper{background:var(--paper)}
.section-paper-2{background:var(--paper-2)}
.section-ink{background:var(--ink); color:#dfe6e9}
.section-ink h2,.section-ink h3{color:#fff}
.section-ink .lede{color:#b7c4c9}
.section-ink .eyebrow{color:var(--brass-lt)}
.section-ink .eyebrow::before{background:var(--brass-lt)}

.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:44px}
.sec-head.center{flex-direction:column; align-items:center; text-align:center; margin-bottom:52px}
.sec-head h2{max-width:20ch}
.sec-head.center h2{max-width:26ch}
.sec-head .lede{max-width:44ch}

/* ---------- categories ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.cat{background:var(--white); padding:0; position:relative; overflow:hidden; display:block}
.cat-img{aspect-ratio:4/3; overflow:hidden; background:var(--paper-2)}
.cat-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.cat:hover .cat-img img{transform:scale(1.045)}
.cat-body{padding:22px 24px 26px}
.cat-body h3{font-size:19px; margin-bottom:6px}
.cat-body p{font-size:13.5px; color:var(--text-2); margin:0 0 12px; line-height:1.55}
.cat-body .go{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); font-weight:700}

/* ---------- product cards ---------- */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px}
.prod-grid-3{grid-template-columns:repeat(3,1fr)}
.prod{background:var(--white); border:1px solid var(--line-soft); border-radius:2px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, box-shadow .25s, transform .25s}
.prod:hover{border-color:var(--line); box-shadow:0 14px 34px rgba(22,48,60,.08); transform:translateY(-2px)}
.prod-img{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--paper-2)}
.prod-img img{width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.prod:hover .prod-img img{transform:scale(1.05)}
.tag{
  position:absolute; top:12px; left:12px; background:rgba(255,255,255,.94);
  border:1px solid var(--line); color:var(--ink); font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:5px 9px; border-radius:2px;
}
.tag-brass{background:var(--brass); border-color:var(--brass); color:#fff}
.prod-body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1}
.prod-sku{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.prod-body h3{font-size:16.5px; line-height:1.32; margin-bottom:8px}
.prod:hover .prod-body h3{color:var(--brass)}
.prod-meta{font-size:12.5px; color:var(--text-2); line-height:1.5; margin-bottom:14px; flex:1}
.prod-foot{display:flex; align-items:baseline; justify-content:space-between; gap:10px; border-top:1px solid var(--line-soft); padding-top:13px}
.price{font-family:var(--serif); font-size:19px; color:var(--ink)}
.price small{font-family:var(--sans); font-size:11.5px; color:var(--muted); margin-left:3px}
.moq{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

/* ---------- capability / finish tiles ---------- */
.tile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.tile{background:var(--white); border:1px solid var(--line-soft); border-radius:2px; overflow:hidden}
.tile img{aspect-ratio:16/10; object-fit:cover; width:100%}
.tile-body{padding:20px 22px 24px}
.tile-body h3{font-size:17px; margin-bottom:7px}
.tile-body p{font-size:13.5px; color:var(--text-2); margin:0; line-height:1.6}

.swatch-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.swatch{text-align:center}
.swatch img{aspect-ratio:1/1; object-fit:cover; border:1px solid var(--line); border-radius:2px}
.swatch span{display:block; margin-top:10px; font-size:12px; color:var(--text-2)}

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid rgba(255,255,255,.16)}
.step{padding:32px 26px 8px; border-right:1px solid rgba(255,255,255,.16)}
.step:last-child{border-right:0}
.step b{display:block; font-family:var(--serif); font-size:14px; color:var(--brass-lt); margin-bottom:16px; letter-spacing:.1em}
.step h3{font-size:17px; margin-bottom:9px}
.step p{font-size:13.5px; color:#a9b8be; margin:0; line-height:1.6}

/* ---------- split feature ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:center}
.split-media img{width:100%; height:100%; object-fit:cover; min-height:480px}
.split-copy{padding:0 0 0 72px}
.split-copy h2{margin-bottom:18px}
.split-copy .eyebrow{margin-bottom:16px}
.split.rev .split-copy{padding:0 72px 0 0; order:-1}
.checks{list-style:none; padding:0; margin:26px 0 30px}
.checks li{position:relative; padding-left:26px; margin-bottom:12px; font-size:14.5px; color:var(--text-2)}
.checks li::before{
  content:""; position:absolute; left:0; top:9px; width:9px; height:9px;
  border:1px solid var(--brass); border-radius:50%;
}
.checks li strong{color:var(--ink); font-weight:600}

/* ---------- cases ---------- */
.case-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.case{background:var(--white); border:1px solid var(--line-soft); border-radius:2px; overflow:hidden}
.case img{aspect-ratio:4/3; object-fit:cover; width:100%}
.case-body{padding:24px}
.case-client{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--brass); font-weight:700; margin-bottom:9px}
.case-body h3{font-size:18px; margin-bottom:10px; line-height:1.35}
.case-body p{font-size:13.5px; color:var(--text-2); line-height:1.6; margin:0 0 16px}
.spec-mini{border-top:1px solid var(--line-soft); padding-top:14px; font-size:12.5px; color:var(--muted); line-height:1.7}
.spec-mini b{color:var(--ink); font-weight:600}

/* ---------- testimonials ---------- */
.quote-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px}
.quote blockquote{margin:0 0 20px; font-family:var(--serif); font-size:18.5px; line-height:1.55; color:var(--ink)}
.quote .who{font-size:13px; color:var(--text-2)}
.quote .who b{display:block; color:var(--ink); font-weight:600; font-size:13.5px}
.stars{color:var(--brass); letter-spacing:2px; font-size:13px; margin-bottom:14px}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:24px 40px 24px 0; position:relative;
  font-family:var(--serif); font-size:18px; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:22px; font-family:var(--sans);
  font-size:20px; color:var(--brass); font-weight:300;
}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 60px 26px 0; font-size:14.5px; color:var(--text-2); line-height:1.75}

/* ==========================================================================
   Quote band + Footer
   ========================================================================== */
.band{background:var(--paper-2); border-top:1px solid var(--line)}
.band .wrap{display:flex; align-items:center; justify-content:space-between; gap:44px; padding:56px 28px}
.band h2{margin-bottom:8px}
.band p{margin:0; color:var(--text-2); max-width:52ch}
.band-cta{display:flex; gap:14px; flex:none; flex-wrap:wrap}

.site-footer{background:var(--ink-deep); color:#9fb0b7; padding:72px 0 0; font-size:13.5px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr; gap:44px; padding-bottom:56px}
.site-footer h4{color:#fff; font-family:var(--sans); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; margin:0 0 20px; font-weight:700}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin-bottom:11px}
.site-footer a:hover{color:#fff}
.foot-about p{color:#9fb0b7; line-height:1.75; margin:0 0 20px; max-width:34ch}
.foot-logo .logo-word{color:#fff}
.foot-logo .logo-sub{color:#7d8f97}
.foot-contact li{color:#c3d0d5; line-height:1.6}
.foot-contact b{color:#fff; font-weight:600}
.socials{display:flex; gap:10px; margin-top:20px}
.socials a{width:34px; height:34px; border:1px solid rgba(255,255,255,.22); border-radius:2px;
  display:flex; align-items:center; justify-content:center; font-size:11px; letter-spacing:.04em}
.socials a:hover{background:#fff; color:var(--ink-deep); border-color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12); padding:22px 0; display:flex;
  justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:12.5px; color:#7d8f97}
.foot-bottom .pay{display:flex; gap:12px}
.foot-bottom .pay span{border:1px solid rgba(255,255,255,.2); padding:3px 9px; border-radius:2px; font-size:11px}

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */
.pagehead{background:var(--paper); border-bottom:1px solid var(--line); padding:52px 0 56px}
.crumb{font-size:12px; color:var(--muted); margin-bottom:18px}
.crumb a:hover{color:var(--brass)}
.crumb span{margin:0 8px; color:var(--line)}
.pagehead h1{font-size:clamp(30px,3.6vw,46px); max-width:20ch; margin-bottom:14px}
.pagehead .lede{max-width:64ch}

/* ==========================================================================
   Catalog
   ========================================================================== */
.catalog{display:grid; grid-template-columns:250px 1fr; gap:52px; align-items:start}
.filters{position:sticky; top:100px}
.filter-group{border-bottom:1px solid var(--line-soft); padding-bottom:22px; margin-bottom:22px}
.filter-group:last-child{border-bottom:0}
.filter-group h4{font-family:var(--sans); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink); margin:0 0 14px; font-weight:700}
.filter-group label{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-2);
  margin-bottom:9px; cursor:pointer}
.filter-group input{accent-color:var(--brass); width:14px; height:14px; margin:0}
.filter-group label:hover{color:var(--ink)}
.catalog-bar{display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding-bottom:20px; margin-bottom:26px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap}
.catalog-bar .count{font-size:13.5px; color:var(--muted)}
.catalog-bar select{
  font-family:var(--sans); font-size:13px; color:var(--ink); padding:9px 12px;
  border:1px solid var(--line); border-radius:2px; background:var(--white); cursor:pointer;
}
.chip-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.chip{border:1px solid var(--line); background:var(--white); border-radius:2px; padding:7px 14px;
  font-size:12px; color:var(--text-2); cursor:pointer; font-family:var(--sans)}
.chip:hover{border-color:var(--brass); color:var(--ink)}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.empty{padding:70px 0; text-align:center; color:var(--muted)}

/* ==========================================================================
   Product detail
   ========================================================================== */
.pdp{display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:start}
.gallery-main{border:1px solid var(--line-soft); background:var(--paper); border-radius:2px; overflow:hidden}
.gallery-main img{width:100%; aspect-ratio:1/1; object-fit:cover}
.thumbs{display:flex; gap:12px; margin-top:14px}
.thumbs button{border:1px solid var(--line-soft); background:none; padding:0; width:84px; height:84px;
  cursor:pointer; border-radius:2px; overflow:hidden}
.thumbs button.on{border-color:var(--brass)}
.thumbs img{width:100%; height:100%; object-fit:cover}
.pdp h1{font-size:clamp(28px,3.2vw,40px); margin-bottom:14px}
.pdp-sku{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.pdp-price{display:flex; align-items:baseline; gap:14px; padding:18px 0; border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft); margin:22px 0 26px}
.pdp-price .big{font-family:var(--serif); font-size:34px; color:var(--ink)}
.pdp-price .unit{font-size:13px; color:var(--muted)}
.spec-table{width:100%; border-collapse:collapse; margin:0 0 28px}
.spec-table th,.spec-table td{text-align:left; padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:14px; vertical-align:top}
.spec-table th{width:38%; color:var(--muted); font-weight:400; font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding-top:15px}
.spec-table td{color:var(--text)}
.pdp-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px}
.pdp-note{background:var(--paper); border:1px solid var(--line); border-radius:2px; padding:18px 20px;
  font-size:13.5px; color:var(--text-2); line-height:1.7}
.pdp-note b{color:var(--ink)}
.tabs{display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:30px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none; border:0; border-bottom:2px solid transparent; padding:14px 22px 13px;
  font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); cursor:pointer; white-space:nowrap; flex:none}
.tabs button.on{color:var(--ink); border-bottom-color:var(--brass)}
.tabpanel{display:none} .tabpanel.on{display:block}
.rte{max-width:78ch; font-size:15px; color:var(--text-2); line-height:1.8}
.rte h3{margin:28px 0 12px}
.rte ul{padding-left:20px; margin:0 0 16px}
.rte li{margin-bottom:8px}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:14.5px; color:var(--text); padding:12px 14px;
  border:1px solid var(--line); border-radius:2px; background:var(--white); width:100%;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--brass)}
.form-note{font-size:12.5px; color:var(--muted); margin-top:4px}
.form-card{background:var(--white); border:1px solid var(--line); border-radius:2px; padding:38px 40px}
.contact-grid{display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:start}
.info-block{border-bottom:1px solid var(--line-soft); padding-bottom:22px; margin-bottom:22px}
.info-block:last-child{border-bottom:0; margin-bottom:0}
.info-block h4{font-family:var(--sans); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--brass); margin:0 0 10px; font-weight:700}
.info-block p{margin:0; font-size:14.5px; color:var(--text-2); line-height:1.7}
.info-block b{color:var(--ink); font-weight:600}
.ok-msg{background:#f0f5f1; border:1px solid #c5d9cb; color:#2c5138; padding:14px 16px;
  border-radius:2px; font-size:14px; margin-bottom:20px}

/* ==========================================================================
   About stats
   ========================================================================== */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.16)}
.stat{background:var(--ink); padding:34px 28px}
.stat b{display:block; font-family:var(--serif); font-size:40px; color:#fff; line-height:1}
.stat span{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#9fb6bf; margin-top:9px; display:block}
.timeline{list-style:none; padding:0; margin:0; border-left:1px solid var(--line)}
.timeline li{padding:0 0 34px 30px; position:relative}
.timeline li::before{content:""; position:absolute; left:-4.5px; top:8px; width:8px; height:8px;
  background:var(--brass); border-radius:50%}
.timeline b{display:block; font-family:var(--serif); font-size:19px; color:var(--ink); margin-bottom:6px}
.timeline p{margin:0; font-size:14px; color:var(--text-2); line-height:1.7}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1120px){
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr 1fr; gap:36px}
  .swatch-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .nav{display:none}
  .header-phone{display:none}
  .burger{display:flex}
  .site-header .wrap-wide{height:66px}
  .nav.open{display:flex; position:absolute; top:66px; left:0; right:0; background:#fff;
    flex-direction:column; gap:0; padding:8px 28px 20px; border-bottom:1px solid var(--line);
    box-shadow:0 16px 30px rgba(22,48,60,.08)}
  .nav.open > a{padding:13px 0; border-bottom:1px solid var(--line-soft); border-bottom-width:1px}
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:56px 0 48px}
  .hero-copy .wrapin{margin:0 auto; max-width:var(--maxw); padding:0 28px}
  .hero-media img{min-height:340px}
  .hero-facts{grid-template-columns:repeat(2,1fr); gap:22px}
  .hero-badge{display:none}
  .split{grid-template-columns:1fr}
  .split-copy,.split.rev .split-copy{padding:40px 28px 8px; order:0}
  .split-media img{min-height:320px}
  .steps{grid-template-columns:1fr 1fr}
  .step{border-bottom:1px solid rgba(255,255,255,.16)}
  .case-grid,.quote-grid,.tile-grid{grid-template-columns:1fr 1fr}
  .catalog{grid-template-columns:1fr; gap:28px}
  .filters{position:static}
  .pdp{grid-template-columns:1fr; gap:38px}
  .contact-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .band .wrap{flex-direction:column; align-items:flex-start; gap:24px}
  .section{padding:64px 0}
}
@media (max-width:680px){
  .wrap,.wrap-wide{padding:0 20px}
  .prod-grid,.prod-grid-3{grid-template-columns:1fr 1fr; gap:16px}
  .cat-grid{grid-template-columns:1fr}
  .case-grid,.quote-grid,.tile-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .topbar-l{gap:14px}
  .topbar .hide-sm{display:none}
  .sec-head{flex-direction:column; align-items:flex-start; gap:18px}
  .form-card{padding:26px 22px}
  .prod-body{padding:14px 14px 16px}
  .prod-body h3{font-size:14.5px}
  .prod-meta{font-size:12px}
}

@media (max-width:560px){
  .site-header .wrap-wide{gap:12px}
  .header-actions{gap:10px}
  .header-actions .btn-sm{padding:10px 12px; font-size:10px; letter-spacing:.07em; white-space:nowrap}
  .logo-word{font-size:21px}
  .logo-sub{font-size:7.5px; letter-spacing:.2em}
  .burger{width:38px}
  .nav.open{top:66px}
}

/* mobile filter drawer */
#filterToggle{display:none}
@media (max-width:960px){
  #filterToggle{display:inline-flex}
  .filters{display:none; border:1px solid var(--line); border-radius:2px; padding:22px 20px; margin-bottom:26px}
  .filters.open{display:block}
  .catalog-bar{order:-1}
}

/* unified logo: dark-context variant */
img.cb-lg-l{display:none !important}
:is(footer,.footer,.ftr,.site-footer,.page-footer,[class*="footer"],[class*="Footer"],.dark,[class*="-dark"],.header--float:not(.is-stuck)) img.cb-lg-l{display:inline-block !important}
:is(footer,.footer,.ftr,.site-footer,.page-footer,[class*="footer"],[class*="Footer"],.dark,[class*="-dark"],.header--float:not(.is-stuck)) img.cb-lg-d{display:none !important}