:root {
  --dark: #04150b;
  --green: #75866c;
  --mint: #e7eeea;
  --cream: #faf3e7;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { font-family: 'Jost', sans-serif; color: #0d0d0d; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, h5 { font-weight: 500; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
img { max-width: 100%; }

.section { padding: clamp(60px, 8vw, 130px) 0; }
.bg-mint { background: var(--mint); }
.bg-cream { background: var(--cream); }
.bg-green { background: var(--green); color: #fff; }
.eyebrow { display: block; font-size: .8rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; margin-bottom: .6rem; }


/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 1030; background: #fff; padding: 12px 0; transition: padding .35s, box-shadow .35s; }
.site-header.stuck { padding: 4px 0; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
.logo-img { height: 80px; width: auto; transition: height .35s; }
.site-header.stuck .logo-img { height: 62px; }
.footer .logo-img { height: 120px; }
.site-header .nav-link { color: var(--dark); font-size: 1.05rem; font-weight: 500; margin: 0 10px; position: relative; }
.site-header .nav-link::before { content: ''; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.site-header .nav-link:hover::before, .site-header .nav-link.active::before { transform: scaleX(1); transform-origin: left; }
.dropdown-menu { border: 0; border-radius: 0; padding: 12px 0; box-shadow: 0 12px 30px rgba(0, 0, 0, .15); }
.dropdown-item { padding: 8px 22px; transition: padding .25s, background .25s; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--mint); color: var(--dark); padding-left: 30px; }
.header-icons { display: flex; gap: 14px; }
.header-icons > * { width: 42px; height: 42px; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; transition: transform .3s var(--ease), background .3s; }
.header-icons > *:hover { transform: translateY(-3px); background: var(--green); }
.header-icons > * { position: relative; border: 0; padding: 0; }
.badge-count { position: absolute; top: -6px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; background: var(--green); color: #fff; font-size: .7rem; font-weight: 600; display: grid; place-items: center; border: 2px solid #fff; }

/* ---------- Cart drawer ---------- */
.cart-drawer { --bs-offcanvas-width: min(430px, 100vw); }
.cart-drawer .offcanvas-header { border-bottom: 1px solid #eee; padding: 20px 24px; }
.cart-drawer .offcanvas-body { padding: 4px 24px; }
.cart-foot { padding: 20px 24px; border-top: 1px solid #eee; background: var(--cream); }
.cart-line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid #eee; animation: fadeUp .35s var(--ease); }
.cart-line img { width: 72px; height: 72px; object-fit: contain; background: var(--mint); border-radius: 10px; padding: 6px; }
.cart-line a:hover { color: var(--green); }
.qty-box.qty-sm { display: inline-flex; padding: 0 2px; }
.qty-sm button { width: 28px; height: 30px; font-size: 1rem; }
.qty-sm span { min-width: 26px; text-align: center; font-weight: 500; }
.cart-remove { border: 0; background: none; color: #999; padding: 4px; margin-top: 6px; transition: color .25s; }
.cart-remove:hover { color: #c0392b; }
@media (min-width: 992px) {
  /* open product menus on hover, like the live site */
  .site-header .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; animation: fadeUp .3s var(--ease); }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Buttons ---------- */
.btn-pill { display: inline-flex; align-items: center; gap: 14px; background: var(--dark); color: #fff; font-size: .9rem; font-weight: 500; text-transform: uppercase; padding: 11px 22px 11px 11px; border: 0; border-radius: 50px; white-space: nowrap; cursor: pointer; transition: background .35s, color .35s, transform .35s var(--ease); }
.btn-pill .ico { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--dark); display: grid; place-items: center; transition: transform .35s var(--ease), background .35s, color .35s; }
.btn-pill:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
.btn-pill:hover .ico { transform: translateX(4px); }
.bg-green .btn-pill:hover, .page-hero .btn-pill:hover { background: #fff; color: var(--dark); }
.bg-green .btn-pill:hover .ico, .page-hero .btn-pill:hover .ico { background: var(--dark); color: #fff; }
.btn-pill-outline { background: transparent; color: var(--dark); box-shadow: inset 0 0 0 1.5px var(--dark); }
.btn-pill-outline .ico { background: var(--dark); color: #fff; }

/* ---------- Home hero slider ---------- */
.hero { --hero-ink: #1f3324; position: relative; color: var(--hero-ink); overflow: hidden; background: var(--cream); }
.hero-slide { position: relative; min-height: min(950px, 100vh); }
.hero-slide.active, .hero-slide.carousel-item-next, .hero-slide.carousel-item-prev { display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0; background: var(--cream) center/cover; background-image: var(--hero-desktop); }
/* phones get the slide's own mobile photo when one is set */
@media (max-width: 767.98px) { .hero-bg { background-image: var(--hero-mobile, var(--hero-desktop)); } }
/* soft cream glow behind the text keeps dark copy readable on any photo */
.hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 50% 48%, rgba(250, 243, 231, .78), rgba(250, 243, 231, .35) 60%, rgba(250, 243, 231, 0) 100%); }
/* image-only slide: the banner sets its own height, so its built-in text is never cropped */
.hero-slide.hero-slide--image-only { min-height: 0; }
.hero-img { display: block; width: 100%; }
.hero-img img { display: block; width: 100%; height: auto; }
/* slider height option: Full screen / Half screen (white header sits above, so subtract it) */
.hero--full { --hero-h: 100vh; }
.header-white .hero--full { --hero-h: calc(100vh - var(--header-h, 92px)); }
.hero--half { --hero-h: 50vh; }
.hero--medium { --hero-h: 680px; }
@media (max-width: 767.98px) { .hero--medium { --hero-h: min(600px, 82vh); } }
.hero--full .hero-slide, .hero--half .hero-slide, .hero--medium .hero-slide { min-height: var(--hero-h); }
.hero--full .hero-slide--image-only, .hero--half .hero-slide--image-only, .hero--medium .hero-slide--image-only { height: var(--hero-h); }
.hero--full .hero-img, .hero--half .hero-img, .hero--medium .hero-img, .hero--full .hero-img img, .hero--half .hero-img img, .hero--medium .hero-img img { height: 100%; object-fit: cover; object-position: center top; }
/* phones: banners always show whole (use the Mobile photo field for a tall version), never cropped */
@media (max-width: 767.98px) {
  .hero .hero-slide.hero-slide--image-only { height: auto; min-height: 0; }
  .hero .hero-img, .hero .hero-img img { height: auto; }
}
.hero-content { position: relative; padding-top: 120px; padding-bottom: 120px; }
/* text rises in again each time its slide becomes active */
.hero-slide.active .hero-content > * { animation: fadeUp .9s var(--ease) backwards; }
.hero-slide.active .hero-content > :nth-child(2) { animation-delay: .15s; }
.hero-slide.active .hero-content > :nth-child(3) { animation-delay: .3s; }
.hero-slide.active .hero-content > :nth-child(4) { animation-delay: .45s; }
.hero-tagline { display: inline-flex; align-items: center; gap: 22px; margin-bottom: .6rem; font-family: 'Noto Nastaliq Urdu', serif; font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 600; line-height: 2.1; color: var(--hero-ink); }
/* rainbow brand tagline, read right-to-left: red → orange → yellow → green → purple → blue */
.hero-tagline > span { background: linear-gradient(to left, #d8231f 0%, #f0661c 18%, #f5a313 32%, #9bb422 45%, #2f9a45 55%, #a32c9c 70%, #6a2aa8 82%, #1d3f9a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .1em; }
.hero-tagline::before, .hero-tagline::after { content: ''; width: 70px; height: 1px; background: rgba(31, 51, 36, .45); }
.hero h1, .hero h2 { font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: 1.2; font-weight: 500; color: var(--hero-ink); }
.hero p { max-width: 640px; margin: 1.4rem auto 2.2rem; font-size: 1.05rem; color: #2b2b2b; }
.hero .btn-pill { background: var(--hero-ink); padding-left: 26px; padding-right: 26px; }
.hero .btn-pill .ico { width: auto; height: auto; background: none; color: #fff; }
.hero .btn-pill:hover { background: var(--green); }
/* arrows + dots stay visible on any photo: white arrow in a dark circle, white dots with a shadow */
.hero .carousel-control-prev, .hero .carousel-control-next { opacity: .9; }
.hero .carousel-control-prev-icon, .hero .carousel-control-next-icon { width: 48px; height: 48px; border-radius: 50%; background-color: rgba(31, 51, 36, .7); background-size: 40%; filter: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.hero .carousel-indicators [data-bs-target] { background-color: #fff; opacity: .6; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.hero .carousel-indicators .active { opacity: 1; }
.hero .carousel-control-prev, .hero .carousel-control-next { width: 7%; }
.hero .carousel-indicators { margin-bottom: 2rem; }
.hero .carousel-indicators button { width: 34px; height: 4px; border: 0; border-radius: 2px; }
/* Header styles (Site Settings → Header style): body.header-transparent | header-white | header-glass */
@media (min-width: 992px) {
  /* transparent + glass: on the home page the header floats over the hero */
  .home.header-transparent .hero, .home.header-glass .hero { margin-top: calc(-1 * var(--header-h, 92px)); }
  /* transparent: no background until the page is scrolled */
  .home.header-transparent .site-header:not(.stuck) { background: transparent; }
}
/* white: solid header on every page, slider sits below it (base .site-header styles) */
/* glass: frosted see-through bar on every page, a little more solid once scrolled */
.header-glass .site-header { background: rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid rgba(255, 255, 255, .45); }
.header-glass .site-header.stuck { background: rgba(255, 255, 255, .62); }
@media (max-width: 991.98px) {
  /* keep the opened phone menu readable over photos */
  .header-glass .site-header .navbar-collapse { background: rgba(255, 255, 255, .92); border-radius: 14px; margin-top: 8px; padding: 6px 14px 14px; }
}
.site-header { transition: padding .35s, box-shadow .35s, background .35s; }

/* ---------- Inner page hero ---------- */
.page-hero { background: var(--dark); color: #fff; text-align: center; padding: clamp(60px, 8vw, 120px) 0; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; top: -120px; right: -100px; width: 460px; height: 460px; background: rgba(255, 255, 255, .06); clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%); animation: spin 60s linear infinite; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.page-hero p { max-width: 720px; margin: 1rem auto 0; opacity: .85; font-size: 1.1rem; }
.page-hero .container { position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Image hover zoom ---------- */
.img-zoom { overflow: hidden; }
.img-zoom img { width: 100%; display: block; transition: transform .9s var(--ease); }
a:hover > .img-zoom img, .img-zoom:hover img { transform: scale(1.08); }

/* ---------- Strength cards (image + hover overlay) ---------- */
.service-card { display: block; position: relative; }
.service-card .img-zoom img { aspect-ratio: 400 / 530; object-fit: cover; }
.service-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; }
.service-title h3 { font-size: clamp(1rem, 1.7vw, 1.8rem); margin: 0; }
.arrow, .cart { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; transition: transform .35s var(--ease), background .35s; }
/* hover state: image fills the whole card, title + description sit on top */
.service-hover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 40px 28px; color: #fff; overflow: hidden; opacity: 0; transition: opacity .45s; }
.service-hover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform .9s var(--ease); }
.service-hover::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(transparent 30%, rgba(4, 21, 11, .85) 75%); }
.service-hover .service-title, .service-hover p { position: relative; z-index: 2; transform: translateY(24px); transition: transform .5s var(--ease); }
.service-hover .arrow { background: var(--green); }
.service-hover p { margin: 18px 0 0; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.service-card:hover .service-hover, .service-card:focus-visible .service-hover { opacity: 1; }
.service-card:hover .service-hover img { transform: none; }
.service-card:hover .service-hover .service-title, .service-card:hover .service-hover p { transform: none; }

/* ---------- About ---------- */
.about-media { position: relative; padding: 0 70px 70px 0; }
.about-media::before { content: ''; position: absolute; inset: 40px 30px 30px -30px; background: var(--mint); border-radius: 24px; }
.about-media .img-zoom { position: relative; border-radius: 24px; }
.about-main img { aspect-ratio: 5 / 4; object-fit: cover; }
.about-small { position: absolute !important; right: 0; bottom: 0; width: 46%; border: 8px solid #fff; box-shadow: 0 20px 40px rgba(4, 21, 11, .18); animation: float 5s ease-in-out infinite alternate; }
.about-small img { aspect-ratio: 1; object-fit: cover; }
.about-since { position: absolute; top: 28px; left: -18px; width: 104px; height: 104px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-content: center; text-align: center; box-shadow: 0 14px 30px rgba(4, 21, 11, .2); }
.about-since span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.about-since strong { font-size: 1.6rem; font-weight: 500; line-height: 1; }
.about-heading { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.15; margin-bottom: 1.2rem; }
.about-heading span { color: var(--green); }
.about-lead { font-size: 1.2rem; font-weight: 500; }
.about-points { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; font-weight: 500; }
.about-points li { display: flex; align-items: center; gap: 10px; }
.about-points i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--mint); color: var(--green); display: grid; place-items: center; }
.about-band { display: grid; grid-template-columns: repeat(3, 1fr) 1.5fr; margin-top: clamp(40px, 6vw, 90px); background: var(--dark); color: #fff; border-radius: 24px; overflow: hidden; }
.about-stat { padding: 40px 30px; border-right: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; justify-content: center; }
.about-stat .stat-num { font-size: clamp(2rem, 3.4vw, 3.2rem); }
.about-stat .stat-label { color: rgba(255, 255, 255, .7); font-weight: 400; }
.about-trust { background: var(--green); padding: 36px; }
.about-trust h4 { margin-bottom: 6px; }
.about-trust p { margin-bottom: 18px; opacity: .92; }
.about-trust .btn-pill:hover { background: var(--dark); color: #fff; }
.about-trust .btn-pill:hover .ico { background: #fff; color: var(--dark); }
@media (max-width: 991.98px) {
  .about-band { grid-template-columns: repeat(3, 1fr); }
  .about-trust { grid-column: 1 / -1; }
  .about-stat { padding: 26px 16px; }
}
@media (max-width: 575.98px) {
  .about-media { padding: 0 34px 44px 0; }
  .about-media::before { inset: 24px 14px 20px -12px; }
  .about-since { width: 80px; height: 80px; left: -6px; top: 16px; }
  .about-since strong { font-size: 1.2rem; }
  .about-points { grid-template-columns: 1fr; }
  .about-stat { padding: 22px 12px; }
  .about-trust { padding: 26px; }
}
.stat-num { font-size: clamp(2.2rem, 4.5vw, 4.2rem); font-weight: 500; line-height: 1.1; }
.stat-label { font-weight: 500; font-size: .95rem; }
.review-card { background: var(--green); color: #fff; padding: 40px; transition: transform .4s var(--ease), box-shadow .4s; }
.review-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(4, 21, 11, .18); }

/* about page */
.about-hero { padding-bottom: clamp(130px, 14vw, 190px); }
.about-hero .about-media::before { background: rgba(255, 255, 255, .08); }
.about-hero .about-small { border-color: var(--dark); }
.about-band-up { position: relative; margin-top: -80px; box-shadow: 0 24px 50px rgba(4, 21, 11, .22); border: 1px solid rgba(255, 255, 255, .1); }
.step-num i { font-size: 1.3rem; }
.vm-card { position: relative; height: 100%; border-radius: 24px; padding: clamp(30px, 4vw, 56px); color: #fff; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; }
.vm-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(4, 21, 11, .2); }
.vm-dark { background: var(--dark); }
.vm-green { background: var(--green); }
.vm-card h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 16px; }
.vm-card p { position: relative; font-size: 1.1rem; line-height: 1.7; margin: 0; opacity: .92; }
.vm-mark { position: absolute; right: -10px; bottom: -50px; font-size: 13rem; line-height: 1; opacity: .08; transition: transform .8s var(--ease); }
.vm-card:hover .vm-mark { transform: scale(1.12) rotate(-6deg); }
.value-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid #dfe5df; }
.value-row { display: grid; grid-template-columns: 110px 1fr; align-items: start; padding: 28px 0; border-bottom: 1px solid #dfe5df; transition: padding .4s var(--ease), background .4s; }
.value-row:hover { padding-left: 20px; background: linear-gradient(90deg, var(--mint), transparent); }
.value-row > span { font-size: 2.8rem; font-weight: 500; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--green); transition: color .4s; }
.value-row:hover > span { color: var(--green); }
.value-row h3 { font-size: 1.5rem; margin-bottom: 6px; }
.value-row p { color: #555; margin: 0; }
@media (max-width: 575.98px) { .value-row { grid-template-columns: 64px 1fr; } .value-row > span { font-size: 2rem; } .about-band-up { margin-top: -60px; } }

/* ---------- Info cards (values, vision, contact, shade cards) ---------- */
.info-card { background: #fff; padding: 36px; height: 100%; transition: transform .4s var(--ease), box-shadow .4s; }
.info-card.bg-mint { background: var(--mint); }
.info-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(4, 21, 11, .12); }
.info-card h3, .info-card h4 { font-size: 1.4rem; }
.info-card p { color: #555; margin: 0; }
.info-card .num { font-size: 2.6rem; font-weight: 500; color: var(--green); line-height: 1; margin-bottom: 14px; display: block; }
.info-card .icon { width: 60px; height: 60px; border-radius: 50%; background: var(--mint); color: var(--dark); font-size: 1.5rem; display: grid; place-items: center; margin-bottom: 20px; transition: background .35s, color .35s, transform .5s var(--ease); }
.info-card:hover .icon { background: var(--green); color: #fff; transform: rotateY(360deg); }

/* ---------- Shade cards page ---------- */
.shade-hero { background: var(--dark); color: #fff; padding: clamp(60px, 7vw, 110px) 0; overflow: hidden; }
.shade-hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.shade-hero p { max-width: 520px; opacity: .85; font-size: 1.1rem; margin: 1rem 0 2rem; }
.shade-hero .eyebrow { letter-spacing: 0; font-size: 1.3rem; text-align: left; }
.btn-pill-light { background: #fff; color: var(--dark); }
.btn-pill-light .ico { background: var(--dark); color: #fff; }
.btn-pill-ghost { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }
/* fan deck: chips rotate out from a shared pivot near the bottom */
.fan { position: relative; height: 360px; max-width: 520px; margin: 0 auto; }
.fan span { position: absolute; left: 50%; bottom: 20px; width: 78px; height: 300px; margin-left: -39px; border: 4px solid #fff; border-radius: 12px; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); transform-origin: 50% 94%; transform: rotate(calc((var(--i) - 3) * 14deg)); transition: transform .6s var(--ease); animation: fanOpen 1.4s var(--ease) backwards; }
.fan:hover span { transform: rotate(calc((var(--i) - 3) * 18deg)); }
@keyframes fanOpen { from { transform: rotate(0); } }
.shade-row { display: grid; grid-template-columns: 280px 1fr auto; gap: 40px; align-items: center; background: #fff; border-radius: 18px; padding: 18px 36px 18px 18px; margin-bottom: 20px; transition: transform .4s var(--ease), box-shadow .4s, opacity .9s var(--ease) var(--d, 0s); }
.shade-row[hidden] { display: none; }
.shade-row:hover { transform: translateX(8px); box-shadow: 0 18px 36px rgba(4, 21, 11, .12); }
.shade-row h3 { font-size: 1.6rem; margin: 4px 0 8px; }
.shade-row p { color: #555; margin: 0; max-width: 560px; }
.shade-strip { display: flex; height: 140px; border-radius: 12px; overflow: hidden; }
.shade-strip span { flex: 1; transition: flex .45s var(--ease); }
.shade-row:hover .shade-strip span:nth-child(3) { flex: 2.2; }
.shade-strip span:hover { flex: 3 !important; }
.shade-cta { background: var(--cream); padding: clamp(50px, 6vw, 90px) 0; }
@media (max-width: 991.98px) {
  .shade-row { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .shade-strip { height: 100px; }
  .fan { height: 280px; transform: scale(.8); }
}
.filter-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.filter-pills a, .filter-pills button, .scheme-tabs button { border: 1.5px solid var(--dark); background: transparent; color: var(--dark); border-radius: 50px; padding: 9px 24px; font-weight: 500; transition: background .3s, color .3s; }
.filter-pills .active, .filter-pills a:hover, .filter-pills button:hover { background: var(--dark); color: #fff; }

/* ---------- Products ---------- */
.product-card { display: block; }
.product-card .img-zoom, .product-photo { background: #fff; }
.product-card .img-zoom img { aspect-ratio: 1; object-fit: contain; padding: 18px; }
.product-info { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.product-info h3 { font-size: clamp(1rem, 1.4vw, 1.3rem); margin: 2px 0 4px; }
.product-type { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green); font-weight: 600; }
.price { color: #555; }
.product-card:hover .cart { background: var(--green); transform: translateX(4px); }
/* home: colour-swatch cards - inset colour panel, can overhangs its bottom edge into the text area */
.products-swatch .product-card { height: 100%; background: #fdfbf6; border-radius: 16px; padding: 10px; box-shadow: 0 2px 10px rgba(4, 21, 11, .06); transition: transform .4s var(--ease), box-shadow .4s; }
.products-swatch .product-card:hover { transform: translateY(-8px); box-shadow: 0 18px 36px rgba(4, 21, 11, .14); }
.products-swatch .img-zoom { position: relative; overflow: visible; aspect-ratio: 16 / 9; border-radius: 10px; background: linear-gradient(120deg, rgba(255, 255, 255, .14), transparent 60%), var(--swatch); }
.products-swatch .img-zoom img { position: absolute; right: 1%; bottom: -42%; width: 56%; height: 152%; aspect-ratio: auto; padding: 0; object-position: center bottom; transform-origin: center bottom; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .25)); }
.products-swatch .product-info { margin: 0; padding: 18px 57% 12px 10px; min-height: 116px; }
.products-swatch .product-info h3 { font-size: 1.1rem; margin: 0 0 6px; }
.products-swatch .price { font-size: .85rem; }
.products-swatch .product-type, .products-swatch .cart { display: none; }
.products-swatch > :nth-child(8n+1) { --swatch: #c9736b; }
.products-swatch > :nth-child(8n+2) { --swatch: #1f2f4f; }
.products-swatch > :nth-child(8n+3) { --swatch: #7d9068; }
.products-swatch > :nth-child(8n+4) { --swatch: #5c8f8f; }
.products-swatch > :nth-child(8n+5) { --swatch: #c9a878; }
.products-swatch > :nth-child(8n+6) { --swatch: #e0b33c; }
.products-swatch > :nth-child(8n+7) { --swatch: #ece3d0; }
.products-swatch > :nth-child(8n+8) { --swatch: #c0633f; }
/* JPG packshots have a white background: lighten the panel and multiply so the white box disappears */
.products-swatch .no-alpha .img-zoom { background: color-mix(in srgb, var(--swatch) 35%, #fff); }
.products-swatch .no-alpha img { mix-blend-mode: multiply; filter: none; }
@media (max-width: 575.98px) { .products-swatch .product-info { padding-right: 10px; padding-top: 34px; } }
.product-photo { border: 1px solid #eee; }
.product-gallery { display: grid; gap: 24px; }
.product-gallery > .img-zoom:not(.product-photo) img { aspect-ratio: 4 / 5; object-fit: cover; }
.product-lifestyle { margin: 0; position: relative; display: flex; flex-direction: column; }
.product-lifestyle-media { flex: 1; min-height: 0; }
.product-lifestyle-media img { aspect-ratio: 3 / 2; object-fit: cover; }
.product-lifestyle figcaption { flex: 0 0 auto; margin: 0; padding: 14px 18px; background: var(--cream, #f7f5ef); color: var(--dark); font-size: .85rem; line-height: 1.6; }
.product-colour { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--swatch); }
.product-colour img { position: absolute; right: 6%; bottom: 0; height: 78%; width: auto; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .3)); }
.product-colour span { position: absolute; left: 24px; bottom: 24px; max-width: 48%; background: rgba(4, 21, 11, .8); color: #fff; padding: 8px 18px; border-radius: 50px; font-weight: 500; }
.product-colour.no-alpha { background: color-mix(in srgb, var(--swatch) 35%, #fff); }
.product-colour.no-alpha img { mix-blend-mode: multiply; filter: none; }
@media (min-width: 992px) {
  /* details stay in view while the image stack scrolls; own scroll if taller than the screen */
  .product-summary { position: sticky; top: 100px; align-self: flex-start; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: thin; }
}
.product-photo img { aspect-ratio: 1; object-fit: contain; padding: 30px; }
.product-name { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.product-price { font-size: 1.8rem; font-weight: 500; color: var(--green); margin-top: 10px; }
.btn-size { border: 1.5px solid var(--dark); border-radius: 50px; padding: 8px 26px; font-weight: 500; }
.btn-check:checked + .btn-size, .btn-size:hover { background: var(--dark); color: #fff; border-color: var(--dark); }
.btn-check:focus-visible + .btn-size { outline: 2px solid var(--green); outline-offset: 2px; }
.product-desc { color: #444; line-height: 1.8; }
.product-meta { color: #555; margin: 8px 0 14px; }
.product-meta a { color: var(--green); }
.crumbs a:hover { text-decoration: underline; }
.buy-row { display: flex; gap: 14px; }
.qty-box { flex: none; display: flex; align-items: center; border: 1.5px solid var(--dark); border-radius: 50px; padding: 0 6px; }
.qty-box button { width: 38px; height: 46px; border: 0; background: none; font-size: 1.2rem; }
.qty-box input { width: 46px; border: 0; text-align: center; background: none; font-weight: 500; -moz-appearance: textfield; appearance: textfield; }
.qty-box input::-webkit-inner-spin-button { -webkit-appearance: none; }
.btn-wide { flex: 1; display: flex; justify-content: center; align-items: center; background: var(--dark); color: #fff; border-radius: 50px; padding: 13px 24px; font-size: .85rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: background .35s, transform .35s var(--ease); }
.btn-wide:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
.btn-wide { border: 0; width: 100%; }
.buy-row .btn-wide { width: auto; }
.btn-wide-outline { background: transparent; color: var(--dark); box-shadow: inset 0 0 0 1.5px var(--dark); }
.btn-wide-outline:hover { box-shadow: none; }
.product-links { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; margin: 26px 0; padding-bottom: 26px; border-bottom: 1px solid #ddd; font-size: .95rem; }
.product-links a:hover { color: var(--green); }
.product-links span a { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--dark); border-radius: 50%; margin-left: 6px; font-size: .85rem; transition: background .3s, color .3s; }
.product-links span a:hover { background: var(--dark); color: #fff; }
.product-accordion .accordion-button { font-size: 1.3rem; font-weight: 500; padding: 22px 0; background: none; color: var(--dark); box-shadow: none; }
.product-accordion .accordion-body { padding: 0 0 22px; }
.product-accordion th { font-weight: 500; width: 40%; }

/* ---------- Why we do more ---------- */
.why-media { position: relative; margin: 0 40px 40px 0; }
.why-media::before { content: ''; position: absolute; inset: 40px -40px -40px 40px; background: var(--mint); border-radius: 24px; }
.why-media .img-zoom { position: relative; border-radius: 24px; }
.why-media .img-zoom img { aspect-ratio: 4 / 4.6; object-fit: cover; }
.why-badge, .why-years { position: absolute; box-shadow: 0 16px 36px rgba(4, 21, 11, .18); animation: float 5s ease-in-out infinite alternate; }
.why-badge { left: -24px; bottom: 40px; display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 14px; padding: 16px 22px; }
.why-badge i { font-size: 1.8rem; color: var(--green); }
.why-badge strong, .why-badge span { display: block; }
.why-badge strong { font-weight: 500; }
.why-badge span { font-size: .85rem; color: #666; }
.why-years { right: -40px; top: 40px; background: var(--green); color: #fff; border-radius: 14px; padding: 18px 24px; text-align: center; animation-delay: -2.5s; }
.why-years strong { display: block; font-size: 2.4rem; font-weight: 500; line-height: 1; }
.why-years span { font-size: .85rem; }
@keyframes float { to { transform: translateY(-14px); } }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { position: relative; display: flex; gap: 24px; padding-bottom: 34px; }
/* line joining the numbered circles */
.steps li:not(:last-child)::before { content: ''; position: absolute; left: 27px; top: 56px; bottom: 0; width: 1px; background: #cfd6cf; }
.step-num { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--green); color: var(--green); font-weight: 500; display: grid; place-items: center; background: #fff; transition: background .35s, color .35s, transform .35s var(--ease); }
.steps li:hover .step-num { background: var(--green); color: #fff; transform: scale(1.08); }
.steps h4 { font-size: 1.4rem; margin: 4px 0 8px; transition: color .3s; }
.steps li:hover h4 { color: var(--green); }
.steps p { color: #555; margin: 0; }
@media (max-width: 991.98px) {
  .why-media { margin: 0 20px 20px 0; }
  .why-media::before { inset: 20px -20px -20px 20px; }
  .why-badge { left: 12px; bottom: 20px; }
  .why-years { right: -20px; top: 20px; }
}

/* ---------- Colour schemes ---------- */
.scheme-tabs { gap: 10px; margin-bottom: 50px; }
.bg-green .scheme-tabs button { border-color: #fff; color: #fff; }
.scheme-tabs button.active, .scheme-tabs button:hover { background: var(--dark); border-color: var(--dark); color: #fff; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.swatch { background: #fff; color: var(--dark); padding: 12px 12px 18px; text-align: center; transition: transform .4s var(--ease); }
.swatch:hover { transform: translateY(-10px) rotate(-2deg); }
.swatch span { display: block; aspect-ratio: 1 / 1.2; margin-bottom: 14px; border: 1px solid rgba(0, 0, 0, .06); }
.swatch strong { display: block; font-weight: 500; }
.swatch small { color: #666; }

/* ---------- Contact ---------- */
.form-control, .form-select { border-radius: 0; border: 1px solid #cfd6cf; padding: 13px 16px; }
.form-control:focus, .form-select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(117, 134, 108, .2); }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: 18px; margin-bottom: 28px; }
.contact-list .icon { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 1.2rem; }
.contact-list h4 { font-size: 1.2rem; margin-bottom: 4px; }
.contact-list a:hover { color: var(--green); }

/* ---------- Cart, checkout, account ---------- */
.req { color: #c0392b; }
.notice { background: var(--mint); border-left: 4px solid var(--green); padding: 16px 22px; margin-bottom: 40px; }
.notice a { text-decoration: underline; }
.cart-table th { font-weight: 500; text-transform: uppercase; font-size: .8rem; letter-spacing: .12em; border-bottom: 1.5px solid var(--dark); padding: 14px 10px; white-space: nowrap; }
.cart-table td { padding: 18px 10px; white-space: nowrap; }
.cart-table img { width: 76px; height: 76px; object-fit: contain; background: var(--mint); border-radius: 10px; padding: 6px; }
.cart-table a:hover { color: var(--green); }
.totals-card { background: var(--cream); padding: 34px; }
.totals-row { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(4, 21, 11, .12); }
.totals-row span:last-child { text-align: right; white-space: nowrap; }
.totals-row.total { font-size: 1.3rem; font-weight: 500; border-bottom: 0; }
.pay-methods { background: #fff; padding: 20px; margin: 20px 0; display: grid; gap: 16px; }
.form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.order-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.order-meta span { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: #666; }
.account-nav { display: grid; border: 1px solid #e3e8e3; }
.account-nav > * { text-align: left; background: none; border: 0; border-bottom: 1px solid #e3e8e3; padding: 16px 22px; font-weight: 500; color: var(--dark); transition: background .3s, color .3s, padding .3s; }
.account-nav > *:last-child { border-bottom: 0; }
.account-nav > *:hover { background: var(--mint); padding-left: 28px; }
.account-nav > .active { background: var(--dark); color: #fff; }
@media (max-width: 575.98px) { .order-meta { grid-template-columns: 1fr; } .totals-card { padding: 22px; } }

/* ---------- Dealers, blog, gallery, guide ---------- */
.search-box { position: relative; }
.search-box i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #777; }
.search-box input { padding-left: 48px; border-radius: 50px; }
.dealer-list { display: grid; gap: 16px; }
.dealer-list .info-card { height: auto; }
.dealer-list .info-card a:not(.btn-pill):hover { color: var(--green); }
.map-frame { height: 100%; min-height: 420px; border-radius: 18px; overflow: hidden; background: #dfe6df; }
.map-frame iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
.post-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 16px; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; }
.post-card:hover { transform: translateY(-8px); box-shadow: 0 18px 36px rgba(4, 21, 11, .14); }
.post-card .img-zoom img { aspect-ratio: 16 / 10; object-fit: cover; }
.post-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.post-body h3 { font-size: 1.4rem; margin: 6px 0 10px; }
.post-body p { color: #555; }
.read-more { margin-top: auto; font-weight: 500; }
.read-more i { display: inline-block; transition: transform .3s var(--ease); }
.post-card:hover .read-more i { transform: translateX(6px); }
.gallery-grid { columns: 3 280px; column-gap: 20px; }
.gallery-item { position: relative; display: block; width: 100%; margin-bottom: 20px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; break-inside: avoid; background: none; }
.gallery-item[hidden] { display: none; }
.gallery-item img { display: block; width: 100%; transition: transform .9s var(--ease); }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item span { position: absolute; inset: auto 0 0 0; padding: 40px 20px 16px; color: #fff; font-weight: 500; text-align: left; background: linear-gradient(transparent, rgba(4, 21, 11, .8)); opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s var(--ease); }
.gallery-item:hover span, .gallery-item:focus-visible span { opacity: 1; transform: none; }
.lightbox { background: transparent; border: 0; align-items: center; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: 12px; }
.lightbox p { color: #fff; margin: 12px 0 0; }
.lightbox .btn-close { align-self: flex-end; margin-bottom: 10px; }
.policy .notice { margin-bottom: 30px; }
.accordion-body a { color: var(--green); }
/* accordions on a coloured section: separate white rounded cards instead of a flat white block */
.bg-cream .product-accordion, .bg-mint .product-accordion { --bs-accordion-bg: transparent; --bs-accordion-border-width: 0; display: grid; gap: 12px; }
.bg-cream .product-accordion .accordion-item, .bg-mint .product-accordion .accordion-item { background: #fff; border-radius: 14px; overflow: hidden; transition: box-shadow .3s; }
.bg-cream .product-accordion .accordion-item:hover, .bg-mint .product-accordion .accordion-item:hover { box-shadow: 0 10px 24px rgba(4, 21, 11, .08); }
.bg-cream .product-accordion .accordion-button, .bg-mint .product-accordion .accordion-button { padding: 20px 26px; font-size: 1.2rem; }
.bg-cream .product-accordion .accordion-button:not(.collapsed), .bg-mint .product-accordion .accordion-button:not(.collapsed) { color: var(--green); }
.bg-cream .product-accordion .accordion-body, .bg-mint .product-accordion .accordion-body { padding: 0 26px 22px; color: #444; }

/* ---------- Shade of the month ---------- */
.sotm-card { position: relative; display: block; aspect-ratio: 5 / 4; border-radius: 28px; overflow: hidden; color: #fff; background: linear-gradient(135deg, rgba(255, 255, 255, .2), transparent 55%), var(--shade); box-shadow: 0 30px 60px -20px var(--shade); transition: transform .6s var(--ease); }
.sotm-card:hover { transform: translateY(-8px) rotate(-1deg); color: #fff; }
/* paint-drip shine that sweeps across on hover */
.sotm-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%); transform: translateX(-100%); transition: transform 1s var(--ease); }
.sotm-card:hover::after { transform: translateX(100%); }
.sotm-badge { position: absolute; top: 26px; left: 26px; width: 108px; height: 108px; border-radius: 50%; background: var(--dark); display: grid; place-items: center; text-align: center; font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.35; animation: float 5s ease-in-out infinite alternate; }
.sotm-chips { position: absolute; top: 30px; right: 26px; display: flex; }
.sotm-chips i { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; margin-left: -12px; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); }
.sotm-name { position: absolute; left: 30px; bottom: 26px; font-size: 1.3rem; letter-spacing: .2em; }
.sotm-name strong { display: block; font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 500; letter-spacing: 0; line-height: 1.05; }
.sotm-pairs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-weight: 500; }
.sotm-pairs::before { content: 'Pairs with'; color: #666; font-weight: 400; }
.sotm-pairs li { display: flex; align-items: center; gap: 8px; }
.sotm-pairs i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.sotm-hero { background: linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 55%), var(--shade); color: #fff; padding: clamp(60px, 8vw, 120px) 0; overflow: hidden; }
.sotm-hero h1 { font-size: clamp(2.6rem, 6.5vw, 5.4rem); line-height: 1.05; }
.sotm-hero h1 span { display: block; font-size: .32em; letter-spacing: .3em; margin-top: 14px; opacity: .9; }
.sotm-hero p { max-width: 520px; font-size: 1.1rem; margin: 1.2rem 0 2rem; }
.sotm-swatch { position: relative; aspect-ratio: 4 / 3; max-width: 520px; margin-left: auto; background: #fff; border-radius: 20px; padding: 16px 16px 70px; box-shadow: 0 30px 60px rgba(0, 0, 0, .25); transform: rotate(3deg); transition: transform .6s var(--ease); }
.sotm-swatch:hover { transform: rotate(0); }
.sotm-swatch::before { content: ''; display: block; height: 100%; border-radius: 10px; background: var(--shade); }
.sotm-swatch span, .sotm-swatch small { position: absolute; bottom: 22px; color: var(--dark); }
.sotm-swatch span { left: 22px; font-weight: 500; font-size: 1.2rem; }
.sotm-swatch small { right: 22px; color: #666; }
.sotm-palette { margin-top: 10px; }
.sotm-palette .swatch { box-shadow: 0 10px 30px rgba(4, 21, 11, .1); }
/* shade of the month page: heading, mosaic of tiles, swatch chips */
.sotm-title { font-size: clamp(2.4rem, 6vw, 4.6rem); text-transform: uppercase; line-height: 1; margin-bottom: 14px; }
.sotm-title span { color: var(--shade); }
.sotm-code { font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin-bottom: 18px; }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 16px; margin-top: 50px;
  grid-template-areas: "a a b c" "a a d c" "e f f g"; }
.mosaic-home { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 250px; margin-top: 0; grid-template-areas: "a a b" "a a k"; color: inherit; }
.tile-k { grid-area: k; align-items: center; justify-content: center; padding: 14px; }
.tile-k img { max-height: 100%; width: auto; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .3)); transition: transform .6s var(--ease); }
.mosaic-home:hover .tile-k img { transform: translateY(-8px) rotate(-4deg); }
.mosaic-home:hover .tile-a img { transform: scale(1.07); }
.mosaic-home:hover .shade-chip { transform: translateY(-6px) rotate(-3deg); }
.tile .shade-chip { width: 150px; }
.tile .shade-chip strong { font-size: .66rem; white-space: nowrap; }
#shade-of-the-month .sotm-title { font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.05; }
.bg-cream .tile-soft { background: #fff; }
.tile { position: relative; border-radius: 18px; overflow: hidden; }
.tile-a { grid-area: a; } .tile-b { grid-area: b; } .tile-c { grid-area: c; } .tile-d { grid-area: d; } .tile-e { grid-area: e; } .tile-f { grid-area: f; } .tile-g { grid-area: g; }
.tile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.tile-photo:hover img { transform: scale(1.07); }
/* washes the placeholder photo in the featured shade so the whole collage reads as one colour story */
.tile-photo::after { content: ''; position: absolute; inset: 0; background: var(--shade); mix-blend-mode: color; opacity: .8; pointer-events: none; }
.tile-photo-natural::after { display: none; }
.tile-soft { background: color-mix(in srgb, var(--shade) 16%, #fff); display: grid; place-items: center; padding: 20px; }
.tile-shade { background: linear-gradient(135deg, rgba(255, 255, 255, .2), transparent 55%), var(--shade); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.tile-shade strong { font-size: 1.9rem; font-weight: 500; line-height: 1.1; }
.tile-shade span { letter-spacing: .3em; }
.tile-f { grid-template-columns: auto 1fr; gap: 20px; place-items: center start; }
.tile-f img { height: 190px; width: auto; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .25)); transition: transform .6s var(--ease); }
.tile-f:hover img { transform: translateY(-8px) rotate(-3deg); }
.tile-f h3 { font-size: 1.3rem; }
.tile-f p { color: #555; margin: 0; font-size: .95rem; }
.mosaic-label { position: absolute; z-index: 1; top: 26px; left: 26px; color: #fff; text-transform: uppercase; line-height: 1.15; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.mosaic-label strong { display: block; font-size: 1.3rem; font-weight: 600; letter-spacing: .04em; }
.mosaic-label span { display: inline-block; margin-top: 10px; background: var(--shade); border: 1px solid rgba(255, 255, 255, .5); padding: 5px 14px; border-radius: 8px; font-size: .75rem; text-shadow: none; }
.shade-chip { background: #fff; border: 2px solid var(--dark); border-radius: 4px; width: min(100%, 170px); margin: 0 auto; box-shadow: 0 14px 30px rgba(4, 21, 11, .15); transition: transform .5s var(--ease); }
.shade-chip:hover { transform: translateY(-8px) rotate(-3deg); }
.shade-chip span { display: block; aspect-ratio: 1; background: var(--shade); border-bottom: 2px solid var(--dark); }
.shade-chip strong, .shade-chip small { display: block; padding: 0 10px; }
.shade-chip strong { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding-top: 8px; }
.shade-chip small { padding-bottom: 9px; color: #555; }
.roller { width: min(100%, 170px); animation: float 4s ease-in-out infinite alternate; }
@media (max-width: 991.98px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; gap: 12px; grid-template-areas: "a a" "a a" "b d" "c e" "c g" "f f"; }
  .tile-f img { height: 150px; }
  .mosaic-home { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; grid-template-areas: "a a" "a a" "b k"; }
  .tile .shade-chip { width: 116px; }
}
@media (max-width: 575.98px) { .sotm-badge { width: 86px; height: 86px; font-size: .65rem; top: 16px; left: 16px; } .sotm-chips { top: 20px; right: 16px; } .sotm-chips i { width: 36px; height: 36px; } .sotm-name { left: 18px; bottom: 16px; font-size: 1rem; } .sotm-swatch { transform: none; margin: 0 auto; } }

/* ---------- Testimonials ---------- */
.testi-card { position: relative; background: #fff; border-radius: 24px; padding: clamp(28px, 4vw, 54px); margin: 0; box-shadow: 0 20px 50px rgba(4, 21, 11, .08); overflow: hidden; }
.testi-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--green); }
.testi-mark { position: absolute; top: 6px; right: 26px; font-size: 7rem; line-height: 1; color: var(--mint); }
.testi-card .stars { position: relative; color: #e0b33c; letter-spacing: 3px; margin-bottom: 18px; }
.testi-card blockquote { position: relative; font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.6; margin: 0 0 28px; }
.testi-card figcaption { display: flex; align-items: center; gap: 16px; }
.testi-avatar { flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--dark); color: #fff; font-weight: 500; display: grid; place-items: center; }
.testi-card figcaption strong, .testi-card figcaption small { display: block; }
.testi-card figcaption strong { font-weight: 500; font-size: 1.1rem; }
.testi-card figcaption small { color: #666; }

/* ---------- Search ---------- */
.search-panel { --bs-offcanvas-height: auto; bottom: auto; padding: 34px 0 40px; max-height: 100vh; overflow-y: auto; }
.search-form { position: relative; max-width: 760px; margin: 0 auto; }
.search-form input { border-radius: 50px; padding: 16px 64px 16px 26px; font-size: 1.1rem; border: 1.5px solid var(--dark); }
.search-form button { position: absolute; right: 6px; top: 6px; bottom: 6px; aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--dark); color: #fff; transition: background .3s; }
.search-form button:hover { background: var(--green); }
.page-hero .search-form { margin-top: 28px; }
.page-hero .search-form input { border-color: transparent; }
.search-suggest { max-width: 760px; margin: 18px auto 0; display: grid; gap: 4px; }
.search-suggest a { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-radius: 12px; transition: background .25s; }
.search-suggest a:hover, .search-suggest a:focus { background: var(--mint); color: var(--dark); }
.search-suggest img, .search-suggest a > i { flex: none; width: 52px; height: 52px; object-fit: contain; background: var(--mint); border-radius: 10px; padding: 5px; display: grid; place-items: center; font-size: 1.3rem; }
.search-suggest strong, .search-suggest small { display: block; }
.search-suggest strong { font-weight: 500; }
.search-suggest small { color: #666; }
.search-pages { display: grid; gap: 12px; }
.search-pages a { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 14px; padding: 18px 24px; transition: transform .3s var(--ease), box-shadow .3s; }
.search-pages a:hover { transform: translateX(8px); box-shadow: 0 10px 24px rgba(4, 21, 11, .08); color: var(--dark); }
.search-pages strong { font-weight: 500; }
.search-pages a > i:first-child { color: var(--green); font-size: 1.2rem; }

/* ---------- Policy pages ---------- */
.policy { max-width: 860px; margin: 0 auto; color: #444; line-height: 1.8; }
.policy h2 { color: var(--dark); margin-bottom: 1.2rem; }
.policy h3 { color: var(--dark); font-size: 1.4rem; margin: 2.2rem 0 .8rem; }

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--dark); color: rgba(255, 255, 255, .7); margin-top: 110px; overflow: visible; }
/* call-to-action card sits half over the section above */
.footer-cta { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; background: var(--green); color: #fff; border-radius: 24px; padding: clamp(28px, 4vw, 54px); top: -80px; margin-bottom: -20px; overflow: hidden; box-shadow: 0 24px 50px rgba(4, 21, 11, .25); }
.footer-cta::before { content: ''; position: absolute; top: -90px; right: -60px; width: 320px; height: 320px; background: rgba(255, 255, 255, .1); clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%); animation: spin 60s linear infinite; }
.footer-cta > * { position: relative; }
.footer-cta h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin-bottom: 6px; }
.footer-cta p { margin: 0; opacity: .9; }
.footer-cta .btn-pill:hover { background: var(--dark); color: #fff; }
.footer-cta .btn-pill:hover .ico { background: #fff; color: var(--dark); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 60px; }
.footer h5 { color: #fff; font-size: 1.05rem; margin-bottom: 1.3rem; padding-bottom: 12px; position: relative; }
.footer h5::after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--green); transition: width .4s var(--ease); }
.footer-grid > :hover h5::after { width: 56px; }
.footer li { margin-bottom: .7rem; }
.footer a { transition: color .25s, padding .25s; }
.footer a:hover { color: #fff; }
.footer nav li a:hover { padding-left: 6px; }
.footer-logo { display: inline-block; margin-bottom: 20px; }
.footer-tagline { color: #fff; font-size: 1.6rem; font-weight: 500; line-height: 1.2; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); display: grid; place-items: center; transition: background .3s, border-color .3s, transform .3s var(--ease), color .3s; }
.footer-social a:hover { background: var(--green); border-color: var(--green); transform: translateY(-4px); }
.footer-contact li { display: flex; gap: 14px; margin-bottom: 1rem; }
.footer-contact i { flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 22px 0; font-size: .9rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 30px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.credit { display: inline-flex; align-items: center; gap: 12px; }
.credit img { height: 24px; width: auto; transition: transform .3s var(--ease); }
.credit:hover img { transform: scale(1.06); }
@media (max-width: 1199.98px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } .footer-grid > :last-child { grid-column: 1 / -1; } .footer-bottom { justify-content: center; text-align: center; } .footer { margin-top: 140px; } }
.to-top, .wa-float { position: fixed; right: 24px; z-index: 1020; width: 48px; height: 48px; border-radius: 50%; color: #fff; display: grid; place-items: center; transition: .35s var(--ease); }
.to-top { bottom: 84px; background: var(--green); border-radius: 14px; font-size: 1.3rem; box-shadow: 0 8px 20px rgba(4, 21, 11, .22); opacity: 0; visibility: hidden; transform: translateY(20px); }
.to-top i { -webkit-text-stroke: 1px; transition: transform .3s var(--ease); }
.to-top:hover i { transform: translateY(-3px); }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--dark); color: #fff; }
.wa-float { bottom: 24px; background: #25d366; font-size: 1.4rem; animation: pulse 2.4s infinite; }
.wa-float:hover { color: #fff; transform: scale(1.1); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 100% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.js .reveal-left { transform: translateX(-60px); }
.js .reveal-right { transform: translateX(60px); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (min-width: 1600px) { .container { max-width: 1544px; } }
@media (max-width: 991.98px) {
  .logo-img, .site-header.stuck .logo-img { height: 58px; }
  .site-header .navbar-collapse { padding: 12px 0; max-height: 75vh; overflow-y: auto; }
  .header-icons { margin-top: 12px; }
  .about-title { text-align: left; }
  .review-card, .info-card { padding: 26px; }
  .service-hover { padding: 0 16px 16px; }
  .service-hover p { -webkit-line-clamp: 3; line-clamp: 3; font-size: .85rem; }
  .swatches { gap: 10px; }
}

/* ---------- Phone layout fixes ---------- */
@media (max-width: 991.98px) {
  /* product photos become one swipeable row, so the name, price and buttons are not pushed four screens down */
  .product-gallery { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 6px; }
  .product-gallery::-webkit-scrollbar { display: none; }
  .product-gallery > * { flex: 0 0 84%; scroll-snap-align: center; aspect-ratio: 1; }
  .product-gallery > .img-zoom:not(.product-photo) img, .product-photo img { aspect-ratio: 1; height: 100%; }
  .js .product-gallery .reveal { opacity: 1; transform: none; }
  .product-photo img { padding: 18px; }
  .product-lifestyle-media img { aspect-ratio: auto; height: 100%; }
  .product-lifestyle figcaption { font-size: .8rem; }
  .product-colour span { left: 14px; bottom: 14px; padding: 6px 14px; font-size: .9rem; }
  #product > .row { --bs-gutter-y: 1.5rem; }
}
@media (max-width: 575.98px) {
  .page-hero { padding: 44px 0; }
  .section { padding: 48px 0; }
  .product-links { gap: 10px 20px; margin: 20px 0; padding-bottom: 20px; }
  .product-accordion .accordion-button { font-size: 1.15rem; padding: 18px 0; }
  .products-swatch { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
  .products-swatch .product-card { padding: 7px; border-radius: 12px; }
  .products-swatch .product-info h3 { font-size: .95rem; }
  .products-swatch .price { font-size: .78rem; }
  /* home slider: shorter on phones so the next section is within reach, arrows hidden (swipe and dots remain) */
  .hero-slide { min-height: min(600px, 82vh); }
  .hero-content { padding-top: 70px; padding-bottom: 90px; }
  .hero h1, .hero h2 { line-height: 1.25; }
  .hero p { font-size: .95rem; margin-bottom: 1.6rem; }
  .hero-tagline { font-size: 1.7rem; gap: 12px; }
  .hero-tagline::before, .hero-tagline::after { width: 30px; }
  .hero .carousel-control-prev, .hero .carousel-control-next { display: none; }
  .hero .carousel-indicators { margin-bottom: 1.2rem; }
  .stat-label { font-size: .8rem; }
  .why-years { right: -8px; }
  .scheme-tabs { margin-bottom: 30px; }
  .swatch { padding: 8px 8px 12px; font-size: .85rem; }
}

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

/* Footer brand promise. */
.footer-brand .footer-tagline { font-size: clamp(1.35rem,2vw,1.8rem); font-weight: 500; line-height: 1.35; margin-top: 18px; color: #fff; }