:root {
  --brand-green: #00632e;
  --brand-green-deep: #003e22;
  --brand-green-dark: #004d27;
  --brand-green-soft: #eaf4ed;
  --brand-gold: #dbaa1d;
  --brand-gold-dark: #a97800;
  --brand-gold-soft: #fbf3d8;
  --ink: #17241c;
  --muted: #617067;
  --line: #dce6df;
  --soft: #f5f7f4;
  --cream: #fbfaf5;
  --white: #ffffff;
  --danger: #a52d2d;
  --success: #176b3a;
  --shadow-sm: 0 10px 30px rgba(0, 62, 34, .08);
  --shadow: 0 24px 70px rgba(0, 62, 34, .14);
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 34px;
  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "Aptos", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .7; }
:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 3px; }
::selection { color: var(--brand-green-deep); background: var(--brand-gold-soft); }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.narrow { max-width: 820px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 9999; left: 16px; top: -90px; padding: 12px 16px; border-radius: 10px; background: var(--white); color: var(--brand-green-deep); box-shadow: var(--shadow); }
.skip-link:focus { top: 16px; }

/* Header */
.utility-bar { background: var(--brand-green-deep); color: rgba(255,255,255,.9); border-bottom: 2px solid var(--brand-gold); }
.utility-inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: .82rem; }
.utility-tagline { font-weight: 800; letter-spacing: .035em; }
.utility-links { display: flex; align-items: center; gap: 20px; }
.utility-links a { color: rgba(255,255,255,.88); }
.utility-links a:hover { color: var(--brand-gold); }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(220,230,223,.9); box-shadow: 0 6px 20px rgba(0,62,34,.04); backdrop-filter: blur(16px); }
.header-inner { position: relative; min-height: 84px; display: flex; align-items: center; gap: 30px; }
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo img { width: auto; height: 58px; object-fit: contain; }
.main-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; color: #34453a; font-size: .94rem; font-weight: 750; }
.main-nav a { position: relative; padding-block: 10px; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 3px; height: 3px; border-radius: 10px; background: var(--brand-gold); transition: right .22s ease; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--brand-green); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { right: 0; }
.nav-toggle { display: none; min-width: 48px; min-height: 44px; margin-left: auto; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--brand-green-deep); font-weight: 800; cursor: pointer; }
.header-enquire { margin-left: 0; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 12px 23px; border: 1px solid var(--brand-gold); border-radius: 999px; background: var(--brand-gold); color: var(--brand-green-deep); font-weight: 850; line-height: 1.2; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); background: #e5b92e; border-color: #e5b92e; box-shadow: 0 15px 28px rgba(219,170,29,.24); }
.button-small { min-height: 42px; padding: 9px 17px; font-size: .9rem; }
.button-secondary { background: var(--white); border-color: var(--line); color: var(--brand-green-deep); }
.button-secondary:hover { background: var(--brand-green-soft); border-color: #bfd6c6; box-shadow: var(--shadow-sm); }
.button-ghost { color: var(--white); background: transparent; border-color: rgba(255,255,255,.45); }
.button-ghost:hover { color: var(--brand-green-deep); background: var(--white); border-color: var(--white); }
.button-danger { color: var(--white); background: var(--danger); border-color: var(--danger); }
.text-link { display: inline-flex; gap: 8px; align-items: center; color: var(--brand-green); font-weight: 850; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }

/* Typography and sections */
h1, h2, h3 { margin: 0 0 18px; color: var(--brand-green-deep); font-weight: 850; letter-spacing: -.035em; line-height: 1.08; }
h1 { font-size: clamp(3.1rem, 6.8vw, 6.3rem); }
h2 { font-size: clamp(2.2rem, 4.3vw, 4rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 20px; color: var(--muted); }
.section { padding: 104px 0; }
.section-soft { background: var(--soft); }
.section-cream { background: var(--cream); }
.section-green { background: var(--brand-green-deep); color: var(--white); }
.section-green h2, .section-green h3 { color: var(--white); }
.section-green p { color: rgba(255,255,255,.74); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; color: var(--brand-green); font-size: .76rem; line-height: 1.2; letter-spacing: .18em; font-weight: 900; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 24px; height: 3px; border-radius: 8px; background: var(--brand-gold); }
.eyebrow-light { color: var(--brand-gold); }
.eyebrow-light::before { background: var(--white); }
.section-heading { margin-bottom: 50px; }
.section-heading p { max-width: 660px; font-size: 1.07rem; }
.split-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 74px; align-items: end; }
.centered { max-width: 790px; margin-inline: auto; text-align: center; }
.centered .eyebrow { justify-content: center; }
.centered p { margin-inline: auto; }

/* Hero carousel */
.hero-slider { position: relative; min-height: 710px; overflow: hidden; background: var(--brand-green-deep); }
.hero-slides { position: relative; min-height: 710px; }
.hero-slide { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .7s ease, visibility .7s ease; }
.hero-slide.is-active { visibility: visible; opacity: 1; z-index: 2; }
.hero-slide-image { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.03); transition: transform 8s ease; }
.hero-slide.is-active .hero-slide-image { transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.08); }
.hero-slide::after { content: ""; position: absolute; inset: 0; background: rgba(0,35,20,.24); }
.hero-slide-content { position: relative; z-index: 2; min-height: 710px; display: flex; align-items: center; padding-block: 82px 120px; }
.hero-copy-panel { width: min(690px, 64%); padding: 52px 54px; border-left: 6px solid var(--brand-gold); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: rgba(0,62,34,.94); box-shadow: var(--shadow); }
.hero-copy-panel h1 { color: var(--white); font-size: clamp(3.25rem, 6vw, 5.7rem); }
.hero-copy-panel > p { max-width: 610px; color: rgba(255,255,255,.78); font-size: 1.17rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin: 31px 0 35px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; color: rgba(255,255,255,.85); font-size: .88rem; }
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.trust-row span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-gold); }
.hero-controls { position: absolute; z-index: 6; left: 50%; bottom: 28px; width: min(calc(100% - 40px), var(--container)); display: flex; align-items: center; justify-content: space-between; transform: translateX(-50%); }
.hero-arrows { display: flex; gap: 9px; }
.hero-arrow { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(0,62,34,.82); color: var(--white); font-size: 1.25rem; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.hero-arrow:hover { transform: translateY(-2px); background: var(--brand-gold); border-color: var(--brand-gold); color: var(--brand-green-deep); }
.hero-dots { display: flex; gap: 10px; padding: 10px 12px; border-radius: 999px; background: rgba(0,62,34,.78); }
.hero-dot { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.46); cursor: pointer; transition: width .2s ease, background .2s ease; }
.hero-dot.is-active { width: 32px; border-radius: 99px; background: var(--brand-gold); }

/* Intro and service principles */
.intro-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 76px; align-items: center; }
.intro-image { position: relative; min-height: 540px; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.intro-image::after { content: ""; position: absolute; right: 22px; bottom: 22px; width: 94px; height: 8px; border-radius: 99px; background: var(--brand-gold); }
.intro-points { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
.intro-point { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); box-shadow: var(--shadow-sm); }
.intro-point strong { display: block; margin-bottom: 5px; color: var(--brand-green-deep); }
.intro-point p { margin: 0; font-size: .9rem; }

/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.product-card { position: relative; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 10px 28px rgba(0,62,34,.05); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.product-card::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; right: 0; height: 5px; background: var(--brand-gold); }
.product-card:hover { transform: translateY(-7px); border-color: transparent; box-shadow: var(--shadow); }
.card-image { display: block; position: relative; height: 252px; overflow: hidden; background: var(--brand-green-soft); }
.card-body { padding: 31px; }
.card-body h3 { font-size: 1.72rem; }
.card-meta { display: flex; justify-content: space-between; gap: 12px; padding: 17px 0; margin: 19px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .84rem; }

/* Image treatment */
.interactive-zoom { position: relative; overflow: hidden; }
.interactive-zoom > img,
.card-image > img,
.story-image > img,
.content-image > img,
.intro-image > img,
.product-detail-image > img,
.story-list-image > img,
.contact-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .58s cubic-bezier(.2,.7,.2,1);
}
.interactive-zoom:hover > img { transform: scale(1.045); }

/* Calculator */
.calculator-shell { display: grid; grid-template-columns: .95fr 1.05fr; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: var(--white); box-shadow: var(--shadow); }
.calculator-controls { padding: 44px; display: grid; gap: 24px; }
.calculator-controls::before { content: "Indicative only"; width: fit-content; padding: 6px 11px; border-radius: 999px; background: var(--brand-gold-soft); color: var(--brand-gold-dark); font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
label { display: grid; gap: 8px; color: var(--ink); font-weight: 760; }
input, textarea, select { width: 100%; border: 1px solid #c9d7ce; border-radius: 12px; padding: 13px 14px; color: var(--ink); background: var(--white); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand-green); box-shadow: 0 0 0 4px rgba(0,96,47,.12); }
input[type="range"] { padding: 0; border: 0; box-shadow: none; accent-color: var(--brand-green); }
output { color: var(--brand-green-deep); font-weight: 900; }
.calculator-result { position: relative; padding: 49px; display: flex; flex-direction: column; justify-content: center; color: var(--white); background: var(--brand-green-deep); }
.calculator-result::after { content: ""; position: absolute; right: 34px; top: 34px; width: 58px; height: 6px; border-radius: 99px; background: var(--brand-gold); }
.calculator-result > span { color: rgba(255,255,255,.7); }
.calculator-result > strong { margin: 15px 0 32px; color: var(--white); font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: 1; }
.calculator-result dl { margin: 0 0 23px; display: grid; gap: 11px; }
.calculator-result dl div { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.14); }
.calculator-result dd { margin: 0; font-weight: 850; }
.calculator-result small { color: rgba(255,255,255,.67); }

/* Process */
.process-section { overflow: hidden; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: process; }
.process-card { position: relative; min-height: 262px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: transform .2s ease, box-shadow .2s ease; }
.process-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.process-card > span { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 38px; border-radius: 50%; background: var(--brand-green-soft); color: var(--brand-green); font-weight: 900; }
.process-card::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; height: 4px; border-radius: 8px 8px 0 0; background: var(--brand-gold); }

/* Stories and testimonials */
.story-feature { background: var(--cream); }
.story-grid, .two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.story-image, .content-image { position: relative; min-height: 530px; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.story-copy p { font-size: 1.08rem; }
.story-attribution { color: var(--brand-green-deep) !important; font-weight: 850; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card { position: relative; padding: 35px; border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius); background: rgba(255,255,255,.08); color: var(--white); }
.testimonial-card::before { content: "“"; position: absolute; right: 25px; top: 8px; color: var(--brand-gold); font-family: Georgia, serif; font-size: 5rem; line-height: 1; opacity: .8; }
.testimonial-card blockquote { position: relative; z-index: 1; margin: 0 0 32px; color: rgba(255,255,255,.93); font-size: 1.12rem; line-height: 1.7; }
.testimonial-person { display: flex; align-items: center; gap: 14px; }
.testimonial-person img { width: 50px; height: 50px; border: 2px solid var(--brand-gold); border-radius: 50%; object-fit: cover; }
.testimonial-person span { display: block; color: rgba(255,255,255,.65); font-size: .84rem; }

/* Enquiries and contact */
.enquiry-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 80px; align-items: start; }
.contact-panel { display: grid; gap: 12px; margin-top: 34px; padding: 23px 25px; border-left: 5px solid var(--brand-gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--brand-green-soft); font-weight: 780; }
.contact-panel address { color: var(--muted); font-style: normal; }
.contact-panel.large { font-size: 1.08rem; }
.contact-panel a:hover { color: var(--brand-green); }
.enquiry-form { padding: 36px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.full-width { grid-column: 1 / -1; }
.optional { color: var(--muted); font-size: .8rem; font-weight: 500; }
.check-label { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0; font-size: .9rem; font-weight: 500; }
.check-label input { width: auto; margin-top: 5px; accent-color: var(--brand-green); }
.honeypot { position: absolute; left: -10000px; }
.form-status { margin: 15px 0 0; padding: 11px 13px; border-radius: 10px; }
.form-status.loading { color: var(--brand-green-deep); background: var(--brand-green-soft); }
.form-status.success, .notice.success { color: var(--success); background: #e6f4eb; }
.form-status.error, .notice.error { color: #812323; background: #f9e7e7; }
[data-form-status][hidden], .cookie-banner[hidden] { display: none !important; }
.contact-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: stretch; }
.contact-card { padding: 38px; border-radius: var(--radius-lg); background: var(--brand-green-deep); color: var(--white); }
.contact-card h2 { color: var(--white); }
.contact-card p { color: rgba(255,255,255,.72); }
.contact-card .contact-panel { background: rgba(255,255,255,.08); }
.contact-card .contact-panel a, .contact-card .contact-panel address { color: rgba(255,255,255,.9); }
.contact-visual { position: relative; min-height: 380px; margin-top: 30px; overflow: hidden; border-radius: var(--radius); }
.contact-visual::after { content: "Harare, Zimbabwe"; position: absolute; left: 20px; bottom: 20px; padding: 8px 12px; border-radius: 999px; background: rgba(0,62,34,.9); color: var(--white); font-size: .83rem; font-weight: 800; }

/* Page headers */
.page-hero { position: relative; overflow: hidden; padding: 106px 0 90px; border-bottom: 5px solid var(--brand-gold); background: var(--brand-green-deep); }
.page-hero::after { content: ""; position: absolute; right: -90px; top: -80px; width: 300px; height: 300px; border: 46px solid rgba(219,170,29,.13); border-radius: 50%; }
.page-hero h1 { position: relative; z-index: 1; max-width: 1000px; color: var(--white); font-size: clamp(3rem, 6vw, 5.7rem); }
.page-hero p { position: relative; z-index: 1; max-width: 760px; color: rgba(255,255,255,.72); font-size: 1.15rem; }
.page-hero .eyebrow { position: relative; z-index: 1; color: var(--brand-gold); }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value-card { position: relative; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.value-card::before { content: ""; display: block; width: 44px; height: 5px; margin-bottom: 26px; border-radius: 99px; background: var(--brand-gold); }
.value-card h3 { color: var(--brand-green-deep); }
.product-detail-list, .story-list { display: grid; gap: 72px; }
.product-detail, .story-list-card { display: grid; grid-template-columns: .85fr 1.15fr; gap: 62px; align-items: center; padding-bottom: 72px; border-bottom: 1px solid var(--line); scroll-margin-top: 130px; }
.product-detail:nth-child(even), .story-list-card:nth-child(even) { grid-template-columns: 1.15fr .85fr; }
.product-detail:nth-child(even) > :first-child, .story-list-card:nth-child(even) > :first-child { order: 2; }
.product-detail-image, .story-list-image { position: relative; min-height: 410px; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.attribute-list { display: grid; grid-template-columns: 1fr 1fr; margin: 30px 0 0; border-top: 1px solid var(--line); }
.attribute-list div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.attribute-list dt { color: var(--muted); font-size: .84rem; }
.attribute-list dd { margin: 2px 0 0; font-weight: 850; }

/* Legal */
.legal-page { padding: 90px 0; }
.prose h1 { color: var(--brand-green-deep); font-size: clamp(2.7rem, 6vw, 4.7rem); }
.prose h2 { margin-top: 40px; font-size: 1.65rem; }
.prose a { color: var(--brand-green); text-decoration: underline; text-underline-offset: 3px; }
.prose code { padding: 3px 6px; border-radius: 5px; background: var(--soft); }
.legal-note { padding: 16px 18px; border-left: 4px solid var(--brand-gold); border-radius: 0 10px 10px 0; background: var(--brand-gold-soft); color: #5d4810; }

/* Footer */
.site-footer { padding: 74px 0 20px; background: var(--brand-green-deep); color: var(--white); }
.footer-brand-card { display: inline-flex; padding: 10px 12px; border-radius: 15px; background: var(--white); }
.footer-brand-card img { height: 64px; width: auto; }
.footer-grid { display: grid; grid-template-columns: 1.35fr .65fr .95fr .75fr; gap: 52px; }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; gap: 10px; }
.footer-heading { margin: 0 0 7px; color: var(--brand-gold); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.footer-grid a, .footer-grid address { color: rgba(255,255,255,.75); font-style: normal; }
.footer-grid a:hover { color: var(--brand-gold); }
.footer-copy { max-width: 330px; margin-top: 20px; color: rgba(255,255,255,.66); }
.footer-tagline { color: var(--brand-gold); font-weight: 850; }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; margin-top: 55px; padding-top: 21px; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.55); font-size: .81rem; }
.whatsapp-float { position: fixed; z-index: 80; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 11px 17px; border-radius: 999px; background: var(--brand-green); color: var(--white); font-weight: 850; box-shadow: var(--shadow); transition: transform .2s ease, background .2s ease; }
.whatsapp-float:hover { transform: translateY(-3px); background: var(--brand-green-dark); }

/* Cookie consent */
.cookie-banner { position: fixed; z-index: 1000; left: 24px; right: 24px; bottom: 24px; max-width: 980px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 23px; border: 1px solid var(--line); border-top: 5px solid var(--brand-gold); border-radius: 18px; background: var(--white); box-shadow: var(--shadow); }
.cookie-banner p { margin: 4px 0; font-size: .9rem; }
.cookie-banner a { color: var(--brand-green); font-size: .85rem; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* Reveal and motion */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Administrator */
.admin-login { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: var(--brand-green-soft); }
.admin-login-card { width: min(100%, 470px); padding: 42px; border: 1px solid var(--line); border-top: 6px solid var(--brand-gold); border-radius: 24px; background: var(--white); box-shadow: var(--shadow); }
.admin-login-card .logo img { height: 68px; }
.admin-login-card h1 { margin-top: 30px; font-size: 2.35rem; }
.admin-login-card form { display: grid; gap: 18px; }
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 278px 1fr; background: var(--soft); }
.admin-sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 22px; overflow-y: auto; background: var(--brand-green-deep); color: var(--white); }
.admin-sidebar .admin-logo { display: flex; padding: 8px; border-radius: 13px; background: var(--white); }
.admin-sidebar .admin-logo img { width: 100%; height: auto; max-height: 62px; object-fit: contain; }
.admin-user { margin: 23px 0 28px; padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.06); }
.admin-user span { display: block; color: rgba(255,255,255,.58); font-size: .83rem; text-transform: capitalize; }
.admin-sidebar nav { display: grid; gap: 7px; }
.admin-sidebar nav a { position: relative; padding: 11px 13px; border-radius: 10px; color: rgba(255,255,255,.78); font-size: .91rem; font-weight: 700; }
.admin-sidebar nav a:hover, .admin-sidebar nav a[aria-current="page"] { color: var(--white); background: rgba(255,255,255,.1); }
.admin-sidebar nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 4px; border-radius: 0 8px 8px 0; background: var(--brand-gold); }
.admin-logout { margin-top: 25px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.admin-logout button { width: 100%; padding: 10px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: transparent; color: rgba(255,255,255,.78); cursor: pointer; font-weight: 750; }
.admin-logout button:hover { background: rgba(255,255,255,.08); }
.admin-main { min-width: 0; padding: 45px; }
.admin-heading { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.admin-heading h1 { color: var(--brand-green-deep); font-size: clamp(2.2rem, 4vw, 3.7rem); }
.admin-heading.compact { margin-bottom: 16px; }
.admin-heading.compact h2 { margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.stat-card { position: relative; overflow: hidden; padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.stat-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--brand-gold); }
.stat-card span { color: var(--muted); }
.stat-card strong { display: block; color: var(--brand-green-deep); font-size: 2.7rem; }
.admin-panel { margin-bottom: 24px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 8px 24px rgba(0,62,34,.04); }
.admin-panel h2 { font-size: 1.5rem; }
.admin-form fieldset { margin: 24px 0; padding: 22px; border: 1px solid var(--line); border-radius: 14px; }
.admin-form legend { padding: 0 8px; color: var(--brand-green-deep); font-weight: 850; }
.admin-form small { color: var(--muted); font-weight: 500; }
.admin-form input[type="file"] { background: var(--soft); }
.admin-form .settings-slide { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.admin-form .settings-slide + .settings-slide { margin-top: 16px; }
.admin-form .settings-slide h3 { margin-bottom: 18px; font-size: 1.25rem; }
.image-preview { position: relative; min-height: 180px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.image-preview img { width: 100%; height: 180px; object-fit: cover; }
.notice { margin: 0 0 20px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.admin-details { margin-bottom: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.admin-details summary { display: flex; justify-content: space-between; gap: 20px; padding: 20px 24px; list-style: none; cursor: pointer; font-weight: 850; }
.admin-details[open] > summary { border-bottom: 1px solid var(--line); background: var(--brand-green-soft); }
.admin-details .admin-panel { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.repeater-row { display: grid; grid-template-columns: 1.6fr .8fr .7fr auto auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.repeater-row.two { grid-template-columns: 1fr 1.5fr auto; }
.compact-check { display: flex; align-items: center; gap: 7px; font-size: .8rem; }
.compact-check input { width: auto; }
.icon-button, .text-button { border: 0; background: transparent; color: var(--danger); font-weight: 800; cursor: pointer; }
.danger-zone { padding: 0 28px 28px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
table { width: 100%; min-width: 900px; border-collapse: collapse; }
th, td { padding: 15px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: .9rem; }
th { color: var(--brand-green-deep); background: var(--brand-green-soft); }
td span, td a { display: block; }
td form { display: flex; align-items: center; gap: 7px; }
td select { min-width: 120px; padding: 8px; }
.filter-form { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; }
.filter-form label { min-width: 210px; }
.enquiry-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 25px; }
.enquiry-details div { padding: 14px; border-radius: 12px; background: var(--soft); }
.enquiry-details dt { color: var(--muted); font-size: .82rem; }
.enquiry-details dd { margin: 3px 0 0; font-weight: 700; }
.enquiry-details .full-width { grid-column: 1 / -1; }
.break-word { white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-panel code { font-size: .82rem; }
.image-field-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.field-status { color: var(--muted); font-size: .82rem; font-weight: 600; }

@media (max-width: 1040px) {
  .utility-inner { min-height: 34px; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .main-nav { position: absolute; left: 20px; right: 20px; top: calc(100% + 9px); display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); box-shadow: var(--shadow); }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 13px; }
  .main-nav a::after { display: none; }
  .hero-copy-panel { width: min(760px, 82%); }
  .intro-grid, .story-grid, .two-column, .enquiry-grid, .calculator-shell, .contact-layout { grid-template-columns: 1fr; }
  .card-grid, .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid, .values-grid { grid-template-columns: repeat(2, 1fr); }
  .split-heading { grid-template-columns: 1fr; gap: 12px; }
  .product-detail, .story-list-card, .product-detail:nth-child(even), .story-list-card:nth-child(even) { grid-template-columns: 1fr; }
  .product-detail:nth-child(even) > :first-child, .story-list-card:nth-child(even) > :first-child { order: initial; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: relative; height: auto; }
  .admin-sidebar nav { grid-template-columns: repeat(4, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .enquiry-details { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .utility-bar { display: none; }
  .header-inner { min-height: 74px; gap: 12px; }
  .logo img { height: 47px; max-width: 205px; }
  .header-enquire { display: none; }
  .main-nav { left: 14px; right: 14px; }
  .section { padding: 74px 0; }
  h1 { font-size: 3.15rem; }
  h2 { font-size: 2.42rem; }
  .hero-slider, .hero-slides, .hero-slide-content { min-height: 650px; }
  .hero-slide-content { align-items: end; padding-block: 70px 105px; }
  .hero-copy-panel { width: 100%; padding: 34px 27px; border-left-width: 4px; border-radius: 0 24px 24px 0; }
  .hero-copy-panel h1 { font-size: clamp(2.75rem, 12vw, 4.25rem); }
  .hero-copy-panel > p { font-size: 1rem; }
  .hero-actions { margin: 25px 0 28px; }
  .hero-actions .button { width: 100%; }
  .hero-controls { bottom: 18px; }
  .hero-arrow { width: 42px; height: 42px; }
  .trust-row { gap: 10px 15px; }
  .intro-grid { gap: 42px; }
  .intro-image { min-height: 390px; }
  .intro-points, .card-grid, .testimonial-grid, .process-grid, .values-grid, .form-grid { grid-template-columns: 1fr; }
  .full-width { grid-column: auto; }
  .calculator-controls, .calculator-result, .enquiry-form { padding: 27px; }
  .calculator-result > strong { font-size: 2.6rem; }
  .attribute-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom, .cookie-banner, .cookie-actions { flex-direction: column; align-items: stretch; }
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; }
  .whatsapp-float { right: 14px; bottom: 14px; width: 48px; height: 48px; padding: 0; justify-content: center; }
  .whatsapp-float span { display: none; }
  .admin-main { padding: 25px 15px; }
  .admin-sidebar nav { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .repeater-row, .repeater-row.two { grid-template-columns: 1fr; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
  .enquiry-details { grid-template-columns: 1fr; }
  .enquiry-details .full-width { grid-column: auto; }
  .filter-form { display: grid; }
}

@media (max-width: 430px) {
  .stat-grid { grid-template-columns: 1fr; }
  .admin-sidebar nav { grid-template-columns: 1fr; }
  .hero-dots { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-slide-image, .hero-slide.is-active .hero-slide-image { transform: none; }
}

/* Version 1.1 accessibility and administration refinements */
.auth-logo { display: flex; justify-content: center; }
.auth-logo img { width: min(100%, 330px); height: auto; max-height: 96px; object-fit: contain; }
.check-label a { color: var(--brand-green); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.calculator-empty { padding: 34px; border: 1px solid var(--line); border-left: 6px solid var(--brand-gold); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.calculator-empty h3 { margin-bottom: 10px; }
.notice.success, .form-status.success { border-color: #a9d5ba; background: #edf8f1; color: var(--success); }
.notice.error, .form-status.error { border-color: #e4b4b4; background: #fff1f1; color: var(--danger); }
.form-status.loading { border-color: #e5d493; background: var(--brand-gold-soft); color: var(--brand-green-deep); }