/* ============================================================
   STYLES.CSS — Gunya Shutters
   Single external stylesheet containing:
   1. CSS Variables & Base Reset
   2. Common page CSS (shared across all pages)
   3. Section-specific CSS (features, solar-features, about-us)
   4. Utility classes (extracted from removed inline styles)
   Header and footer CSS remain in header.css / footer.css.
   ============================================================ */

/* ── CSS CUSTOM PROPERTIES ──────────────────────────────────
   Defined here so any page that links ONLY styles.css has them.
   ─────────────────────────────────────────────────────────── */
:root {
  --green-dark:  #1a3a2a;
  --green-mid:   #2d5a3d;
  --green-light: #3d7a52;
  --gold:        #c9a84c;
  --gold-light:  #e8c96a;
  --gold-pale:   #f5e6b8;
  --white:       #ffffff;
  --off-white:   #f8f5ef;
  --text-dark:   #1a1a1a;
  --text-mid:    #4a4a4a;
  --text-light:  #7a7a7a;
  --shadow:      0 20px 60px rgba(0,0,0,0.15);
  --radius:      14px;
}

/* ── BASE RESET ─────────────────────────────────────────────
   Applied once here; removed from every per-page <style>.
   ─────────────────────────────────────────────────────────── */
*  { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; color: var(--text-dark); background: var(--white); overflow-x: hidden; }
img  { max-width: 100%; height: auto; display: block; }

/* ============================================================
   UTILITY CLASSES
   Extracted from inline style="" attributes removed site-wide.
   ============================================================ */

/* ── SECTION INTRO WRAPPERS ─────────────────────────────────
   Replace: style="text-align:center;margin-bottom:56px;" etc.
   ─────────────────────────────────────────────────────────── */
.section-intro          { text-align: center; margin-bottom: 56px; }
.section-intro--sm      { text-align: center; margin-bottom: 12px; }
.section-intro--md      { text-align: center; margin-bottom: 16px; }
.section-intro--compact { text-align: center; margin-bottom: 8px;  margin-top: 16px; }

/* ── SECTION LABEL VARIANTS ─────────────────────────────────
   Replace: style="color:var(--gold-light);" on .section-label
   ─────────────────────────────────────────────────────────── */
.section-label--light { color: var(--gold-light); }

/* ── GOLD LINE CENTERED VARIANTS ────────────────────────────
   Replace: style="margin:12px auto 24px;" on .gold-line
   ─────────────────────────────────────────────────────────── */
.gold-line--center     { margin: 12px auto 24px; }
.gold-line--center-top { margin: 12px auto 0; }

/* ── TEXT UTILITIES ─────────────────────────────────────────
   Replace: style="text-align:center;" on any element
   ─────────────────────────────────────────────────────────── */
.text-center     { text-align: center; }
.text-gold-light { color: var(--gold-light); }
.text-gold-bold  { color: var(--gold); font-weight: 700; }

/* ── SPACING UTILITIES ──────────────────────────────────────
   Replace: style="margin-top:20px;" / "margin-bottom:20px;" etc.
   ─────────────────────────────────────────────────────────── */
.mt-20 { margin-top:    20px; }
.mt-24 { margin-top:    24px; }
.mb-20 { margin-bottom: 20px; }

/* ── MAX-WIDTH CONTAINERS ───────────────────────────────────
   Replace: style="max-width:640px;" / "max-width:680px;"
   ─────────────────────────────────────────────────────────── */
.max-w-640 { max-width: 640px; }
.max-w-680 { max-width: 680px; }

/* ── SVG ICON SIZES ─────────────────────────────────────────
   Replace: style="width:16px;height:16px;fill:currentColor;" on <svg>
   ─────────────────────────────────────────────────────────── */
.icon-sm        { width: 15px; height: 15px; fill: currentColor; }
.icon-md        { width: 16px; height: 16px; fill: currentColor; }
.icon-md--faint { width: 16px; height: 16px; fill: currentColor; opacity: 0.8; }

/* ── BUTTON VARIANTS ────────────────────────────────────────
   Replace: style="background:var(--green-dark);..." on .btn-primary
   ─────────────────────────────────────────────────────────── */
.btn-primary--dark {
  background:  var(--green-dark);
  color:       var(--white);
  box-shadow:  0 6px 20px rgba(26,58,42,0.3);
}
.btn-primary--dark:hover {
  background: var(--green-mid);
  color:      var(--white);
}
.btn-outline--dark {
  border-color: var(--green-dark);
  color:        var(--green-dark);
}
.btn-outline--dark:hover { background: rgba(26,58,42,0.08); }
.btn-outline--white {
  border-color: rgba(255,255,255,0.5);
  color:        var(--white);
}
.btn-outline--white:hover { border-color: var(--white); background: rgba(255,255,255,0.15); }

/* ── HERO BTNS — STATIC (no entry animation) ────────────────
   Replace: style="opacity:1;animation:none;" on .hero-btns
   ─────────────────────────────────────────────────────────── */
.hero-btns--static { opacity: 1; animation: none; }

/* ── CONTACT ACTIONS ROW ────────────────────────────────────
   Replace: style="display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;"
   ─────────────────────────────────────────────────────────── */
.contact-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

/* ── WARRANTY GUARANTEE HEADING ─────────────────────────────
   Replace: style="font-family:'Playfair Display'...;color:var(--white);..."
   ─────────────────────────────────────────────────────────── */
.warranty-guarantee-title {
  font-family:   'Playfair Display', serif;
  font-size:     clamp(22px, 2.5vw, 30px);
  font-weight:   700;
  color:         var(--white);
  margin-bottom: 14px;
  line-height:   1.3;
}

/* ── BADGE UNIT SPAN ────────────────────────────────────────
   Replace: style="font-size:18px;" inside .badge-num
   ─────────────────────────────────────────────────────────── */
.badge-unit { font-size: 18px; }

/* ── FOOTER IMAGES ──────────────────────────────────────────
   Replace: style="height:150px;..." on footer logo <img>
   Replace: style="height:44px;..." on off-canvas logo <img>
   ─────────────────────────────────────────────────────────── */
.footer-logo-img {
  height:        150px;
  width:         auto;
  object-fit:    contain;
  display:       block;
  margin-bottom: 16px;
}
.offcanvas-logo-img {
  height:     44px;
  width:      auto;
  object-fit: contain;
  display:    block;
}

/* ── FOOTER WARRANTY BOX ────────────────────────────────────
   Replace: style="margin-top:20px;background:rgba(201,168,76,0.12);..."
   ─────────────────────────────────────────────────────────── */
.footer-warranty-box {
  margin-top:    20px;
  background:    rgba(201,168,76,0.12);
  border:        1px solid rgba(201,168,76,0.25);
  border-radius: 10px;
  padding:       14px;
}

/* ── FOOTER WARRANTY LABEL ──────────────────────────────────
   Replace: style="font-size:11px;letter-spacing:1.5px;...color:var(--gold)..."
   ─────────────────────────────────────────────────────────── */
.footer-warranty-label {
  font-size:      11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--gold);
  font-weight:    600;
  margin-bottom:  6px;
}

/* ── FOOTER WARRANTY TEXT ───────────────────────────────────
   Replace: style="font-size:13px;color:rgba(255,255,255,0.7);line-height:1.6;"
   ─────────────────────────────────────────────────────────── */
.footer-warranty-text { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.6; }

/* ── FOOTER ADDRESS / INFO LIST ITEMS ───────────────────────
   Replace: style="color:rgba(255,255,255,0.5);font-size:14px;padding-top:4px;"
   ─────────────────────────────────────────────────────────── */
.footer-address-item { color: rgba(255,255,255,0.5); font-size: 14px; padding-top: 4px; }

/* ============================================================
   COMMON PAGE CSS
   Extracted from per-page <style> blocks (identical across all pages).
   ============================================================ */

/* ===========================
   ROOT & BASE
   =========================== */

/* ===========================
   REVEAL ANIMATIONS
   =========================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.65s ease,transform 0.65s ease;}
.reveal.visible{opacity:1;transform:none;}
.reveal-delay-1{transition-delay:0.12s;}
.reveal-delay-2{transition-delay:0.22s;}
.reveal-delay-3{transition-delay:0.32s;}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

/* ===========================
   SHARED UTILITY
   =========================== */
.section-inner{max-width:1280px;margin:0 auto;padding:0 32px;}
.section-label{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px;}
.section-title{font-family:'Playfair Display',serif;font-size:clamp(26px,3.5vw,44px);font-weight:700;color:var(--green-dark);line-height:1.2;margin-bottom:20px;}
.gold-line{width:48px;height:3px;background:var(--gold);border-radius:2px;margin-bottom:24px;}

/* ===========================
   BREADCRUMB
   =========================== */
.breadcrumb-bar{background:var(--green-dark);padding:14px 0;}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,0.55);flex-wrap:wrap;}
.breadcrumb a{color:rgba(255,255,255,0.55);text-decoration:none;transition:color 0.2s;}
.breadcrumb a:hover{color:var(--gold);}
.breadcrumb span{color:var(--gold-light);font-weight:500;}
.breadcrumb-sep{opacity:0.4;}
/* Hide original top breadcrumb on desktop — replaced by post-hero breadcrumb */
@media(min-width:769px){.breadcrumb-bar{display:none;}}

/* ===========================
   HERO BANNER
   =========================== */
.product-hero{position:relative;min-height:580px;overflow:hidden;display:flex;align-items:center;}
@keyframes heroZoom{to{transform:scale(1);}}
.hero-overlay{position:absolute;inset:0; background: linear-gradient(135deg, rgba(26, 58, 42, 0.88) 0%, rgb(53 53 53 / 53%) 55%, rgb(43 40 40 / 2%) 100%);}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;padding:80px 32px 60px;display:grid;grid-template-columns:1.35fr 0.8fr;gap:52px;align-items:center;}

/* Hero text */
.hero-eyebrow{font-size:11px;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold-light);font-weight:600;margin-bottom:16px;opacity:0;animation:fadeUp 0.7s 0.2s forwards;}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(30px,4vw,54px);font-weight:800;color:var(--white);line-height:1.1;margin-bottom:18px;opacity:0;animation:fadeUp 0.7s 0.38s forwards;}
.hero-title em{color:var(--gold-light);font-style:normal;}
.hero-desc{font-size:16px;line-height:1.7;color:rgba(255,255,255,0.82);margin-bottom:28px;font-weight:300;opacity:0;animation:fadeUp 0.7s 0.52s forwards;}
.hero-badges{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px;opacity:0;animation:fadeUp 0.7s 0.66s forwards;}
.hero-badge{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);backdrop-filter:blur(8px);border-radius:8px;padding:9px 16px;font-size:12px;font-weight:600;color:var(--white);display:flex;align-items:center;gap:7px;}
.hero-badge svg{width:14px;height:14px;fill:var(--gold);}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:fadeUp 0.7s 0.78s forwards;}
.btn-primary{padding:14px 30px;background:var(--gold);color:var(--green-dark);font-size:15px;font-weight:700;border-radius:10px;text-decoration:none;transition:all 0.3s;box-shadow:0 8px 24px rgba(201,168,76,0.4);display:inline-flex;align-items:center;gap:8px;}
.btn-primary:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 12px 32px rgba(201,168,76,0.55);}
.btn-outline{padding:14px 30px;border:2px solid rgba(255,255,255,0.45);color:var(--white);font-size:15px;font-weight:600;border-radius:10px;text-decoration:none;transition:all 0.3s;backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:8px;}
.btn-outline:hover{background:rgba(255,255,255,0.15);border-color:var(--white);}

/* Hero form */
.hero-form-wrap{opacity:0;animation:fadeUp 0.75s 0.4s forwards;margin-top:60px;}
.hero-form{background:var(--green-dark);border-radius:16px;padding:28px 24px;box-shadow:0 24px 64px rgba(0,0,0,0.45);border:1px solid rgba(201,168,76,0.25);margin-top: 60px;}
.hero-form h3{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;color:var(--white);margin-bottom:6px;}
.hero-form p{font-size:12px;color:rgba(255,255,255,0.5);margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:14px;}
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:11px;font-weight:700;color:var(--gold-light);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.8px;}
.form-group input,
.form-group select,
.form-group textarea{width:100%;padding:10px 13px;border:1.5px solid rgba(255,255,255,0.12);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--white);background:rgba(255,255,255,0.08);transition:border-color 0.25s,background 0.25s;outline:none;}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,0.35);}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{border-color:var(--gold);background:rgba(255,255,255,0.13);box-shadow:0 0 0 3px rgba(201,168,76,0.15);}
.form-group textarea{min-height:76px;resize:vertical;color:var(--white);}
.form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e8c96a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;cursor:pointer;color:var(--white);}
.form-group select option{background:var(--green-dark);color:var(--white);}
.form-group select option[disabled]{color:rgba(255,255,255,0.4);}
/* Select placeholder: dim until user picks a real option */
.hero-form .form-group select:not(.sel-chosen),
.mobile-hero-form .form-group select:not(.sel-chosen){color:rgba(255,255,255,0.45);}
.hero-form .form-group select.sel-chosen,
.mobile-hero-form .form-group select.sel-chosen{color:var(--white);}
.contact-form .form-group select:not(.sel-chosen){color:rgba(0,0,0,0.38);}
.contact-form .form-group select.sel-chosen{color:var(--text-dark);}
.form-submit{width:100%;padding:12px;background:var(--gold);color:var(--green-dark);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:800;border:none;border-radius:10px;cursor:pointer;transition:all 0.3s;margin-top:6px;letter-spacing:0.3px;}
.form-submit:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:0 8px 24px rgba(201,168,76,0.45);}

/* Mobile standalone form (below hero on mobile only) */
.mobile-hero-form{display:none;background:var(--green-dark);padding:36px 0;}
.mobile-hero-form .hero-form{animation:none;opacity:1;}

/* ===========================
   WARRANTY STRIP
   =========================== */
.warranty-strip{background:var(--gold);}
.warranty-inner{max-width:1280px;margin:0 auto;padding:0 32px;display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;}
.warranty-item{display:flex;align-items:center;gap:14px;color:var(--green-dark);font-weight:600;font-size:14px;padding:20px 28px;position:relative;flex:1;justify-content:center;}
.warranty-item:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(26,58,42,0.2);}
.warranty-icon{width:44px;height:44px;background:var(--green-dark);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.warranty-icon svg{width:22px;height:22px;fill:var(--gold);}
.warranty-text strong{display:block;font-size:14px;font-weight:800;color:var(--green-dark);}
.warranty-text span{font-size:11px;font-weight:500;color:rgba(26,58,42,0.7);}

/* ===========================
   PRODUCT INFO SECTION
   =========================== */
.product-info-section{background:var(--off-white);padding:88px 0;}
.product-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-bottom:72px;}
.product-img-col{position:relative;}
.product-main-img{border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,0.12);}
.product-main-img img{width:100%;height:auto;display:block;object-fit:cover;transition:transform 0.6s ease;}
.product-main-img:hover img{transform:scale(1.04);}
.product-img-badge{position:absolute;bottom:24px;left:24px;background:var(--gold);padding:13px 18px;border-radius:10px;color:var(--green-dark);font-weight:700;font-size:13px;line-height:1.35;box-shadow:0 6px 20px rgba(0,0,0,0.25);}
.product-img-thumbnails{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.product-thumb{border-radius:10px;overflow:hidden;height:140px;}
.product-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s ease;}
.product-thumb:hover img{transform:scale(1.07);}

.product-text-col{}
.product-category-label{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:8px;}
.product-main-title{font-family:'Playfair Display',serif;font-size:clamp(26px,3vw,40px);font-weight:800;color:var(--green-dark);line-height:1.15;margin-bottom:20px;}
.product-body{font-size:15.5px;line-height:1.75;color:var(--text-mid);margin-bottom:18px;}

/* Highlights card */
.highlights-card{background:var(--white);border-radius:14px;border:1px solid rgba(0,0,0,0.07);padding:28px 28px 24px;margin-top:28px;box-shadow:0 4px 20px rgba(0,0,0,0.06);}
.highlights-card h3{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:var(--green-dark);margin-bottom:16px;}
.highlights-list{list-style:none;}
.highlights-list li{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid rgba(0,0,0,0.065);font-size:14.5px;color:var(--text-mid);line-height:1.5;}
.highlights-list li:last-child{border-bottom:none;}
.highlights-dot{width:8px;height:8px;background:var(--gold);border-radius:50%;flex-shrink:0;margin-top:6px;}

/* Suitable For */
.suitable-section{margin-top:56px;}
.two-col-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:28px;}
.suitable-card{background:var(--white);border-radius:14px;border:1px solid rgba(0,0,0,0.07);padding:28px;box-shadow:0 4px 18px rgba(0,0,0,0.05);}
.suitable-card h3{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;color:var(--green-dark);margin-bottom:14px;}
.suitable-list{list-style:none;}
.suitable-list li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.06);font-size:14.5px;color:var(--text-mid);}
.suitable-list li:last-child{border-bottom:none;}
.suitable-check{width:20px;height:20px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.suitable-check svg{width:10px;height:10px;fill:var(--green-dark);}

/* Suitable For image row */
.suitable-images-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;}
.suitable-img{border-radius:10px;overflow:hidden;height:200px;}
.suitable-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.45s ease;}
.suitable-img:hover img{transform:scale(1.05);}

/* Product Highlights — full width below grid */
.highlights-fullwidth{background:var(--white);border-radius:16px;border:1px solid rgba(0,0,0,0.07);padding:36px 40px;margin-top:48px;box-shadow:0 4px 24px rgba(0,0,0,0.06);}
.highlights-fullwidth h3{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--green-dark);margin-bottom:18px;}
.highlights-fullwidth-body{padding-top:4px;}
.highlights-fullwidth .product-body{font-size:15.5px;line-height:1.75;color:var(--text-mid);margin-bottom:14px;}

/* ===========================
   SPECIFICATIONS TABLE
   =========================== */
.specs-section{background:var(--white);padding:88px 0;}
.specs-table-wrap{overflow-x:auto;margin-top:40px;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.07);}
.specs-table{width:100%;border-collapse:collapse;}
.specs-table thead tr{background:var(--green-dark);}
.specs-table thead th{padding:18px 28px;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--gold);text-align:left;}
.specs-table tbody tr{border-bottom:1px solid rgba(0,0,0,0.065);transition:background 0.2s;}
.specs-table tbody tr:last-child{border-bottom:none;}
.specs-table tbody tr:hover{background:rgba(201,168,76,0.05);}
.specs-table tbody tr:nth-child(even){background:rgba(248,245,239,0.6);}
.specs-table tbody tr:nth-child(even):hover{background:rgba(201,168,76,0.07);}
.specs-table td{padding:16px 28px;font-size:14.5px;color:var(--text-mid);vertical-align:middle;}
.specs-table td:first-child{font-weight:700;color:var(--green-dark);width:45%;font-size:14px;}
.specs-table td .spec-highlight{display:inline-flex;align-items:center;gap:6px;background:rgba(201,168,76,0.12);color:var(--green-dark);border-radius:6px;padding:4px 11px;font-size:13px;font-weight:700;}

/* Why Choose callout */
.why-choose-cta{background:linear-gradient(135deg,var(--green-dark) 0%,var(--green-mid) 100%);border-radius:16px;padding:40px 44px;margin-top:56px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;box-shadow:0 16px 48px rgba(26,58,42,0.22);}
.why-choose-text h3{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--white);margin-bottom:10px;}
.why-choose-text p{font-size:15px;color:rgba(255,255,255,0.78);line-height:1.65;max-width:640px;}
.why-choose-cta .btn-primary{white-space:nowrap;}

/* ===========================
   OTHER PRODUCTS SECTION
   =========================== */
.other-products{background:var(--off-white);padding:88px 0;}
.other-products .section-title{text-align:center;}
.other-products .section-label{text-align:center;}
.other-products .gold-line{margin:12px auto 24px;}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px;margin-top:44px;}
.product-card{background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.07);border:1px solid rgba(0,0,0,0.05);transition:all 0.35s;position:relative;}
.product-card.active-product{border-color:var(--gold);box-shadow:0 8px 32px rgba(201,168,76,0.22);}
.product-card.active-product::after{content:'Currently Viewing';position:absolute;top:14px;right:14px;background:var(--gold);color:var(--green-dark);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 10px;border-radius:6px;}
.product-card:hover{transform:translateY(-6px);box-shadow:0 16px 44px rgba(26,58,42,0.14);}
.product-card-body{padding:20px 22px 24px;}
.product-card-img{height:230px;overflow:hidden;}
.product-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease;}
.product-card:hover .product-card-img img{transform:scale(1.07);}
.product-card-badge{position:absolute;top:14px;left:14px;background:var(--gold);color:var(--green-dark);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 10px;border-radius:6px;}
.product-cat-tag{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:7px;}
.product-card-title{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:var(--green-dark);margin-bottom:14px;line-height:1.3;}
.btn-view{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:var(--gold);color:var(--green-dark);font-size:13px;font-weight:700;border-radius:8px;text-decoration:none;transition:all 0.25s;}
.btn-view:hover{background:var(--green-dark);color:var(--white);}

/* ===========================
   CONTACT SECTION
   =========================== */
.contact-section{background:var(--white);padding:88px 0;}
.contact-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:60px;align-items:start;}
.contact-info-col h3{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:var(--green-dark);margin-bottom:24px;line-height:1.3;}
.contact-details{margin-top:32px;display:flex;flex-direction:column;gap:0;}
.contact-detail{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid rgba(0,0,0,0.07);}
.contact-detail:last-child{border-bottom:none;}
.contact-detail-icon{width:42px;height:42px;background:rgba(201,168,76,0.12);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-detail-icon svg{width:20px;height:20px;fill:var(--gold);}
.contact-detail strong{display:block;font-size:13px;font-weight:700;color:var(--green-dark);margin-bottom:3px;text-transform:uppercase;letter-spacing:0.5px;}
.contact-detail p,.contact-detail a{font-size:15px;color:var(--text-mid);text-decoration:none;transition:color 0.2s;}
.contact-detail a:hover{color:var(--green-dark);}
.contact-form{background:var(--off-white);border-radius:16px;padding:36px 36px 32px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 8px 40px rgba(0,0,0,0.06);}
.contact-form h3{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;color:var(--green-dark);margin-bottom:6px;}
.contact-form > p{font-size:14px;color:var(--text-light);margin-bottom:24px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* Fix: override hero-form dark-background input styles for the light contact form */
.contact-form .form-group input,
.contact-form .form-group textarea{
  background:#ffffff;
  color:var(--text-dark);
  border:1.5px solid rgba(0,0,0,0.14);
}
.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder{color:rgba(0,0,0,0.38);}
/* Select: explicitly override every background property so the custom arrow shows correctly */
.contact-form .form-group select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-color:#ffffff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a3a2a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  padding-right:34px;
  color:var(--text-dark);
  border:1.5px solid rgba(0,0,0,0.14);
  cursor:pointer;
}
.contact-form .form-group select option{background:#ffffff;color:var(--text-dark);}
.contact-form .form-group input:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus{
  border-color:var(--gold);
  background-color:#ffffff;
  box-shadow:0 0 0 3px rgba(201,168,76,0.15);
}
.contact-form .form-group label{color:var(--green-dark);}

/* ===========================
   FLOATING FIXED BUTTONS
   =========================== */
.float-btns{position:fixed;right:20px;bottom:88px;z-index:999;display:flex;flex-direction:column;gap:10px;}
.float-btn{display:flex;align-items:center;gap:9px;padding:13px 18px;border-radius:40px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:all 0.3s;box-shadow:0 6px 24px rgba(0,0,0,0.2);white-space:nowrap;}
.float-btn-call{background:var(--green-dark);color:var(--white);}
.float-btn-call:hover{background:var(--green-mid);transform:translateX(-4px);box-shadow:0 10px 32px rgba(26,58,42,0.35);}
.float-btn-quote{background:var(--gold);color:var(--green-dark);}
.float-btn-quote:hover{background:var(--gold-light);transform:translateX(-4px);box-shadow:0 10px 32px rgba(201,168,76,0.5);}
.float-btn svg{width:17px;height:17px;fill:currentColor;flex-shrink:0;}

/* Scroll top */
.scroll-top{position:fixed;bottom:28px;right:20px;width:44px;height:44px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1000;border:none;box-shadow:0 4px 16px rgba(201,168,76,0.4);opacity:0;transform:translateY(16px);transition:all 0.3s;color:var(--green-dark);font-size:16px;}
.scroll-top.visible{opacity:1;transform:none;}
.scroll-top:hover{background:var(--gold-light);}

     /* Suitable For image row */
.suitable9-images-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px;}
.suitable9-img{border-radius:10px;overflow:hidden;}
.suitable9-img img{width:100%;height:200px;object-fit:cover;display:block;transition:transform 0.45s ease;}
.suitable9-img:hover img{transform:scale(1.05);}
      
      
      
      /* ===========================
   RESPONSIVE — MOBILE (≤767px)
   =========================== */
@media(max-width:767px){

  .suitable9-images-row {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    margin-top: 20px;
}
}

/* ===========================
   RESPONSIVE — TABLET (≤900px)
   =========================== */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:36px;}
  .hero-form-wrap{display:none;}/* hide inside hero on tablet/mobile */
  .mobile-hero-form{display:block;}
  .product-info-grid{grid-template-columns:1fr;gap:36px;}
  .product-img-thumbnails{grid-template-columns:repeat(3,1fr);}
  .product-main-img img{height:360px;object-fit:cover;}
  .two-col-grid{grid-template-columns:1fr;}
  .highlights-fullwidth{padding:28px 24px;}
  .why-choose-cta{padding:32px 28px;}
  .contact-grid{grid-template-columns:1fr;gap:36px;}
  .form-row{grid-template-columns:1fr;}
  .products-grid{grid-template-columns:repeat(2,1fr);}
  .float-btns{bottom:76px;}
}

/* ===========================
   RESPONSIVE — MOBILE (≤640px)
   =========================== */
@media(max-width:640px){
  .section-inner{padding:0 18px;}
  .product-hero{min-height:auto;}
  .hero-inner{padding:80px 18px 48px;}
  .mobile-hero-form{padding:28px 0;}
  .mobile-hero-form .section-inner{padding:0 18px;}
  .product-info-section,.specs-section,.other-products,.contact-section{padding:60px 0;}
  .product-main-img img{height:260px;object-fit:cover;}
  .product-img-thumbnails{grid-template-columns:1fr 1fr;}
  .product-thumb{height:110px;}
  .specs-table td,.specs-table th{padding:13px 16px;}
  .products-grid{grid-template-columns:1fr;}
  .why-choose-cta{flex-direction:column;text-align:center;padding:28px 24px;}
  .why-choose-cta .btn-primary{align-self:center;}
  .float-btn span{display:none;}
  .float-btn{padding:13px 13px;border-radius:50%;width:48px;height:48px;justify-content:center;}
  .float-btn svg{width:20px;height:20px;}
  .float-btns{right:16px;bottom:70px;}
  .warranty-inner{flex-direction:column;}
  .warranty-item:not(:last-child)::after{display:none;}
  .warranty-item{padding:14px 18px;justify-content:flex-start;}
  .contact-form{padding:24px 18px;}
  .breadcrumb{font-size:12px;}

  /* ── TOPBAR: force visible single row on mobile ── */
  .topbar{
    display:block !important;
    background:var(--green-dark) !important;
    padding:10px 0 !important;
  }
  .topbar-inner{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    gap:0 !important;
    padding:0 16px !important;
    max-width:100% !important;
  }
  .topbar-left{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:18px !important;
    flex:1 !important;
    flex-wrap:nowrap !important;
  }
  .topbar-left a{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    color:#ffffff !important;
    text-decoration:none !important;
    font-size:14px !important;
    font-weight:600 !important;
    white-space:nowrap !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .topbar-left a svg,
  .topbar-left .topbar-icon{
    width:16px !important;
    height:16px !important;
    fill:#ffffff !important;
    flex-shrink:0 !important;
    display:inline-block !important;
  }
  /* Hide social icons on mobile to keep single clean row */
  .topbar-right{ display:none !important; }
}

@media(max-width:900px){
  .topbar{
    display:block !important;
    background:var(--green-dark) !important;
    padding:8px 0 !important;
  }
  .topbar-inner{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:24px !important;
    padding:0 20px !important;
  }
  .topbar-left{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:20px !important;
    flex-wrap:nowrap !important;
  }
  .topbar-left a{
    font-size:13px !important;
    font-weight:600 !important;
    color:#ffffff !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    white-space:nowrap !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .topbar-right{ display:none !important; }
}

/* MOBILE HEADER CONTACT STRIP */
.mobile-header-contact{display:none;}
@media(max-width:768px){
  .mobile-header-contact{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;
    background:var(--green-dark);
    border-bottom:1px solid rgba(201,168,76,0.25);
    padding:8px 16px;
    width:100%;
  }
  .mobile-header-contact a{
    display:flex;align-items:center;gap:6px;
    color:rgba(255,255,255,0.9);text-decoration:none;
    font-size:12px;font-weight:500;
    transition:color 0.2s;
  }
  .mobile-header-contact a:hover{color:var(--gold-light);}
  .mobile-header-contact a svg{width:13px;height:13px;fill:var(--gold);flex-shrink:0;}
  .mhc-divider{display:none;}
  header{flex-direction:column !important;height:auto !important;top:0 !important;}
  header.at-top{height:auto !important;}
  .header-inner{width:100%;height:68px !important;background:rgba(255,255,255,0.97);}
  header.scrolled .header-inner{background:transparent;}
  header.scrolled .mobile-header-contact{background:var(--green-dark);}
  header.scrolled .hamburger span{background:var(--green-dark);}
}
@media(max-width:480px){
  .mobile-header-contact{padding:6px 12px;}
  .mobile-header-contact a{font-size:11px;}
  .header-inner{height:60px !important;}
}

/* ===========================
   DESKTOP BREADCRUMB (post-hero)
   =========================== */
.desktop-breadcrumb-section{
  display:none;
  background:#fdf5dd;
  border-bottom:1px solid rgba(0,0,0,0.07);
}
@media(min-width:769px){
  .desktop-breadcrumb-section{ display:block; }
}
.desktop-breadcrumb-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:50px;
}
.desktop-breadcrumb-nav{
  display:flex;
  align-items:center;
  font-size:13px;
}
.desktop-breadcrumb-nav a{
  color:var(--text-mid);
  text-decoration:none;
  transition:color 0.2s;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:14px 0;
}
.desktop-breadcrumb-nav a:hover{ color:var(--gold); }
.desktop-breadcrumb-nav a svg{
  width:13px;height:13px;fill:currentColor;opacity:0.5;flex-shrink:0;
}
.dbc-sep{
  display:inline-flex;align-items:center;
  color:rgba(0,0,0,0.22);margin:0 9px;
}
.dbc-sep svg{ width:14px;height:14px;fill:currentColor; }
.dbc-current{
  color:var(--gold);font-weight:600;font-size:13px;padding:14px 0;
}
.dbc-right{
  font-size:12px;color:var(--text-light);
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.dbc-right svg{ width:13px;height:13px;fill:var(--gold);flex-shrink:0; }

/* ===========================
   ACTIVE NAV STATE — #c9a84c
   =========================== */

/* Desktop: active nav link text colour */
.nav-link.active,
.nav-item.active > .nav-link,
.nav-item.active > a.nav-link {
  color: #c9a84c !important;
}

/* Desktop: active underline / indicator (if header.css uses ::after pseudo) */
.nav-item.active > .nav-link::after,
.nav-link.active::after {
  width: 100% !important;
  opacity: 1 !important;
}

/* Desktop dropdown: highlight the currently-active product link */
.nav-item.active .dropdown a[href="index.html"],
.nav-item.active .dropdown a.active {
  color: #c9a84c !important;
  font-weight: 700 !important;
  background: rgba(201,168,76,0.10) !important;
  border-radius: 6px;
}

/* Mobile: active nav link in offcanvas panel */
@media(max-width:768px){
  .nav-link.active,
  .nav-item.active > .nav-link,
  .nav-item.active > a.nav-link {
    color: #c9a84c !important;
    background: rgba(201,168,76,0.10) !important;
    border-radius: 8px;
  }

  /* Mobile dropdown: active product link */
  .nav-item.active .dropdown a[href="index.html"],
  .nav-item.active .dropdown a.active {
    color: #c9a84c !important;
    font-weight: 700 !important;
    background: rgba(201,168,76,0.12) !important;
    border-radius: 6px;
  }

}

/* ============================================================
   FEATURES SECTION CSS
   Shared by: battery-shutters, electric-shutters,
              manual-shutters, solar-shutters.
   ============================================================ */
.reveal-delay-4{transition-delay:0.42s;}

.features-section{background:var(--white);padding:96px 0 0;}

.features-intro-block{margin-bottom:52px;padding-bottom:48px;border-bottom:2px solid var(--gold-pale);}

.features-intro-block h2{font-family:'Playfair Display',serif;font-size:clamp(24px,2.8vw,36px);font-weight:800;color:var(--green-dark);line-height:1.2;margin-bottom:16px;}

.features-intro-block p{font-size:16px;line-height:1.82;color:var(--text-mid);}

.features-two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:48px;}

.features-half{width:100%;}

.features-half .feature-item{padding:24px 0;border-bottom:1px solid rgba(0,0,0,0.07);display:grid;grid-template-columns:52px 1fr;gap:0;align-items:start;}

.features-half .feature-item:last-child{border-bottom:none;}

.feature-item-icon{width:38px;height:38px;background:rgba(201,168,76,0.1);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:3px;}

.feature-item-icon svg{width:18px;height:18px;fill:var(--gold);}

.feature-item-body h3{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:var(--green-dark);margin-bottom:8px;line-height:1.3;}

.feature-item-body p{font-size:14.5px;line-height:1.75;color:var(--text-mid);}

.features-inline-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:52px;}

.features-inline-img{border-radius:14px;overflow:hidden;height:260px;box-shadow:0 10px 32px rgba(0,0,0,0.12);}

.features-inline-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.55s ease;}

.features-inline-img:hover img{transform:scale(1.05);}

.features-fullwidth-cta{background:linear-gradient(135deg,var(--green-dark) 0%,var(--green-mid) 100%);padding:72px 0;position:relative;overflow:hidden;}

.features-fullwidth-cta::before{content:'';position:absolute;top:-60px;right:-60px;width:320px;height:320px;background:radial-gradient(circle,rgba(201,168,76,0.1) 0%,transparent 70%);}

.features-fullwidth-cta::after{content:'';position:absolute;bottom:-80px;left:-40px;width:260px;height:260px;background:radial-gradient(circle,rgba(201,168,76,0.07) 0%,transparent 70%);}

.features-cta-inner{max-width:1280px;margin:0 auto;padding:0 32px;text-align:center;position:relative;z-index:1;}

.features-cta-inner h2{font-family:'Playfair Display',serif;font-size:clamp(26px,3vw,40px);font-weight:800;color:var(--white);line-height:1.2;margin-bottom:20px;}

.features-cta-inner p{font-size:16px;line-height:1.8;color:rgba(255,255,255,0.8);max-width:680px;margin:0 auto 36px;}

.features-cta-inner p strong{color:var(--gold-light);}

.features-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

.product-card.active-card{border:2px solid var(--gold);box-shadow:0 8px 32px rgba(201,168,76,0.2);}

.btn-view-current{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:var(--green-dark);color:var(--white);font-size:13px;font-weight:700;border-radius:8px;text-decoration:none;cursor:default;}

.contact-form>p{font-size:14px;color:var(--text-light);margin-bottom:24px;}

.feature-bullet-list{margin:8px 0 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;}

.feature-bullet-list li{font-size:14.5px;line-height:1.65;color:var(--text-mid);display:flex;align-items:flex-start;gap:8px;}

.feature-bullet-list li::before{content:'';width:7px;height:7px;min-width:7px;background:var(--gold);border-radius:50%;margin-top:7px;}

/* ============================================================
   SOLAR / POWER-SMART FEATURES CSS
   Shared by: solar-smart-roller-shutter-automation,
              power-smart-battery-roller-shutter.
   ============================================================ */
.solar-feature-strip{background:linear-gradient(135deg,var(--green-dark) 0%,var(--green-mid) 100%);padding:52px 0;margin-top:0;}

.solar-features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:0;}

.solar-feature-item{background:rgba(255,255,255,0.07);border:1px solid rgba(201,168,76,0.2);border-radius:14px;padding:28px 22px;text-align:center;transition:all 0.3s;}

.solar-feature-item:hover{background:rgba(255,255,255,0.12);border-color:var(--gold);transform:translateY(-4px);}

.solar-feature-icon{width:52px;height:52px;background:rgba(201,168,76,0.15);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}

.solar-feature-icon svg{width:26px;height:26px;fill:var(--gold);}

.solar-feature-title{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:var(--white);margin-bottom:8px;}

.solar-feature-desc{font-size:13px;color:rgba(255,255,255,0.65);line-height:1.6;}

/* ============================================================
   ABOUT US PAGE CSS
   Specific to: about-us/index.html
   ============================================================ */
.reveal-delay-4{transition-delay:0.42s;}

.about-section{background:var(--off-white);padding:96px 0;}

.about-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin-bottom:80px;}

.about-img-col{position:relative;}

.about-main-img{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);}

.about-main-img img{width:100%;height:640px;object-fit:cover;transition:transform 0.6s;}

.about-main-img:hover img{transform:scale(1.03);}

.about-img-badge{position:absolute;bottom:24px;left:24px;background:var(--gold);padding:14px 20px;border-radius:10px;color:var(--green-dark);font-weight:700;font-size:13px;line-height:1.45;box-shadow:0 6px 20px rgba(0,0,0,0.25);}

.about-img-badge strong{display:block;font-size:17px;font-weight:800;}

.about-img-small-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}

.about-img-small{border-radius:10px;overflow:hidden;height:150px;}

.about-img-small img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}

.about-img-small:hover img{transform:scale(1.06);}

.about-text-col{}

.about-body{font-size:15.5px;line-height:1.78;color:var(--text-mid);margin-bottom:18px;}

.range-list{list-style:none;margin:20px 0 24px;}

.range-list li{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid rgba(0,0,0,0.065);font-size:14.5px;color:var(--text-mid);line-height:1.5;}

.range-list li:last-child{border-bottom:none;}

.range-dot{width:8px;height:8px;background:var(--gold);border-radius:50%;flex-shrink:0;margin-top:6px;}

.automation-note{background:var(--white);border-radius:12px;border-left:4px solid var(--gold);padding:18px 20px;margin-bottom:24px;font-size:14.5px;color:var(--text-mid);line-height:1.6;}

.automation-note strong{color:var(--green-dark);}

.mission-vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:48px;}

.mv-card{background:var(--white);border-radius:16px;padding:36px 32px;box-shadow:0 6px 28px rgba(0,0,0,0.07);border:1px solid rgba(0,0,0,0.06);position:relative;overflow:hidden;}

.mv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gold);}

.mv-card-icon{width:52px;height:52px;background:rgba(201,168,76,0.12);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}

.mv-card-icon svg{width:26px;height:26px;fill:var(--gold);}

.mv-card h3{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--green-dark);margin-bottom:14px;}

.mv-card p{font-size:15px;line-height:1.75;color:var(--text-mid);}

.warranty-guarantee{background:linear-gradient(135deg,var(--green-dark) 0%,var(--green-mid) 100%);border-radius:16px;padding:44px 48px;margin-bottom:0;display:flex;align-items:center;gap:48px;flex-wrap:wrap;box-shadow:0 16px 48px rgba(26,58,42,0.22);}

.warranty-guarantee-text{}

.warranty-guarantee-text p{font-size:15.5px;color:rgba(255,255,255,0.82);line-height:1.7;}

.warranty-guarantee-text strong{color:var(--gold-light);}

.warranty-badges{display:flex;gap:20px;flex-wrap:wrap;flex-shrink:0;}

.warranty-badge-item{background:rgba(201,168,76,0.15);border:1px solid rgba(201,168,76,0.3);border-radius:12px;padding:20px 24px;text-align:center;min-width:150px;}

.warranty-badge-item .badge-num{font-family:'Playfair Display',serif;font-size:32px;font-weight:800;color:var(--gold-light);line-height:1;}

.warranty-badge-item .badge-label{font-size:12px;color:rgba(255,255,255,0.7);margin-top:6px;line-height:1.4;font-weight:500;}

.about-images-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px;}

.about-row-img{border-radius:14px;overflow:hidden;height:240px;box-shadow:0 10px 32px rgba(0,0,0,0.13);position:relative;}

.about-row-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}

.about-row-img:hover img{transform:scale(1.05);}

.about-row-img-caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(26,58,42,0.85) 0%,transparent 100%);padding:20px 18px 16px;color:var(--white);font-size:13px;font-weight:600;}

.contact-form>p{font-size:14px;color:var(--text-light);margin-bottom:24px;}

/* ============================================================
   COLOURS PAGE CSS
   Specific to: colours/index.html
   ============================================================ */
.colour-visualiser{background:var(--white);padding:88px 0;}

.colour-visualiser .section-label{text-align:center;}

.colour-visualiser .section-title{text-align:center;}

.colour-visualiser .gold-line{margin:12px auto 0;}

.cv-intro{text-align:center;max-width:620px;margin:0 auto 52px;padding-top:8px;}

.cv-intro p{font-size:15.5px;line-height:1.75;color:var(--text-mid);}

.cv-layout{display:grid;grid-template-columns:1.4fr 0.85fr;gap:36px;align-items:start;margin-top:0;}

.cv-preview{background:var(--white);border-radius:20px;overflow:hidden;box-shadow:0 12px 56px rgba(0,0,0,0.13);border:1px solid rgba(0,0,0,0.07);}

.cv-house-wrap{position:relative;background:#dce9f7;}

.cv-house-wrap svg{width:100%;height:auto;display:block;}

.cv-label-bar{background:var(--green-dark);padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;}

.cv-label-left{display:flex;align-items:center;gap:14px;}

.cv-selected-swatch{width:42px;height:42px;border-radius:10px;border:2px solid rgba(255,255,255,0.3);flex-shrink:0;transition:background-color 0.45s ease;}

.cv-label-text{}

.cv-label-tag{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.45);font-weight:600;margin-bottom:3px;}

.cv-selected-name{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:var(--white);transition:opacity 0.2s;}

.cv-label-hint{font-size:12px;color:rgba(255,255,255,0.45);display:flex;align-items:center;gap:5px;white-space:nowrap;}

.cv-label-hint svg{width:13px;height:13px;fill:var(--gold);flex-shrink:0;}

.cv-picker{background:var(--white);border-radius:20px;padding:28px 24px;box-shadow:0 8px 48px rgba(0,0,0,0.09);border:1px solid rgba(0,0,0,0.07);}

.cv-picker-header{margin-bottom:20px;}

.cv-picker-title{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;color:var(--green-dark);margin-bottom:4px;}

.cv-picker-sub{font-size:12.5px;color:var(--text-light);}

.cv-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}

.cv-swatch{cursor:pointer;border-radius:12px;overflow:hidden;border:2.5px solid transparent;transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s;box-shadow:0 2px 10px rgba(0,0,0,0.1);}

.cv-swatch:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,0.18);}

.cv-swatch.active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,0.28),0 6px 18px rgba(0,0,0,0.15);}

.cv-swatch-color{height:44px;width:100%;transition:filter 0.2s;}

.cv-swatch:hover .cv-swatch-color{filter:brightness(1.06);}

.cv-swatch-name{font-size:9.5px;font-weight:600;text-align:center;padding:5px 3px 6px;color:var(--text-dark);background:var(--off-white);line-height:1.3;}

.cv-tbd-badge{display:inline-flex;align-items:center;font-size:8px;font-weight:700;letter-spacing:0.5px;background:rgba(201,168,76,0.2);color:#7a6020;border-radius:3px;padding:1px 5px;margin-left:3px;vertical-align:middle;}

.cv-cta{margin-top:20px;background:linear-gradient(135deg,var(--green-dark),var(--green-mid));border-radius:14px;padding:22px 20px;text-align:center;}

.cv-cta p{font-size:13px;color:rgba(255,255,255,0.75);margin-bottom:14px;line-height:1.6;}

.cv-cta .btn-primary{width:100%;justify-content:center;font-size:14px;padding:12px 20px;}

.shutter-panel{transition:fill 0.45s ease;}

.shutter-slat{transition:stroke 0.45s ease;}