:root{
  --brand:#801D2F;
  --text:#fff;
  --muted:rgba(255,255,255,.75);
  --line:rgba(255,255,255,.22);
  --shadow:0 14px 35px rgba(0,0,0,.22);
  --container:1200px;
  --underline:#FA9819;

  /* ✅ total fixed navbar height (promo + topbar + menu) */
  --navH: 180px;     /* desktop */
}

@media (max-width: 768px){
  :root{ --navH: 100px; }  /* mobile (promo + smaller topbar + menu collapsed) */
}
@media (max-width: 420px){
  :root{ --navH: 105px; }
}
@font-face{
  font-family: "Coralith";
  src: url("fonts/Coralith-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:"Poppins",sans-serif;

  /* ✅ push page below fixed navbar */
  padding-top: var(--navH);
}

/* ✅ Certification strip exactly under navbar */
.cert-strip{
  margin:0;
  padding:8px 0;
 
}

.cert-container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cert-strip-img{
  max-width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

/* ✅ main content spacing AFTER cert strip */
.k-page{
  padding: 22px 16px 40px;
}









/* =========================
   HERO SLIDER (KAATHILA)
   Style like screenshot
========================= */
.k-hero{
  background:#fff;
  padding: 18px 0 10px;
}

.k-hero-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
  position:relative;
}

/* slider card */
.k-slide-grid{
  background:#801D2F;
  border-radius:18px;
  padding: 36px 34px;
  min-height: 320px;

  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap: 26px;

  overflow:hidden;               /* keep image inside rounded */
  position:relative;
}

/* subtle rings (optional) */
.k-slide-grid::after{
  content:"";
  position:absolute;
  right:-60px;
  bottom:-70px;
  width:240px;
  height:240px;
  border-radius:50%;
  border:18px solid rgba(250,152,25,.22);
  box-shadow: 0 0 0 18px rgba(250,152,25,.10);
  transform: rotate(10deg);
  pointer-events:none;
}

/* left text */
.k-slide-left{
  color:#fff;
  z-index:2;
}

.k-kicker{
  margin:0 0 10px;
  font-size: 22px;
  font-weight: 300;
  opacity: .95;
}

.k-title{
  margin:0 0 18px;
  font-family: "Coralith","Poppins",serif;
  font-size: 56px;
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: .2px;
}

/* button */
.k-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 11px 16px;
  border-radius: 8px;
  background: #FA9819;
  color:#2b0a12;
  text-decoration:none;
  font-weight:700;
  font-size: 12px;
  letter-spacing: 1px;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.k-btn span{ font-size: 18px; margin-top:-1px; }
.k-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

/* right image */
.k-slide-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  z-index:2;
}
.k-hero-img{
  width:100%;
  max-width: 520px;
  height:auto;
  display:block;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.25));
  transform: translateY(6px);
}

/* -------------------------
   OWL ARROWS (circle)
------------------------- */
.k-hero-owl .owl-nav{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:20;
}
.k-hero-owl .owl-nav button.owl-prev,
.k-hero-owl .owl-nav button.owl-next{
  pointer-events:auto;

  position:absolute;
  top:50%;
  transform: translateY(-50%);

  width:44px !important;
  height:44px !important;

  display:flex !important;
  align-items:center;
  justify-content:center;

  padding:0 !important;
  margin:0 !important;

  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.35) !important;
  background: rgba(255,255,255,.15) !important;

  color:#fff !important;
  font-size:28px !important;
  line-height:1 !important;

  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.k-hero-owl .owl-nav button.owl-prev{ left:14px; }
.k-hero-owl .owl-nav button.owl-next{ right:14px; }

.k-hero-owl .owl-nav button:hover{
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.55) !important;
  transform: translateY(-50%) scale(1.05);
}

.k-hero-owl .owl-nav button:focus{
  outline:none !important;
  box-shadow:none !important;
}

/* -------------------------
   4 BARS INDICATOR (bottom)
------------------------- */
.k-bars{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top: 12px;
  user-select:none;
}

.k-bar{
  width:40px;
  height:3px;
  border:0;
  border-radius:99px;
  background: rgba(0,0,0,.18);
  cursor:pointer;
  transition: background .2s ease, width .2s ease;
}
.k-bar.is-active{
  background: rgba(0,0,0,.45);
  width:46px;
}

/* if your bars are inside hero card (optional) */
.k-hero-inner .k-bars{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: 14px;
  margin:0;
  z-index:25;
}
.k-hero-inner .k-bar{
  background: rgba(255,255,255,.25);
}
.k-hero-inner .k-bar.is-active{
  background:#fff;
}

/* -------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 992px){
  .k-slide-grid{
    padding: 30px 24px;
    min-height: 300px;
    gap:18px;
  }
  .k-title{ font-size:48px; }
  .k-kicker{ font-size:20px; }
  .k-hero-img{ max-width: 470px; }
}

@media (max-width: 768px){
  .k-hero-inner{ padding:0 12px; }

  .k-slide-grid{
    grid-template-columns: 1fr;
    text-align:left;
    padding: 22px 18px 28px;
    min-height: 420px; /* image + text */
  }

  .k-slide-right{
    justify-content:center;
  }

  .k-title{ font-size:40px; }
  .k-kicker{ font-size:18px; }

  .k-hero-img{
    max-width: 520px;
    transform:none;
  }

  .k-hero-owl .owl-nav button.owl-prev{ left:8px; }
  .k-hero-owl .owl-nav button.owl-next{ right:8px; }

  /* bars at bottom inside card */
  .k-hero-inner .k-bars{
    bottom: 10px;
  }
}

@media (max-width: 420px){
  .k-slide-grid{
    padding: 18px 14px 26px;
    border-radius:16px;
    min-height: 400px;
  }
  .k-title{ font-size:34px; }
  .k-kicker{ font-size:16px; }
  .k-btn{ padding: 10px 14px; }
  .k-bar{ width:34px; }
  .k-bar.is-active{ width:40px; }
}





.cat-strip{
  background:#f3f3f3;          /* like your screenshot */
  padding: 18px 0 18px;
}

.cat-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
}

/* card */
.cat-card{
  display:block;
  text-decoration:none;
  color:#111;
  text-align:center;
  padding: 10px 10px 14px;
}

.cat-thumb{
  border-radius:14px;
  overflow:hidden;
  background:#eee;
  aspect-ratio: 1/1;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cat-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .35s ease;
}

.cat-card:hover .cat-thumb{
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(0,0,0,.12);
}
.cat-card:hover .cat-thumb img{
  transform: scale(1.06);
}

.cat-info{ margin-top:10px; }
.cat-name{
  font-size:12px;
  font-weight:600;
}
.cat-link{
  margin-top:4px;
  font-size:11px;
  color: rgba(0,0,0,.55);
}
.cat-link span{ margin-left:4px; }

/* ✅ Owl spacing */
.cat-owl .owl-stage{ display:flex; }
.cat-owl .owl-item{ display:flex; justify-content:center; }

/* ✅ Owl nav buttons */
.cat-owl .owl-nav{
  position:absolute;
  top:40%;
  left:0;
  right:0;
  pointer-events:none;
}
.cat-owl .owl-nav button{
  pointer-events:auto;
  position:absolute;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.12) !important;
  background:#fff !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.10);
  display:flex !important;
  align-items:center;
  justify-content:center;
  font-size:24px !important;
  color:#801D2F !important;
}
.cat-owl .owl-nav .owl-prev{ left:-12px; }
.cat-owl .owl-nav .owl-next{ right:-12px; }

@media (max-width:768px){
  .cat-owl .owl-nav .owl-prev{ left:-6px; }
  .cat-owl .owl-nav .owl-next{ right:-6px; }
}





.k-collection{
  background:#fff;
  padding: 44px 0;
}

.k-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
}

.k-collection-head{
  text-align:center;
  margin-bottom: 26px;
}

.k-topline{
  font-size:10px;
  letter-spacing:2.2px;
  color:#801D2F;
  text-transform:uppercase;
  margin-bottom: 10px;
  opacity:.85;
}

.k-headline{
  margin:0;
  font-family: "Coralith","Poppins",serif;
  font-size:42px;
  font-weight:700;
  color:#111;
}

/* ✅ Divider tight under heading (no color change) */
.k-divider{
  margin: 6px auto 10px;          /* closer to heading */
  width: 40%;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  column-gap: 6px;               /* ✅ lines near logo */
}

/* lines */
.k-line{
  height:2px;
 
}

/* keep your SAME colours (gold fade) */
.k-line.left{
  background: linear-gradient(60deg,
    rgba(250,152,25,0) 0%,
    rgba(250,152,25,.45) 35%,
    #FA9819 100%
  );
}
.k-line.right{
  background: linear-gradient(60deg,
    #FA9819 0%,
    rgba(250,152,25,.45) 65%,
    rgba(250,152,25,0) 100%
  );
}

/* center logo (bigger, visible) */
.k-mark{
  width: 34px;         /* ✅ bigger */
  height: 34px;        /* ✅ bigger */
  display:grid;
  place-items:center;
}

.k-mark img{
  width: 34px;         /* ✅ bigger */
  height: 34px;        /* ✅ bigger */
  display:block;
  object-fit:contain;
  opacity: 1;          /* ✅ ensure visible */
}

/* ✅ Responsive */
@media (max-width:768px){
  .k-divider{ column-gap: 8px; margin: 6px auto 16px; }
  .k-mark{ width:20px; height:20px; }
  .k-mark img{ width:14px; height:14px; }
}

/* Tabs */
.k-tabs{
  display:flex;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
}
.k-tab{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color: rgba(0,0,0,.55);
  padding: 10px 6px 12px;
  position:relative;
}
.k-tab.is-active{
  color:#801D2F;
}
.k-tab.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:2px;
  background:#801D2F;
  border-radius:2px;
}

/* Panels */
.k-panel{ display:none; }
.k-panel.is-active{ display:block; }

/* Grid */
.k-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:22px;
  margin-top: 24px;
}

/* Product card */
.p-card{
  background:#fff;
}
.p-img{
  display:block;
  border-radius:16px;
  overflow:hidden;
  background:#f6f6f6;
  aspect-ratio: 1 / 1;          /* keeps squares like screenshot */
}
.p-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .35s ease;
}
.p-card:hover .p-img img{
  transform: scale(1.05);
}

.p-body{
  padding-top: 10px;
  position:relative;
}

.p-title{
  display:block;
  color:#111;
  text-decoration:none;
  font-size:11px;
  line-height:1.35;
  min-height: 34px;
}
.p-title:hover{ color:#801D2F; }

.p-price{
  margin-top: 8px;
  display:flex;
  gap:8px;
  align-items:baseline;
  flex-wrap:wrap;
}
.p-now{
  font-weight:700;
  color:#111;
  font-size:12px;
}
.p-old{
  font-size:11px;
  color:rgba(0,0,0,.45);
  text-decoration:line-through;
}
.p-off{
  font-size:11px;
  color:#c0392b;
}

.p-actions{
  position:absolute;
  right:0;
  bottom:0;
  display:flex;
  gap:12px;
}

.p-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .25s ease;
}

.p-icon i{
  font-size:16px;
  color:rgba(0,0,0,.6);
  transition:all .25s ease;
}

/* Hover effect */
.p-icon:hover{
  border-color:#801D2F;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

.p-icon:hover i{
  color:#801D2F;
}
/* ✅ Responsive */
@media (max-width: 992px){
  .k-grid{ grid-template-columns: repeat(3, 1fr); }
  .k-headline{ font-size:36px; }
}

@media (max-width: 768px){
  .k-grid{ grid-template-columns: repeat(2, 1fr); }
  .k-headline{ font-size:32px; }
  .k-line{ width:80px; }
}

@media (max-width: 420px){
  .k-grid{ grid-template-columns: 1fr; }
  .k-headline{ font-size:28px; }
}
/* =========================
   RESPONSIVE FIXES (Divider + Grid)
========================= */

/* ✅ Divider widths for desktop */
.k-line{
  width: 100%;              /* ✅ make lines fill grid columns */
  height:2px;
}

/* ✅ Make divider width adapt on screens */
.k-divider{
  width: min(520px, 70%);   /* desktop/tablet */
}

/* Tablet */
@media (max-width: 992px){
  .k-divider{
    width: min(460px, 82%);
  }
}

/* Mobile */
@media (max-width: 768px){
  .k-divider{
    width: min(380px, 92%); /* ✅ don't become too small */
    column-gap: 10px;
    margin: 8px auto 14px;
  }

  /* ✅ keep logo visible on mobile too (do NOT shrink to 14px) */
  .k-mark{ width:28px; height:28px; }
  .k-mark img{ width:28px; height:28px; }

  /* ✅ headings scale */
  .k-headline{ font-size:32px; }
}

/* Small phones */
@media (max-width: 420px){
  .k-divider{
    width: 96%;
    column-gap: 8px;
  }
  .k-headline{ font-size:28px; }
  .k-mark{ width:26px; height:26px; }
  .k-mark img{ width:26px; height:26px; }
}

/* ✅ Product grid already good, just improve spacing on small screens */
@media (max-width: 768px){
  .k-grid{ gap:16px; }
  .p-title{ font-size:12px; }
  .p-now{ font-size:13px; }
  .p-old,.p-off{ font-size:11px; }
}


















.k-promo-banner{
  width:100%;
  background:#fff;
  margin:0;
  padding:0;
}

.k-promo-fluid{
  width:100%;
  min-height: 260px;
  padding: 56px 6vw;            /* ✅ fluid spacing */
  overflow:hidden;

  background-size: cover;
  background-position: center right;
  background-repeat:no-repeat;

  position:relative;
}

/* soft white overlay (left stronger) */
.k-promo-fluid::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.78) 40%,
    rgba(255,255,255,.25) 72%,
    rgba(255,255,255,0) 100%
  );
}

.k-promo-content{
  position:relative;
  z-index:2;
  max-width: 520px;
}

.k-promo-content h3{
  margin:0 0 10px;
  font-family:"Coralith","Poppins",serif;
  font-size: 38px;
  line-height:1.05;
  font-weight:700;
  color:#801D2F;
}

.k-promo-content p{
  margin:0 0 16px;
  font-size: 13px;
  color: rgba(0,0,0,.55);
}

.k-promo-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: 10px;
  background:#FA9819;
  color:#2b0a12;
  text-decoration:none;
  font-weight:700;
  font-size: 12px;
  letter-spacing:.8px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.k-promo-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}
.k-promo-btn span{ font-size:16px; margin-top:-1px; }

/* ✅ Responsive */
@media (max-width: 768px){
  .k-promo-fluid{
    padding: 34px 18px;
    min-height: 220px;
    background-position: right center;
  }

  .k-promo-fluid::before{
    background: linear-gradient(90deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.88) 58%,
      rgba(255,255,255,.55) 100%
    );
  }

  .k-promo-content{ max-width: 340px; }
  .k-promo-content h3{ font-size: 28px; }
}
@media (max-width: 420px){
  .k-promo-content{ max-width: 290px; }
  .k-promo-content h3{ font-size: 24px; }
}













.bb-section{
  background:#fff;
  padding: 48px 0;
}
.bb-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
}

.bb-head{
  text-align:center;
  margin-bottom: 22px;
}

.bb-topline{
  font-size:10px;
  letter-spacing:2.2px;
  color:#801D2F;
  text-transform:uppercase;
  opacity:.85;
  margin-bottom: 10px;
}

.bb-title{
  margin:0;
  font-family:"Coralith","Poppins",serif;
  font-size:38px;
  font-weight:700;
  color:#111;
}

/* divider like your previous */
.bb-divider{
  margin: 6px auto 14px;
  width: min(520px, 85%);
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  column-gap: 8px;
}
.bb-line{ height:2px; width:100%; }

.bb-line.left{
  background: linear-gradient(60deg,
    rgba(250,152,25,0) 0%,
    rgba(250,152,25,.45) 35%,
    #FA9819 100%
  );
}
.bb-line.right{
  background: linear-gradient(60deg,
    #FA9819 0%,
    rgba(250,152,25,.45) 65%,
    rgba(250,152,25,0) 100%
  );
}

.bb-mark{ width:34px; height:34px; display:grid; place-items:center; }
.bb-mark img{ width:34px; height:34px; object-fit:contain; display:block; }

/* tabs */
.bb-tabs{
  display:flex;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
}
.bb-tab{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color: rgba(0,0,0,.55);
  padding: 10px 6px 12px;
  position:relative;
}
.bb-tab.is-active{ color:#801D2F; }
.bb-tab.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:2px;
  background:#801D2F;
  border-radius:2px;
}

/* panels */
.bb-panel{ display:none; }
.bb-panel.is-active{ display:block; }

/* grid */
.bb-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:22px;
  margin-top: 22px;
}

/* card */
.bb-img{
  display:block;
  border-radius:18px;
  overflow:hidden;
  background:#f5f5f5;
  aspect-ratio: 1/1;
}
.bb-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .35s ease;
}
.bb-card:hover .bb-img img{ transform: scale(1.05); }

.bb-body{
  padding-top: 10px;
  position:relative;
}
.bb-name{
  display:block;
  color:#111;
  text-decoration:none;
  font-size:11px;
  line-height:1.35;
  min-height: 34px;
}
.bb-name:hover{ color:#801D2F; }

.bb-price{
  margin-top: 8px;
  display:flex;
  gap:8px;
  align-items:baseline;
  flex-wrap:wrap;
}
.bb-now{ font-weight:700; color:#111; font-size:12px; }
.bb-old{ font-size:11px; color:rgba(0,0,0,.45); text-decoration:line-through; }
.bb-off{ font-size:11px; color:#c0392b; }

/* icons bottom-right */
.bb-actions{
  position:absolute;
  right:0;
  bottom:0;
  display:flex;
  gap:12px;
}
.bb-ic{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .25s ease;
}
.bb-ic i{ font-size:16px; color:rgba(0,0,0,.6); transition:.25s ease; }
.bb-ic:hover{
  border-color:#801D2F;
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.bb-ic:hover i{ color:#801D2F; }

/* responsive */
@media (max-width: 992px){
  .bb-grid{ grid-template-columns: repeat(3,1fr); }
  .bb-title{ font-size:34px; }
}
@media (max-width: 768px){
  .bb-grid{ grid-template-columns: repeat(2,1fr); gap:16px; }
  .bb-title{ font-size:30px; }
  .bb-mark{ width:28px; height:28px; }
  .bb-mark img{ width:28px; height:28px; }
}
@media (max-width: 420px){
  .bb-grid{ grid-template-columns: 1fr; }
  .bb-title{ font-size:26px; }
}














.sig-sec{
  background:#fff;
  padding: 44px 0 52px;
}

.sig-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
  text-align:center;
}

.sig-title{
  margin:0 0 6px;
  font-family:"Coralith","Poppins",serif;
  font-size:34px;
  font-weight:700;
  color:#111;
}

/* 3 cards */
.sig-grid{
  margin-top: 20px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}

/* card */
.sig-card{
  position:relative;
  display:block;
  border-radius:18px;
  overflow:hidden;
  background:#f4f4f4;
  aspect-ratio: 16/9;             /* nice banner proportion */
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
}

.sig-img{
  width:100%;
  height:200%;
  object-fit:cover;
  display:block;
  transition: transform .45s ease;
}

/* hover effect */
.sig-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.16);
}
.sig-card:hover .sig-img{
  transform: scale(1.06);
}

/* button overlay */
.sig-btn{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 16px;
  border-radius: 10px;
  background:#FA9819;
  color:#2b0a12;
  font-weight:700;
  font-size:12px;
  letter-spacing:.8px;
  text-decoration:none;
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
}
.sig-btn span{ font-size:16px; margin-top:-1px; }

/* ✅ Responsive */
@media (max-width: 992px){
  .sig-grid{ grid-template-columns: repeat(3, 1fr); gap:16px; }
  .sig-title{ font-size:30px; }
}

@media (max-width: 768px){
  .sig-grid{ grid-template-columns: repeat(2, 1fr); }
  .sig-card{ aspect-ratio: 4/3; }
}

@media (max-width: 420px){
  .sig-grid{ grid-template-columns: 1fr; }
  .sig-title{ font-size:26px; }
}