/* ==========================================================================
   MARUTI COCONUTS — Stylesheet
   Palette: deep green, white, subtle gold, natural earth
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  --green-900: #082515;
  --green-800: #0f4023;
  --green-700: #14532d;
  --green-600: #1a6b3c;
  --green-500: #22874d;
  --green-300: #6fbf8d;
  --green-100: #e6f2ea;
  --green-050: #f2f8f4;

  /* Page tint. Kept very light so every existing ink colour still clears
     WCAG AA against it without having to be re-picked. */
  --tint: #eef6ec;

  --gold-700: #7a5e0d;
  --gold-600: #a9821a;
  --gold-500: #c9a227;
  --gold-400: #dcbb4b;
  --gold-300: #e8d38c;
  --gold-100: #faf3dd;

  --earth-800: #4a3626;
  --earth-700: #6b4f36;
  --earth-500: #7d6247;
  --earth-300: #c3ae94;
  --earth-200: #ddd0bb;
  --earth-100: #ece3d6;

  --sand: #f7f2e8;
  --cream: #faf7f0;
  --white: #ffffff;

  --ink: #14211a;
  --ink-soft: #4c5c53;
  --ink-mute: #5f6e65;

  --line: #e3ded2;
  --line-soft: #eee9df;

  --wa: #25d366;
  --wa-dark: #128c4a;

  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(8, 37, 21, .06);
  --shadow-sm: 0 4px 14px rgba(8, 37, 21, .07);
  --shadow: 0 12px 32px rgba(8, 37, 21, .10);
  --shadow-lg: 0 24px 60px rgba(8, 37, 21, .16);

  --container: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  --header-h: 74px;
  --bar-h: 64px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --lift: 0px;

  /* 3D photo interaction. --tilt-perspective must be set on a stage that
     contains the tilted frames, or the rotation reads as a flat squash. */
  --tilt-perspective: 1100px;
  --tilt-max: 7deg;
  --tilt-shift: 10px;
  --tilt-lift: -10px;
  --sheen: .5;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height: 1.68;
  color: var(--ink);
  background: var(--tint);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  color: var(--green-900);
  text-wrap: balance;
}

h3 { font-size: clamp(1.1rem, 1rem + .45vw, 1.32rem); }

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

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

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

a { color: var(--green-700); text-underline-offset: 3px; }

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

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--gold-300); color: var(--green-900); }

/* ---------------------------------------------------------- 3. Utilities */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: fixed;
  top: 10px; left: 50%;
  transform: translate(-50%, -160%);
  z-index: 999;
  background: var(--green-800);
  color: #fff;
  padding: .7rem 1.2rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------- 4. Typography */
.eyebrow {
  margin: 0 0 .9rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.eyebrow--light { color: var(--gold-400); }

.section-title {
  font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.85rem);
  margin-bottom: .6em;
}

.section-lede {
  font-size: clamp(1.03rem, .99rem + .3vw, 1.19rem);
  color: var(--ink-soft);
  max-width: 62ch;
}

.section-head {
  max-width: 70ch;
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}
.section-head .section-title { margin-bottom: .45em; }
.section-head--light .section-title { color: #fff; }
.section-head--light .section-lede { color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------- 5. Sections */
.section { padding-block: var(--section-y); position: relative; }
.section-cream { background: var(--cream); }
.section-sand { background: var(--sand); }
.section-white { background: var(--white); }

/* The page is washed in a light green, and each section sits on a slightly
   different tint of it so the blocks stay readable as blocks. Every one of
   these is a real, testable background-color so contrast testing works. */
.section-tint { background: var(--tint); }
.section-tint-soft { background: #f6fbf4; }
.section-tint-deep { background: #e3f1e0; }

/* The dark green section treatment. The hero is the only place this is still
   used; Why Choose Us and Contact moved onto the light green page tint, so
   these light-on-dark helpers exist for the hero and its overlay. A solid
   background-color is declared alongside the gradients so any element sitting
   on the section resolves to a real, testable colour. */
.section-green {
  background-color: var(--green-900);
  background-image:
    radial-gradient(1100px 520px at 88% -10%, rgba(34, 135, 77, .48), transparent 62%),
    radial-gradient(760px 420px at 0% 108%, rgba(201, 162, 39, .16), transparent 60%),
    linear-gradient(168deg, var(--green-800) 0%, var(--green-900) 100%);
  color: #fff;
}
.section-green .section-title { color: #fff; }
.section-green h3 { color: #fff; }
.section-green a:not(.btn) { color: var(--gold-300); }

/* ------------------------------------------------------------ 6. Buttons */
.btn {
  --btn-bg: var(--green-700);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .82em 1.4em;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: .97rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
  box-shadow: var(--shadow-xs);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }

.btn-ico { width: 1.15em; height: 1.15em; flex: none; }

.btn-primary {
  --btn-bg: linear-gradient(135deg, var(--green-600), var(--green-800));
  --btn-fg: #fff;
  box-shadow: 0 8px 20px rgba(15, 64, 35, .22);
}

.btn-gold {
  --btn-bg: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  --btn-fg: var(--green-900);
  box-shadow: 0 8px 22px rgba(169, 130, 26, .32);
}
.btn-gold:hover { --btn-bg: linear-gradient(135deg, var(--gold-300), var(--gold-500)); }

.btn-wa {
  --btn-bg: linear-gradient(135deg, #2ee06f, var(--wa-dark));
  --btn-fg: #04310f;
  box-shadow: 0 8px 22px rgba(18, 140, 74, .28);
}
.btn-wa:hover { --btn-bg: linear-gradient(135deg, #4cea83, #16a154); }

.btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--green-800);
  --btn-bd: rgba(20, 83, 45, .35);
  box-shadow: none;
}
.btn-outline:hover { --btn-bg: var(--green-050); --btn-bd: var(--green-600); }

.btn-ghost-light {
  --btn-bg: rgba(255, 255, 255, .1);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .45);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
.btn-ghost-light:hover { --btn-bg: rgba(255, 255, 255, .2); --btn-bd: #fff; }

.btn-lg { padding: .95em 1.6em; font-size: 1.01rem; }
.btn-sm { padding: .62em 1.1em; font-size: .89rem; }
.btn-block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: auto;
  padding-top: 1.1rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--green-700);
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
  transition: color .2s var(--ease);
}
.link-arrow::after {
  content: "\2192";
  transition: transform .2s var(--ease);
}
.link-arrow:hover { color: var(--gold-600); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------- 7. Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(8, 37, 21, .08);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
  flex: none;
}
/* The owner's photograph as the brand mark. It is cropped to a circle with
   object-fit, so the source's landscape shape never distorts the face or
   whatever sits in the centre of the frame. */
.brand-mark {
  width: 42px; height: 42px;
  flex: none;
  overflow: clip;
  border-radius: 50%;
  background: var(--green-100);
  border: 1px solid rgba(20, 83, 45, .16);
  box-shadow: 0 1px 3px rgba(8, 37, 21, .18);
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.brand-mark svg { width: 30px; height: 30px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: .005em;
  color: var(--green-900);
  text-transform: uppercase;
}
.brand-tag {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--earth-500);
}

.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.nav-list { display: flex; align-items: center; gap: .25rem; }
.nav-list a {
  display: block;
  padding: .5rem .62rem;
  border-radius: var(--radius-sm);
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: .62rem; right: .62rem; bottom: .22rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s var(--ease);
}
.nav-list a:hover { color: var(--green-700); }
.nav-list a:hover::after,
.nav-list a.is-active::after { transform: scaleX(1); }
.nav-list a.is-active { color: var(--green-800); font-weight: 600; }

.nav-cta { display: flex; align-items: center; gap: .55rem; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  place-items: center;
  gap: 5px;
  flex-direction: column;
  flex: none;
}
.nav-toggle-bar {
  display: block;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: var(--green-800);
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(8, 37, 21, .45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.nav-scrim.is-visible { opacity: 1; }

/* --------------------------------------------------------------- 8. Hero */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(100svh, 860px);
  display: flex;
  align-items: center;
  padding-block: clamp(4.5rem, 11vw, 7.5rem) clamp(5rem, 10vw, 7rem);
  overflow: hidden;
  /* Deep palm-green field so the light hero text keeps its contrast with no
     photograph behind it. */
  background:
    radial-gradient(120% 84% at 14% 6%, rgba(31, 106, 62, .62) 0%, transparent 58%),
    radial-gradient(96% 70% at 92% 92%, rgba(12, 58, 33, .9) 0%, transparent 62%),
    linear-gradient(158deg, #0b3a20 0%, #0f4023 46%, #0a2f1a 100%);
}

/* Hero background photograph: only rendered if a <div class="hero-media"> is
   uncommented in index.html. The gradient above is the intended fallback. */
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

/* Legibility wash. Light enough that the gradient supplies the depth, dark
   enough that white text still clears WCAG AA over the brightest area. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 37, 21, .52) 0%, rgba(8, 37, 21, .28) 38%, rgba(8, 37, 21, .48) 74%, rgba(8, 37, 21, .8) 100%),
    linear-gradient(96deg, rgba(8, 37, 21, .62) 0%, rgba(15, 64, 35, .22) 55%, rgba(15, 64, 35, .06) 100%);
}

.hero-inner { position: relative; max-width: 60rem; }

.hero-eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.35rem;
  padding: .42rem 1rem;
  border: 1px solid rgba(232, 211, 140, .4);
  border-radius: var(--radius-pill);
  background: rgba(201, 162, 39, .14);
  color: var(--gold-300);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero-eyebrow .dot { color: var(--gold-500); }

.hero-brand {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.5rem + 5.4vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 3px 26px rgba(0, 0, 0, .4);
}

.hero-headline {
  margin: .35rem 0 1.15rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.22rem, .95rem + 1.5vw, 2.05rem);
  line-height: 1.24;
  color: var(--gold-300);
  max-width: 24ch;
}

.hero-lede {
  max-width: 54ch;
  font-size: clamp(1.03rem, .98rem + .38vw, 1.22rem);
  color: rgba(255, 255, 255, .9);
  margin-bottom: 1.5rem;
}

.hero-highlight {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 2rem;
  padding: .78rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid rgba(232, 211, 140, .35);
  background: rgba(8, 37, 21, .58);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: clamp(.95rem, .92rem + .2vw, 1.06rem);
  max-width: 100%;
}
.hero-highlight strong { color: var(--gold-300); font-weight: 700; }
.hero-highlight-ico { color: var(--gold-400); flex: none; }
.hero-highlight-ico svg { width: 24px; height: 24px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 2.6rem;
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 44rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.hero-facts li {
  padding: .95rem 1rem;
  background: rgba(8, 37, 21, .48);
  display: flex;
  flex-direction: column;
  gap: .12rem;
}
.hero-fact-k {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  color: var(--gold-300);
  line-height: 1.1;
}
.hero-fact-v {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.hero-credit {
  margin: 1.4rem 0 0;
  font-size: .74rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .5);
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 1.5px solid rgba(255, 255, 255, .4);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: start center;
  padding-top: 8px;
  background: rgba(8, 37, 21, .3);
}
.hero-scroll span {
  width: 3px; height: 8px;
  border-radius: 3px;
  background: var(--gold-300);
  animation: scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(13px); opacity: .25; }
}

/* -------------------------------------------------------------- 9. About */
/* Single column by default: there is no photograph in the markup. If you
   uncomment the <figure class="about-photo"> in index.html, add the class
   "has-photo" to this <div> to restore the two-column layout. */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about-grid.has-photo {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}
.about-media { position: relative; }
.about-photo {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--green-100);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.about-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.about-photo figcaption,
.transport-photo figcaption {
  padding: .7rem 1rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-mute);
  background: var(--white);
  border-top: 1px solid var(--line-soft);
}

/* Sits inline at the top of the About text. If a photograph is added, add
   "has-photo" to the .about-grid div and it moves back to the photo corner. */
.about-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  width: 108px; height: 108px;
  margin-bottom: 1.4rem;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
  color: var(--green-900);
  box-shadow: 0 12px 30px rgba(169, 130, 26, .38);
  text-align: center;
}
.about-badge-year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
}
.about-badge-text {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.about-points {
  display: grid;
  gap: 1.1rem;
  margin: 1.8rem 0 2.1rem;
}
.about-point { display: flex; gap: .9rem; align-items: flex-start; }
.about-point-ico {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--green-100);
  color: var(--green-700);
  border: 1px solid rgba(20, 83, 45, .12);
}
.about-point-ico svg { width: 23px; height: 23px; }
.about-point h3 { margin: 0 0 .18rem; font-size: 1.06rem; }
.about-point p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* Structural wrappers: allow long words/URLs to wrap instead of forcing the
   grid track wider than its share. */
.about-body,
.transport-body,
.enquiry-form,
.step-body { min-width: 0; }

.about-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ------------------------------------------------------------ 10. Supply */
.supply-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.35rem;
  margin-bottom: 2.2rem;
}

.supply-card {
  display: flex;
  flex-direction: column;
  padding: 1.85rem 1.5rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.supply-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: rgba(20, 83, 45, .28);
}
.supply-card--accent {
  background: linear-gradient(160deg, var(--green-800), var(--green-900));
  border-color: transparent;
  color: #fff;
}
.supply-card--accent h3 { color: #fff; }
.supply-card--accent p { color: rgba(255, 255, 255, .8); }
.supply-card--accent .link-arrow { color: var(--gold-300); border-top-color: rgba(255, 255, 255, .16); }
.supply-card--accent .link-arrow:hover { color: #fff; }

.supply-ico {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
  border-radius: 15px;
  background: var(--green-100);
  color: var(--green-700);
  border: 1px solid rgba(20, 83, 45, .12);
}
.supply-ico svg { width: 28px; height: 28px; }
.supply-card--accent .supply-ico {
  background: rgba(232, 211, 140, .16);
  color: var(--gold-300);
  border-color: rgba(232, 211, 140, .3);
}
.supply-card p { font-size: .96rem; color: var(--ink-soft); margin-bottom: 0; }

.notice {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius);
  background: var(--gold-100);
  border: 1px solid rgba(201, 162, 39, .34);
  border-left: 5px solid var(--gold-500);
}
.notice-ico { color: var(--gold-700); flex: none; }
.notice-ico svg { width: 26px; height: 26px; }
.notice h3 { margin: 0 0 .3rem; font-size: 1.08rem; color: var(--earth-800); }
.notice p { margin: 0; color: #5c4a33; font-size: .96rem; }

/* --------------------------------------------------------------- 11. Why */
/* This section sits on a light green, so the cards are white surfaces on a
   pale ground rather than glass on a dark one. The decorative photographs
   hang off the container edges on wide screens and are dropped on narrow
   ones, where there is no room beside the copy. */
/* This section's container is narrower than the rest of the page. At the
   standard 1200px there is barely any page margin on a 1400px screen, and a
   decorative photograph pinned to the edge would have to sit on the copy.
   Narrowing to 1080px buys real margin to hang them in. */
.why-container { max-width: 1080px; }
.why-section { position: relative; }

.why-accent {
  position: absolute;
  z-index: 0;
  border-radius: var(--radius-lg);
  overflow: clip;
  box-shadow: var(--shadow);
  /* The source files are small, so they are shown at a size they can still
     resolve to rather than stretched across the full viewport. */
  width: clamp(88px, 7vw, 122px);
  pointer-events: none;
}
.why-accent img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* The rotate is deliberately shallow: a tilted box's bounding rect is wider
   than the photo, and a steeper angle would eat into the margin it needs. */
.why-accent--one { top: 5%; left: 1.2vw; rotate: -3deg; }
.why-accent--two { bottom: 4%; right: 1.2vw; rotate: 3deg; }

/* Below this the margin is narrower than a photo needs, so they are dropped
   rather than allowed to overlap the cards. */
/* The accents are shown only when the page margin is genuinely wider than the
   card grid, and the threshold carries real headroom on purpose.

   A classic scrollbar costs ~15px of layout width, so a 1360px window lays
   out at 1329px on desktop but 1344px on a tablet with overlay scrollbars.
   Anything keyed close to that boundary renders differently on the two. The
   measurements: at 1329px of layout width the accents cleared the card grid
   by only 10px, and the 6deg tilt grows a 130px accent by roughly 7px per
   side, so they overlapped the heading. At 1409px they clear by 44px, which
   survives the tilt and cannot be flipped by the scrollbar gutter.

   The selector is qualified with [data-tilt] because the generic
   [data-tilt] rule sets `display: block` and sits later in the file, so a bare
   .why-accent here would lose on specificity and the accents would reappear
   on top of the cards at mobile widths. */
@media (max-width: 1439px) {
  .why-accent[data-tilt] { display: none; }
}

.why-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
}

.why-card {
  padding: 1.85rem 1.6rem;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: var(--green-300);
}
.why-ico {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 1.1rem;
  border-radius: 16px;
  background: var(--green-100);
  color: var(--green-700);
  border: 1px solid rgba(20, 83, 45, .12);
}
.why-ico svg { width: 30px; height: 30px; }
.why-card h3 { font-size: 1.09rem; margin-bottom: .35rem; }
.why-card p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.why-card--wide strong { color: var(--green-700); }
.why-card-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }

/* ---------------------------------------------------------- 12. Transport */
/* Single column on small screens. The "has-photo" class is set on the
   .transport-grid div in index.html because a transport photo is now present,
   which is what restores the two-column layout below 1080px. */
.transport-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.transport-grid.has-photo {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
}

.check-list { display: grid; gap: .7rem; margin: 1.6rem 0 2rem; }
.check-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-soft);
  font-size: .99rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314532d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  border: 1px solid rgba(20, 83, 45, .2);
}
.check-list--light li { color: rgba(255, 255, 255, .82); }
.check-list--light li::before {
  background-color: rgba(232, 211, 140, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8d38c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
  border-color: rgba(232, 211, 140, .3);
}

.transport-media { display: grid; gap: 1.1rem; }
.transport-photo {
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--green-100);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.transport-photo img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
/* This is the perspective stage for the main transport photo, matching how
   .fleet-grid stages the vehicle cards. Without it the frame would flatten. */
.transport-photo { perspective: var(--tilt-perspective); }
/* The frame inside does the clipping, so the box can rotate without cropping
   its own corners. */
.transport-photo .tilt-frame--wide { border-radius: calc(var(--radius-lg) - 1px); }

/* Wide plantation/loading shot, set as a banner above the vehicle grid. It is
   deliberately cropped and softened so it reads as atmosphere rather than as
   a second hero, and the light-green tint keeps it inside the page palette. */
.transport-bg {
  position: relative;
  margin: clamp(2.4rem, 5vw, 3.4rem) 0 0;
  border-radius: var(--radius-lg);
  overflow: clip;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--green-100);
  /* The box owns the aspect ratio so the image can be taken out of flow. */
  aspect-ratio: 20 / 7;
}
/* The banner image is absolutely positioned so its overscan never adds
   scrollable overflow to the page. */
.transport-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  --depth-y: 0px;
  transform: translate3d(0, var(--depth-y), 0) scale(1.06);
  will-change: transform;
}
.fleet-title {
  margin: clamp(2.2rem, 4.5vw, 3.2rem) 0 1.4rem;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--green-900);
}

/* Transport fleet strip: the vehicles used for dispatch. */
.fleet {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.fleet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-bottom: 1.5rem;
}
.fleet-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 600;
  color: var(--green-900);
}
.fleet-head p {
  margin: 0;
  font-size: .9rem;
  color: var(--ink-soft);
}
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fleet-card {
  position: relative;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
/* The caption lives inside the figure. The figure clips the photograph to its
   rounded top corners; the tilt frame rotates inside that clip. */
.fleet-card figure {
  position: relative;
  margin: 0;
  background: var(--green-050);
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.fleet-card img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.fleet-card figcaption {
  padding: .7rem .85rem .8rem;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--white);
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 var(--radius) var(--radius);
}
.fleet-card figcaption span {
  display: block;
  margin-top: .12rem;
  font-size: .73rem;
  color: var(--ink-mute);
}

@media (max-width: 960px) { .fleet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fleet-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------- 12b. 3D photo interaction */
/* ------------------------------------------------ 3D for every photograph
   The transport frames are the reference implementation. These give the same
   treatment to the rest of the owner's pictures: the Why Choose Us accents, the
   hero background and the brand mark.

   Two things differ from the transport frames:
   - The elements are already absolutely positioned or flex items, but the
     generic [data-tilt] rule declares `position: relative`. Each rule below
     re-asserts the real position with matching-or-higher specificity, because
     otherwise the generic rule silently un-pins the element.
   - A photograph that fills its box exactly has no room to rotate without
     exposing a corner, so each one is inset past its own edge and the inner
     image carries a small overscan. The clips are already in place. */
.why-section { perspective: 900px; }

.why-accent[data-tilt] {
  position: absolute;
  --tilt-lift: 0px;
  --tilt-max: 6deg;
  --tilt-shift: 6px;
}
.why-accent[data-tilt] > img {
  transform: translate3d(var(--px), var(--py), 0) scale(1.08);
  transition: transform .5s var(--ease);
}
.why-accent[data-tilt].is-tilting > img { transition: transform .12s linear; }

/* The hero covers the whole viewport, so a long perspective keeps the
   rotation subtle instead of fisheyed, and 3deg is enough to read as depth. */
.hero { perspective: 2400px; }
.hero-media[data-tilt] {
  position: absolute;
  /* Bleeds past the hero box to give the rotation somewhere to go; the hero
     clips it, so it never adds page scroll. */
  inset: -5%;
  --tilt-lift: 0px;
  --tilt-max: 3deg;
  --tilt-shift: 16px;
}
.hero-media[data-tilt] img {
  transform: translate3d(var(--px), var(--py), 0) scale(1.1);
  transition: transform .5s var(--ease);
}
/* The legibility wash already sits over the photo, so a specular layer here
   would only muddy it. */
.hero-media[data-tilt]::after { display: none; }

.header-inner { perspective: 600px; }
.brand-mark[data-tilt] {
  --tilt-lift: 0px;
  --tilt-max: 14deg;
  --tilt-shift: 3px;
  box-shadow: 0 2px 6px rgba(8, 37, 21, .22);
}
.brand-mark[data-tilt] > img {
  transform: translate3d(var(--px), var(--py), 0) scale(1.14);
  transition: transform .5s var(--ease);
}
.brand-mark[data-tilt].is-tilting > img { transition: transform .12s linear; }

/* The stage carries the perspective; the frames do the rotating. Keeping them
   separate means a frame can never end up as a flat 2D squash. */
.fleet-grid {
  perspective: var(--tilt-perspective);
}

[data-tilt] {
  --rx: 0deg;
  --ry: 0deg;
  --px: 0px;
  --py: 0px;
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transform:
    translate3d(0, var(--tilt-lift), 0)
    rotateX(var(--rx)) rotateY(var(--ry))
    translate3d(0, 0, 0);
  transition:
    transform .5s var(--ease),
    box-shadow .5s var(--ease);
  box-shadow: var(--shadow);
  will-change: transform;
}
[data-tilt].is-tilting { transition: transform .12s linear; }

/* The photograph shifts against its frame, which is what reads as depth. The
   image is taken out of flow so the 1.06 overscan does not register as
   scrollable overflow inside the frame. */
/* `clip` rather than `hidden`: the overscanned photo is trimmed either way, but
   clip does not create a scrollable overflow region, so the scaled image
   cannot be measured as a page-wide overflow. */
.tilt-frame { position: relative; overflow: clip; transform-style: preserve-3d; }
.tilt-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(var(--px), var(--py), 0) scale(1.06);
  transition: transform .5s var(--ease);
  will-change: transform;
}
[data-tilt].is-tilting .tilt-frame img { transition: transform .12s linear; }

/* Specular sheen, positioned by the pointer like light on glass. */
[data-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    46% 46% at var(--mx) var(--my),
    rgba(255, 255, 255, var(--sheen)),
    rgba(255, 255, 255, 0) 72%);
  transition: opacity .4s var(--ease);
  mix-blend-mode: soft-light;
}
[data-tilt]:hover::after,
[data-tilt]:focus-within::after,
[data-tilt].is-tilting::after { opacity: 1; }

/* Keyboard users get the same cue on focus. */
[data-tilt]:focus-visible {
  outline: 3px solid var(--green-600);
  outline-offset: 3px;
}

/* The wide transport photo keeps its own 16/9-ish crop. */
.tilt-frame--wide { aspect-ratio: 20 / 9; }
.tilt-frame--wide img { aspect-ratio: 20 / 9; object-fit: cover; }

/* The fleet cards are the 3D frames, so their figure must not clip them. */
.fleet-card { overflow: visible; }
.fleet-card figure { overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.fleet-card[data-tilt] { border-radius: var(--radius); }
.fleet-card[data-tilt] figure { border-radius: var(--radius) var(--radius) 0 0; }
.fleet-card[data-tilt] figcaption { border-radius: 0 0 var(--radius) var(--radius); }
.fleet-card[data-tilt] .tilt-frame { aspect-ratio: 4 / 5; }
.fleet-card[data-tilt] .tilt-frame img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ------------------------------------------------------------ 13. Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.gallery-item figure { margin: 0; }

.gallery-item figure {
  position: relative;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--green-050);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding: 2.4rem .95rem .85rem;
  background: linear-gradient(180deg, rgba(8, 37, 21, 0) 0%, rgba(8, 37, 21, .88) 58%);
  color: #fff;
}
.gallery-item figcaption strong { font-size: .97rem; font-weight: 600; }
.gallery-item figcaption span { font-size: .74rem; color: rgba(255, 255, 255, .7); }

.gallery-item--tall { grid-row: span 2; }
.gallery-item--tall img { height: calc(100% - 0px); aspect-ratio: auto; }
.gallery-item--tall figure { display: flex; flex-direction: column; }
.gallery-item--tall .fig-wrap, .gallery-item--tall img { flex: 1; }



/* ----------------------------------------------------------- 15. Enquiry */
.enquiry-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 4.5vw, 3.8rem);
  align-items: start;
}

.enquiry-perks { display: grid; gap: .65rem; margin: 1.6rem 0 2.2rem; }
.enquiry-perks li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .97rem;
  color: var(--ink-soft);
}
.enquiry-perks span {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green-600);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
}

.enquiry-alt {
  display: grid;
  gap: .6rem;
  padding: 1.4rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
}
.enquiry-alt-title {
  margin: 0 0 .3rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--earth-500);
}

.enquiry-card {
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.enquiry-form-title {
  font-size: 1.3rem;
  margin-bottom: 1.4rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line-soft);
}

.form-alert {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  margin-bottom: 1.3rem;
  padding: .9rem 1.05rem;
  border-radius: var(--radius-sm);
  background: #fdf0ee;
  border: 1px solid #f0c3ba;
  color: #8f2f1c;
  font-size: .93rem;
  font-weight: 500;
}

.field { margin-bottom: 1.1rem; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.field label,
.fieldset legend {
  display: block;
  margin-bottom: .42rem;
  font-size: .89rem;
  font-weight: 600;
  color: var(--ink);
}
.req { color: #b3381f; }
.opt { color: var(--ink-mute); font-weight: 500; font-size: .84rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .82rem .95rem;
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 108px; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c5c53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 18px 18px;
  padding-right: 2.6rem;
}
.field input::placeholder,
.field textarea::placeholder { color: #9aa8a0; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--earth-300); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--green-600);
  box-shadow: 0 0 0 4px rgba(26, 107, 60, .13);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 1px; }

.field-hint { margin: .38rem 0 0; font-size: .82rem; color: var(--ink-mute); }
.field-error {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: .38rem 0 0;
  font-size: .84rem;
  font-weight: 600;
  color: #a5351b;
}
.field-error::before { content: "\26A0"; }

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: #c9502f;
  background: #fdf6f4;
}
.field.is-invalid input:focus,
.field.is-invalid select:focus,
.field.is-invalid textarea:focus { box-shadow: 0 0 0 4px rgba(201, 80, 47, .15); }

.fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
.radio-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.radio-chip { position: relative; margin: 0; cursor: pointer; }
.radio-chip input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.radio-chip span {
  display: block;
  padding: .7rem 1.2rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--cream);
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: all .2s var(--ease);
}
.radio-chip input:hover + span { border-color: var(--earth-300); }
.radio-chip input:checked + span {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
}
.radio-chip input:focus-visible + span { outline: 3px solid var(--gold-500); outline-offset: 2px; }

#enquirySubmit { margin-top: .6rem; }

.form-footnote {
  margin: .95rem 0 0;
  font-size: .9rem;
  font-weight: 500;
  color: var(--green-800);
  text-align: center;
}
.form-footnote--muted {
  margin-top: .5rem;
  font-size: .8rem;
  font-weight: 400;
  color: var(--ink-mute);
}

/* -------------------------------------------------------------- 15. Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.35rem;
  counter-reset: step;
  margin-bottom: 2.6rem;
}
.step {
  position: relative;
  padding: 2.6rem 1.5rem 1.6rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(20, 83, 45, .26);
}
.step::after {
  content: "";
  position: absolute;
  top: 0; left: 1.5rem; right: 1.5rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--gold-400), var(--green-500));
}
.step-num {
  position: absolute;
  top: -22px; left: 1.5rem;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--green-600), var(--green-800));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.24rem;
  box-shadow: 0 6px 16px rgba(15, 64, 35, .28);
}
.step h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.step p { margin: 0; font-size: .94rem; color: var(--ink-soft); }

.steps-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.6rem 1.8rem;
  border-radius: var(--radius-lg);
  background: var(--green-050);
  border: 1px solid rgba(20, 83, 45, .16);
}
.steps-cta p { margin: 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--green-900); }
.steps-cta .about-actions { margin: 0; }

/* ------------------------------------------------------------ 16. Contact */
.section-contact { padding-block: var(--section-y); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(1.5rem, 3.5vw, 2.6rem);
  align-items: start;
}

.contact-card,
.contact-aside {
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.contact-aside h3 {
  font-size: 1.12rem;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.contact-aside .btn { margin-top: 1.4rem; }

.contact-list { margin: 1.8rem 0; display: grid; gap: 0; }
.contact-row {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 1rem;
  padding: .85rem 0;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}
.contact-row:last-child { border-bottom: 1px solid var(--line-soft); }
.contact-row dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-700);
}
.contact-row dd { margin: 0; font-size: 1.05rem; color: var(--ink); font-weight: 500; }
.contact-link { color: var(--green-700); text-decoration: none; border-bottom: 2px solid var(--gold-500); }
.contact-link:hover { color: var(--green-900); }

.contact-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.contact-note {
  margin: 1.5rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-soft);
  font-size: .92rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------- 17. Footer */
.site-footer {
  background: var(--green-900);
  color: rgba(255, 255, 255, .74);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 3px solid var(--gold-600);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr) minmax(0, 1.05fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  padding-bottom: 2.8rem;
}

.footer-name {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.footer-tagline {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(1rem, .95rem + .35vw, 1.18rem);
  color: var(--gold-300);
  line-height: 1.4;
}

.footer-h {
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.footer-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }
.footer-nav a {
  display: inline-block;
  padding: .18rem 0;
  color: rgba(255, 255, 255, .78);
  font-size: .95rem;
  text-decoration: none;
  transition: color .18s var(--ease);
}
.footer-nav a:hover { color: var(--gold-300); }

.footer-contact address { font-style: normal; display: grid; gap: .3rem; margin-bottom: 1.2rem; }
.footer-block { font-size: .98rem; }
.footer-phone {
  margin-top: .35rem;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  text-decoration: none;
  letter-spacing: .01em;
}
.footer-phone:hover { color: var(--gold-300); }
.footer-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
  color: rgba(255, 255, 255, .58);
}
.footer-bottom p { margin: 0; }

/* --------------------------------------- 18. Floating + mobile bar */
.fab-wa {
  position: fixed;
  right: clamp(14px, 2.5vw, 26px);
  bottom: calc(var(--bar-h) + 18px);
  z-index: 180;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.15rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #2ee06f, var(--wa-dark));
  color: #04310f;
  font-weight: 700;
  font-size: .94rem;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(18, 140, 74, .42);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
  animation: fabIn .5s var(--ease) .8s both;
}
.fab-wa:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 34px rgba(18, 140, 74, .5); }
.fab-wa svg { width: 27px; height: 27px; flex: none; }
.fab-wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(46, 224, 111, .55);
  animation: fabPulse 2.8s var(--ease) 2s infinite;
  pointer-events: none;
}
@keyframes fabPulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 224, 111, .5); }
  70% { box-shadow: 0 0 0 18px rgba(46, 224, 111, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 224, 111, 0); }
}
@keyframes fabIn { from { opacity: 0; transform: translateY(20px) scale(.9); } }

.mobile-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 190;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 22px rgba(8, 37, 21, .12);
}
.mobile-bar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  min-height: var(--bar-h);
  padding: .5rem;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--white);
  color: var(--green-800);
}
.mobile-bar-btn svg { width: 21px; height: 21px; }
.mobile-bar-btn--call { color: var(--green-800); }
.mobile-bar-btn--wa { color: #0a6b3a; background: #eafaf0; }
.mobile-bar-btn:active { background: var(--green-100); }

/* --------------------------------------------------------- 19. Reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .68s var(--ease), transform .68s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .06s; }
.reveal:nth-child(3) { transition-delay: .12s; }
.reveal:nth-child(4) { transition-delay: .18s; }
.reveal:nth-child(5) { transition-delay: .24s; }
.reveal:nth-child(6) { transition-delay: .3s; }
.reveal:nth-child(7) { transition-delay: .36s; }
.hero-inner .reveal:nth-child(2) { transition-delay: .08s; }
.hero-inner .reveal:nth-child(3) { transition-delay: .16s; }
.hero-inner .reveal:nth-child(4) { transition-delay: .24s; }
.hero-inner .reveal:nth-child(5) { transition-delay: .32s; }
.hero-inner .reveal:nth-child(6) { transition-delay: .4s; }
.hero-inner .reveal:nth-child(7) { transition-delay: .48s; }

.no-js .reveal { opacity: 1; transform: none; }

/* ---------------------------------------------------- 20. Responsive */
@media (max-width: 1080px) {
  .supply-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-media { max-width: 480px; }
  .about-badge { width: 92px; height: 92px; }
  .about-badge-year { font-size: 1.42rem; }
}

@media (max-width: 960px) {
  /* minmax(0, 1fr) rather than 1fr: a bare 1fr track has an `auto` minimum,
     so a single long unbreakable label inside it can push the whole grid
     (and the page) wider than the viewport. */
  .enquiry-grid,
  .transport-grid,
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .enquiry-aside { max-width: 620px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item--tall { grid-row: span 1; }
  .gallery-item--tall img { aspect-ratio: 4 / 3; }
}

/* Between the desktop nav and the drawer breakpoint the seven nav links plus
   the call button are wider than the container, which pushes the header (and
   the page) past the viewport. Tighten the rhythm rather than dropping links. */
@media (max-width: 1200px) and (min-width: 1081px) {
  .site-nav { gap: .9rem; }
  .nav-list { gap: 0; }
  .nav-list a { padding-inline: .45rem; font-size: .95rem; }
  .nav-cta .btn { padding-inline: 1.05em; font-size: .92rem; }
}

/* The inline nav needs roughly 1000px of container before it fits without
   squeezing the labels, so below that the drawer takes over. */
@media (max-width: 1080px) {
  :root { --header-h: 66px; }

  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    z-index: 160;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 1rem var(--gutter) 1.6rem;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  }
  .site-nav.is-open { transform: none; opacity: 1; visibility: visible; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a {
    padding: .9rem .4rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }
  .nav-list a::after { display: none; }
  .nav-list a.is-active { color: var(--green-700); }

  .nav-cta { flex-direction: column; align-items: stretch; margin-top: 1.2rem; }
  .nav-cta .btn { width: 100%; padding: .9em 1.2em; font-size: 1rem; }
  .nav-cta .btn-outline-light { --btn-fg: var(--green-800); --btn-bd: rgba(20, 83, 45, .35); }
}

@media (max-width: 720px) {
  body { padding-bottom: var(--bar-h); }

  .mobile-bar { display: grid; }

  .fab-wa {
    bottom: calc(var(--bar-h) + 14px);
    right: 14px;
    padding: .8rem;
  }
  .fab-wa-label { display: none; }
  .fab-wa svg { width: 26px; height: 26px; }

  .hero { min-height: 0; padding-block: 3.6rem 4.6rem; }
  .hero-scroll { display: none; }
  .hero-brand { letter-spacing: .02em; }
  .hero-headline { max-width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-credit { font-size: .7rem; }

  .supply-grid,
  .steps,
  .why-grid,
  .field-row { grid-template-columns: minmax(0, 1fr); }

  .about-badge { width: 92px; height: 92px; }
  .about-badge-year { font-size: 1.42rem; }

  .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-row { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .contact-row dt { font-size: .72rem; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .footer-nav ul { grid-template-columns: 1fr 1fr; }
  .steps-cta { flex-direction: column; align-items: flex-start; }
  .steps-cta .about-actions { width: 100%; }
  .steps-cta .btn { flex: 1 1 100%; }
  .contact-actions .btn { flex: 1 1 100%; }
  .footer-actions .btn { flex: 1 1 auto; }
}

/* Very narrow phones are the one place where a single-line button label can
   be wider than the space available, so allow button copy to wrap and trim
   the horizontal padding instead of letting the label force an overflow. */
@media (max-width: 480px) {
  .btn { white-space: normal; padding-inline: 1.05em; text-align: center; }
  .btn-block { width: 100%; }
  .enquiry-alt > *,
  .about-actions > *,
  .hero-actions > *,
  .steps-cta > *,
  .contact-actions > *,
  .footer-actions > * { min-width: 0; }
}

@media (max-width: 400px) {
  .footer-nav ul { grid-template-columns: 1fr; }
  .hero-facts { grid-template-columns: minmax(0, 1fr); }
  /* The header must never push the hamburger past the viewport edge. */
  .header-inner { gap: .7rem; }
  .brand { gap: .5rem; min-width: 0; }
  .brand-text { min-width: 0; }
  .brand-name { font-size: 1rem; }
  .brand-tag { display: none; }
  .nav-toggle { width: 44px; height: 44px; }
}

/* ------------------------------------------------ 21. Motion & print */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .fab-wa::after { display: none; }

  /* Every 3D effect is removed outright, not just shortened: a flattened
     frame is what a motion-sensitive user is asking for. */
  [data-tilt] {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
    will-change: auto;
  }
  [data-tilt]::after { display: none !important; }
  .tilt-frame img,
  .why-accent[data-tilt] > img,
  .hero-media[data-tilt] img,
  .brand-mark[data-tilt] > img,
  .transport-bg img {
    transform: none !important;
    will-change: auto;
  }
}

@media print {
  .site-header, .nav-toggle, .fab-wa, .mobile-bar, .hero-scroll, .nav-scrim { display: none !important; }
  body { padding: 0; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
  .reveal { opacity: 1 !important; transform: none !important; }
  [data-tilt] { transform: none !important; box-shadow: none !important; }
  [data-tilt]::after { display: none !important; }
  .tilt-frame img, .why-accent[data-tilt] > img, .hero-media[data-tilt] img,
  .brand-mark[data-tilt] > img, .transport-bg img { transform: none !important; }
  .hero-media, .hero-overlay { display: none; }
  .hero-brand, .hero-headline, .hero-lede { color: #000; text-shadow: none; }
}