/* =========================
   DeNew - Global
   ========================= */

:root{
  --paper: #f3f1ea;     /* off-white base */
  --paper2:#fbfaf6;
  --ink:#0f1419;
  --ink2: rgba(15,20,25,.72);

  --blue:#2b6cb0;
  --denim:#1e3a8a;
  --powder:#a9c9ff;
  --sand:#e7ddc7;
  --rose:#f4b9c7;

  --radius: 22px;
  --radius2: 16px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --ease2: cubic-bezier(.16,1,.3,1);

  --shadow: 0 18px 60px rgba(0,0,0,.10);
  --shadow2: 0 14px 30px rgba(0,0,0,.08);

  /* Put your own images in assets/ later if you want */
  --denimBg: url("assets/denim-bg.jpg");
  --scrapBg: url("assets/denim-scraps.png");
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  background: var(--paper);
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  overflow-x:hidden;
}

/* ===== subtle denim texture across pages ===== */
body.lightPage::before{

  background:

    linear-gradient(
      rgba(243,241,234,.92),
      rgba(243,241,234,.92)
    ),

    url("https://images.unsplash.com/photo-1582582429416-37ec1eacdddf?q=80&w=2000"),

    radial-gradient(
      800px 600px at 10% 10%,
      rgba(43,108,176,.15),
      transparent
    ),

    radial-gradient(
      900px 700px at 90% 90%,
      rgba(244,185,199,.15),
      transparent
    );

  background-size: cover;

}

/* Optional image overlays if you add assets */
body.lightPage::after{
  content:"";
  position: fixed;
  inset:-10%;
  z-index:-1;
  opacity:.14;
  background-image: var(--denimBg);
  background-size: 900px auto;
  background-repeat: repeat;
  filter: contrast(1.05) saturate(1.05);
  transform: rotate(-2deg);
  pointer-events:none;
}

/* =========================
   Fixed brand (logo + DeNew)
   ========================= */
.brandDock{
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 60;
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: var(--ink);
  background: rgba(251,250,246,.78);
  border: 1px solid rgba(15,20,25,.10);
  border-radius: 999px;
  padding: 10px 14px 10px 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

.brandDock:hover{
  transform: translateY(-1px);
  transition: transform 240ms var(--ease);
}

.brandLogo{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px dashed rgba(15,20,25,.22);
  background:
    radial-gradient(circle at 30% 30%, rgba(43,108,176,.30), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(244,185,199,.22), transparent 60%),
    rgba(255,255,255,.65);
  display:grid;
  place-items:center;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: rgba(15,20,25,.65);
}

.brandName{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  letter-spacing: .06em;
}

/* =========================
   Hamburger Menu (all pages)
   ========================= */
.menuBtn{
  position: fixed;
  top: 20px;
  right: 18px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15,20,25,.12);
  background: rgba(251,250,246,.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform 240ms var(--ease), background 240ms var(--ease);
}
.menuBtn:hover{ transform: translateY(-1px); }
.menuBtn:active{ transform: translateY(0px) scale(.98); }

.bars{
  width: 18px;
  height: 14px;
  position: relative;
}
.bars span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius: 999px;
  background: rgba(15,20,25,.82);
  transition: transform 360ms var(--ease2), top 360ms var(--ease2), opacity 220ms var(--ease);
}
.bars span:nth-child(1){ top:1px; }
.bars span:nth-child(2){ top:6px; }
.bars span:nth-child(3){ top:11px; }

body.menuOpen .bars span:nth-child(1){ top:6px; transform: rotate(45deg); }
body.menuOpen .bars span:nth-child(2){ opacity:0; }
body.menuOpen .bars span:nth-child(3){ top:6px; transform: rotate(-45deg); }

.menuOverlay{
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(15,20,25,.35);
  opacity: 0;
  pointer-events:none;
  transition: opacity 280ms var(--ease);
}
body.menuOpen .menuOverlay{
  opacity: 1;
  pointer-events:auto;
}

.menuPanel{

  position: fixed;
  top:0;
  right:0;

  height:100%;
  width: min(460px,90vw);

  background:
    linear-gradient(120deg,#f3f1ea,#ffffff),
    var(--denimBg);

  backdrop-filter: blur(20px);

  transform: translateX(110%) rotate(6deg);

  transition:
    transform 700ms cubic-bezier(.16,1,.3,1);

}

body.menuOpen .menuPanel{

  transform: translateX(0) rotate(0);

}

.menuTitle{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .62;
  margin: 0 0 14px;
}

.menuLinks{
  display:grid;
  gap: 10px;
}
.menuLinks a{

  font-size: 22px;

  padding:18px;

  border-radius:16px;

  transition: all .3s ease;

}

.menuLinks a:hover{

  transform: translateX(10px) scale(1.03);

  background:
    linear-gradient(90deg,#a9c9ff,#f4b9c7);

  color:white;

}
.menuLinks a span{
  opacity:.6;
}

/* =========================
   Shared page layout
   ========================= */
.page{
  min-height: 100vh;
}
.wrap{
  width: min(1120px, 92vw);
  margin: 0 auto;
  padding: 110px 0 80px; /* space for fixed brand/menu */
}
.h1{
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing: .02em;
  margin: 0 0 12px 0;
}
.p{
  margin: 0 0 18px 0;
  line-height: 1.7;
  color: var(--ink2);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.section{
  margin-top: 18px;
}

.footer{
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,20,25,.12);
  display:flex;
  justify-content:space-between;
  gap: 16px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(15,20,25,.62);
}

/* =========================
   Homepage split hero
   ========================= */
.hero{
  height: 100vh;
  display:grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow:hidden;
}

@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: 100svh; }
}

/* center brand */
.heroBrand{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  font-size: clamp(56px, 10vw, 130px);
  color: rgba(255,255,255,.92);
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events:none;
  mix-blend-mode: screen;
  text-shadow: 0 14px 60px rgba(0,0,0,.35);
  z-index: 2;
}
.heroBrand{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index: 20;   /* HIGHER than panels */
  pointer-events: none;
}

.heroLogo{
  width: clamp(180px, 30vw, 420px);
  height: auto;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.35));
}
.heroLogo{
  width: clamp(280px, 45vw, 720px);
  height: auto;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,.5));
  opacity: 0.95;
}
.heroLogo{
  mix-blend-mode: screen;
}

.divider{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width: 1px;
  background: rgba(255,255,255,.22);
  z-index: 2;
}
@media (max-width: 900px){
  .divider{ left:0; right:0; top:50%; bottom:auto; height:1px; width:auto; }
}

.panel{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  z-index: 1;
}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--img);
  background-size: cover;
  background-position:center;
  transform: scale(1.05);
  transition: filter 520ms var(--ease), transform 900ms var(--ease);
  filter: brightness(.72) saturate(1.02);
}
.panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(43,108,176,.18), transparent 60%),
    radial-gradient(900px 520px at 80% 20%, rgba(244,185,199,.14), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.18), rgba(0,0,0,.0));
  opacity: 1;
}
.panel .content{
  position: relative;
  z-index: 3;
  padding: 44px 36px;
  max-width: 520px;
}

.kicker{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  margin: 0 0 10px 0;
}
.sub{
  margin: 0 0 18px 0;
  color: rgba(255,255,255,.82);
  line-height: 1.6;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Hover: one side brighter, other darker */
/* Start: both DARK */
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--img);
  background-size: cover;
  background-position:center;
  transform: scale(1.05);
  transition: filter 520ms var(--ease), transform 900ms var(--ease);
  filter: brightness(.48) saturate(1.02); /* was .72 */
}

/* When hovering anywhere in hero, keep non-hovered side darker */
.hero:hover .panel:not(:hover)::before{
  filter: brightness(.40) saturate(.95);
}

/* Hovered side becomes brighter and zooms */
.hero:hover .panel:hover::before{
  filter: brightness(.98) saturate(1.08);
  transform: scale(1.10);
}

.btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .04em;
  overflow:hidden;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.btn .fill{
  position:absolute;
  inset:0;
  transform: translateX(-105%);
  transition: transform 420ms var(--ease2);
  background: rgba(255,255,255,.85);
}
.btn .text{ position:relative; z-index:2; }
.btn .arrow{
  display:inline-block;
  transform: translateX(0);
  transition: transform 260ms var(--ease), opacity 260ms var(--ease);
  opacity:.9;
}

.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
}
.btn:hover .fill{ transform: translateX(0); }
.btn:hover .text{ color: rgba(15,20,25,.92); }
.btn:hover .arrow{ transform: translateX(3px); opacity:1; }
.btn:active{ transform: translateY(0) scale(.99); }

/* =========================
   Catalog
   ========================= */

.productGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
  margin-top: 22px;
}
@media (max-width: 980px){
  .productGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .productGrid{ grid-template-columns: 1fr; }
}

.productCard{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,20,25,.10);
  box-shadow: var(--shadow2);
  transform: translateZ(0);
}
.productCard img{
  width:100%;
  height: 360px;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform 900ms var(--ease);
  filter: contrast(1.02) saturate(.98);
}
.productCard:hover img{ transform: scale(1.08); }

.productOverlay{
  position:absolute;
  inset:0; /* cover full image */
  display:flex;
  align-items:flex-end; /* text at bottom */
  padding: 24px;
  bottom: 50px;
  
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.75) 40%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0.2) 85%,
    rgba(0,0,0,0) 100%
  );

  opacity: 0;
  transition: opacity 420ms ease;
  color: #fff;
}
.productOverlay p{
  margin:0;
  line-height:1.5;
  font-size: 13px;
  max-width: 46ch;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.productCard:hover .productOverlay{ opacity: 1; }

.productMeta{
  display:flex;
  align-items:center;
  justify-content:space-between; /* name left, price right */
  gap: 12px;
  padding: 14px 16px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.productMeta{
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,.95);
}
.productMeta .name{
  font-weight: 700;
  letter-spacing: .02em;
}
.productMeta .price{
  font-weight: 700;
  opacity: .85;
}

/* =========================
   Confidence Corner
   - crumpled paper + powder blue pigment blocks
   ========================= */
.confidenceHero{
  border-radius: var(--radius);
  padding: 26px;
  border: 1px solid rgba(15,20,25,.10);
  background: var(--paper2);
  position: relative;
  overflow:hidden;
  box-shadow: var(--shadow2);
}

/* crumpled paper illusion */
.confidenceHero::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(900px 600px at 20% 25%, rgba(0,0,0,.05), transparent 60%),
    radial-gradient(700px 520px at 70% 55%, rgba(0,0,0,.04), transparent 62%),
    radial-gradient(700px 520px at 55% 15%, rgba(0,0,0,.03), transparent 60%),
    repeating-radial-gradient(circle at 30% 30%, rgba(0,0,0,.018) 0 2px, transparent 2px 9px);
  opacity: .85;
  mix-blend-mode: multiply;
  transform: rotate(-4deg);
  pointer-events:none;
}

.affirmation{
  position:relative;
  z-index:1;
  display:grid;
  gap: 10px;
}

.tag{
  display:inline-block;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 12px;
}
.quote{
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.25;
  margin: 0;
}
.small{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(15,20,25,.72);
  line-height: 1.7;
  margin: 0;
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px){
  .grid2{ grid-template-columns: 1fr; }
}

.blueCard{
  border-radius: var(--radius2);
  padding: 18px;
  color: #0b0b0c;
  border: 1px solid rgba(15,20,25,.10);
  box-shadow: var(--shadow2);
  background:
    radial-gradient(900px 320px at 20% 30%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(900px 320px at 80% 30%, rgba(255,255,255,.25), transparent 55%),
    linear-gradient(135deg, rgba(169,201,255,.68), rgba(169,201,255,.25));
}

.btnInk{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15,20,25,.18);
  background: rgba(255,255,255,.66);
  color: var(--ink);
  text-decoration:none;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  position: relative;
  overflow:hidden;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
.btnInk::before{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-105%);
  background: rgba(15,20,25,.88);
  transition: transform 420ms var(--ease2);
}
.btnInk span{ position:relative; z-index:1; }
.btnInk:hover{ transform: translateY(-2px); }
.btnInk:hover::before{ transform: translateX(0); }
.btnInk:hover span{ color:#fff; }
.btnInk:active{ transform: translateY(0) scale(.99); }

/* =========================
   Communities (inside Confidence)
   ========================= */
.communityGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 980px){
  .communityGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .communityGrid{ grid-template-columns: 1fr; }
}

.communityTile{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(15,20,25,.10);
  background: rgba(255,255,255,.55);
  box-shadow: var(--shadow2);
  min-height: 220px;
  transform: translateZ(0);
  cursor: pointer;
}
.communityTile img{
  width:100%;
  height: 240px;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform 900ms var(--ease);
}
.communityTile:hover img{ transform: scale(1.08); }

.communityBadge{
  position:absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  background: rgba(15,20,25,.72);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
}

.communityHover{
  position:absolute;
  inset:0;
  z-index: 3;
  display:flex;
  align-items:flex-end;
  padding: 16px;
  background:
    radial-gradient(900px 520px at 20% 25%, rgba(43,108,176,.22), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.84), rgba(0,0,0,.22), rgba(0,0,0,0));
  opacity: 0;
  transition: opacity 360ms var(--ease);
}
.communityTile:hover .communityHover{ opacity: 1; }

.communityHover .box{
  color:#fff;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  max-width: 52ch;
}
.communityHover .box p{
  margin: 0 0 12px;
  line-height: 1.6;
  font-size: 13px;
  opacity:.95;
}
.communityHover .box a{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  padding: 10px 12px;
  border-radius: 999px;
  transition: transform 260ms var(--ease), background 260ms var(--ease);
}
.communityHover .box a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.20);
}

/* =========================
   Blog rolling strip + modal
   ========================= */
.roller{
  border-radius: var(--radius);
  border: 1px solid rgba(15,20,25,.10);
  background: rgba(255,255,255,.55);
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.rollerTrack{
  display:flex;
  gap: 14px;
  padding: 16px;
  will-change: transform;
}

.blogCard{
  flex: 0 0 320px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(15,20,25,.10);
  background: rgba(251,250,246,.85);
  cursor:pointer;
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  transition: transform 260ms var(--ease);
}
.blogCard:hover{ transform: translateY(-3px); }

.blogCard .img{
  height: 170px;
  background-size: cover;
  background-position:center;
  position: relative;
}
.blogCard .img::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.60), rgba(0,0,0,.0));
}

.blogCard .meta{
  padding: 14px 14px 16px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.blogCard h3{
  margin: 0 0 8px;
  font-size: 15px;
}
.blogCard p{
  margin:0;
  color: rgba(15,20,25,.70);
  line-height: 1.6;
  font-size: 13px;
}

.modalBackdrop{
  position: fixed;
  inset:0;
  z-index: 80;
  background: rgba(15,20,25,.55);
  opacity: 0;
  pointer-events:none;
  transition: opacity 260ms var(--ease);
}
.modalBackdrop.open{
  opacity: 1;
  pointer-events:auto;
}
.modal{
  position: fixed;
  inset: 0;
  z-index: 81;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.modal.open{ pointer-events:auto; }

.modalPanel{
  width: min(920px, 92vw);
  max-height: 86vh;
  overflow:auto;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(43,108,176,.18), transparent 60%),
    radial-gradient(900px 520px at 80% 20%, rgba(244,185,199,.14), transparent 60%),
    rgba(251,250,246,.96);
  box-shadow: 0 30px 110px rgba(0,0,0,.35);
  transform: translateY(18px) scale(.98);
  opacity: 0;
  transition: transform 360ms var(--ease2), opacity 260ms var(--ease);
}
.modal.open .modalPanel{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modalHeader{
  position: sticky;
  top: 0;
  background: rgba(251,250,246,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15,20,25,.10);
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.modalHeader strong{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .02em;
}
.modalClose{
  border: 1px solid rgba(15,20,25,.14);
  background: rgba(255,255,255,.7);
  border-radius: 14px;
  width: 40px;
  height: 40px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform 240ms var(--ease);
}
.modalClose:hover{ transform: translateY(-1px); }
.modalBody{
  padding: 18px 18px 22px;
  color: rgba(15,20,25,.92);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.8;
}
.modalBody h2{
  margin: 0 0 10px;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
}

/* =========================
   Testimonials (blog page)
   ========================= */
.testimonials{
  margin-top: 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(15,20,25,.10);
  background:
    radial-gradient(1100px 650px at 20% 20%, rgba(169,201,255,.28), transparent 60%),
    radial-gradient(1100px 650px at 85% 10%, rgba(244,185,199,.22), transparent 60%),
    rgba(251,250,246,.78);
  box-shadow: var(--shadow2);
  padding: 18px;
}
.testimonialsHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 0px;
}
.testimonialsHead h2{
  margin:0;
  font-size: 30px;
}
.testimonialsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .testimonialsGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .testimonialsGrid{ grid-template-columns: 1fr; }
}
.tCard{
  border-radius: 18px;
  border: 1px solid rgba(15,20,25,.10);
  background: rgba(255,255,255,.65);
  padding: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}
.tCard p{
  margin:0;
  line-height: 1.7;
  color: rgba(15,20,25,.82);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.tCard .who{
  margin-top: 10px;
  opacity: .62;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* =========================
   GLOBAL TRANSITION
   ========================= */

.transition{
  position: fixed;
  inset:0;
  z-index: 100;
  pointer-events:none;

  background:
    radial-gradient(900px 520px at 20% 30%, rgba(43,108,176,.26), transparent 60%),
    radial-gradient(900px 520px at 80% 20%, rgba(244,185,199,.22), transparent 60%),
    rgba(15,20,25,.92);

  transform: translateY(105%);
  transition: transform 520ms var(--ease2);
}

/* Homepage: right-to-left */
body.homePage .transition{
  transform: translateX(105%);
}
body.homePage .transition.show-rtl{
  transform: translateX(0);
}

/* NORMAL pages: bottom to top */

.transition.show{
  transform: translateY(0);
}


/* HOMEPAGE special transitions */

.transition.show-left{
  transform: translateX(-100%);
}

.transition.show-right{
  transform: translateX(100%);
}



/* ---- overrides: denim background image layer sizing ---- */
body.lightPage::before{
  background-size: cover, cover, auto, auto, auto, auto;
  background-position: center, center, center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* FAQ */
.faq{ display:grid; gap:12px; }
.faq details{
  border-radius: 18px;
  border: 1px solid rgba(15,20,25,.10);
  background: rgba(255,255,255,.62);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  padding: 12px 14px;
}
.faq summary{
  cursor:pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
}
.faq .ans{
  margin-top: 10px;
  color: rgba(15,20,25,.74);
  line-height: 1.7;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Blog: controls + modal image + testimonial images */
.btnMini{
  width:38px;
  height:38px;
  border-radius: 999px;
  border: 1px solid rgba(15,20,25,.16);
  background: rgba(255,255,255,.68);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  color: rgba(15,20,25,.9);
  font-size: 20px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform 180ms var(--ease2), background 180ms var(--ease2);
}
.btnMini:hover{ transform: translateY(-1px); background: rgba(255,255,255,.82); }

.roller{ position: relative; } /* important */
.rollerControls{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin: 0; /* remove the negative margin */
}
.rollerTrack{
  padding: 64px 16px 16px; /* top padding makes room for controls */
}
.modalImg{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 12px;
  display:none;
}
.modalImg.show{ display:block; }

.tImg{
  width:100%;
  height: 180px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 10px;
  border: 1px solid rgba(15,20,25,.10);
}

/* ===== Menu polish fix ===== */
.menuPanel{
  padding: 22px;
  overflow: auto;
}

.menuLinks a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-decoration:none;
  color: var(--ink);
  border: 1px solid rgba(15,20,25,.10);
  background: rgba(255,255,255,.55);
}

.menuLinks a span{
  opacity:.55;
}

/* ===== FIX: menu must ALWAYS overlay page ===== */
.menuOverlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
}

.menuPanel{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: 100vh !important;
  z-index: 9999 !important;

  /* usability */
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

.menuBtn,
.brandDock{
  z-index: 10000 !important;
}

.communityTile{
  display: block;          /* CRITICAL: stops the invisible giant link bug */
  text-decoration: none;
  color: inherit;
}
.menuPanel{
  z-index: 56;  /* above content, below menuBtn (60), above overlay (55) */
  overflow-y: auto;
}

/* Push menu content down so it never sits under the close X button */
.menuPanel{
  padding: 78px 22px 22px; /* top right/left bottom */
  box-sizing: border-box;
}

/* Optional: keep the "Menu" label looking nice */
.menuTitle{
  margin-top: 0;
}

/* Quotes must sit above anything clickable below (community tiles) */
.blueCard{
  position: relative;
  z-index: 5;
}

.blueCard .btnInk{
  position: relative;
  z-index: 6;
  pointer-events: auto;
}
/* Prevent community links from creating weird click regions */
.communityTile{
  display: block;
  text-decoration: none;
  color: inherit;
}
.communityGrid{
  position: relative;
  z-index: 1;
}

.modalPanel{
  max-width: 860px;
  width: min(860px, calc(100vw - 28px));
  max-height: min(86vh, 820px);
  overflow: auto;
}

.modalHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.modalTitle{
  line-height: 1.15;
}

.modalClose{
  flex: 0 0 auto;
}

.modalBody p{
  line-height: 1.75;
}

.contactWrap{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px){
  .contactWrap{ grid-template-columns: 1fr; }
}

.contactInfoCard{
  border-radius: var(--radius2);
  border: 1px solid rgba(15,20,25,.10);
  box-shadow: var(--shadow2);
  background:
    linear-gradient(135deg, rgba(251,250,246,.92), rgba(251,250,246,.82)),
    url("assets/img/denim-scraps.png");
  background-size: cover;
  background-position: center;
  padding: 18px;
}

.contactFormCard{
  border-radius: var(--radius2);
  border: 1px solid rgba(15,20,25,.10);
  box-shadow: var(--shadow2);
  background:
    linear-gradient(135deg, rgba(251,250,246,.92), rgba(251,250,246,.82)),
    url("assets/img/denim-bg.jpg");
  background-size: cover;
  background-position: center;
  padding: 18px;
}

.contactFormCard input,
.contactFormCard textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(15,20,25,.12);
  padding: 12px 12px;
  background: rgba(255,255,255,.78);
  outline: none;
}
.contactFormCard input:focus,
.contactFormCard textarea:focus{
  border-color: rgba(43,108,176,.35);
  box-shadow: 0 0 0 4px rgba(43,108,176,.12);
}

/* ---------------------------
   FIX: Communities cards hover + click
   Root cause: nested <a> tags inside <a> is invalid HTML, browser breaks the DOM.
   CSS below also prevents overlays from eating pointer events.
---------------------------- */

.communityGrid { display:grid; gap:14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px){ .communityGrid { grid-template-columns: 1fr; } }

.communityTile{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  text-decoration:none;
  color:inherit;
  transform: translateZ(0);
}

.communityTile .communityHover{
  pointer-events:none;               /* critical */
}

.communityTile:hover{
  transform: translateY(-2px);
}

.communityTile:hover .communityHover{
  opacity: 1;
  transform: translateY(0);
}

.communityHover{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:14px;
  opacity:0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.joinPill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,0.90);
  color:#111;
  font-weight:700;
  font-size:13px;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
}

/* ---------------------------
   FIX: Blog modal polish + make sure roller arrows are never covered
---------------------------- */

.roller{ position:relative; }
.rollerControls{
  position:absolute;
  right:10px;
  top:10px;
  display:flex;
  gap:10px;
  z-index: 5;              /* above cards */
  pointer-events:auto;
}

.btnMini{
  position:relative;
  z-index:6;
  pointer-events:auto;
}

.rollerTrack{ position:relative; z-index:1; }

.modalBackdrop{
  position:fixed;
  inset:0;
  background: rgba(10,10,12,0.55);
  backdrop-filter: blur(8px);
  opacity:0;
  pointer-events:none;
  transition: opacity 180ms ease;
  z-index: 50;
}

.modalBackdrop.open{
  opacity:1;
  pointer-events:auto;
}

.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index: 60;
  padding: 18px;
}

.modal.open{ pointer-events:auto; }

.modalPanel{
  width: min(980px, 100%);
  max-height: min(78vh, 760px);
  overflow:hidden;
  border-radius: 22px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 26px 80px rgba(0,0,0,0.35);
  display:grid;
  grid-template-rows: auto 1fr;
}

.modalTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding: 16px 16px 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.modalTitle{
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
}

.modalClose{
  border: 0;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.modalBodyWrap{
  overflow:auto;
  padding: 0;
}

.modalMedia{
  width:100%;
  height: 260px;
  background: linear-gradient(135deg, rgba(0,0,0,0.05), rgba(0,0,0,0.02));
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.modalMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.modalContent{
  padding: 16px;
}

.modalContent p{ margin: 0 0 12px 0; }

/* ---------------------------
   ABOUT page styling
---------------------------- */

.aboutHero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  margin-top: 8px;
  align-items: stretch;
}

@media (max-width: 900px){
  .aboutHero{ grid-template-columns: 1fr; }
}

.aboutHeroLeft{
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
}

.aboutHeroRight{
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.08);
  background:
    linear-gradient(115deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12)),
    url("assets/denim-bg.jpg");
  background-size: cover;
  background-position: center;
  min-height: 220px;
}

.aboutPills{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.pill{
  font-size: 12px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(15, 35, 90, 0.08);
  border: 1px solid rgba(15, 35, 90, 0.14);
}

.aboutGrid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 900px){
  .aboutGrid{ grid-template-columns: 1fr; }
}

.sectionCard{
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
}

.sectionCardDenim{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.84)),
    url("assets/denim-scraps.png");
  background-size: 520px;
  background-position: right bottom;
  background-repeat: no-repeat;
}

.aboutFeatureList{ margin-top: 14px; display:grid; gap: 12px; }
.featureItem{ display:flex; gap: 10px; align-items:flex-start; }
.featureItem .dot{ width: 10px; height: 10px; border-radius: 999px; background: rgba(15,35,90,.7); margin-top: 6px; }
.featureTitle{ font-weight: 800; font-size: 14px; margin-bottom: 2px; }

/* ---------------------------
   CONTACT page styling
---------------------------- */

.contactHero{
  margin-top: 8px;
  padding: 18px;
  border-radius: 22px;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.92), rgba(255,255,255,0.86)),
    url("assets/denim-scraps.png");
  background-repeat:no-repeat;
  background-position: right bottom;
  background-size: 520px;
  border: 1px solid rgba(0,0,0,0.08);
}

.contactGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
}

@media (max-width: 900px){
  .contactGrid{ grid-template-columns: 1fr; }
}

.contactForm{ margin-top: 12px; display:grid; gap: 12px; }
.field{ display:grid; gap: 8px; }
.field span{ font-size: 12px; font-weight: 800; opacity: .8; }

.field input,
.field select,
.field textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 12px 12px;
  background: rgba(255,255,255,0.9);
  outline: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(15,35,90,0.35);
  box-shadow: 0 0 0 4px rgba(15,35,90,0.10);
}

.contactActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 4px;
}

.btnInkSolid{
  background: rgba(15,35,90,0.90);
  color: #fff;
  border: 1px solid rgba(15,35,90,0.90);
}

.quickLinks{ margin-top: 12px; display:grid; gap: 10px; }
.quickLink{
  display:flex;
  flex-direction:column;
  gap: 2px;
  padding: 12px 12px;
  border-radius: 16px;
  text-decoration:none;
  color: inherit;
  background: rgba(15,35,90,0.06);
  border: 1px solid rgba(15,35,90,0.12);
}

.qlTitle{ font-weight: 900; font-size: 14px; }
.qlSub{ font-size: 12px; opacity: .8; margin-top: 5px;}
.quickLink {
  transition: all 300ms ease;
}

.quickLink:hover {
  border-color: rgba(15,35,90,0.20);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,35,90,0.15);
  text-decoration: underline rgba(15,35,90,0.8);
}

.miniDivider{
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 14px 0;
}

/* --- Menu: move items down so the close icon does not sit on top of links --- */
.menuPanel{
  padding-top: 86px;
}
.menuTitle{
  margin-top: 0;
}

/* --- Quotes: make controls look clean and keep text centered --- */
.quoteCenter{
  text-align: center;
}

.quoteControls{
  display: flex;
  gap: 10px;
  margin-top: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.qBtn{
  border: 1px solid rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.10);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.qBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.45);
}

.qBtn:active{
  transform: translateY(0px);
}

.qBtn:focus-visible{
  outline: 2px solid rgba(255,255,255,0.75);
  outline-offset: 3px;
}

/* --- Communities: fix hover and click by preventing hover overlay from stealing clicks --- */
.communityHover{
  pointer-events: none;
}

.communityTile:focus-visible{
  outline: 3px solid rgba(25,55,115,0.55);
  outline-offset: 6px;
  border-radius: 18px;
}

.communityTile:focus-visible .communityHover{
  opacity: 1;
  transform: translateY(0);
}

.joinPill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* --- Better denim hero background for Confidence Corner (clean, realistic texture) --- */
.confidenceHero{
  background-image:
    linear-gradient(180deg, rgba(10,20,40,0.60), rgba(10,20,40,0.35)),
    url("https://source.unsplash.com/VBf7RPTezEc/2000x900");
  background-size: cover;
  background-position: center;
}

/* --- Fix odd off-white strip on the left edge of white cards (About "Our Solution", Contact "Say hi") --- */
/* These are safe overrides: they just force the base to pure white and keep your textures as overlays */
.sectionCardDenim,
.sayHi{
  background-color: #ffffff;
  background-image: none;
  background-clip: padding-box;
}

/* Optional: subtle texture overlay without changing the base white */
.sectionCardDenim::before,
.sayHi::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  background-image: url("assets/denim-scraps.png");
  background-size: 700px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  border-radius: inherit;
}

/* Make sure these containers can host ::before */
.sectionCardDenim,
.sayHi{
  position: relative;
  overflow: hidden;
}

/* ===== Confidence Corner: quote box color refresh ===== */

/* Only affect Confidence page quote cards */
body.lightPage .blueCard{
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
    url("assets/denim-scraps.png");
  background-size: 680px;
  background-position: right bottom;
  background-repeat: no-repeat;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
  color: rgba(15,20,25,0.92);
}

/* Make the quote text readable on the lighter card */
body.lightPage .blueCard .quote,
body.lightPage .blueCard .quoteCenter{
  color: rgba(10,12,18,0.92);
}

/* Buttons become denim-like on the light cards */
body.lightPage .blueCard .qBtn{
  background: rgba(20,45,110,0.10);
  border: 1px solid rgba(20,45,110,0.18);
  color: rgba(10,12,18,0.92);
}

body.lightPage .blueCard .qBtn:hover{
  background: rgba(20,45,110,0.16);
  border-color: rgba(20,45,110,0.28);
}

/* ===== Remove Join form pill on hover ===== */
.communityTile .joinPill{
  display: none !important;
}

.aboutHeroRight{
  background:
    linear-gradient(115deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12)),
    url("assets/denimo.jpeg");
}

.contactHero{
  background-color: rgba(255,255,255,0.92);
  background-image: url("assets/denim-scraps.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 520px;
}

.section[aria-label="Communities"]{
  margin-top: 80px;
}

.hero{
  position: relative;
  isolation: isolate; /* IMPORTANT */
}
.heroBrand{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-54%, -50%);
  z-index: 9999; /* force top */
  pointer-events: none;
}
.heroLogo{
  width: clamp(380px, 55vw, 900px);
  height: auto;
  display: block;
  filter: drop-shadow(0 40px 120px rgba(0,0,0,.6));
  opacity: 1;
}
.heroBrand, .heroLogo{
  mix-blend-mode: normal !important;
}
.heroLogo{
  width: clamp(380px, 55vw, 900px);
  height: auto;
  display: block;
  opacity: 1;
  filter:
    drop-shadow(0 45px 120px rgba(0,0,0,.75))
    drop-shadow(0 10px 30px rgba(0,0,0,.35));
}
/* ---------- BLOG MODAL SCROLL FIX ---------- */

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modalPanel {
  max-height: 90vh;          /* prevents it from exceeding screen */
  width: min(900px, 95%);
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 16px;
  overflow: hidden;
}

.modalBody {
  overflow-y: auto;          /* THIS enables scrolling */
  padding: 24px;
  max-height: 75vh;          /* ensures scroll area */
}

.modalBody {
  scroll-behavior: smooth;
}

/* =========================
   Catalog Product Modal
   ========================= */

.pmodalBackdrop{
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(15,20,25,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease);
}

.pmodalBackdrop.open{
  opacity: 1;
  pointer-events: auto;
}

.pmodal{
  position: fixed;
  inset: 0;
  z-index: 20001;
  display: grid;
  place-items: center;
  pointer-events: none;
  padding: 18px;
}

.pmodal.open{ pointer-events: auto; }

.pmodalPanel{
  width: min(980px, 100%);
  max-height: 86vh;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(251,250,246,.96);
  box-shadow: 0 30px 110px rgba(0,0,0,.35);
  display: grid;
  grid-template-rows: auto 1fr;
}

.pmodalHeader{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(251,250,246,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15,20,25,.10);
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.pmodalHeader strong{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .02em;
}

.pmodalClose{
  border: 1px solid rgba(15,20,25,.14);
  background: rgba(255,255,255,.75);
  border-radius: 14px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display:grid;
  place-items:center;
  transition: transform 240ms var(--ease);
}
.pmodalClose:hover{ transform: translateY(-1px); }

.pmodalBody{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

/* Gallery */
.pmGallery{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,20,25,.10);
  background: rgba(255,255,255,.70);
}

.pmTrack{
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.pmTrack img{
  width: 100%;
  flex: 0 0 100%;
  height: 360px;
  object-fit: cover;
  scroll-snap-align: start;
  display: block;
}

/* Dots hint (optional look) */
.pmHint{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  opacity: .65;
  margin-top: 10px;
}

/* Details */
.pmDetails{
  margin-top: 14px;
  padding: 14px 2px 4px;
}

.pmName{
  margin: 0 0 6px 0;
  font-size: 22px;
}

.pmPrice{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  opacity: .85;
  margin-bottom: 10px;
}

.pmDesc{
  margin: 0;
  line-height: 1.75;
  color: rgba(15,20,25,.78);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* PRODUCT MODAL FIXED */

.pmodalBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 20000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.pmodalBackdrop.open{
  opacity: 1;
  pointer-events: auto;
}

.pmodal{
  position: fixed;
  inset: 0;
  display: none;   /* ← THIS WAS MISSING */
  align-items: center;
  justify-content: center;
  z-index: 20001;
  padding: 20px;
}

.pmodal.open{
  display: flex;   /* only visible when open */
}

.pmGallery{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.pmGallery img{
  width: 100%;
  height: 420px;      /* controlled height */
  object-fit: contain; /* no cropping */
  background: #f6f6f6;
}

.pmArrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.5);
  color: white;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.pmArrow.left{ left: 12px; }
.pmArrow.right{ right: 12px; }

.pmArrow:hover{
  background: rgba(0,0,0,.7);
}

/* Confidence hero pattern: shift it blue */
.confidenceHero{
  position: relative;
  overflow: hidden;
}

.confidenceHero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(128, 141, 156, 0.18), transparent 60%),
    radial-gradient(700px 500px at 85% 80%, rgba(30,58,138,.14), transparent 60%),
    repeating-radial-gradient(circle at 20% 30%, rgba(43,108,176,.10) 0 1px, transparent 1px 18px);
  mix-blend-mode: multiply;
}

.confidenceHero .affirmation{
  position: relative;
  z-index: 1;
}
.sectionCommunities{
  margin-top: 26px;
}
.productCard{
  cursor: pointer;
}
.brandDock{
  padding: 10px; /* tighter since it’s only an image now */
}

.brandDock img.brandMark{
  display:block;
  height: 34px;
  width: auto;
}

/* About page: background image cards (keep text readable) */
.sectionCard.bgPM,
.sectionCard.bgS{
  position: relative;
  overflow: hidden;
  color: rgba(255,255,255,.92);
}

.sectionCard.bgPM::before,
.sectionCard.bgS::before{
  content:"";
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  z-index: 0;
}

.sectionCard.bgPM::before{ background-image: url("assets/pm.jpeg"); }
.sectionCard.bgS::before{  background-image: url("assets/s.jpeg");  }

.sectionCard.bgPM::after,
.sectionCard.bgS::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    rgba(0,0,0,.55),
    rgba(0,0,0,.35)
  );
  z-index: 0;
}

.sectionCard.bgPM > *,
.sectionCard.bgS > *{
  position: relative;
  z-index: 1;
}

/* =========================
   BrandDock logo (image)
   ========================= */
.brandDock{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.brandMark{
  height: 54px;         /* bigger */
  width: auto;
  display:block;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.35));
}

/* =========================
   About page card backgrounds
   ========================= */
.sectionCard.bgS,
.sectionCard.bgPM{
  position: relative;
  overflow: hidden;
  color: #fff !important;           /* force readable text */
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
  background-size: cover;
  background-position: center;
}

.sectionCard.bgS{ background-image: url("assets/s.jpeg"); }
.sectionCard.bgPM{ background-image: url("assets/pm.jpeg"); }

/* dark overlay so text stays visible */
.sectionCard.bgS::before,
.sectionCard.bgPM::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.55),
    rgba(0,0,0,.45)
  );
  pointer-events:none;
}

/* make sure the content sits ABOVE overlay */
.sectionCard.bgS > *,
.sectionCard.bgPM > *{
  position: relative;
  z-index: 1;
}

/* =========================
   Testimonials roller cards
   ========================= */
.troller .rollerControls{ position: static; } /* because we place controls in the header row */

.tCard{
  width: 360px;
  min-width: 360px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

.tImg{
  height: 180px;
  background-size: cover;
  background-position: center;
}

.tMeta{
  padding: 14px 14px 16px;
}

.tMeta p{
  margin: 0;
  line-height: 1.4;
}

.tBy{
  margin-top: 10px;
  font-weight: 700;
  opacity: .85;
}

.tCard.tVideo video{
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
}

/* --- Testimonials Roller --- */
.tRoller{
  position: relative;
}

.tRollerControls{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 4px 0 12px;
}

.tRollerViewport{
  overflow: hidden;
  border-radius: 18px;
}

.tRollerTrack{
  display: flex;
  gap: 14px;
  padding: 2px;
  will-change: transform;
  transform: translateX(0);
  transition: transform 520ms cubic-bezier(.16,1,.3,1);
}

/* Each slide width */
.tSlide{
  flex: 0 0 clamp(260px, 34vw, 360px);
}

.tImg{
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  margin-bottom: 12px;
}

.tVideo .tVid{
  width: 100%;
  height: 260px;
  border-radius: 14px;
  display: block;
  background: rgba(0,0,0,0.12);
}

/* Small screens: slightly bigger slide */
@media (max-width: 640px){
  .tSlide{
    flex-basis: 82vw;
  }
}

.brandDock{
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 60;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;

  padding: 6px 9px;
  border-radius: 999px;

  background: rgba(251,250,246,.85);
  border: 1px solid rgba(15,20,25,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  backdrop-filter: blur(12px);
}

/* NEW LOGO SIZE */
.brandMark{
  height: 52px;          /* 🔥 increase size */
  width: auto;
  display:block;
}

/* ===== About page textured sections ===== */

.aboutCard{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(15,20,25,.10);
  box-shadow: var(--shadow2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Remove dark blending from global overlays */
.aboutCard::before,
.aboutCard::after{
  display: none;
}

/* Add a light readable overlay */
.aboutCard .content{
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,.82);
  padding: 22px;
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

.aboutCard{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 36px;
  border: 1px solid rgba(15,20,25,.10);
  box-shadow: var(--shadow2);
  background-size: cover;
  background-position: center;
}

.aboutContent{
  background: rgba(255,255,255,.88);
  padding: 28px;
  border-radius: 18px;
  backdrop-filter: blur(6px);
}

.aboutContent h3{
  margin-top:0;
  letter-spacing:.12em;
  font-size:14px;
  text-transform:uppercase;
}

/* ABOUT page: brighten bg cards so text stays readable */
.sectionCard.bgS,
.sectionCard.bgPM{
  color: rgba(15,20,25,.92) !important; /* dark readable text */
  text-shadow: none !important;
}

/* keep your background image, but replace the dark overlay with a light one */
.sectionCard.bgS::after,
.sectionCard.bgPM::after{
  background: linear-gradient(
    rgba(255,255,255,.72),
    rgba(255,255,255,.58)
  ) !important;
}

/* optional: slightly reduce the “heavy” look of the image layer */
.sectionCard.bgS::before,
.sectionCard.bgPM::before{
  filter: saturate(1.02) contrast(1.02) brightness(1.02) !important;
}

/* make the small paragraph text darker (some of yours is using lighter rgba) */
.sectionCard.bgS .small,
.sectionCard.bgPM .small{
  color: rgba(15,20,25,.80) !important;
}

.sectionCard.bgS .tag,
.sectionCard.bgPM .tag{
  color: rgba(15,20,25,.68) !important;
}

/* =======================================
   ABOUT PAGE — REMOVE GLOBAL DARK TINT
   ======================================= */

body.lightPage::before{
  background:
    linear-gradient(
      rgba(243,241,234,.98),
      rgba(243,241,234,.98)
    ) !important;
}

/* Remove denim dark blending */
body.lightPage::after{
  opacity: .06 !important;  /* was .14 */
  
}

/* Make section cards fully bright */
.sectionCard.bgS::after,
.sectionCard.bgPM::after{
  background: linear-gradient(
    rgba(255,255,255,.92),
    rgba(255,255,255,.88)
  ) !important;
}

/* Remove any inherited text dimming */
.sectionCard.bgS,
.sectionCard.bgPM{
  color: rgba(15,20,25,.95) !important;
}

.sectionCard.bgS .small,
.sectionCard.bgPM .small{
  color: rgba(15,20,25,.85) !important;
}

/* =========================
   Confidence Blue Paper
   ========================= */

.confidenceHero{
  border-radius: var(--radius);
  padding: 26px;
  border: 1px solid rgba(15,20,25,.10);

  background:
  linear-gradient(
    rgba(120,170,240,.55),
    rgba(120,170,240,.45)
  );

  position: relative;
  overflow:hidden;
  box-shadow: var(--shadow2);
}
/* =========================
   Darker Confidence Blue
   ========================= */

.confidenceHero{

  background:
    linear-gradient(
      rgba(70,120,200,.75),
      rgba(50,100,180,.70)
    );

  border: 1px solid rgba(15,20,25,.15);
}

/* =========================
   FAQ Light Blue Boxes
   ========================= */

.faq details{
  background: linear-gradient(
    rgba(120,170,240,.55),
    rgba(120,170,240,.45)
  );
  border-radius: 16px;
  padding: 14px 18px;
  border: 1px solid rgba(43,108,176,.18);
  backdrop-filter: blur(4px);
  transition: background 240ms ease;
}

.faq details[open]{
  background: linear-gradient(
    rgba(120,170,240,.55),
    rgba(120,170,240,.45)
  );
}

.faq summary{
  font-weight: 700;
}

/* =========================
   FORCE About Headings
   ========================= */

body.lightPage .wrap h2,
body.lightPage .wrap .tag {

  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  opacity: 1 !important;
}

/* About: Problem+Solution stacked, USP on right */
.aboutGridUSP{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  align-items: stretch;
}

.aboutStack{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

@media (max-width: 900px){
  .aboutGridUSP{
    grid-template-columns: 1fr;
  }
}

/* Add spacing above Problem and USP */
.aboutStack .sectionCard:first-child,
.uspCard {
  margin-top: 30px;
}

/* Make Solution card grow to match USP height */
.aboutStack .sectionCard:last-child {
  flex-grow: 1;
  min-height: 230px;   /* adjust if needed */
  margin-bottom: 20px;
}

/* Add space below USP so it doesn't touch Mission/Vision */
.uspCard {
  margin-bottom: 20px;
}

/* Mission & Vision same as FAQ boxes */
.sectionCard.bgPM {
  background: linear-gradient(
    rgba(0, 102, 246, 0.55),
    rgba(0, 106, 255, 0.45)
  );;   /* same light blue tone */
  border: 1px solid rgba(43,108,176,.18);
}

/* Contact Say Hi box same light blue */
.contactHero {
  background:linear-gradient(
    rgba(120,170,240,.55),
    rgba(120,170,240,.45)
  ), url("assets/denim-scraps.png");
  border: 1px solid rgba(43,108,176,.18);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow2);
}

/* ===== Mission & Vision FAQ-style light blue ===== */
.aboutGrid .sectionCard.bgPM {
  background: linear-gradient(
    rgba(0, 102, 246, 0.55),
    rgba(0, 106, 255, 0.45)
  ) !important;
  border: 1px solid rgba(43,108,176,.18);
  margin-top: 20px;
}

/* ===== FIX: Mission/Vision should match FAQ light-blue ===== */
:root{
  --faqBlue1: rgba(120,170,240,0.55);
  --faqBlue2: rgba(120,170,240,0.45);
}

/* FAQ boxes (also fixes the invalid alpha like rgba(...,55)) */
.faq details{
  background: linear-gradient(var(--faqBlue1), var(--faqBlue2));
}
.faq details[open]{
  background: linear-gradient(var(--faqBlue1), var(--faqBlue2));
}

/* Mission + Vision cards: remove the pm.jpeg layers entirely */
.aboutGrid .sectionCard.bgPM{
  background: linear-gradient(var(--faqBlue1), var(--faqBlue2)) !important;
  border: 3px solid rgba(0, 0, 0, 0.18);
  color: var(--ink) !important;
  text-shadow: none !important;
}

.aboutGrid .sectionCard.bgPM::before,
.aboutGrid .sectionCard.bgPM::after{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Leadership grid (About page) */
.teamGrid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 900px){
  .teamGrid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px){
  .teamGrid{ grid-template-columns: 1fr; }
}

.teamCard{
  text-align: center;
  padding: 14px;
}

.teamPhoto{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}

.teamLabel{
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
}

/* TEAM SECTION */
.teamSection{
  margin-top: 24px;
}

.teamWrapper{
  padding-top: 28px; /* extra top padding */
  padding-bottom: 22px;
}

.teamGrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 900px){
  .teamGrid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px){
  .teamGrid{ grid-template-columns: 1fr; }
}

.teamCard{
  text-align: center;
}

.teamPhoto{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}

/* Move Suhanee image slightly downward */
.suhaneeFix{
  object-position: center 30%;
}

.teamLabel{
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
}

/* =========================
   DeNew in Action – Popups
   ========================= */

.popupsSection{
  margin-top: 36px;
}

.popupsGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 1100px){
  .popupsGrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .popupsGrid{ grid-template-columns: 1fr; }
}

.popupBox{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.popupCarousel{
  position:relative;
  border-radius: var(--radius2);
  overflow:hidden;
  border: 1px solid rgba(15,20,25,.12);
  background:#fff;
}

.popupCarousel img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.popupNav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background: rgba(15,20,25,.75);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  z-index:2;
}

.popupNav.prev{ left:10px; }
.popupNav.next{ right:10px; }

.popupNav:hover{
  background: rgba(15,20,25,.9);
}

.popupTitle{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size:16px;
  line-height:1.4;
  margin-top:6px;
}

/* =========================
   DeNew in Action – Arrows Hover Only
   ========================= */

.popupControls{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  pointer-events: none; /* prevents invisible clicks */
}

/* Show only when hovering the image/card */
.popupBox:hover .popupControls{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Optional: smoother fade for arrows themselves */
.popupNav{
  transition: transform 240ms var(--ease), background 240ms var(--ease);
}

/* ===== DeNew in Action: show arrows only when IMAGE is hovered ===== */

/* default hidden */
.popupsSection .popupBox .popupControls{
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(6px) !important;
  pointer-events: none !important;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 0s linear 260ms;
}

/* reveal ONLY when hovering the image area */
.popupsSection .popupBox .popupCarousel:hover ~ .popupBottom .popupControls{
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 0s;
}
/* ===== About: DeNew in Action — hover-only arrows (override) ===== */
.popupsSection .popupCarousel{
  position: relative;
}

/* Hide by default */
.popupsSection .popupCarousel .popupNav{
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) scale(.96);
  transition: opacity 220ms var(--ease2), transform 220ms var(--ease2), background 220ms var(--ease2);
}

/* Show only when IMAGE area is hovered (or focused within for keyboard) */
.popupsSection .popupCarousel:hover .popupNav,
.popupsSection .popupCarousel:focus-within .popupNav{
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

/* Optional: slightly nicer hover feel */
.popupsSection .popupCarousel img{
  transition: transform 360ms var(--ease2), filter 360ms var(--ease2);
}
.popupsSection .popupCarousel:hover img{
  transform: scale(1.02);
  filter: saturate(1.03) contrast(1.02);
}
/* ===== About: DeNew in Action — arrows ONLY on hover (no sticky focus) ===== */

/* Hide by default */
.popupsSection .popupCarousel .popupNav{
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) scale(.96);
  transition: opacity 220ms var(--ease2), transform 220ms var(--ease2);
}

/* Show ONLY while hovering the image area */
.popupsSection .popupCarousel:hover .popupNav{
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
/* Fix sticky arrows: kill focus-within keep-alive */
.popupsSection .popupCarousel:focus-within .popupNav{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-50%) scale(.96) !important;
}

/* Only show while hovering the image area */
.popupsSection .popupCarousel:hover .popupNav{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(-50%) scale(1) !important;
}