/* =========================================================
   No Fuss Kitchens — styles.css
   Clean full version
   Fixes:
   - Website no longer becomes flat white
   - Mobile header stays visible
   - Mobile menu X sits above menu
   - Before/after slider stays inside phone screen
   - Smooth touch dragging support
   - Large 16:9 gallery images
   - Supplier logos on clean white cards
========================================================= */

@font-face {
  font-family: "InterFallback";
  src: local("Arial");
}

:root {
  --ink: #10221f;
  --muted: #66736f;
  --line: rgba(16, 34, 31, 0.12);

  --paper: #fbfaf7;
  --cream: #f6efe7;
  --white: #ffffff;

  --green: #102f2b;
  --green-2: #1b4941;
  --sage: #dce9df;

  --gold: #c99b6a;
  --gold-2: #e9cda9;

  --shadow: 0 24px 70px rgba(16, 34, 31, 0.14);
  --soft-shadow: 0 18px 50px rgba(16, 34, 31, 0.08);

  --radius: 28px;
  --ease: cubic-bezier(0.2, 0.72, 0.18, 1);
}

/* =========================================================
   Base
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--paper);
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  font-family: InterFallback, Arial, Helvetica, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  background:
    radial-gradient(circle at 12% 10%, rgba(201, 155, 106, 0.16), transparent 30rem),
    radial-gradient(circle at 85% 4%, rgba(115, 154, 141, 0.18), transparent 28rem),
    linear-gradient(180deg, #ffffff 0%, #fbfaf7 38%, #f7f0e8 70%, #ffffff 100%);
}

body.menu-open {
  overflow: hidden;
}

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

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

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

button {
  cursor: pointer;
}

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.section-pad {
  padding: clamp(72px, 9vw, 130px) 0;
}

.skip-link {
  position: fixed;
  left: 18px;
  top: 18px;
  transform: translateY(-150%);
  z-index: 12000;
  background: var(--green);
  color: var(--white);
  padding: 12px 16px;
  border-radius: 999px;
  transition: transform 0.25s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--gold), #fff1cc, var(--green-2));
  z-index: 12000;
}

/* =========================================================
   Header
========================================================= */

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(16, 34, 31, 0.08);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 34px rgba(16, 34, 31, 0.08);
}

.site-header.is-hidden,
.site-header.hide,
.site-header.header-hidden,
.site-header[data-hidden="true"] {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.top-strip {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 8px 18px;
  background: var(--green);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.88rem;
  text-align: center;
}

.top-strip a {
  font-weight: 800;
  color: var(--white);
}

.nav-shell {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: transparent;
}

.brand {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 10001;
}

.brand img {
  width: 210px;
  height: auto;
  max-height: 64px;
  object-fit: contain;
  background: transparent;
}

.site-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 750;
  color: rgba(16, 34, 31, 0.78);
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.site-menu a:hover {
  color: var(--green);
  background: rgba(16, 47, 43, 0.07);
  transform: translateY(-1px);
}

.site-menu .nav-cta {
  background: var(--green);
  color: var(--white);
  box-shadow: 0 14px 28px rgba(16, 47, 43, 0.18);
}

.site-menu .nav-cta:hover {
  color: var(--white);
  background: var(--green-2);
}

.menu-toggle {
  display: none;
  position: relative;
  z-index: 10001;
  border: 0;
  background: var(--green);
  width: 52px;
  height: 52px;
  border-radius: 16px;
  padding: 13px;
  flex-shrink: 0;
}

.menu-toggle span:not(.sr-only) {
  display: block;
  height: 2px;
  width: 24px;
  background: #fff;
  margin: 5px auto;
  border-radius: 999px;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle.is-open {
  box-shadow:
    0 0 0 3px rgba(201, 155, 106, 0.85),
    0 16px 32px rgba(16, 47, 43, 0.25);
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

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

/* =========================================================
   Typography
========================================================= */

.eyebrow,
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green-2);
  font-weight: 900;
  font-size: 0.76rem;
}

.eyebrow span {
  width: 34px;
  height: 2px;
  border-radius: 999px;
  background: var(--gold);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(3rem, 7.5vw, 6.7rem);
  line-height: 0.92;
  letter-spacing: -0.075em;
  margin-bottom: 26px;
  max-width: 820px;
}

h2 {
  font-size: clamp(2.15rem, 4.8vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.055em;
  margin-bottom: 18px;
}

h3 {
  font-size: 1.22rem;
  line-height: 1.15;
}

.hero-lede,
.section-intro p,
.section-heading p {
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.section-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 48px;
}

.section-intro {
  max-width: 650px;
}

.inline-link,
.mini-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  color: var(--green);
}

.inline-link:hover,
.mini-link:hover {
  color: var(--gold);
}

/* =========================================================
   Buttons
========================================================= */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 34px 0;
}

.btn,
.button,
.cta,
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 999px;
  padding: 0 22px;
  border: 1px solid transparent;
  font-weight: 900;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn:hover,
.button:hover,
.cta:hover,
button[type="submit"]:hover {
  transform: translateY(-2px);
}

.btn-primary,
.button-primary,
.hero .button-primary,
button[type="submit"] {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
  box-shadow: 0 18px 44px rgba(16, 47, 43, 0.22);
}

.btn-primary:hover,
.button-primary:hover,
button[type="submit"]:hover {
  background: var(--green-2);
  box-shadow: 0 22px 54px rgba(16, 47, 43, 0.28);
}

.btn-ghost,
.button-secondary,
.btn-secondary {
  background: rgba(255, 255, 255, 0.76);
  color: var(--green);
  border-color: rgba(16, 34, 31, 0.12);
}

/* =========================================================
   Hero
========================================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(58px, 6vw, 88px);
  background:
    radial-gradient(circle at top right, rgba(201, 155, 106, 0.16), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
}

.ambient {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.55;
  pointer-events: none;
  animation: floaty 9s var(--ease) infinite alternate;
}

.ambient-one {
  width: 380px;
  height: 380px;
  background: rgba(201, 155, 106, 0.2);
  left: -120px;
  top: 120px;
}

.ambient-two {
  width: 460px;
  height: 460px;
  background: rgba(75, 126, 111, 0.16);
  right: -160px;
  bottom: 12%;
  animation-delay: -2s;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.82fr);
  align-items: center;
  gap: clamp(34px, 6vw, 82px);
  position: relative;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 38px 0 0;
}

.stat-row div {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(16, 34, 31, 0.08);
  box-shadow: 0 12px 34px rgba(16, 34, 31, 0.08);
}

.stat-row dt {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
  font-weight: 950;
  color: var(--green);
}

.stat-row dd {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.91rem;
}

.visual-frame {
  position: relative;
  isolation: isolate;
  border-radius: 36px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow);
  background: var(--green);
  transform: rotate(1deg);
}

.visual-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.36));
  pointer-events: none;
}

.visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform 0.8s var(--ease);
}

.visual-frame:hover img {
  transform: scale(1.08);
}

.floating-card {
  position: absolute;
  z-index: 2;
  max-width: 250px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.46);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
}

.floating-card strong,
.floating-card span {
  display: block;
}

.floating-card span {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 4px;
}

.card-one {
  top: 22px;
  left: 22px;
  animation: bob 4.2s ease-in-out infinite;
}

.card-two {
  right: 22px;
  bottom: 22px;
  animation: bob 4.6s ease-in-out infinite reverse;
}

.brand-marquee {
  margin-top: clamp(48px, 8vw, 90px);
  overflow: hidden;
  border-block: 1px solid rgba(16, 34, 31, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

.marquee-track {
  width: max-content;
  display: flex;
  gap: 42px;
  padding: 16px 0;
  animation: marquee 28s linear infinite;
}

.marquee-track span {
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(16, 34, 31, 0.58);
  font-weight: 900;
}

/* =========================================================
   Shared Layouts + Cards
========================================================= */

.split-grid,
.compare-grid,
.faq-grid,
.contact-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

.feature-panel,
.service-card,
.supplier-card,
.contact-card,
.accordion-item,
.testimonial-card,
.stat-card,
.compare-card {
  border: 1px solid rgba(16, 34, 31, 0.1);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(12px);
}

.feature-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 46px);
}

.panel-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  right: -100px;
  top: -100px;
  border-radius: 999px;
  background: rgba(201, 155, 106, 0.2);
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.check-list li {
  position: relative;
  padding-left: 30px;
  margin: 14px 0;
  color: var(--muted);
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage);
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 900;
}

/* =========================================================
   Services
========================================================= */

.services-section,
.services {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(220, 233, 223, 0.26)),
    radial-gradient(circle at 20% 20%, rgba(201, 155, 106, 0.12), transparent 28rem);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.service-card {
  position: relative;
  min-height: 250px;
  padding: 28px;
  border-radius: 28px;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s ease;
}

.service-card::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -70px;
  bottom: -70px;
  border-radius: 50%;
  background: rgba(201, 155, 106, 0.14);
  transition: transform 0.35s var(--ease);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 74px rgba(16, 34, 31, 0.14);
  background: rgba(255, 255, 255, 0.95);
}

.service-card:hover::after {
  transform: scale(1.35);
}

.service-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--green);
  color: var(--white);
  font-weight: 950;
  margin-bottom: 24px;
}

.service-card p {
  color: var(--muted);
  margin-bottom: 0;
}

.highlight-card,
.service-card.highlight-card,
.warranty-card,
.feature-card {
  background: linear-gradient(135deg, var(--green), #24594d);
  color: var(--white);
  border-color: rgba(16, 47, 43, 0.18);
}

.highlight-card *,
.service-card.highlight-card *,
.warranty-card *,
.feature-card * {
  color: inherit;
}

.highlight-card p,
.highlight-card .mini-link {
  color: rgba(255, 255, 255, 0.82);
}

.highlight-card .service-icon {
  background: rgba(255, 255, 255, 0.16);
}

/* =========================================================
   Before / After
========================================================= */

.before-after,
.compare-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(246, 239, 231, 0.76));
}

.compare-widget {
  --compare-position: 50%;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 520px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
  border-radius: 34px;
  background: #ddd;
  border: 1px solid rgba(16, 34, 31, 0.1);
  box-shadow: var(--shadow);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}

.compare-photo,
.compare-before,
.compare-after {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}

.compare-after {
  z-index: 1;
}

.compare-before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--compare-position)) 0 0);
  will-change: clip-path;
}

.compare-photo img,
.compare-widget img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.compare-photo span {
  display: none;
}

.compare-widget::before,
.compare-widget::after {
  position: absolute;
  bottom: 22px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 950;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.compare-widget::before {
  content: "Before";
  left: 22px;
  background: rgba(16, 34, 31, 0.86);
  color: #ffffff;
}

.compare-widget::after {
  content: "After";
  right: 22px;
  background: rgba(16, 34, 31, 0.86);
  color: #ffffff;
}

.compare-label {
  position: absolute;
  z-index: 20;
  bottom: 22px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 950;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.compare-label-before {
  left: 22px;
  background: rgba(16, 34, 31, 0.86);
  color: #ffffff;
}

.compare-label-after {
  right: 22px;
  left: auto;
  background: rgba(16, 34, 31, 0.86);
  color: #ffffff;
}

.compare-widget input[type="range"] {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 2px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-position);
  z-index: 10;
  width: 3px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 0 1px rgba(16, 34, 31, 0.18);
  transform: translateX(-50%);
  pointer-events: none;
  will-change: left;
}

.compare-handle::after {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ffffff;
  color: var(--green);
  font-weight: 950;
  box-shadow: 0 12px 35px rgba(16, 34, 31, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.compare-widget.is-dragging .compare-handle::after {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 16px 42px rgba(16, 34, 31, 0.24);
}

/* =========================================================
   Process
========================================================= */

.process-section,
.process {
  background: linear-gradient(135deg, var(--green), #173c36);
  color: var(--white);
}

.process-section .kicker,
.process-section .section-heading p {
  color: rgba(255, 255, 255, 0.72);
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline-item {
  position: relative;
  min-height: 245px;
  padding: 26px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.timeline-item::before {
  content: "";
  position: absolute;
  inset: auto -30px -50px auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(201, 155, 106, 0.14);
}

.timeline-item span {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--gold-2);
  font-weight: 950;
}

.timeline-item h3 {
  margin-bottom: 10px;
}

.timeline-item p {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0;
}

/* =========================================================
   Suppliers
========================================================= */

.suppliers-section,
.suppliers {
  background:
    radial-gradient(circle at 8% 20%, rgba(201, 155, 106, 0.13), transparent 24rem),
    radial-gradient(circle at 90% 0%, rgba(102, 142, 131, 0.14), transparent 26rem),
    #fbfaf7;
}

.supplier-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.supplier-card,
.supplier-card.wide {
  position: relative;
  min-height: 172px;
  display: grid;
  place-items: center;
  padding: 22px;
  border-radius: 26px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(16, 34, 31, 0.08);
  box-shadow: 0 16px 45px rgba(16, 34, 31, 0.07);
  grid-column: auto;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.supplier-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 26px 70px rgba(16, 34, 31, 0.14);
}

.supplier-card img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: 118px;
  object-fit: contain;
  object-position: center;
  background: #ffffff;
  mix-blend-mode: normal;
}

/* =========================================================
   Gallery
========================================================= */

.gallery-section,
.gallery {
  background: rgba(255, 255, 255, 0.62);
}

.gallery-section .container {
  width: min(1540px, calc(100% - 44px));
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 40px);
  align-items: stretch;
}

.gallery-card,
.gallery-card:nth-child(1),
.gallery-card:nth-child(4) {
  position: relative;
  grid-column: auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: 34px;
  overflow: hidden;
  clip-path: inset(0 round 34px);
  isolation: isolate;
  background: #ffffff;
  box-shadow: 0 24px 68px rgba(16, 34, 31, 0.1);
  transform: translateZ(0);
}

.gallery-card img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 34px;
  display: block;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 0.75s var(--ease), filter 0.75s var(--ease);
}

.gallery-card:hover,
.gallery-card:hover img {
  border-radius: 34px;
  clip-path: inset(0 round 34px);
}

.gallery-card:hover img {
  transform: scale(1.025);
  filter: saturate(1.05) contrast(1.04);
}

.gallery-card figcaption,
.gallery-caption,
.image-caption {
  position: absolute;
  left: 24px;
  right: auto;
  bottom: 24px;
  z-index: 2;
  max-width: min(420px, calc(100% - 48px));
  padding: 20px 22px;
  border-radius: 24px;
  background: rgba(16, 34, 31, 0.84);
  backdrop-filter: blur(12px);
  color: #ffffff;
}

.gallery-card figcaption span {
  display: block;
  font-weight: 950;
}

.gallery-card figcaption small {
  color: rgba(255, 255, 255, 0.76);
}

/* =========================================================
   FAQ
========================================================= */

.faq-section,
.faq {
  background:
    linear-gradient(180deg, rgba(246, 239, 231, 0.8), rgba(255, 255, 255, 0.38));
}

.accordion {
  display: grid;
  gap: 14px;
}

.accordion-item,
.faq-item {
  border-radius: 22px;
  overflow: hidden;
}

.accordion-item button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 0;
  background: transparent;
  padding: 22px;
  text-align: left;
  font-weight: 950;
  color: var(--ink);
  cursor: pointer;
}

.accordion-item button::after {
  content: "+";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(16, 47, 43, 0.08);
  color: var(--green);
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

.accordion-item.open button::after,
.accordion-item.is-open button::after,
.faq-item.is-open button::after {
  content: "−";
  transform: rotate(180deg);
}

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
}

.accordion-panel p {
  padding: 0 22px 22px;
  margin: 0;
  color: var(--muted);
}

.accordion-panel a {
  color: var(--green);
  font-weight: 900;
}

/* =========================================================
   Contact
========================================================= */

.contact-section,
.contact {
  padding-top: 0;
  background: #fbfaf7;
}

.contact-card {
  align-items: stretch;
  border-radius: 36px;
  padding: clamp(24px, 4vw, 46px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(220, 233, 223, 0.72)),
    radial-gradient(circle at 85% 12%, rgba(201, 155, 106, 0.18), transparent 24rem);
}

.contact-methods {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.contact-methods a {
  display: block;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(16, 34, 31, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact-methods a:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(16, 34, 31, 0.1);
}

.contact-methods span,
.contact-methods strong {
  display: block;
}

.contact-methods span {
  color: var(--muted);
  font-size: 0.86rem;
}

.contact-methods strong {
  color: var(--green);
  margin-top: 2px;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(16, 34, 31, 0.08);
}

.contact-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 850;
}

.contact-form .full {
  grid-column: 1 / -1;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(16, 34, 31, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  padding: 14px 15px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 155, 106, 0.15);
}

.form-status {
  grid-column: 1 / -1;
  min-height: 24px;
  margin: 0;
  color: var(--green);
  font-weight: 850;
}

/* =========================================================
   Footer
========================================================= */

.footer,
.site-footer {
  background: var(--green);
  color: rgba(255, 255, 255, 0.78);
  padding: 64px 0 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr;
  gap: 30px;
}

.footer-logo-real {
  width: 190px;
  height: auto;
  max-height: 90px;
  object-fit: contain;
  padding: 0;
  border-radius: 0;
  background: transparent;
  margin-bottom: 18px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.16));
}

.footer h3 {
  color: var(--white);
  margin-bottom: 14px;
}

.footer a,
.footer span {
  display: block;
  margin: 8px 0;
}

.footer a:hover {
  color: var(--white);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 28px;
  margin-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.9rem;
}

/* =========================================================
   Animation helpers
========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.reveal.in-view,
.reveal.is-visible,
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: 0.1s;
}

.delay-2 {
  transition-delay: 0.18s;
}

.is-hidden {
  display: none !important;
}

@keyframes floaty {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(18px, -22px, 0) scale(1.08);
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1050px) {
  .hero-grid,
  .split-grid,
  .compare-grid,
  .faq-grid,
  .contact-card {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    gap: 42px;
  }

  .hero-visual {
    max-width: 720px;
  }

  .services-grid,
  .supplier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   Mobile menu
========================================================= */

@media (max-width: 860px) {
  .site-header {
    overflow: visible;
    z-index: 9999;
    background: #ffffff;
    border-bottom: 1px solid rgba(16, 34, 31, 0.1);
    box-shadow: 0 8px 24px rgba(16, 34, 31, 0.08);
  }

  .top-strip {
    flex-wrap: wrap;
    gap: 6px 14px;
  }

  .nav-shell {
    min-height: 74px;
    position: relative;
    z-index: 10000;
    background: #ffffff;
  }

  .brand img {
    width: 168px;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
  }

  .site-menu {
    position: fixed;
    left: 14px;
    right: 14px;
    top: calc(var(--mobile-menu-top, 130px) + 10px);
    z-index: 9998;

    display: grid;
    gap: 10px;
    padding: 22px;

    border-radius: 28px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(16, 34, 31, 0.1);
    box-shadow: 0 24px 70px rgba(16, 34, 31, 0.18);
    backdrop-filter: blur(18px);

    max-height: calc(100dvh - var(--mobile-menu-top, 130px) - 28px);
    overflow-y: auto;

    transform: translateY(-10px) scale(0.98);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      visibility 0.22s ease;
  }

  .site-menu.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .site-menu a {
    justify-content: flex-start;
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 1rem;
    color: #10221f;
  }

  .site-menu .nav-cta {
    justify-content: center;
    margin-top: 4px;
    background: var(--green);
    color: #ffffff;
  }

  .stat-row {
    grid-template-columns: 1fr;
  }

  .compare-widget {
    min-height: 420px;
  }
}

/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 700px) {
  .container {
    width: min(100% - 28px, 1180px);
  }

  .section-pad {
    padding: 70px 0;
  }

  h1 {
    font-size: clamp(2.7rem, 16vw, 4.3rem);
  }

  .hero-actions,
  .footer-bottom {
    flex-direction: column;
  }

  .btn,
  .button,
  .cta {
    width: 100%;
  }

  .visual-frame {
    aspect-ratio: 1 / 1.12;
    border-radius: 28px;
    transform: none;
  }

  .visual-frame img {
    border-radius: 28px;
  }

  .floating-card {
    position: relative;
    inset: auto;
    margin: 12px;
    max-width: none;
  }

  .card-one,
  .card-two {
    animation: none;
  }

  .services-grid,
  .supplier-grid,
  .timeline,
  .gallery-grid,
  .footer-grid,
  .contact-form {
    grid-template-columns: 1fr;
  }

  .supplier-card,
  .supplier-card.wide {
    grid-column: auto;
  }

  .gallery-section .container {
    width: min(100% - 28px, 680px);
  }

  .gallery-card,
  .gallery-card:nth-child(1),
  .gallery-card:nth-child(4) {
    aspect-ratio: 16 / 10;
    border-radius: 28px;
    clip-path: inset(0 round 28px);
  }

  .gallery-card img,
  .gallery-card:hover,
  .gallery-card:hover img {
    border-radius: 28px;
  }

  .gallery-card figcaption,
  .gallery-caption,
  .image-caption {
    left: 16px;
    bottom: 16px;
    max-width: calc(100% - 32px);
    padding: 16px 18px;
    border-radius: 22px;
  }

  .contact-form .full {
    grid-column: auto;
  }

  .compare-section,
  .compare-wrap,
  .compare-card {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
  }

  .compare-widget {
    width: 100%;
    max-width: 100%;
    min-height: 410px;
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
  }

  .compare-widget::before,
  .compare-widget::after,
  .compare-label {
    bottom: 14px;
    padding: 8px 12px;
    font-size: 0.85rem;
    border-radius: 16px;
  }

  .compare-widget::before,
  .compare-label-before {
    left: 14px;
  }

  .compare-widget::after,
  .compare-label-after {
    right: 14px;
  }
}

/* =========================================================
   FINAL HERO IMAGE BUG FIX
   Stops sharp edges / weird rotation / corner clipping
========================================================= */

.visual-frame {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 36px !important;
  clip-path: inset(0 round 36px) !important;
  transform: none !important;
  rotate: 0deg !important;
  background: #ffffff !important;
  isolation: isolate !important;
  box-shadow: 0 24px 70px rgba(16, 34, 31, 0.14) !important;
}

.visual-frame::before {
  border-radius: inherit !important;
  clip-path: inset(0 round 36px) !important;
  pointer-events: none !important;
}

.visual-frame img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  transform: none !important;
  transition: transform 0.55s ease !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.visual-frame:hover {
  border-radius: 36px !important;
  clip-path: inset(0 round 36px) !important;
}

.visual-frame:hover img {
  transform: scale(1.025) !important;
  border-radius: inherit !important;
}

/* Keep the floating cards clean */
.floating-card {
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

/* Mobile hero image */
@media (max-width: 700px) {
  .visual-frame {
    border-radius: 28px !important;
    clip-path: inset(0 round 28px) !important;
    aspect-ratio: 1 / 1.12 !important;
  }

  .visual-frame::before,
  .visual-frame img {
    border-radius: 28px !important;
    clip-path: inset(0 round 28px) !important;
  }
}


/* =========================================================
   No Fuss Kitchens — Full script.js
   Fixes:
   - FAQ accordion
   - Hero stats showing 0
   - Mobile menu button too large / menu layering
   - Smooth before/after touch slider with safer mobile limits
========================================================= */

(() => {
  "use strict";

  const $ = (selector, scope = document) => scope.querySelector(selector);
  const $$ = (selector, scope = document) => Array.from(scope.querySelectorAll(selector));

  document.addEventListener("DOMContentLoaded", () => {
    const header = $(".site-header");
    const menuToggle = $("[data-menu-toggle]");
    const menu = $("[data-menu]");
    const progressBar = $(".scroll-progress");

    /* =====================================================
       Header + mobile menu position
    ===================================================== */

    const updateMobileMenuTop = () => {
      if (!header) return;
      const headerBottom = Math.ceil(header.getBoundingClientRect().bottom);
      document.documentElement.style.setProperty("--mobile-menu-top", `${headerBottom}px`);
    };

    const keepHeaderVisible = () => {
      if (!header) return;

      header.classList.remove("is-hidden", "hide", "header-hidden");
      header.style.transform = "none";
      header.style.opacity = "1";
      header.style.visibility = "visible";
      header.style.pointerEvents = "auto";
      header.classList.toggle("is-scrolled", window.scrollY > 8);
    };

    const updateScrollProgress = () => {
      if (!progressBar) return;

      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;

      progressBar.style.width = `${Math.min(100, Math.max(0, progress))}%`;
    };

    keepHeaderVisible();
    updateMobileMenuTop();
    updateScrollProgress();

    window.addEventListener(
      "scroll",
      () => {
        keepHeaderVisible();
        updateMobileMenuTop();
        updateScrollProgress();
      },
      { passive: true }
    );

    window.addEventListener(
      "resize",
      () => {
        keepHeaderVisible();
        updateMobileMenuTop();
      },
      { passive: true }
    );

    /* =====================================================
       Mobile menu
    ===================================================== */

    const closeMobileMenu = () => {
      if (!menuToggle || !menu) return;

      menuToggle.setAttribute("aria-expanded", "false");
      menuToggle.classList.remove("is-open");
      menu.classList.remove("is-open");
      document.body.classList.remove("menu-open");
    };

    const openMobileMenu = () => {
      if (!menuToggle || !menu) return;

      updateMobileMenuTop();

      menuToggle.setAttribute("aria-expanded", "true");
      menuToggle.classList.add("is-open");
      menu.classList.add("is-open");
      document.body.classList.add("menu-open");
    };

    if (menuToggle && menu) {
      menuToggle.addEventListener("click", (event) => {
        event.preventDefault();
        event.stopPropagation();

        const isOpen = menuToggle.getAttribute("aria-expanded") === "true";
        isOpen ? closeMobileMenu() : openMobileMenu();
      });

      $$("a", menu).forEach((link) => {
        link.addEventListener("click", closeMobileMenu);
      });

      document.addEventListener("click", (event) => {
        if (!document.body.classList.contains("menu-open")) return;
        if (menu.contains(event.target)) return;
        if (menuToggle.contains(event.target)) return;

        closeMobileMenu();
      });

      document.addEventListener("keydown", (event) => {
        if (event.key === "Escape") closeMobileMenu();
      });
    }

    /* =====================================================
       Smooth anchor scrolling
    ===================================================== */

    $$('a[href^="#"]').forEach((link) => {
      link.addEventListener("click", (event) => {
        const targetId = link.getAttribute("href");
        if (!targetId || targetId === "#") return;

        const target = $(targetId);
        if (!target) return;

        event.preventDefault();

        const headerHeight = header ? header.offsetHeight : 0;
        const targetTop = target.getBoundingClientRect().top + window.scrollY - headerHeight - 18;

        window.scrollTo({
          top: targetTop,
          behavior: "smooth",
        });

        closeMobileMenu();
      });
    });

    /* =====================================================
       Force hero stats — fixes 0 / 0 / CNC
    ===================================================== */

    const setHeroStats = () => {
      const stats = $$(".stat-row div");

      if (stats[0]) {
        const dt = $("dt", stats[0]);
        const dd = $("dd", stats[0]);
        if (dt) dt.textContent = "50";
        if (dd) dd.textContent = "years of industry experience";
      }

      if (stats[1]) {
        const dt = $("dt", stats[1]);
        const dd = $("dd", stats[1]);
        if (dt) dt.textContent = "7";
        if (dd) dd.textContent = "year cabinetry warranty";
      }

      if (stats[2]) {
        const dt = $("dt", stats[2]);
        const dd = $("dd", stats[2]);
        if (dt) dt.textContent = "CNC";
        if (dd) dd.textContent = "precision panel processing";
      }
    };

    setHeroStats();

    // Run again after any old animation script has finished.
    setTimeout(setHeroStats, 100);
    setTimeout(setHeroStats, 600);
    setTimeout(setHeroStats, 1200);

    /* =====================================================
       Before / After slider
    ===================================================== */

    $$("[data-compare]").forEach((compare) => {
      const range = $("[data-compare-range]", compare);
      const before = $("[data-before]", compare) || $(".compare-before", compare);
      const handle = $("[data-handle]", compare) || $(".compare-handle", compare);

      let isDragging = false;
      let frame = null;
      let pendingPercent = 50;

      const getLimits = () => {
        const width = compare.getBoundingClientRect().width;

        // Mobile: keep handle away from Before / After green boxes.
        return width < 520 ? [24, 76] : [10, 90];
      };

      const clampPercent = (value) => {
        const [min, max] = getLimits();
        return Math.min(max, Math.max(min, Number(value)));
      };

      const applyCompare = (value) => {
        const pct = clampPercent(value);

        compare.style.setProperty("--compare-position", `${pct}%`);

        if (before) {
          before.style.clipPath = `inset(0 ${100 - pct}% 0 0)`;
        }

        if (handle) {
          handle.style.left = `${pct}%`;
        }

        if (range && Number(range.value) !== Math.round(pct)) {
          range.value = String(Math.round(pct));
        }
      };

      const scheduleCompare = (value) => {
        pendingPercent = value;

        if (frame) return;

        frame = requestAnimationFrame(() => {
          applyCompare(pendingPercent);
          frame = null;
        });
      };

      const getPercentFromPointer = (event) => {
        const rect = compare.getBoundingClientRect();
        const x = event.clientX - rect.left;
        return clampPercent((x / rect.width) * 100);
      };

      const startDrag = (event) => {
        if (event.button !== undefined && event.button !== 0) return;

        isDragging = true;
        compare.classList.add("is-dragging");

        try {
          compare.setPointerCapture(event.pointerId);
        } catch (_) {}

        event.preventDefault();
        scheduleCompare(getPercentFromPointer(event));
      };

      const moveDrag = (event) => {
        if (!isDragging) return;

        event.preventDefault();
        scheduleCompare(getPercentFromPointer(event));
      };

      const stopDrag = (event) => {
        if (!isDragging) return;

        isDragging = false;
        compare.classList.remove("is-dragging");

        try {
          compare.releasePointerCapture(event.pointerId);
        } catch (_) {}
      };

      $$("img", compare).forEach((img) => {
        img.setAttribute("draggable", "false");
      });

      applyCompare(range ? range.value : 50);

      compare.addEventListener("pointerdown", startDrag);
      compare.addEventListener("pointermove", moveDrag);
      compare.addEventListener("pointerup", stopDrag);
      compare.addEventListener("pointercancel", stopDrag);
      compare.addEventListener("lostpointercapture", stopDrag);

      if (range) {
        range.addEventListener("input", (event) => {
          applyCompare(event.target.value);
        });
      }

      window.addEventListener(
        "resize",
        () => {
          applyCompare(range ? range.value : 50);
        },
        { passive: true }
      );
    });

    /* =====================================================
       FAQ accordion — fixed for both class and data versions
    ===================================================== */

    const faqItems = $$("[data-faq], .accordion-item, .faq-item");

    faqItems.forEach((faq) => {
      const button =
        $("[data-faq-button]", faq) ||
        $(".accordion-button", faq) ||
        $("button", faq);

      const panel =
        $("[data-faq-panel]", faq) ||
        $(".accordion-panel", faq) ||
        $(".faq-panel", faq);

      if (!button || !panel) return;

      // Start closed unless already open.
      const initiallyOpen = faq.classList.contains("is-open") || faq.classList.contains("open");
      button.setAttribute("aria-expanded", String(initiallyOpen));
      panel.style.maxHeight = initiallyOpen ? `${panel.scrollHeight}px` : "0px";

      button.addEventListener("click", () => {
        const isOpen = faq.classList.contains("is-open") || faq.classList.contains("open");
        const shouldOpen = !isOpen;

        faq.classList.toggle("is-open", shouldOpen);
        faq.classList.toggle("open", shouldOpen);
        button.setAttribute("aria-expanded", String(shouldOpen));

        panel.style.maxHeight = shouldOpen ? `${panel.scrollHeight}px` : "0px";
      });
    });

    /* =====================================================
       Gallery filter buttons
    ===================================================== */

    const filterButtons = $$("[data-filter]");
    const galleryItems = $$("[data-gallery-item]");

    if (filterButtons.length && galleryItems.length) {
      filterButtons.forEach((button) => {
        button.addEventListener("click", () => {
          const filter = button.getAttribute("data-filter");

          filterButtons.forEach((btn) => btn.classList.remove("is-active"));
          button.classList.add("is-active");

          galleryItems.forEach((item) => {
            const category = item.getAttribute("data-gallery-item");
            const shouldShow = filter === "all" || category === filter;

            item.classList.toggle("is-hidden", !shouldShow);
          });
        });
      });
    }

    /* =====================================================
       Reveal animations
    ===================================================== */

    const revealItems = $$("[data-reveal], .reveal");

    if ("IntersectionObserver" in window && revealItems.length) {
      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (!entry.isIntersecting) return;

            entry.target.classList.add("is-visible", "in-view");
            observer.unobserve(entry.target);
          });
        },
        {
          threshold: 0.14,
          rootMargin: "0px 0px -40px 0px",
        }
      );

      revealItems.forEach((item) => observer.observe(item));
    } else {
      revealItems.forEach((item) => item.classList.add("is-visible", "in-view"));
    }

    /* =====================================================
       Contact form mailto
    ===================================================== */

    const contactForm = $("[data-contact-form]");

    if (contactForm) {
      contactForm.addEventListener("submit", (event) => {
        event.preventDefault();

        const formData = new FormData(contactForm);

        const name = formData.get("name") || "";
        const phone = formData.get("phone") || "";
        const email = formData.get("email") || "";
        const message = formData.get("message") || "";

        const subject = encodeURIComponent("Kitchen consultation request");
        const body = encodeURIComponent(
          `Name: ${name}\nPhone: ${phone}\nEmail: ${email}\n\nMessage:\n${message}`
        );

        window.location.href = `mailto:sales@nofusskitchens.com.au?subject=${subject}&body=${body}`;
      });
    }

    /* =====================================================
       Current year
    ===================================================== */

    $$("[data-year]").forEach((item) => {
      item.textContent = new Date().getFullYear();
    });
  });
})();

/* =========================================================
   FINAL MOBILE HEADER + MENU + FAQ + COMPARE FIX
   Paste at the VERY BOTTOM of styles.css
========================================================= */

/* ---------- Header always visible ---------- */
html,
body {
  overflow-x: hidden !important;
}

body {
  padding-top: var(--header-height, 128px) !important;
}

.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100000 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: #ffffff !important;
  overflow: visible !important;
}

.site-header.is-hidden,
.site-header.hide,
.site-header.header-hidden,
.site-header[data-hidden="true"] {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.top-strip {
  position: relative !important;
  z-index: 100002 !important;
  background: var(--green) !important;
}

.nav-shell {
  position: relative !important;
  z-index: 100001 !important;
  background: #ffffff !important;
}

/* ---------- Smaller mobile hamburger / X button ---------- */
@media (max-width: 860px) {
  .nav-shell {
    min-height: 66px !important;
    width: calc(100% - 24px) !important;
  }

  .brand img {
    width: 150px !important;
    max-height: 56px !important;
  }

  .menu-toggle {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 13px !important;
    padding: 9px !important;
    display: grid !important;
    place-items: center !important;
    background: var(--green) !important;
    position: relative !important;
    z-index: 100004 !important;
  }

  .menu-toggle span:not(.sr-only) {
    width: 20px !important;
    height: 2px !important;
    margin: 3.5px auto !important;
  }

  .menu-toggle.is-open {
    box-shadow:
      0 0 0 2px rgba(201, 155, 106, 0.9),
      0 12px 26px rgba(16, 47, 43, 0.22) !important;
  }

  .menu-toggle.is-open span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg) !important;
  }

  .menu-toggle.is-open span:nth-child(2) {
    opacity: 0 !important;
  }

  .menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg) !important;
  }

  /* Menu starts BELOW the whole fixed header, not over the logo */
  .site-menu {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    top: calc(var(--header-height, 128px) + 10px) !important;
    z-index: 99999 !important;

    display: grid !important;
    gap: 8px !important;
    padding: 18px !important;

    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(16, 34, 31, 0.1) !important;
    box-shadow: 0 24px 70px rgba(16, 34, 31, 0.18) !important;
    backdrop-filter: blur(18px) !important;

    max-height: calc(100dvh - var(--header-height, 128px) - 26px) !important;
    overflow-y: auto !important;

    transform: translateY(-8px) scale(0.98) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;

    transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      visibility 0.22s ease !important;
  }

  .site-menu.is-open {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  .site-menu a {
    width: 100% !important;
    min-height: 42px !important;
    justify-content: flex-start !important;
    padding: 0 12px !important;
    border-radius: 14px !important;
    font-size: 0.98rem !important;
    color: #10221f !important;
  }

  .site-menu .nav-cta {
    min-height: 48px !important;
    justify-content: center !important;
    border-radius: 16px !important;
    background: var(--green) !important;
    color: #ffffff !important;
  }

  body.menu-open {
    overflow: hidden !important;
  }
}

/* ---------- FAQ starts closed, not with minus ---------- */
.accordion-item,
.faq-item,
[data-faq] {
  background: #ffffff !important;
  border: 1px solid rgba(16, 34, 31, 0.1) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 50px rgba(16, 34, 31, 0.06) !important;
}

.accordion-item button,
.faq-item button,
[data-faq] button {
  background: #ffffff !important;
  color: #10221f !important;
}

.accordion-panel,
.faq-panel,
[data-faq-panel] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

.accordion-item button::after,
.faq-item button::after,
[data-faq] button::after,
.accordion-item.open:not(.is-open) button::after,
.faq-item.open:not(.is-open) button::after {
  content: "+" !important;
  transform: none !important;
}

.accordion-item.is-open button::after,
.faq-item.is-open button::after,
[data-faq].is-open button::after {
  content: "−" !important;
  transform: rotate(180deg) !important;
}

/* ---------- Compare slider: line no longer crosses labels ---------- */
.compare-widget {
  --compare-position: 50%;
  position: relative !important;
  overflow: hidden !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: ew-resize !important;
}

.compare-before {
  z-index: 2 !important;
  clip-path: inset(0 calc(100% - var(--compare-position, 50%)) 0 0) !important;
}

.compare-after {
  z-index: 1 !important;
  clip-path: none !important;
}

.compare-handle {
  left: var(--compare-position, 50%) !important;
  z-index: 12 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.98) 0,
      rgba(255, 255, 255, 0.98) calc(100% - 78px),
      transparent calc(100% - 78px),
      transparent 100%
    ) !important;
  box-shadow: none !important;
}

.compare-handle::after {
  z-index: 13 !important;
}

.compare-label,
.compare-label-before,
.compare-label-after,
.compare-widget::before,
.compare-widget::after {
  z-index: 50 !important;
  pointer-events: none !important;
}

.compare-label-before,
.compare-widget::before {
  left: 22px !important;
}

.compare-label-after,
.compare-widget::after {
  right: 22px !important;
  left: auto !important;
}

@media (max-width: 700px) {
  .compare-widget {
    aspect-ratio: 4 / 5 !important;
    min-height: 410px !important;
    border-radius: 24px !important;
  }

  .compare-handle {
    background:
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.98) 0,
        rgba(255, 255, 255, 0.98) calc(100% - 72px),
        transparent calc(100% - 72px),
        transparent 100%
      ) !important;
  }

  .compare-handle::after {
    width: 42px !important;
    height: 42px !important;
    font-size: 0.85rem !important;
  }

  .compare-label,
  .compare-label-before,
  .compare-label-after,
  .compare-widget::before,
  .compare-widget::after {
    bottom: 14px !important;
    padding: 8px 12px !important;
    font-size: 0.84rem !important;
    border-radius: 15px !important;
  }

  .compare-label-before,
  .compare-widget::before {
    left: 12px !important;
  }

  .compare-label-after,
  .compare-widget::after {
    right: 12px !important;
  }
}         

         /* =========================================================
   FINAL FIX: smaller centred hamburger / X icon
   Paste at the VERY BOTTOM of styles.css
========================================================= */

@media (max-width: 860px) {
  .menu-toggle {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;

    display: grid !important;
    place-items: center !important;

    position: relative !important;
    background: #102f2b !important;
  }

  .menu-toggle span:not(.sr-only) {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 18px !important;
    height: 2px !important;
    margin: 0 !important;

    background: #ffffff !important;
    border-radius: 999px !important;

    transform-origin: center !important;
    transition: transform 0.22s ease, opacity 0.22s ease !important;
  }

  /* Closed hamburger position */
  .menu-toggle span:nth-child(1):not(.sr-only) {
    transform: translate(-50%, -7px) !important;
  }

  .menu-toggle span:nth-child(2):not(.sr-only) {
    transform: translate(-50%, -50%) !important;
  }

  .menu-toggle span:nth-child(3):not(.sr-only) {
    transform: translate(-50%, 5px) !important;
  }

  /* Open X position */
  .menu-toggle.is-open span:nth-child(1):not(.sr-only) {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .menu-toggle.is-open span:nth-child(2):not(.sr-only) {
    opacity: 0 !important;
  }

  .menu-toggle.is-open span:nth-child(3):not(.sr-only) {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }

  .menu-toggle.is-open {
    box-shadow:
      0 0 0 2px rgba(201, 155, 106, 0.9),
      0 10px 22px rgba(16, 47, 43, 0.22) !important;
  }
}