/* DIMACO MVP ? shared components. No remote fonts or runtime CSS dependency. */
:root{
  --green:#014139;
  --green-dark:#00342e;
  --gold:#f4b219;
  --ink:#173c36;
  --muted:#5a6965;
  --line:#dce4df;
  --soft:#f5f6f2;
  --white:#fff;
  --radius:12px;
  --space:76px
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:104px
}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit;
  cursor:pointer
}
img{
  max-width:100%;
  height:auto;
  display:block
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:3px solid #956400;
  outline-offset:5px
}
h1,h2,h3,p{
  margin:0
}
h1,h2,h3{
  line-height:1.16
}
h2{
  font-size:clamp(25px,2.6vw,36px);
  letter-spacing:-1px
}
h3{
  font-size:18px
}
p+p{
  margin-top:12px
}
[hidden]{
  display:none!important
}
.container{
  width:min(1280px,calc(100% - 64px));
  margin-inline:auto
}
.section{
  padding-block:var(--space)
}
.section-soft{
  background:var(--soft)
}
.eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  line-height:1.5;
  margin-bottom:12px;
  text-transform:uppercase
}
.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px
}
.text-link{
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:12px
}
.text-link:hover{
  text-decoration:underline
}
.button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  min-height:46px;
  padding:12px 20px;
  background:var(--green);
  color:white;
  border:1px solid var(--green);
  border-radius:6px;
  font-size:13px;
  font-weight:700;
  text-align:center;
  line-height:1.4
}
.button:hover{
  background:var(--green-dark)
}
.button-gold{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--green-dark)
}
.button-gold:hover{
  background:#ffd166;
  border-color:#ffd166
}
.button-outline{
  background:white;
  color:var(--green);
  border-color:var(--line)
}
.button-outline:hover{
  background:var(--green);
  color:#fff
}
.button-row{
  display:flex;
  gap:22px;
  align-items:center;
  flex-wrap:wrap
}
.skip-link{
  position:fixed;
  top:10px;
  left:15px;
  transform:translateY(-180%);
  z-index:100;
  background:#fff;
  padding:12px 20px;
  border:2px solid var(--green)
}
.skip-link:focus{
  transform:none
}
/* Header */
.topbar{
  background:var(--green);
  color:#fff;
  font-size:11px;
  padding:7px 0
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  gap:16px
}
.site-header{
  position:sticky;
  top:0;
  background:#fff;
  z-index:20;
  border-bottom:1px solid var(--line)
}
.header-row{
  display:flex;
  align-items:center;
  gap:28px;
  min-height:90px
}
.brand{
  width:226px;
  flex-shrink:0
}
.desktop-nav{
  display:flex;
  gap:25px;
  margin-left:auto;
  font-size:13px;
  font-weight:600
}
.desktop-nav a{
  padding:12px 0
}
.desktop-nav a:hover{
  color:#846009
}
.header-contact{
  white-space:nowrap
}
.menu-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  background:white;
  color:var(--green);
  border-radius:6px;
  font-size:23px
}
.mobile-nav{
  padding-block:12px 20px
}
.mobile-nav a{
  display:block;
  padding:11px 4px;
  border-top:1px solid var(--line)
}
/* Hero keeps all original artwork fully visible. */
.hero{
  background:var(--green-dark);
  color:#fff;
  position:relative
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:60px;
  align-items:center;
  padding-block:52px
}
.hero .eyebrow{
  color:var(--gold)
}
.hero h1{
  font-size:clamp(42px,4.6vw,66px);
  font-weight:750;
  letter-spacing:-2.5px;
  line-height:1.03
}
.hero h1 em{
  font-style:normal;
  color:var(--gold)
}
.hero-intro{
  font-size:20px;
  max-width:410px;
  margin-top:23px
}
.hero-description{
  font-size:14px;
  color:#d6e1db;
  max-width:440px
}
.hero .button-row{
  margin-top:26px
}
.hero-link{
  font-size:13px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  text-decoration:underline;
  text-underline-offset:5px
}
.hero-proof{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  font-size:11px;
  border-top:1px solid #ffffff30;
  margin-top:32px;
  padding-top:20px
}
.hero-proof span:before{
  content:'✓';
  color:var(--gold);
  margin-right:8px
}
.hero-art{
  display:grid;
  gap:14px
}
.hero-art img{
  width:100%;
  object-fit:contain;
  border-radius:6px;
  background:#eee;
  box-shadow:0 8px 24px #0002
}
/* Reusable category and product cards */
.category-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px
}
.category-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  transition:border-color .2s
}
.category-card:hover{
  border-color:var(--green)
}
.category-card img{
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  background:var(--soft)
}
.category-card>span{
  font-size:13px;
  line-height:1.4;
  font-weight:700;
  padding:16px 13px;
  display:flex;
  justify-content:space-between;
  gap:10px
}
.category-card>span>span{
  color:#8b6511
}
.featured-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.product-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0
}
.product-art{
  display:block;
  background:var(--soft)
}
.product-art img{
  aspect-ratio:1;
  width:100%;
  object-fit:contain
}
.product-body{
  padding:20px;
  display:flex;
  flex-direction:column;
  flex:1;
  align-items:start
}
.product-body .eyebrow{
  font-size:10px;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:10px
}
.product-body h3{
  font-size:15px;
  line-height:1.4;
  font-weight:650;
  margin-bottom:6px
}
.product-brand{
  font-size:11px;
  letter-spacing:.7px;
  color:var(--muted)
}
.price{
  font-size:23px;
  font-weight:700;
  margin-top:10px!important;
  line-height:1.3
}
.product-note{
  font-size:10px;
  line-height:1.5;
  margin-top:7px!important;
  color:var(--muted)
}
.product-cta{
  width:100%;
  margin-top:auto!important;
  font-size:12px
}
.product-body .product-cta{
  margin-top:20px!important
}
.product-body:has(.price) .product-cta{
  margin-top:auto!important
}
.product-body:has(.price){
  gap:3px
}
.product-body:has(.price) .product-note{
  margin-bottom:16px
}
.product-body:has(.price) .price{
  margin-bottom:14px
}
/* Confidence / full catalog */
.confidence{
  text-align:center;
  background:#f1f0e9
}
.confidence-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:30px;
  margin-top:36px
}
.confidence-mark{
  display:block;
  font-size:29px;
  line-height:1;
  margin-bottom:18px;
  color:var(--green)
}
.confidence h3{
  font-size:16px;
  margin-bottom:10px
}
.confidence-grid p{
  font-size:13px;
  color:var(--muted)
}
.catalog{
  padding-block:22px 60px
}
.catalog-section{
  padding-top:50px;
  scroll-margin-top:12px
}
.catalog-section h2{
  font-size:26px
}
.rail-controls{
  display:flex;
  gap:8px
}
.icon-button{
  border:1px solid var(--line);
  background:white;
  border-radius:50%;
  width:44px;
  height:44px;
  color:var(--green);
  font-size:21px
}
.icon-button:hover{
  background:var(--soft)
}
.icon-button:disabled{
  opacity:.4;
  cursor:default
}
.product-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 48px)/3);
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-color:#9aad9e #eff1ec;
  padding:4px 2px 18px;
  overscroll-behavior-x:contain
}
.product-rail .product-card{
  scroll-snap-align:start
}
.product-rail:focus-visible{
  outline-offset:1px
}
.rail-controls{
  visibility:hidden
}
.js .rail-controls{
  visibility:visible
}
/* Institutional information, stores and contact */
.about-grid{
  display:grid;
  grid-template-columns:.8fr 1.3fr;
  gap:80px
}
.about-lead{
  font-size:24px;
  line-height:1.4;
  margin-top:20px;
  max-width:360px
}
.about-grid p:not(.eyebrow):not(.about-lead){
  font-size:14px;
  color:var(--muted);
  margin-top:14px
}
.mission-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  margin-bottom:30px
}
.institutional h3{
  font-size:18px
}
.values{
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:16px 0 0;
  gap:9px
}
.values li{
  font-size:12px;
  background:white;
  border:1px solid var(--line);
  padding:7px 12px;
  border-radius:4px
}
.store-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.store-card{
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  border-radius:8px;
  padding:30px;
  position:relative
}
.store-symbol{
  display:block;
  font-size:12px;
  letter-spacing:2px;
  color:var(--muted);
  margin-bottom:20px
}
.store-card h3{
  font-size:21px;
  margin-bottom:15px
}
.store-card address{
  font-style:normal;
  font-size:14px;
  color:var(--muted);
  line-height:1.8
}
.contact-section{
  background:var(--green);
  color:white;
  border-radius:var(--radius);
  padding:38px 44px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  margin-bottom:76px
}
.contact-section .eyebrow{
  color:var(--gold)
}
.contact-section p:last-child{
  margin-top:12px
}
.contact-section .button{
  flex-shrink:0
}
.site-footer{
  background:var(--green-dark);
  color:white;
  padding:50px 0 0
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:38px;
  padding-bottom:42px
}
.footer-brand{
  display:block;
  background:white;
  padding:10px;
  border-radius:4px;
  max-width:240px
}
.site-footer h2{
  font-size:14px;
  letter-spacing:0;
  margin-bottom:16px
}
.site-footer p,.site-footer a:not(.footer-brand){
  font-size:12px;
  color:#d5e1dc;
  line-height:1.9
}
.site-footer p{
  margin-top:20px
}
.site-footer nav a,.footer-grid>div>a:not(.footer-brand){
  display:block;
  padding:4px 0;
  min-height:32px
}
.site-footer a:hover{
  text-decoration:underline
}
.copyright{
  border-top:1px solid #ffffff25;
  padding-block:22px;
  font-size:11px;
  color:#d5e1dc
}
@media(min-width:1600px){
  .hero-grid{
    padding-block:65px
  }
}
@media(max-width:1100px){
  .desktop-nav{
    display:none
  }
  .header-row{
    gap:16px;
    min-height:78px
  }
  .header-contact{
    margin-left:auto
  }
  .menu-toggle{
    display:block
  }
  .hero-grid{
    gap:32px
  }
  .category-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .category-card{
    display:grid;
    grid-template-columns:100px 1fr;
    align-items:center
  }
  .category-card img{
    width:100px
  }
  .about-grid{
    gap:36px
  }
  .footer-grid{
    gap:25px
  }
  .product-body{
    padding:16px
  }
}
@media(min-width:1101px){
  .mobile-nav{
    display:none!important
  }
}
@media(max-width:800px){
  :root{
    --space:52px
  }
  .container{
    width:calc(100% - 40px)
  }
  .hero-grid{
    grid-template-columns:1fr;
    padding-block:36px;
    gap:30px
  }
  .hero-copy{
    max-width:600px
  }
  .hero h1{
    font-size:52px
  }
  .hero-art{
    max-width:660px
  }
  .hero-proof{
    margin-top:24px
  }
  .featured-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .product-rail{
    grid-auto-columns:calc((100% - 20px)/2);
    gap:20px
  }
  .category-card{
    display:block
  }
  .category-card img{
    width:100%
  }
  .confidence-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .about-grid{
    grid-template-columns:1fr
  }
  .about-lead{
    max-width:500px
  }
  .store-grid{
    grid-template-columns:1fr
  }
  .store-card{
    padding:24px
  }
  .contact-section{
    padding:28px;
    align-items:start;
    flex-direction:column;
    margin-bottom:52px
  }
  .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .section-heading{
    align-items:start
  }
  .section-heading .text-link{
    white-space:normal
  }
  .catalog-section h2{
    font-size:24px
  }
  .rail-controls{
    flex-shrink:0
  }
}
@media(max-width:480px){
  :root{
    --space:40px
  }
  .container{
    width:calc(100% - 32px)
  }
  .topbar{
    font-size:10px
  }
  .topbar .container{
    gap:8px
  }
  .header-row{
    min-height:70px;
    gap:9px
  }
  .brand{
    width:145px;
    flex-shrink:1
  }
  .header-contact{
    font-size:11px;
    min-height:42px;
    padding:10px;
    gap:5px
  }
  .header-contact span{
    display:none
  }
  .menu-toggle{
    flex-shrink:0;
    width:42px;
    height:42px
  }
  .hero h1{
    font-size:44px;
    letter-spacing:-1.7px
  }
  .hero-intro{
    font-size:18px
  }
  .hero-description{
    font-size:13px
  }
  .hero .eyebrow{
    font-size:10px
  }
  .hero .button-row{
    gap:8px 20px
  }
  .hero-art{
    gap:10px
  }
  .hero-proof{
    font-size:10px;
    gap:14px
  }
  .category-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }
  .category-card>span{
    padding:13px 10px;
    font-size:12px
  }
  .section-heading{
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:22px
  }
  .section-heading h2{
    font-size:27px
  }
  .featured-grid{
    grid-template-columns:1fr;
    gap:20px
  }
  .product-rail{
    grid-auto-columns:100%;
    gap:16px
  }
  .product-body{
    padding:18px
  }
  .confidence-grid{
    gap:28px 20px
  }
  .confidence h3{
    font-size:15px
  }
  .confidence-grid p{
    font-size:12px
  }
  .mission-grid{
    grid-template-columns:1fr;
    gap:22px
  }
  .catalog-section .section-heading{
    flex-wrap:nowrap;
    align-items:center
  }
  .catalog-section h2{
    font-size:22px;
    letter-spacing:-.6px
  }
  .contact-section{
    padding:25px 20px
  }
  .contact-section .button{
    width:100%
  }
  .footer-grid{
    gap:30px 20px
  }
  .footer-grid>div:first-child{
    grid-column:1/-1
  }
  .footer-brand{
    max-width:220px
  }
  .site-footer nav a,.footer-grid>div>a:not(.footer-brand){
    min-height:44px
  }
  .copyright{
    font-size:10px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *{
    transition:none!important;
    scroll-behavior:auto!important
  }
}
/* Keep the hero compact in tablet portrait while preserving complete artwork. */
@media(min-width:768px) and (max-width:800px){
  .hero-grid{
    grid-template-columns:1fr 1fr;
    gap:28px
  }
  .hero h1{
    font-size:44px
  }
  .hero-intro{
    font-size:18px
  }
  .hero .button-row{
    gap:10px
  }
  .hero-proof{
    gap:12px
  }
}
/* Optional commercial fields: include only when verified. */
.price-previous{
  font-size:13px;
  color:var(--muted);
  text-decoration:line-through
}
.promotion{
  font-size:11px;
  font-weight:700;
  background:var(--gold);
  color:var(--green-dark);
  padding:4px 8px;
  border-radius:4px
}

/* Category icons, product details and locations. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.category-card .category-icon { width: 72px; height: 72px; margin: 24px auto 8px; padding: 0; object-fit: contain; background: transparent; }
.category-card { background: linear-gradient(145deg, #fff, #f5f6f2); }
.product-description { font-size: 13px; line-height: 1.6; color: var(--muted); margin-bottom: 6px; }
.product-note { font-size: 12px; }
.monthly-news .product-body { flex: 1; }
.store-card { padding: 0; overflow: hidden; }
.store-visual { background: linear-gradient(135deg,#eef2e9,#f9f8f0); }
.store-visual svg { display: block; width: 100%; height: 155px; }
.store-body { padding: 25px; }
.store-body .button { margin-top: 22px; }
.store-badge { display: inline-block; color: var(--green); background: #f4b21933; font-size: 10px; letter-spacing: 1px; font-weight: 700; padding: 4px 8px; border-radius: 4px; margin-bottom: 10px; }
@media (min-width:801px) and (max-width:1100px) { .category-card .category-icon { margin: 18px auto; width: 64px; height: 64px; } }
@media (max-width:800px) { .category-card .category-icon { width: 64px; height: 64px; } }

/* Approved hero montage remains visible behind the introductory content. */
.hero-background { position: relative; isolation: isolate; overflow: hidden; }
.hero-background .hero-stage { position: absolute; inset: 0; z-index: -2; }
.hero-background .hero-slide { position: absolute; inset: 0; }
.hero-background .hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-background::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg,rgba(0,40,35,.96) 0%,rgba(0,40,35,.88) 32%,rgba(0,40,35,.48) 60%,rgba(0,40,35,.10) 100%),linear-gradient(0deg,rgba(0,30,26,.7),transparent 35%); }
.hero-background .hero-grid { display: flex; align-items: center; min-height: clamp(560px,43vw,700px); padding-block: 64px 100px; }
.hero-background .hero-copy { width: min(100%,570px); }
.hero-background .hero-proof { max-width: 440px; }
.hero-image-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; color: #fff; }
.hero-background :focus-visible { outline-color: var(--gold); }
@media(min-width:1600px) { .hero-background .hero-copy { width: 600px; } }
@media(max-width:1024px) { .hero-background::before { background: linear-gradient(90deg,rgba(0,40,35,.94),rgba(0,40,35,.79) 55%,rgba(0,40,35,.35)),linear-gradient(0deg,rgba(0,30,26,.75),transparent 40%); } .hero-background .hero-grid { min-height: 590px; padding-block: 48px 98px; } }
@media(max-width:600px) { .hero-background .hero-grid { min-height: 0; padding-block: 40px 24px; } .hero-background::before { background: linear-gradient(90deg,rgba(0,40,35,.91),rgba(0,40,35,.73)),linear-gradient(0deg,rgba(0,30,26,.8),transparent 60%); } .hero-background .hero-slide img { object-position: 60% center; } .hero-background .hero-proof { margin-top: 12px; } }

/* Full artwork carousel: scrolling works with touch, keyboard and without JS. */
.banner-showcase { padding-block: 32px; background: #f3f0e7; border-top: 4px solid var(--gold); }
.banner-showcase .section-heading { margin-bottom: 20px; }
.banner-showcase h2 { font-size: clamp(24px, 3vw, 32px); }
.banner-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-color: #9aad9e #eff1ec; border-radius: 12px; border: 1px solid var(--line); background: #fff; box-shadow: 0 10px 30px #01413912; }
.banner-card { min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.banner-art { display: block; background: #eeede7; }
.banner-art img { width: 100%; height: auto; aspect-ratio: 14 / 3; object-fit: contain; }
.banner-caption { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 22px 28px; }
.banner-caption h3 { font-size: 20px; line-height: 1.3; margin-bottom: 6px; }
.banner-caption p { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 720px; }
.banner-caption .button { flex-shrink: 0; font-size: 13px; }
.banner-selectors { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.banner-selectors a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px; border: 1px solid #c6d2c9; border-radius: 6px; color: var(--green); font-size: 14px; font-weight: 600; }
.banner-selectors span { font-size: 11px; opacity: .8; }
.banner-selectors a:hover { background: #e6e9de; }
.js .banner-selectors a[aria-current=true] { background: var(--green); border-color: var(--green); color: white; box-shadow: inset 0 -3px var(--gold); }
@media(max-width:800px) { .banner-caption { align-items: start; flex-direction: column; gap: 16px; padding: 20px; } }
@media(max-width:480px) { .banner-showcase { padding-block: 24px; } .banner-showcase .section-heading { flex-wrap: nowrap; gap: 12px; align-items: center; } .banner-showcase .eyebrow { font-size: 10px; } .banner-showcase h2 { font-size: 24px; } .banner-caption { padding: 18px; } .banner-caption h3 { font-size: 19px; } .banner-selectors { gap: 6px; } .banner-selectors a { gap: 5px; font-size: 12px; padding-inline: 5px; } }