/* ==========================================================================
   Vetrivel Wood Works — site stylesheet
   Hand-written replacement for the Divi / plugin CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --gold:        #c69453;
  --gold-dark:   #b4813f;
  --gold-bar:    #c18f50;
  --brown:       #644020;
  --brown-deep:  #4e3118;
  --cream:       #f6f1ea;
  --cream-soft:  #faf6f0;
  --sand:        #ece0cf;
  --sand-soft:   #f2e8da;
  --ink:         #666666;
  --ink-strong:  #3f3f3f;
  --white:       #ffffff;
  --line:        #e6dccd;

  --font-body:    'Outfit', Helvetica, Arial, sans-serif;
  --font-heading: 'Roboto', Helvetica, Arial, sans-serif;

  --shell:    1300px;   /* same as the original Divi row max-width */
  --gutter:   20px;
  --radius:   6px;
  --shadow:   0 10px 30px rgba(100, 64, 32, .10);
  --shadow-sm:0 4px 14px rgba(100, 64, 32, .08);

  --section-y: 90px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}

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

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-dark); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--brown);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .5em;
}

h1 { font-size: 40px; }
h2 { font-size: 34px; }
h3 { font-size: 24px; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brown);
  color: #fff;
  padding: 12px 20px;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
/* Matches the original site's row: Divi used width:80% with max-width:1300px
   (90% below 980px), so the content column lines up exactly as before. */
.container {
  width: 80%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 0;
}

@media (max-width: 980px) {
  .container { width: 90%; }
}
@media (max-width: 480px) {
  .container { width: 100%; padding-inline: var(--gutter); }
}

.section {
  padding-block: var(--section-y);
}
.section-tight { padding-block: 60px; }

.section-cream   { background: var(--cream); }
.section-sand    { background: var(--cream-soft); }

.section-texture {
  background-color: var(--cream);
  background-image: url('../img/shape-6.png');
  background-repeat: repeat-x;
  background-position: top center;
}

.section-gold {
  background-color: var(--gold);
  background-image: url('../img/shape-6.png');
  background-repeat: repeat-x;
  background-position: top center;
}

/* Everything inside the gold / brown bands flips to light type. */
.section-gold .eyebrow,
.section-gold .section-title,
.section-gold h2,
.section-gold h3,
.section-counters .eyebrow,
.section-counters .section-title,
.section-counters h2,
.section-counters h3 { color: #fff; }

.section-gold p,
.section-gold .tick-list li,
.section-counters p,
.section-counters .tick-list li { color: #f3e7d6; }

.section-gold .tick-list li::before,
.section-counters .tick-list li::before {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23644020'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

.section-products {
  background-color: var(--cream-soft);
  background-image: url('../img/bg-products.jpg');
  background-size: cover;
  background-position: center;
}

.grid { display: grid; gap: 30px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   4. Section headings
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow img { width: 20px; height: auto; flex: none; }

.text-center .eyebrow,
.eyebrow-center { justify-content: center; }

.section-title {
  font-size: 34px;
  margin: 0 0 18px;
}
.section-title-sm { font-size: 22px; font-weight: 500; color: var(--ink); }

.section-head {
  max-width: 760px;
  margin: 0 auto 50px;
  text-align: center;
}
.section-head .section-title { margin-bottom: 8px; }
.section-head .section-sub {
  font-size: 15px;
  color: var(--ink);
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }

.btn-gold  { background: var(--gold);  color: #fff; }
.btn-gold:hover  { background: var(--brown); color: #fff; }

.btn-dark  { background: var(--brown); color: #fff; }
.btn-dark:hover  { background: var(--brown-deep); color: #fff; }

.btn-outline {
  background: transparent;
  color: var(--brown);
  border: 1px solid var(--gold);
}
.btn-outline:hover { background: var(--gold); color: #fff; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 60;
}

.header-bar {
  background-color: var(--gold-bar);
  background-image: url('../img/header-bg.png');
  background-size: auto 100%;
  background-position: center;
  background-repeat: repeat-x;
}

/* The header floats over the hero on desktop, as on the original site. */
@media (min-width: 981px) {
  .site-header {
    position: absolute;
    inset: 0 0 auto;
  }
  .header-bar {
    max-width: calc(var(--shell) + 80px);
    margin: 18px auto 0;
  }
  body.has-hero { padding-top: 0; }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 92px;
  padding-block: 8px;
}

.brand { flex: none; }
.brand img {
  width: 104px;
  height: auto;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 26px;
}

.primary-nav a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brown);
  white-space: nowrap;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.primary-nav a:hover,
.primary-nav .is-current > a {
  color: var(--white);
  border-bottom-color: var(--white);
}

.header-cta { flex: none; }
.nav-cta-mobile { display: none; }

/* Burger */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--brown);
}
.nav-toggle-bars {
  display: block;
  width: 26px;
}
.nav-toggle-bars span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle-bars span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   7. Hero slider
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--sand);
  overflow: hidden;
}

.hero-track {
  display: flex;
  width: 100%;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}

.hero-slide {
  flex: 0 0 100%;
  min-width: 100%;
}
.hero-slide a,
.hero-slide > img { display: block; }
.hero-slide img {
  width: 100%;
  height: auto;
}

.hero-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  color: var(--brown);
  cursor: pointer;
  transition: background-color .2s ease;
}
.hero-nav:hover { background: #fff; }
.hero-prev { left: 18px; }
.hero-next { right: 18px; }

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  translate: -50% 0;
  z-index: 3;
  display: flex;
  gap: 9px;
}
.hero-dots button {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .65);
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}
/* Invisible 44px hit area so the dots are comfortable to tap. */
.hero-dots button::after {
  content: '';
  position: absolute;
  inset: -17px -8px;
}
.hero-dots button[aria-current="true"] {
  background: var(--brown);
  width: 26px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   8. Page banner (inner pages)
   -------------------------------------------------------------------------- */
.page-banner {
  position: relative;
  background: var(--brown) center / cover no-repeat;
  text-align: center;
  padding-block: 150px 70px;
  color: #fff;
}
@media (min-width: 981px) {
  .page-banner { padding-block: 210px 90px; }
}
.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(60, 38, 18, .45), rgba(60, 38, 18, .55));
}
.page-banner .container { position: relative; }
.page-banner h1 {
  color: #fff;
  font-size: 42px;
  margin: 0 0 6px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}
.breadcrumb {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, .9);
}
.breadcrumb a { color: #fff; }
.breadcrumb a:hover { color: var(--sand); }

/* --------------------------------------------------------------------------
   9. Gallery grids
   -------------------------------------------------------------------------- */
/* Gallery block: five columns, each holding one landscape above one portrait,
   so every column ends at the same height. Width, gutter and corner radius are
   measured off the original page (90% row, ~10px gutter, 8px radius). */
.masonry-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 38px;
  align-items: start;
}
.masonry-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.masonry-col figure {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--sand);
}
.masonry-col img {
  width: 100%;
  height: auto;          /* natural proportions, never cropped */
  display: block;
  transition: transform .5s ease;
}
.masonry-col figure:hover img { transform: scale(1.06); }

/* Four across, one shared aspect ratio per row. The original site runs these
   rows at 90% width (wider than the 80% content rows) with a ~38px gutter and
   square corners — measured off the live page. */
.wide-rows {
  width: 90%;
  max-width: 1460px;
  margin-inline: auto;
}
.photo-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 38px;
  margin-bottom: 38px;
}
.photo-row figure {
  margin: 0;
  overflow: hidden;
  border-radius: 5px;
  background: var(--sand);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}
.photo-row img {
  width: 100%;
  height: auto;
  transition: transform .5s ease;
}
.photo-row figure:hover img { transform: scale(1.06); }

.gallery {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, 1fr);
}
.gallery-4 { grid-template-columns: repeat(4, 1fr); }

.gallery figure,
.tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sand);
}
.gallery img,
.tile img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}
.gallery a:hover img,
.tile:hover img { transform: scale(1.06); }

.gallery-tall img { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------------------
   10. Product cards
   -------------------------------------------------------------------------- */
/* Three cards visible, the rest reached with the arrows — nothing drops onto
   a second row. --per-view is swapped at the breakpoints below. */
.product-carousel {
  --per-view: 3;
  --card-gap: 26px;
  position: relative;
  padding-inline: 56px;
}

.product-viewport {
  overflow: hidden;
  padding-block: 32px 6px;   /* room for the icon that overhangs each card */
  margin-block: -32px -6px;
}

.product-grid {
  display: flex;
  gap: var(--card-gap);
  align-items: stretch;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

.product-card {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--card-gap)) / var(--per-view));
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.product-media {
  position: relative;
  overflow: hidden;
}
.product-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s ease;
}
.product-card:hover .product-media img { transform: scale(1.06); }

.product-body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 44px 24px 22px;
}

.product-icon {
  position: absolute;
  top: -28px;
  left: 24px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--gold);
  border-radius: 4px;
}
.product-icon img { width: 30px; height: auto; }

.product-body h3 {
  font-size: 22px;
  margin: 0 0 10px;
}
.product-body p {
  font-size: 15px;
  margin: 0 0 18px;
  flex: 1 1 auto;
}

.product-cta {
  display: block;
  margin: 0 -24px -22px;
  padding: 15px 24px;
  background: var(--brown);
  color: #fff;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  transition: background-color .25s ease;
}
.product-cta:hover { background: var(--gold); color: #fff; }

/* Carousel controls */
.carousel-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: #fff;
  color: var(--brown);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.carousel-nav:hover { background: var(--gold); color: #fff; }
.carousel-nav[disabled] { opacity: .35; cursor: default; }
.carousel-nav[disabled]:hover { background: #fff; color: var(--brown); }
.carousel-prev { left: 0; }
.carousel-next { right: 0; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 30px;
}
.carousel-dots button {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(100, 64, 32, .28);
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}
.carousel-dots button::after { content: ''; position: absolute; inset: -17px -8px; }
.carousel-dots button[aria-current="true"] {
  background: var(--gold);
  width: 26px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   11. Split (image + text) blocks
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.split-media img { border-radius: var(--radius); width: 100%; }
.split-body { min-width: 0; }
.split-reverse .split-media { order: 2; }

.text-justify { text-align: justify; }

/* Tick list */
.tick-list {
  display: grid;
  gap: 12px;
  margin: 0 0 26px;
}
.tick-list li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  color: var(--ink);
}
.tick-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   12. Counters
   -------------------------------------------------------------------------- */
/* Two full-bleed halves: dark brown behind the text, gold behind the counters.
   Each half centres its own content, so the space to the left and right of the
   counters inside the gold area is equal. */
.section-counters {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.counters-half {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 56px;
}
.counters-inner {
  width: 100%;
  max-width: 560px;
}
.counters-text { background: var(--brown-deep); }
.counters-stats {
  background-color: var(--gold);
  background-image: url('../img/bg-pattern-5-1.png');
  background-repeat: no-repeat;
  background-position: center left;
  background-size: cover;
}

.counter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 86px 44px;
  padding-top: 56px;
}

.counter {
  position: relative;
  padding: 92px 14px 34px;
  text-align: center;
  color: #fff;
  border: 1px solid rgba(90, 58, 28, .38);
}

/* The icon is a filled brown circle that straddles the box's top border. */
.counter img {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  width: 152px;
  height: 152px;
  margin: 0;
}

.counter-value {
  font-family: var(--font-body);
  font-size: 54px;
  font-weight: 500;
  line-height: 1.05;
  color: rgba(255, 255, 255, .82);
}
.counter-label {
  font-size: 16px;
  color: #fff;
  margin: 2px 0 0;
}

/* --------------------------------------------------------------------------
   13. Feature cards (why choose us)
   -------------------------------------------------------------------------- */
/* The icon PNGs already contain the dashed ring and the 01–04 badge, so they
   are shown at full size with no wrapper circle around them. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.feature {
  background: var(--sand-soft);
  border-radius: 10px;
  padding: 30px 26px 36px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

.feature-icon {
  margin: 0 auto 14px;
  line-height: 0;
}
.feature-icon img {
  width: 128px;
  height: auto;
  margin: 0 auto;
}
.feature h3 { font-size: 21px; margin: 0 0 10px; }
.feature p { font-size: 15px; margin: 0; }

/* The stacked-logs decoration sitting in the section's top-right corner. */
.section-features {
  position: relative;
  background: var(--white);
  overflow: hidden;
}
.section-features::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 4%;
  width: 190px;
  height: 150px;
  background: url('../img/bg.png') no-repeat center / contain;
  pointer-events: none;
}
@media (max-width: 980px) {
  .section-features::after { width: 120px; height: 95px; opacity: .55; }
}
@media (max-width: 640px) {
  .section-features::after { display: none; }
}

/* --------------------------------------------------------------------------
   14. Mission / Vision
   -------------------------------------------------------------------------- */
.mv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
/* Mission / Vision sit on the darkened forest photo: see-through cards with a
   dashed gold outline, exactly as on the original page. */
.section-mv {
  position: relative;
  background: #2b2b2b url('../img/mission-vision-image.jpg') center / cover no-repeat;
}
.section-mv::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26, 24, 22, .55);
}
.section-mv > .container { position: relative; }

.mv-grid { gap: 46px; }

.mv-card {
  background: transparent;
  border: 1px dashed rgba(210, 169, 113, .85);
  border-radius: 14px;
  padding: 46px 34px 40px;
  text-align: center;
  box-shadow: none;
}
.mv-card img { width: 128px; height: auto; margin: 0 auto 22px; }
.mv-card h2 {
  color: var(--gold);
  font-size: 34px;
  margin: 0 0 14px;
}
.mv-card p {
  font-size: 16px;
  color: #fff;
  margin: 0;
  line-height: 1.75;
}

/* --------------------------------------------------------------------------
   15. Contact page
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}

.contact-form-card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 40px 36px;
}

.contact-details { padding-top: 6px; }

.contact-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding-block: 4px;
}
.contact-item + .contact-divider { margin-block: 22px; }
.contact-divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin-block: 22px;
}
.ci-icon {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: #fff;
  border-radius: var(--radius);
}
.contact-item h2 {
  font-size: 20px;
  margin: 0 0 4px;
}
.contact-item p { margin: 0; font-size: 15px; }
.contact-item a { color: var(--ink); }
.contact-item a:hover { color: var(--gold); }

.social-list {
  display: flex;
  gap: 12px;
}
.social-list a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  transition: background-color .25s ease, transform .25s ease;
}
.social-list a:hover { background: var(--brown); color: #fff; transform: translateY(-3px); }

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
  box-shadow: var(--shadow-sm);
}
.map-embed iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   16. Form
   -------------------------------------------------------------------------- */
.enquiry-form .field { margin-bottom: 16px; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.enquiry-form input[type="text"],
.enquiry-form input[type="tel"],
.enquiry-form input[type="email"],
.enquiry-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-strong);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 14px 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.enquiry-form textarea { resize: vertical; min-height: 150px; }

.enquiry-form input::placeholder,
.enquiry-form textarea::placeholder { color: #a79b8c; }

.enquiry-form input:focus,
.enquiry-form textarea:focus {
  outline: 0;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198, 148, 83, .18);
}
.enquiry-form [aria-invalid="true"] { border-color: #c0392b; }

.field-captcha {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.field-captcha label {
  font-size: 15px;
  color: var(--ink-strong);
  white-space: nowrap;
}
.field-captcha input { max-width: 110px; }
.field-captcha .field-error { flex-basis: 100%; }

.field-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #c0392b;
}

.form-submit { margin-top: 6px; min-width: 160px; }

/* Honeypot — off-screen but still focusable by bots, hidden from people. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-notice {
  padding: 14px 18px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 15px;
}
.form-notice-ok {
  background: #e8f5e9;
  border-left: 4px solid #3f9142;
  color: #27612a;
}
.form-notice-error {
  background: #fdecea;
  border-left: 4px solid #c0392b;
  color: #96271a;
}

/* --------------------------------------------------------------------------
   17. Popup
   -------------------------------------------------------------------------- */
.popup {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
}
.popup[hidden] { display: none; }

.popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 28, 12, .62);
  backdrop-filter: blur(2px);
}

.popup-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 38px 34px 34px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: popup-in .25s ease;
}

@keyframes popup-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 36px;
  height: 36px;
  font-size: 26px;
  line-height: 1;
  color: var(--brown);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.popup-close:hover { background: rgba(100, 64, 32, .08); }

body.popup-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer { color: #f0e6d6; }

.footer-top {
  background-color: var(--gold);
  background-image: url('../img/shape-6.png');
  background-repeat: repeat-x;
  background-position: top center;
  padding-block: 58px 46px;
}

.footer-contacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.footer-contact {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.fc-icon {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--brown-deep);
  color: #fff;
}
.fc-icon svg { width: 26px; height: 26px; }
.footer-contact h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brown-deep);
  margin: 0 0 4px;
}
.footer-contact p { margin: 0; font-size: 15px; color: #fffaf3; }
.footer-contact a { color: #fffaf3; }
.footer-contact a:hover { color: var(--brown-deep); }

.footer-divider {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-block: 42px 34px;
  color: #fff;
}
.footer-divider span {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.footer-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, .4);
}

.footer-about {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 34px;
  align-items: center;
}
.footer-logo img { width: 150px; }
.footer-blurb p {
  margin: 0;
  text-align: center;
  font-size: 15px;
  color: #fff8ee;
}
.footer-social { display: flex; justify-content: flex-end; }
.footer-social .social-list a {
  background: var(--brown-deep);
  color: #fff;
}
.footer-social .social-list a:hover { background: var(--brown); color: #fff; }

.footer-bottom {
  background: var(--brown);
  padding-block: 18px;
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-bottom p,
.footer-bottom a { font-size: 14px; color: #e8d9c4; margin: 0; }
.footer-bottom a:hover { color: #fff; }
.footer-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-nav span { color: rgba(232, 217, 196, .5); }

/* --------------------------------------------------------------------------
   19. WhatsApp float
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 250;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: transform .25s ease;
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }

/* --------------------------------------------------------------------------
   20. Reveal on scroll
   -------------------------------------------------------------------------- */
/* Only hide content when JavaScript is actually running — otherwise a blocked
   or failed script would leave the page blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-track { transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   21. Responsive
   ========================================================================== */

/* ---- Large laptops ---- */
@media (max-width: 1180px) {
  .primary-nav ul { gap: 18px; }
  .primary-nav a { font-size: 13px; letter-spacing: .5px; }
  .btn { padding: 13px 22px; letter-spacing: 1.4px; }
}

/* ---- Tablet & below: switch to the off-canvas menu ---- */
@media (max-width: 980px) {
  :root { --section-y: 64px; }

  h1 { font-size: 32px; }
  h2, .section-title { font-size: 27px; }
  h3 { font-size: 21px; }

  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .nav-cta-mobile { display: block; margin-top: 10px; }
  .nav-cta-mobile .btn { width: 100%; }

  .header-inner { min-height: 76px; }
  .brand img { width: 84px; }

  .primary-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--gold-bar);
    border-top: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .18);
    display: none;
  }
  .primary-nav.is-open { display: block; }

  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 24px 20px;
  }
  .primary-nav li + li { border-top: 1px solid rgba(255, 255, 255, .22); }
  .primary-nav .nav-cta-mobile { border-top: 0; }
  .primary-nav a {
    display: block;
    padding: 14px 2px;
    font-size: 15px;
    border-bottom: 0;
  }
  .primary-nav a:hover,
  .primary-nav .is-current > a { color: #fff; }

  .grid-4, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .masonry-gallery { grid-template-columns: repeat(3, 1fr); }
  .wide-rows { width: 90%; }
  .photo-row { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; }

  /* Stacked halves, so the brown/gold split runs top to bottom. */
  .section-counters { grid-template-columns: 1fr; }
  .counters-half { padding: 56px 24px; }
  .counters-inner { max-width: 620px; }

  .product-carousel { --per-view: 2; padding-inline: 46px; }

  .split { grid-template-columns: 1fr; gap: 34px; }
  .split-reverse .split-media { order: 0; }

  /* Stacked, so the brown/gold split becomes a top/bottom split. */
  .counter-grid { gap: 72px 26px; padding-top: 52px; }
  .counter img { width: 120px; height: 120px; }
  .counter { padding: 74px 12px 28px; }

  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-contacts { grid-template-columns: 1fr; gap: 22px; }
  .footer-about { grid-template-columns: 1fr; gap: 22px; justify-items: center; text-align: center; }
  .footer-social { justify-content: center; }
  .footer-bottom-inner { justify-content: center; text-align: center; }
  .footer-nav { justify-content: center; }
}

/* ---- Phones ---- */
@media (max-width: 640px) {
  :root { --section-y: 48px; --gutter: 18px; }

  body { font-size: 15.5px; }

  h1 { font-size: 26px; }
  h2, .section-title { font-size: 23px; }
  h3 { font-size: 19px; }
  .page-banner h1 { font-size: 28px; }

  .eyebrow { font-size: 12.5px; letter-spacing: 1.4px; }

  .section-head { margin-bottom: 32px; }

  .btn { padding: 13px 22px; font-size: 12.5px; }

  .header-inner { min-height: 68px; gap: 10px; }
  .brand img { width: 72px; }

  .page-banner { padding-block: 110px 50px; }

  /* Galleries stay two-up so the pictures are still readable. */
  .grid-4, .grid-3, .grid-2,
  .feature-grid, .mv-grid { grid-template-columns: 1fr; }
  .gallery, .gallery-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .masonry-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }
  .masonry-col { gap: 12px; }
  .wide-rows { width: 100%; }
  .photo-row { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }

  .product-carousel { --per-view: 1; --card-gap: 16px; padding-inline: 0; }
  .carousel-nav { width: 38px; height: 38px; }
  .carousel-prev { left: -6px; }
  .carousel-next { right: -6px; }

  .counter-grid { grid-template-columns: repeat(2, 1fr); gap: 52px 14px; padding-top: 38px; }
  .counter { padding: 54px 8px 20px; }
  .counter-value { font-size: 30px; }
  .counter-label { font-size: 12.5px; }
  .counter img { width: 86px; height: 86px; }

  .feature { padding: 24px 20px 28px; }
  .feature-icon img { width: 104px; }

  .mv-grid { gap: 26px; }
  .mv-card { padding: 32px 22px 28px; }
  .mv-card img { width: 96px; margin-bottom: 16px; }
  .mv-card h2 { font-size: 26px; }
  .mv-card p { font-size: 15px; }

  .split { gap: 26px; }
  .text-justify { text-align: left; }   /* justified text looks ragged on a phone */

  .contact-form-card { padding: 26px 20px; }
  .field-row { grid-template-columns: 1fr; gap: 16px; }

  /* 16px is the threshold below which iOS Safari zooms the page when a field
     is focused — keep inputs at 16px on phones so the layout never jumps. */
  .enquiry-form input[type="text"],
  .enquiry-form input[type="tel"],
  .enquiry-form input[type="email"],
  .enquiry-form textarea { font-size: 16px; }

  .form-submit { width: 100%; padding-block: 15px; }

  .popup-panel { padding: 30px 20px 26px; }

  .map-embed iframe { height: 300px; }

  .whatsapp-float {
    width: 50px;
    height: 50px;
    left: 16px;
    bottom: 16px;
  }
  .whatsapp-float svg { width: 26px; height: 26px; }

  .footer-divider span { font-size: 18px; }
  .footer-top { padding-block: 42px 34px; }
}

/* ---- Very small phones (below a 360px handset) ----
   Standard phones (360–430px) keep the two-up galleries and the 2x2 counters. */
@media (max-width: 340px) {
  .gallery, .gallery-4 { grid-template-columns: 1fr; }
  .masonry-gallery { grid-template-columns: 1fr; }
  .photo-row { grid-template-columns: 1fr; }
  .counter-grid { grid-template-columns: 1fr; }
  .brand img { width: 64px; }
  .btn { padding: 12px 16px; letter-spacing: 1px; }
}

/* ==========================================================================
   22. AEO blocks — answer strip, stats, steps, trust, FAQ, link row
   ========================================================================== */

/* Direct-answer strip under the hero */
.answer-strip {
  background: var(--brown);
  padding-block: 20px;
}
.answer-strip p {
  margin: 0;
  color: #f3e7d6;
  font-size: 16px;
  line-height: 1.65;
  text-align: center;
}
.answer-strip strong { color: #fff; }

/* "X is a…" definition line */
.definition-line {
  border-left: 3px solid var(--gold);
  padding: 2px 0 2px 16px;
  margin-bottom: 20px;
  font-size: 15.5px;
  color: var(--ink-strong);
}
.definition-line strong { color: var(--brown); }

/* At a glance */
.glance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.glance {
  text-align: center;
  padding: 28px 18px;
  background: var(--cream);
  border-radius: 8px;
}
.glance-value {
  font-family: var(--font-body);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--gold);
}
.glance-label {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--brown);
  margin-top: 4px;
}
.glance-note { font-size: 14px; margin: 6px 0 0; }

/* How to order */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  counter-reset: step;
}
.step {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 34px 20px 24px;
  box-shadow: var(--shadow-sm);
}
.step-num {
  position: absolute;
  top: -16px;
  left: 20px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.step h3 { font-size: 17px; margin: 0 0 8px; }
.step p { font-size: 14.5px; margin: 0; }

/* Trust signals */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 30px;
  background: var(--cream);
  border-radius: 10px;
}
.trust h3 {
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--gold);
}
.trust p { font-size: 14.5px; margin: 0; }

/* FAQ */
/* Two columns. align-items:start lets each <details> grow on its own when it
   is opened, instead of stretching the box beside it. */
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 14px 24px;
}
.faq {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 22px;
  position: relative;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--brown);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  translate: 0 -60%;
  rotate: 45deg;
  transition: rotate .25s ease;
}
.faq[open] summary::after { rotate: -135deg; translate: 0 -20%; }
.faq summary:hover { background: var(--cream); }
.faq-answer { padding: 0 22px 20px; }
.faq-answer p { margin: 0; font-size: 15px; }

/* Internal link row */
.link-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.link-row a {
  padding: 10px 20px;
  border: 1px solid var(--gold);
  border-radius: 40px;
  font-size: 14.5px;
  color: var(--brown);
  transition: background-color .22s ease, color .22s ease;
}
.link-row a:hover { background: var(--gold); color: #fff; }

@media (max-width: 980px) {
  .glance-grid, .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}

@media (max-width: 640px) {
  .answer-strip p { font-size: 14.5px; text-align: left; }
  .glance-grid, .trust-strip { grid-template-columns: 1fr; }
  .trust-strip { padding: 22px; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .glance-value { font-size: 32px; }
  .faq-list { grid-template-columns: 1fr; gap: 12px; }
  .faq summary { font-size: 15.5px; padding: 15px 44px 15px 16px; }
  .faq-answer { padding: 0 16px 16px; }
  .link-row { justify-content: flex-start; }
  .link-row a { font-size: 13.5px; padding: 9px 16px; }
}