:root {
  --green:#007b2b;
  --green-dark:#006420;
  --navy:#061b34;
  --muted:#45505d;
  --mint:#edf8f1;
  --white:#fff;
  --border:#dfe8e7;
  font-size:clamp(10px,1.2vw,16px)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem
}

body {
  margin:0;
  background:#fcfefe;
  color:var(--navy);
  font-family:"Poppins",Arial,Helvetica,sans-serif;
  line-height:1.4
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

a {
  color:inherit;
  text-decoration:none
}

button {
  color:inherit
}

img {
  display:block;
  max-width:100%
}

h1,h2,h3,p,figure {
  margin:0
}

h1,h2,h3 {
  line-height:1.16
}

a,button {
  touch-action:manipulation
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid #0c98c4;
  outline-offset:4px
}

.container {
  width:90.4%;
  max-width:1180px;
  margin-inline:auto
}

.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.icon {
  width:1.35em;
  height:1.35em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}

.skip-link {
  position:fixed;
  top:-100px;
  left:1rem;
  background:var(--navy);
  color:white;
  z-index:100;
  padding:1rem
}

.skip-link:focus {
  top:1rem
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:1px solid var(--green);
  border-radius:2rem;
  padding:.85rem 1.5rem;
  background:linear-gradient(105deg,#008431,#006b24);
  font-weight:700;
  color:white;
  line-height:1.2;
  box-shadow:0 3px 7px #006b2415;
  transition:background .2s,transform .2s
}

.button:hover {
  background:var(--green-dark);
  transform:translateY(-2px)
}

.button-outline {
  background:#ffffffba;
  color:var(--navy);
  box-shadow:none
}

.button-outline .icon {
  color:var(--green)
}

.button-outline:hover {
  background:var(--mint)
}

.eyebrow {
  color:var(--green);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase
}

.header {
  background:#fcfefe
}

.header-inner {
  height:clamp(54px,6.46vw,84px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem
}

.brand {
  display:block;
  width:5rem;
  height:5rem;
  flex-shrink:0;
  border-radius:50%;
  overflow:hidden
}

.brand img {
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.36)
}

.navigation {
  display:flex;
  gap:1.75rem;
  margin-left:3rem;
  font-size:.94rem
}

.navigation a {
  position:relative;
  padding:.8rem 0
}

.navigation a:hover,.navigation a.active {
  color:var(--green)
}

.navigation a.active:after {
  content:"";
  height:2px;
  background:var(--green);
  position:absolute;
  bottom:.2rem;
  left:0;
  right:0
}

.quote-button {
  font-size:.84rem;
  padding:.65rem 1rem
}

.menu-toggle {
  display:none;
  border:0;
  background:none;
  padding:.7rem
}

.hero {
  height:clamp(470px,56.2vw,733px);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(ellipse at 5% 0%,#d9f4fa 0,transparent 52%),radial-gradient(ellipse at 5% 100%,#eaf8ee 0,transparent 65%),#f3f7f4
}

.hero-art {
  position:absolute;
  inset:0;
  z-index:-1;
  background:url('assets/reference.png') center calc(-1 * clamp(54px,6.46vw,84px))/100% auto no-repeat;
  mask-image:linear-gradient(to right,transparent 0%,transparent 46%,#000 50%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 46%,#000 50%)
}

.hero-inner {
  height:100%;
  display:flex;
  align-items:center
}

.hero-copy {
  width:50%;
  padding-bottom:.3rem
}

.hero-copy .eyebrow {
  margin-bottom:.7rem
}

.hero-copy .eyebrow span {
  margin:0 .3rem
}

h1 {
  font-size:3.35rem;
  font-weight:750;
  letter-spacing:-.035em;
  line-height:1.08
}

h1 span,h2 span {
  color:var(--green)
}

.hero-description {
  font-size:1.05rem;
  line-height:1.45;
  max-width:28rem;
  margin-top:1.1rem;
  color:var(--muted)
}

.hero-actions {
  display:flex;
  gap:1rem;
  margin-top:1.5rem;
  font-size:.95rem
}

.hero-benefits {
  display:flex;
  gap:3rem;
  margin-top:3rem
}

.hero-benefits>div {
  text-align:center;
  min-width:5.5rem
}

.icon-circle {
  display:flex;
  align-items:center;
  justify-content:center;
  width:5rem;
  height:5rem;
  margin:0 auto .5rem;
  background:#fcfffd;
  border-radius:50%;
  color:var(--green);
  box-shadow:0 4px 8px #1637250a
}

.icon-circle .icon {
  width:2.7rem;
  height:2.7rem;
  stroke-width:1.6
}

.hero-benefits strong,.quality-grid strong {
  display:block;
  font-size:1rem;
  line-height:1.2
}

.quality-strip {
  background:linear-gradient(100deg,#edf9f2,#effaf5);
  padding:1.2rem 0 1.6rem
}

.quality-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  text-align:center;
  gap:2rem
}

.quality-grid>div+div {
  border-left:1px solid #deeee34d
}

.section {
  padding:2rem 0
}

.section-heading {
  text-align:center;
  margin-bottom:1.6rem
}

.section-heading .eyebrow {
  margin-bottom:.4rem
}

h2 {
  font-size:2.05rem;
  font-weight:750;
  letter-spacing:-.025em
}

.section-heading>p:last-child:not(.eyebrow) {
  color:var(--muted);
  font-size:.95rem;
  margin-top:.45rem
}

.product-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.9rem
}

.product-card {
  --card:#fdf9e8;
  --button:#ffec9e;
  background:var(--card);
  border:1px solid color-mix(in srgb,var(--card),var(--green) 3%);
  border-radius:.9rem;
  padding:.85rem 1rem 1.5rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center
}

.yellow {
  --card:#fffbea;
  --button:#ffed9c
}

.pink {
  --card:#fcf0fb;
  --button:#eeb9ed
}

.blue {
  --card:#eaf7ff;
  --button:#bce7ff
}

.green {
  --card:#f0fbf2;
  --button:#c9f0ce
}

.product-photo {
  width:100%;
  height:13.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.6rem;
  filter:drop-shadow(0 4px 4px #16272622)
}

.jug {
  height:100%;
  width:auto;
  object-fit:contain;
  clip-path:polygon(9% 9%,10% 6%,17% 5%,25% 5%,28% 7%,29% 15%,35% 15%,39% 11%,43% 8%,48% 7%,81% 7%,88% 10%,94% 17%,97% 24%,97% 85%,95% 92%,88% 97%,19% 98%,8% 94%,4% 88%,4% 24%,8% 17%)
}

.jug.handwash {
  clip-path:polygon(9% 10%,13% 9%,23% 9%,29% 11%,30% 17%,36% 17%,42% 10%,47% 9%,82% 8%,91% 13%,97% 20%,98% 86%,95% 93%,86% 97%,20% 97%,10% 95%,6% 91%,6% 25%,9% 18%)
}

.jug.glass {
  clip-path:polygon(7% 8%,10% 5%,21% 5%,27% 7%,28% 13%,35% 13%,41% 7%,48% 5%,80% 5%,90% 8%,96% 17%,97% 85%,94% 93%,88% 98%,19% 98%,9% 95%,4% 90%,3% 23%,7% 14%)
}

.jug.bleach {
  clip-path:polygon(8% 15%,12% 12%,22% 12%,29% 15%,30% 20%,38% 19%,44% 13%,52% 11%,83% 11%,92% 16%,97% 23%,97% 88%,93% 95%,85% 98%,22% 98%,11% 95%,8% 88%,5% 30%,8% 21%)
}

.product-card h3 {
  font-size:1.1rem;
  letter-spacing:-.03em
}

.arabic {
  font-size:1rem;
  font-weight:600;
  margin-top:.25rem;
  line-height:1.35
}

.product-description {
  font-size:.9rem;
  line-height:1.35;
  color:var(--muted);
  margin:1rem -.3rem 1.2rem
}

.product-button {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.7rem;
  width:100%;
  background:var(--button);
  border:0;
  border-radius:.65rem;
  font-weight:700;
  font-size:.9rem;
  padding:.7rem .4rem;
  margin-top:auto;
  transition:filter .2s,transform .2s
}

.product-button:hover {
  filter:brightness(.96);
  transform:translateY(-2px)
}

.product-button .icon {
  width:1rem;
  height:1rem
}

.why {
  padding-top:.3rem;
  padding-bottom:2.4rem
}

.reasons-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.3rem;
  padding:0 1.4rem
}

.reason {
  display:flex;
  align-items:flex-start;
  gap:1.2rem
}

.reason-icon {
  color:#fff;
  background:linear-gradient(130deg,#009b3c,#006723);
  border-radius:50%;
  width:4.5rem;
  height:4.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:inset -6px -1px 0 #00000008
}

.reason-icon .icon {
  width:2.5rem;
  height:2.5rem
}

.cyan {
  background:#009edb
}

.gold {
  background:#f6b900
}

.purple {
  background:#b044d0
}

.reason h3 {
  font-size:1rem;
  margin:.3rem 0 .6rem
}

.reason:first-child h3 {
  color:#005f3d
}

.reason p {
  color:var(--muted);
  font-size:.85rem;
  line-height:1.4
}

.testimonials {
  background:radial-gradient(ellipse at top,#fcfefe,#eff9f3);
  padding-top:1.6rem;
  padding-bottom:1.1rem
}

.testimonials .section-heading {
  margin-bottom:1rem
}

.testimonial-carousel {
  position:relative;
  padding:0 2rem
}

.testimonial-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem
}

.testimonial-card {
  background:#fff;
  border:1px solid #eff3f3;
  border-radius:.7rem;
  padding:1.25rem 1.7rem;
  box-shadow:0 4px 6px #173d2920;
  min-height:13rem
}

.stars {
  font-size:1.45rem;
  line-height:1.2;
  letter-spacing:.05em;
  color:#ffb600;
  margin-bottom:.4rem
}

.testimonial-card blockquote {
  font-size:.95rem;
  line-height:1.4;
  color:#424851;
  margin:0;
  min-height:4.2rem
}

.testimonial-card figcaption {
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-top:1.2rem
}

.testimonial-card figcaption strong {
  font-size:.95rem;
  display:block
}

.testimonial-card figcaption small {
  font-size:.78rem;
  color:#728092;
  display:block;
  margin-top:.1rem
}

.avatar {
  display:flex;
  align-items:center;
  justify-content:center;
  width:3rem;
  height:3rem;
  border-radius:50%;
  background:#dce9e5;
  font-size:0;
  background-image:url('assets/reference.png');
  background-size:836px 1881px;
  background-repeat:no-repeat
}

.avatar-ahmed {
  background-position:-81px -1372px
}

.avatar-sara {
  background-position:-329px -1372px
}

.avatar-imran {
  background-position:-577px -1372px
}

.carousel-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:3rem;
  height:3rem;
  border-radius:50%;
  border:0;
  background:#fff;
  box-shadow:0 3px 5px #1939291c;
  font-size:2.4rem;
  line-height:1
}

.carousel-arrow:hover {
  background:#e3f3e9
}

.previous {
  left:-2rem
}

.next {
  right:-2rem
}

.carousel-dots {
  display:flex;
  gap:.4rem;
  justify-content:center;
  margin-top:1rem
}

.carousel-dots button {
  padding:0;
  width:.65rem;
  height:.65rem;
  border-radius:50%;
  border:0;
  background:#c3d3cb;
  position:relative
}

.carousel-dots button:before {
  content:"";
  position:absolute;
  inset:-.65rem
}

.carousel-dots button.selected {
  background:var(--green)
}

.contact {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:24rem;
  background:linear-gradient(105deg,#007429,#00802a 47%,#4a845d);
  color:#fff;
  padding:1.4rem 0
}

.contact-art {
  position:absolute;
  inset:0 0 0 53%;
  background:url('assets/paper-products-hd.webp') center 57%/cover no-repeat;
  z-index:-1;
  mask-image:linear-gradient(to right,transparent,#000 22%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 22%)
}

.contact-grid {
  display:grid;
  grid-template-columns:32% 34% 1fr;
  gap:3.5%;
  align-items:start
}

.contact-copy {
  padding-top:1.1rem
}

.contact-copy h2 {
  font-size:2.4rem;
  color:white;
  letter-spacing:-.01em
}

.contact-copy h3 {
  font-size:1.5rem;
  margin-top:.3rem;
  font-weight:600
}

.contact-copy>p {
  font-size:.85rem;
  margin-top:1rem;
  line-height:1.35
}

.contact-copy address {
  font-style:normal;
  margin-top:1.25rem;
  font-weight:600;
  font-size:1rem
}

.contact-copy address a,.contact-copy address p {
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-bottom:.75rem
}

.contact-copy address span {
  display:flex;
  justify-content:center;
  align-items:center;
  background:#fff;
  color:var(--green);
  width:2.2rem;
  height:2.2rem;
  border-radius:50%
}

.contact-copy address .icon {
  width:1.2rem;
  height:1.2rem
}

.contact-form {
  background:#fff;
  color:var(--navy);
  border-radius:.65rem;
  padding:1.2rem 1.3rem;
  box-shadow:0 4px 15px #00451615;
  display:flex;
  flex-direction:column
}

.contact-form label {
  font-size:.72rem;
  color:#65707d;
  margin-bottom:.15rem
}

.contact-form label span {
  color:#be3333
}

.contact-form input,.contact-form select,.contact-form textarea {
  width:100%;
  min-width:0;
  color:var(--navy);
  border:1px solid #dfebee;
  border-radius:.35rem;
  font-size:.75rem;
  background:#fcfefe;
  padding:.25rem .5rem;
  min-height:.7rem;
  margin-bottom:.6rem
}

.contact-form input {
  height:.8rem;
  padding:0 .5rem
}

.contact-form input:focus {
  height:1.8rem
}

.contact-form select {
  height:1.9rem;
  color:#65707d
}

.contact-form textarea {
  resize:vertical;
  min-height:4.5rem;
  margin-top:.2rem
}

.contact-form .send-button {
  border-radius:.35rem;
  font-size:.85rem;
  padding:.6rem;
  width:100%
}

.send-button .icon {
  width:1rem;
  height:1rem
}

.form-status {
  font-size:.75rem;
  color:var(--green);
  margin-top:.4rem
}

.form-status:empty {
  display:none
}

.footer {
  background:#03192b;
  color:#d1d9df;
  position:relative;
  font-size:.78rem
}

.footer-grid {
  display:grid;
  grid-template-columns:27% 15% 21% 18% 15%;
  gap:1%;
  padding-top:1.5rem;
  padding-bottom:1.3rem
}

.footer-brand .brand {
  width:4.3rem;
  height:4.3rem;
  margin-bottom:.7rem
}

.footer-brand p {
  line-height:1.4;
  font-size:.78rem
}

.footer h3 {
  color:#fff;
  font-size:.95rem;
  margin-bottom:.6rem
}

.footer-grid>div>a,.footer-grid>div>button {
  display:block;
  font-size:.78rem;
  line-height:1.65
}

.footer-grid>div>button {
  border:0;
  background:none;
  padding:0;
  text-align:left
}

.footer a:hover,.footer-grid>div>button:hover {
  color:#a1e5af
}

.footer-contact a,.footer-contact p {
  display:flex!important;
  align-items:center;
  gap:.5rem;
  line-height:1.7
}

.footer-contact .icon {
  width:.85rem;
  height:.85rem
}

.social-links {
  display:flex;
  gap:.65rem;
  margin-top:.9rem
}

.social-links button {
  border:1px solid #30414f;
  background:none;
  color:#fff;
  width:2rem;
  height:2rem;
  border-radius:50%;
  font-weight:700;
  font-size:1.15rem;
  padding:0;
  line-height:1
}

.social-links button:hover {
  background:#123b2b
}

.social-status {
  margin-top:.7rem;
  font-size:.7rem
}

.footer-bottom {
  border-top:1px solid #203240;
  padding:.65rem 0
}

.footer-bottom .container {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.75rem
}

.footer-bottom span {
  margin:0 .5rem
}

.back-to-top {
  position:absolute;
  right:.9rem;
  bottom:.7rem;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.4rem;
  height:2.4rem;
  border-radius:.5rem;
  background:#203448;
  font-size:1.6rem
}

.product-dialog {
  padding:2.5rem;
  border:0;
  border-radius:1rem;
  width:min(760px,92vw);
  color:var(--navy);
  box-shadow:0 20px 80px #001b3440
}

.product-dialog::backdrop {
  background:#03192ba8;
  backdrop-filter:blur(4px)
}

.dialog-close {
  position:absolute;
  right:.8rem;
  top:.8rem;
  border:0;
  background:#eef5f0;
  border-radius:50%;
  width:2.4rem;
  height:2.4rem;
  display:grid;
  place-items:center
}

.dialog-content {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center
}

.dialog-photo {
  border-radius:.7rem;
  overflow:hidden;
  background:#eff7f1
}

.dialog-photo img {
  max-height:380px;
  width:100%;
  object-fit:contain
}

.dialog-details h2 {
  margin-top:.6rem
}

.dialog-details .arabic {
  text-align:left
}

.size-label {
  display:inline-block;
  background:var(--mint);
  color:var(--green);
  padding:.4rem .7rem;
  border-radius:.3rem;
  font-size:.8rem;
  margin-top:1.3rem
}

.dialog-details>p:last-of-type {
  margin:1.2rem 0 1.7rem;
  color:var(--muted);
  line-height:1.6
}

@media(min-width:1300px) {
  .hero-art {
    background-size:1304px auto
  }
  .contact {
    min-height:380px
  }
  .contact-form input {
    height:14px
  }
}

@media(max-width:1000px) {
  .navigation {
    gap:1.6rem;
    margin-left:1rem
  }
  .hero-copy {
    width:51%
  }
  .hero-actions {
    gap:.8rem
  }
  .hero-actions .button {
    padding:.85rem 1.3rem
  }
  .hero-benefits {
    gap:3rem
  }
  .reasons-grid {
    gap:2rem;
    padding-inline:1.3rem
  }
}

@media(max-width:700px) {
  :root {
    font-size:14px
  }
  .container {
    width:90%
  }
  .header-inner {
    height:76px;
    gap:1rem
  }
  .brand {
    width:54px;
    height:54px
  }
  .quote-button {
    margin-left:auto;
    font-size:.8rem
  }
  .menu-toggle {
    display:flex
  }
  .navigation {
    display:none;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    z-index:20;
    background:#fff;
    box-shadow:0 8px 10px #03192b10;
    margin:0;
    padding:1rem 5%;
    flex-direction:column;
    gap:0;
    font-size:1rem
  }
  .navigation.open {
    display:flex
  }
  .navigation a {
    padding:.7rem 0
  }
  .navigation a.active:after {
    display:none
  }
  .hero {
    height:auto;
    min-height:780px;
    background:linear-gradient(160deg,#e8f7f8,#f4faf5)
  }
  .hero-inner {
    display:block;
    padding-top:2.4rem
  }
  .hero-copy {
    width:100%;
    padding:0
  }
  .hero .eyebrow {
    font-size:.75rem
  }
  h1 {
    font-size:clamp(2.1rem,6.8vw,3.2rem);
    line-height:1.1
  }
  .hero-description {
    max-width:36rem;
    font-size:1rem
  }
  .hero-actions {
    font-size:.85rem;
    flex-wrap:wrap;
    margin-top:1.2rem
  }
  .hero-actions .button {
    padding:.9rem 1rem
  }
  .hero-benefits {
    justify-content:flex-start;
    gap:2rem;
    margin-top:1.8rem
  }
  .hero-benefits strong {
    font-size:.85rem
  }
  .hero-benefits .icon-circle {
    width:3.7rem;
    height:3.7rem
  }
  .hero-benefits .icon {
    width:2.1rem;
    height:2.1rem
  }
  .hero-art {
    top:auto;
    bottom:0;
    height:340px;
    background-size:600px auto;
    background-position:right -39px;
    mask-image:linear-gradient(to right,transparent 10%,#000 38%);
    -webkit-mask-image:linear-gradient(to right,transparent 10%,#000 38%);
    width:100%
  }
  .quality-strip {
    padding:1.4rem 0
  }
  .quality-grid {
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem .8rem
  }
  .quality-grid>div+div {
    border:0
  }
  .quality-grid>div:nth-child(4) {
    grid-column:1 / 2;
    margin-left:50%
  }
  .quality-grid>div:nth-child(5) {
    grid-column:2 / 4;
    margin-right:25%
  }
  .quality-grid strong {
    font-size:.8rem
  }
  .quality-grid .icon-circle {
    width:3.6rem;
    height:3.6rem
  }
  .quality-grid .icon {
    width:2.2rem;
    height:2.2rem
  }
  .section {
    padding:2rem 0
  }
  h2 {
    font-size:1.75rem
  }
  .section-heading>p:last-child:not(.eyebrow) {
    font-size:.9rem;
    line-height:1.5
  }
  .product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem
  }
  .product-card {
    padding:.8rem .7rem 1rem
  }
  .product-photo {
    height:13rem
  }
  .product-card h3 {
    font-size:1rem
  }
  .product-description {
    font-size:.8rem;
    margin-top:.7rem
  }
  .product-card:last-child {
    grid-column:1 / -1;
    max-width:calc(50% - .5rem);
    width:100%;
    justify-self:center
  }
  .product-button {
    font-size:.8rem
  }
  .arabic {
    font-size:.9rem
  }
  .reasons-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem;
    padding:0
  }
  .reason {
    gap:.7rem
  }
  .reason-icon {
    width:3rem;
    height:3rem
  }
  .reason-icon .icon {
    width:1.8rem;
    height:1.8rem
  }
  .reason h3 {
    font-size:.85rem;
    margin-top:.1rem
  }
  .reason p {
    font-size:.8rem
  }
  .testimonial-carousel {
    padding:0 1.5rem
  }
  .testimonial-grid {
    display:block
  }
  .testimonial-card {
    display:none;
    min-height:190px;
    padding:1.4rem
  }
  .testimonial-card:first-child {
    display:block
  }
  .testimonial-card blockquote {
    font-size:1rem
  }
  .previous {
    left:-1rem
  }
  .next {
    right:-1rem
  }
  .carousel-arrow {
    width:2.4rem;
    height:2.4rem
  }
  .carousel-dots {
    gap:1.2rem;
    margin-top:1.3rem
  }
  .contact {
    padding:2rem 0
  }
  .contact-grid {
    grid-template-columns:1fr;
    gap:1.5rem
  }
  .contact-copy {
    padding:0
  }
  .contact-copy>p {
    font-size:.95rem
  }
  .contact-copy h2 {
    font-size:2rem
  }
  .contact-copy h3 {
    font-size:1.3rem
  }
  .contact-copy address {
    font-size:.95rem
  }
  .contact-art {
    inset:auto 0 0 auto;
    height:310px;
    width:100%;
    opacity:.3;
    mask-image:linear-gradient(to bottom,transparent,#000);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000)
  }
  .contact-form {
    max-width:480px;
    width:100%;
    padding:1.3rem
  }
  .contact-form label {
    font-size:.85rem
  }
  .contact-form input,.contact-form input:focus {
    height:2.6rem;
    padding:.5rem;
    margin-bottom:.8rem;
    font-size:1rem
  }
  .contact-form select {
    height:2.6rem;
    font-size:.9rem
  }
  .contact-form textarea {
    min-height:6rem;
    font-size:1rem
  }
  .contact-form .send-button {
    padding:.9rem;
    font-size:.95rem
  }
  .footer-grid {
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem;
    padding:2rem 0
  }
  .footer-brand {
    grid-column:1 / -1
  }
  .footer-grid>div>a,.footer-grid>div>button,.footer-brand p {
    font-size:.85rem
  }
  .footer h3 {
    font-size:1rem
  }
  .footer-bottom .container {
    flex-direction:column;
    font-size:.7rem;
    padding-right:2rem
  }
  .dialog-content {
    grid-template-columns:1fr;
    gap:1rem
  }
  .product-dialog {
    padding:2rem 1.3rem;
    max-height:90dvh
  }
  .dialog-photo img {
    max-height:230px
  }
  .dialog-details h2 {
    font-size:1.7rem
  }
  .dialog-details .button {
    width:100%
  }
  .avatar {
    width:32px;
    height:32px
  }
}

@media(max-width:360px) {
  .hero {
    min-height:810px
  }
  .hero-benefits {
    gap:1rem
  }
  .product-grid {
    gap:.6rem
  }
  .product-photo {
    height:11rem
  }
  .product-card h3 {
    font-size:.9rem
  }
  .product-description {
    font-size:.75rem
  }
  .reason {
    flex-direction:column
  }
  .header-inner {
    gap:.3rem
  }
  .quote-button {
    padding:.65rem .8rem
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
}

/* Desktop proportions follow the supplied 836 px reference. */
@media(min-width:701px) {
  :root {
    font-size:clamp(12px,1.435vw,18px)
  }
  .brand {
    width:4.5rem;
    height:4.5rem
  }
  .header-inner {
    gap:1.5rem
  }
  .navigation {
    gap:1.6rem;
    margin-left:1rem;
    font-size:.9rem
  }
  h1 {
    font-size:3.1rem
  }
  h2 {
    font-size:1.9rem
  }
  .hero-inner {
    align-items:flex-start
  }
  .hero-copy {
    padding-top:3.4rem
  }
  .hero-description {
    font-size:1rem;
    max-width:25rem;
    margin-top:.9rem
  }
  .hero-actions {
    font-size:.9rem;
    margin-top:1.3rem;
    gap:1rem
  }
  .hero-actions .button {
    padding:.75rem 1.3rem
  }
  .hero-benefits {
    margin-top:2.7rem;
    gap:3rem
  }
  .icon-circle {
    width:4.6rem;
    height:4.6rem
  }
  .icon-circle .icon {
    width:2.6rem;
    height:2.6rem
  }
  .hero-benefits strong,.quality-grid strong {
    font-size:.95rem
  }
  .quality-strip {
    padding:1.2rem 0 1.4rem
  }
  .products .container {
    width:94%;
    max-width:1230px
  }
  .product-photo {
    height:12.8rem;
    margin-bottom:.4rem
  }
  .product-card {
    padding:.8rem 1.4rem 1.4rem
  }
  .product-card h3 {
    font-size:1rem
  }
  .product-description {
    margin:.8rem -.5rem 1rem;
    font-size:.87rem
  }
  .product-button {
    padding:.65rem .4rem;
    font-size:.85rem
  }
  .why {
    padding-top:.1rem;
    padding-bottom:2rem
  }
  .reasons-grid {
    gap:2rem;
    padding:0 1.1rem
  }
  .reason {
    gap:1rem
  }
  .reason-icon {
    width:4.1rem;
    height:4.1rem
  }
  .reason h3 {
    font-size:.95rem
  }
  .reason p {
    font-size:.8rem
  }
  .testimonial-card {
    padding:1.1rem 1.6rem;
    min-height:12rem
  }
  .testimonial-grid {
    gap:1.5rem
  }
  .testimonial-card blockquote {
    font-size:.9rem;
    min-height:4rem
  }
  .stars {
    font-size:1.35rem
  }
  .contact-grid {
    grid-template-columns:32% 34% 1fr;
    gap:3.5%
  }
  .contact {
    min-height:22rem;
    padding:1.3rem 0
  }
  .contact-copy h2 {
    font-size:2.2rem
  }
  .contact-copy h3 {
    font-size:1.4rem
  }
  .contact-form {
    padding:1.1rem 1.2rem
  }
  .contact-form input,.contact-form input:focus {
    height:1.4rem;
    padding:.2rem .5rem
  }
  .contact-form label {
    font-size:.7rem
  }
  .contact-form textarea {
    min-height:4rem
  }
  .footer-grid {
    padding-top:1.4rem;
    padding-bottom:1.2rem
  }
  .footer-brand .brand {
    width:4rem;
    height:4rem
  }
}

@media(min-width:1300px) {
  .hero-copy {
    padding-top:3.1rem
  }
  .hero-benefits {
    margin-top:2.2rem
  }
  .hero-art {
    background-position:center -84px
  }
  .product-photo {
    height:13rem
  }
}

@media(min-width:701px) and (max-width:900px) {
  .navigation {
    gap:1.6rem;
    font-size:.88rem
  }
  .header-inner {
    gap:1rem
  }
  .hero-copy {
    width:51%
  }
  .hero-actions .button {
    padding:.75rem 1.1rem
  }
  .hero-benefits {
    gap:3rem
  }
  .contact-copy>p {
    font-size:.8rem
  }
  .quote-button {
    font-size:.75rem
  }
}

@media(min-width:701px) {
  .products {
    padding-top:1.5rem
  }
  .products .section-heading {
    margin-bottom:1.2rem
  }
  .product-card {
    padding-inline:.8rem
  }
  .product-card h3 {
    font-size:1rem;
    letter-spacing:-.04em
  }
  .testimonials {
    padding-top:1.3rem;
    padding-bottom:.8rem
  }
  .testimonial-card {
    min-height:11.5rem;
    padding:1rem 1.6rem
  }
  .testimonial-card blockquote {
    min-height:3.6rem
  }
  .testimonial-card figcaption {
    margin-top:.8rem
  }
  .contact-form input,.contact-form input:focus {
    height:.85rem
  }
  .contact-form {
    padding:1rem 1.2rem
  }
  .contact {
    min-height:22rem
  }
  .footer-grid {
    padding-top:1.2rem;
    padding-bottom:1rem
  }
}

@media(max-width:700px) {
  .hero-art {
    background-image:linear-gradient(to right,#eff8f4 0%,#eff8f4 21%,transparent 34%),url('assets/reference.png')
  }
}


/* Seven-product slider: four cards on desktop, three on tablet, two on mobile. */
.product-grid {
  --visible: 4;
  --space: 2.7rem;
  display: flex;
  gap: .9rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #b9d9c5 transparent;
  padding: .3rem 0 .7rem;
}
.product-grid .product-card {
  flex: 0 0 calc((100% - var(--space)) / var(--visible));
  scroll-snap-align: start;
  min-width: 0;
  max-width: none;
  width: auto;
}
.paper-photo img { width: 100%; height: 100%; object-fit: contain; border-radius: .5rem; }
.slider-controls { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: .6rem; }
.slider-controls[hidden] { display: none; }
.slider-controls button { width: 2.7rem; height: 2.7rem; border: 1px solid var(--green); border-radius: 50%; background: white; color: var(--green); font-size: 2rem; line-height: 1; }
.slider-controls button:hover:not(:disabled) { background: var(--mint); }
.slider-controls button:disabled { opacity: .35; cursor: default; }
.product-range { font-size: .85rem; color: var(--muted); min-width: 9rem; text-align: center; }
@media(min-width:821px) { .product-grid .product-photo { height: 16rem; } }
@media(min-width:701px) and (max-width:820px) { .product-grid { --visible: 3; --space: 1.8rem; } }
@media(max-width:700px) { .product-grid { --visible: 2; --space: .9rem; } .product-grid .product-card:last-child { grid-column: auto; max-width: none; } }
@media(max-width:360px) { .product-grid { --visible: 1; --space: 0rem; } .product-grid .product-photo { height: 15rem; } }

/* More breathing room and a consistent professional type hierarchy. */
:root {
  --section-padding: clamp(48px, 5.5vw, 80px);
}
body { line-height: 1.6; }
h1, h2, h3 { font-weight: 700; }
h1 { line-height: 1.15; }
h2 { line-height: 1.3; }
h3 { line-height: 1.35; }
.section, .products, .why, .testimonials, .contact {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}
.quality-strip { padding-block: clamp(28px, 3vw, 44px); }
.section-heading, .products .section-heading, .testimonials .section-heading {
  margin-bottom: clamp(28px, 3vw, 44px);
}
.section-heading .eyebrow { margin-bottom: .7rem; }
.section-heading > p:last-child:not(.eyebrow) { margin-top: .8rem; }
.slider-controls { margin-top: 1.3rem; }
.reasons-grid { row-gap: 2rem; }
.testimonial-card { padding-block: 1.5rem; }
.carousel-dots { margin-top: 1.6rem; }
.contact-copy { padding-top: .4rem; }
.footer-grid { padding-block: clamp(36px, 4vw, 56px); }
.footer-bottom { padding-block: 1rem; }
.product-card h3 { letter-spacing: -.025em; }
@media(min-width:701px) {
  .hero { height: auto; min-height: clamp(510px, 56.2vw, 770px); }
  .hero-inner { padding-block: clamp(48px, 4.5vw, 64px); }
  .hero-copy { padding-top: 0; }
  h1 { font-size: 2.85rem; letter-spacing: -.035em; }
  .hero-benefits { margin-top: 2.6rem; }
  .navigation { gap: 1.4rem; }
  .contact-form input, .contact-form input:focus { height: 2rem; }
}
@media(max-width:700px) {
  :root { --section-padding: 48px; }
  .hero { min-height: 840px; }
  .hero-inner { padding-top: 40px; padding-bottom: 360px; }
  h1 { font-size: clamp(1.9rem, 6.5vw, 3rem); }
  .hero-benefits { gap: 1.5rem; }
  .hero-description { line-height: 1.6; }
  .quality-strip { padding-block: 32px; }
  .contact-copy { padding-top: 0; }
  .section-heading { padding-inline: .2rem; }
}
@media(max-width:360px) {
  .hero { min-height: 900px; }
  .hero-benefits { gap: .7rem; }
  .hero-inner { padding-bottom: 370px; }
}
@media(max-width:700px) {
  .hero-art {
    background-size: 100% 100%, 600px auto;
    background-position: left top, right -39px;
  }
}

/* Actual office and warehouse details. */
.contact-copy address .location-row {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: 1rem;
}
.contact-copy address .location-row > span { flex-shrink: 0; }
.location-text { font-size: .88rem; line-height: 1.6; font-weight: 400; overflow-wrap: anywhere; }
.location-text strong { font-weight: 600; }
.contact-copy address a { overflow-wrap: anywhere; }
.contact-copy address a > span { flex-shrink: 0; }
.company-name { color: white; font-weight: 600; margin-bottom: .6rem; }
.footer-contact .footer-location { align-items: flex-start; margin-top: .75rem; line-height: 1.6; }
.footer-location .icon { margin-top: .3rem; }
.footer-contact { min-width: 0; overflow-wrap: anywhere; }
.footer-location strong { color: white; font-weight: 500; }
@media(min-width:701px) {
  .footer-grid { grid-template-columns: 22% 12% 21% 26% 15%; }
}

/* High-resolution product assets replace the enlarged screenshot artwork. */
.brand img { transform: none; }
.product-photo .jug { clip-path: none; }
.hero-art {
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #eef8f4ee 0%, #eff8f4a0 38%, transparent 60%), url('assets/hero-backdrop-hd.webp') center / cover no-repeat;
  mask-image: none;
  -webkit-mask-image: none;
  pointer-events: none;
}
.hero-products { position: absolute; right: 1%; bottom: 0; width: 56%; height: 100%; }
.hero-product { position: absolute; object-fit: contain; filter: drop-shadow(0 8px 10px #1835291f); }
.hero-dishwash { left: 10%; top: 4%; width: 45%; height: 73%; z-index: 1; }
.hero-handwash { right: 1%; top: 7%; width: 43%; height: 72%; z-index: 2; }
.hero-glass { left: 0; bottom: 3%; width: 37%; height: 61%; z-index: 3; }
.hero-floor { left: 30%; bottom: 0; width: 40%; height: 63%; z-index: 5; }
.hero-bleach { right: 0; bottom: 2%; width: 37%; height: 62%; z-index: 4; }
.dialog-photo img { max-height: 450px; }
@media(max-width:700px) {
  .hero-art {
    top: auto;
    bottom: 0;
    height: 360px;
    background: linear-gradient(to bottom, #eff8f4 0%, transparent 28%), url('assets/hero-backdrop-hd.webp') center / cover no-repeat;
  }
  .hero-products { width: min(100%, 520px); right: 0; height: 100%; }
  .hero-dishwash { left: 12%; top: 0; }
  .hero-handwash { top: 1%; }
  .hero-floor { bottom: 0; }
  .dialog-photo img { max-height: 280px; }
}

/* Persistent WhatsApp contact shortcut. */
.whatsapp-float {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 2px solid white;
  border-radius: 50%;
  background: #128c45;
  color: white;
  box-shadow: 0 4px 16px #001b3433;
}
.whatsapp-float svg { width: 36px; height: 36px; }
.whatsapp-float:hover { background: #087636; }
.whatsapp-float:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.back-to-top { right: 92px; }