/* ==========================================================================
   MARA COFFEE EXPORTS — DESIGN SYSTEM
   Visual language reproduced from the "Milky" dairy template
   (Maracoffee-redesign/dairy-website-template): same palette, type scale,
   container widths, gutters, radii, shadows and component treatments.

   Written framework-free on purpose: the template ships Bootstrap 5 + jQuery
   3.4.1 + Owl Carousel + WOW.js + counterup + parallax + lightbox + Font
   Awesome 5.10 (~400 KB). This file reproduces the rendered result without
   any of it. See REVAMP2-PLAN.md section 2.

   RULES: no gradients. Ever.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TYPEFACES
   Libre Baskerville for headings, Open Sans for body — the same pair the
   template loads. They are requested from <head> rather than @imported here,
   because an @import is only discovered once this file has downloaded.
   See includes/header.php.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. TOKENS
   The four template colours are verbatim. Three derived tokens exist only to
   meet WCAG AA for text (see REVAMP2-PLAN.md "colour adjustments").
   -------------------------------------------------------------------------- */
:root {
  /* Template palette — verbatim */
  --primary: #5b8c51;
  --secondary: #eddd5e;
  --light: #f7f7f7;
  --dark: #404a3d;

  /* Text-safe derivations.
     #5B8C51 on white = 3.95:1 and #777 on white = 4.48:1, so both fail AA
     for body copy. These keep the same hue and clear 4.5:1. */
  --primary-text: #46763d;   /* green text on white — 5.36:1 */
  --primary-deep: #3f6a37;   /* green fill that carries white text — 6.31:1 */
  --body-text: #6e6e6e;      /* body copy on white — 5.10:1 */

  --ink: #212529;            /* Bootstrap bg-dark */
  --footer-text: #b0b9ae;    /* template footer copy — 7.64:1 on --ink */
  --line: #ced4da;
  --danger: #b3261e;
  --success: #1e6b3a;

  /* Solid scrims used to hold white text over photography. Not gradients. */
  --scrim: rgba(0, 0, 0, .55);
  --scrim-strong: rgba(0, 0, 0, .62);

  --shadow-card: 0 0 45px rgba(0, 0, 0, .07);
  --shadow-badge: 0 0 60px rgba(0, 0, 0, .1);
  --shadow-nav: 0 .25rem .75rem rgba(0, 0, 0, .08);

  --radius: 8px;
  --gutter: 1.5rem;
  --section-y: 3rem;

  --sans: "Open Sans", Arial, sans-serif;
  --serif: "Libre Baskerville", Georgia, serif;

  --ease: .5s;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--body-text);
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
}

h1, .h1 { font-size: calc(1.575rem + 1.9vw); }
h2, .h2 { font-size: calc(1.425rem + 1.5vw); }
h3, .h3 { font-size: calc(1.275rem + 1vw); }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }

@media (min-width: 1200px) {
  h1, .h1 { font-size: 2.5rem; }
  h2, .h2 { font-size: 2rem; }
  h3, .h3 { font-size: 1.75rem; }
  h4, .h4 { font-size: 1.5rem; }
}

.display-1 { font-size: calc(1.625rem + 4.5vw); font-weight: 700; line-height: 1.2; }
.display-3 { font-size: calc(1.525rem + 3.3vw); font-weight: 700; line-height: 1.2; }
.display-6 { font-size: calc(1.375rem + 1.5vw); font-weight: 700; line-height: 1.2; }

@media (min-width: 1200px) {
  .display-1 { font-size: 5rem; }
  .display-3 { font-size: 4rem; }
  .display-6 { font-size: 2.5rem; }
}

p { margin-top: 0; margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary-text); text-decoration: underline; }
a:hover { color: var(--primary-deep); }

img { vertical-align: middle; }
img { max-width: 100%; height: auto; }

/* An inline <svg> that carries only a viewBox has no intrinsic size, so it
   falls back to the 300x150 replaced-element default and is then shrunk by
   whatever flex container holds it. That produced the squeezed topbar phone
   block and the full-width "View all insights" arrow. Every icon now also
   carries width/height attributes as a floor, and this is the ceiling: any
   component rule with higher specificity (.service-icon svg, .back-to-top svg,
   .whatsapp-float svg, ...) still wins. */
svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* Anchors must clear the sticky bar, otherwise a jump from an in-page link or
   a scroll-spy target lands with the heading hidden underneath it. The bar is
   ~76px tall plus a little air. */
:target, [id] { scroll-margin-top: 6rem; }

ul, ol { margin-top: 0; margin-bottom: 1rem; padding-left: 2rem; }
hr { margin: 1rem 0; border: 0; border-top: 1px solid rgba(0, 0, 0, .1); }

:focus-visible { outline: 3px solid var(--primary-deep); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .page-header :focus-visible { outline-color: var(--secondary); }

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

.skip-link {
  position: absolute; left: .5rem; top: -4rem; z-index: 200;
  padding: .75rem 1.25rem; border-radius: var(--radius);
  background: var(--primary-deep); color: #fff; font-weight: 600;
  text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: .5rem; color: #fff; }

/* --------------------------------------------------------------------------
   3. LAYOUT — container widths and gutters exactly as Bootstrap 5
   -------------------------------------------------------------------------- */
.container, .container-fluid, .container-xxl {
  width: 100%;
  padding-right: .75rem;
  padding-left: .75rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

@media (min-width: 1400px) { .container-xxl { max-width: 1320px; } }
@media (min-width: 1200px) { .container-xxl { max-width: 1140px; } }
@media (min-width: 992px)  { .container-xxl { max-width: 960px; } }
@media (min-width: 768px)  { .container-xxl { max-width: 720px; } }
@media (min-width: 576px)  { .container-xxl { max-width: 540px; } }

.row {
  --gutter-x: var(--gutter);
  --gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--gutter-y) * -1);
  /* The negative margin always matches the container's own .75rem padding.
     Bootstrap ties it to --gutter-x instead, which makes a .g-5 row 24px
     wider than its container and produces a horizontal scrollbar on phones.
     Here --gutter-x only sets the column padding, so the row can never grow
     past the container box. */
  margin-right: -.75rem;
  margin-left: -.75rem;
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--gutter-x) / 2);
  padding-left: calc(var(--gutter-x) / 2);
  margin-top: var(--gutter-y);
}

.g-0 { --gutter-x: 0; --gutter-y: 0; }
.g-2 { --gutter-x: .5rem; --gutter-y: .5rem; }
.g-3 { --gutter-x: 1rem;  --gutter-y: 1rem; }
.g-4 { --gutter-x: 1.5rem; --gutter-y: 1.5rem; }
.g-5 { --gutter-x: 3rem;  --gutter-y: 3rem; }
.gx-0 { --gutter-x: 0; }  .gy-0 { --gutter-y: 0; }
.gx-2 { --gutter-x: .5rem; }  .gy-2 { --gutter-y: .5rem; }
.gx-3 { --gutter-x: 1rem; }   .gy-3 { --gutter-y: 1rem; }
.gx-4 { --gutter-x: 1.5rem; } .gy-4 { --gutter-y: 1.5rem; }
.gx-5 { --gutter-x: 3rem; }   .gy-5 { --gutter-y: 3rem; }

/* Columns */
.col      { flex: 0 0 auto; width: 100%; }
.col-6    { flex: 0 0 auto; width: 50%; }
.col-12   { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
  .col-sm-4  { flex: 0 0 auto; width: 33.33333%; }
  .col-sm-6  { flex: 0 0 auto; width: 50%; }
  .col-sm-8  { flex: 0 0 auto; width: 66.66667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
  .col-md-6  { flex: 0 0 auto; width: 50%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.33333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.66667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.33333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.66667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 1200px) {
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.33333%; }
}

.offset-lg-2 { }
@media (min-width: 992px) { .offset-lg-2 { margin-left: 16.66667%; } }

@media (min-width: 992px) {
  .order-lg-first { order: -1; }
  .order-lg-last  { order: 1; }
}

/* --------------------------------------------------------------------------
   4. SPACING UTILITIES (only the values the pages use)
   -------------------------------------------------------------------------- */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }  .mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; } .mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; }
.me-2 { margin-right: .5rem !important; } .me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.ms-3 { margin-left: 1rem !important; }  .mx-auto { margin-left: auto !important; margin-right: auto !important; }
.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }   .p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-3 { padding-top: 1rem !important; } .pt-5 { padding-top: 3rem !important; }
.pb-3 { padding-bottom: 1rem !important; } .pb-5 { padding-bottom: 3rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.px-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.ps-4 { padding-left: 1.5rem !important; } .ps-5 { padding-left: 3rem !important; }
.pe-0 { padding-right: 0 !important; }

/* Section rhythm: the template wraps every block in .container-xxl.py-5 */
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-lg { padding-top: 4.5rem; padding-bottom: 4.5rem; }
@media (min-width: 992px) { .section-lg { padding-top: 6rem; padding-bottom: 6rem; } }

/* --------------------------------------------------------------------------
   5. COLOUR + TYPE UTILITIES
   -------------------------------------------------------------------------- */
.bg-white    { background-color: #fff; }
.bg-light    { background-color: var(--light); --section-bg: var(--light); }
.bg-secondary{ background-color: var(--secondary); --section-bg: var(--secondary); }
.bg-primary  { background-color: var(--primary-deep); }
.bg-dark     { background-color: var(--ink); }

.text-white  { color: #fff; }
.text-light  { color: var(--light); }
.text-dark   { color: var(--dark); }
.text-primary{ color: var(--primary-text); }
.text-body   { color: var(--dark); }
.text-center { text-align: center; }
.text-start  { text-align: left; }
.text-end    { text-align: right; }
@media (min-width: 992px) { .text-lg-end { text-align: right; } }

.fs-4 { font-size: calc(1.275rem + .3vw); }
.fs-5 { font-size: 1.25rem; }
.fs-6 { font-size: 1rem; }
@media (min-width: 1200px) { .fs-4 { font-size: 1.5rem; } }

.fw-normal { font-weight: 400 !important; }
.fw-semi-bold { font-weight: 500 !important; }
.fw-bold { font-weight: 700 !important; }

.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.flex-column { flex-direction: column !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.mx-auto-centered { margin-left: auto; margin-right: auto; }

.position-relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.border-bottom { border-bottom: 1px solid var(--line); }
.border-0 { border: 0 !important; }

.rounded { border-radius: var(--radius) !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 50rem !important; }

.img-fluid { max-width: 100%; height: auto; }
.fit-cover { width: 100%; height: 100%; object-fit: cover; }

/* <picture> has to participate in layout so the <img> can fill a media box */
picture { display: block; }
.fill-media { overflow: hidden; }
.fill-media > picture, .fill-media > picture > img { width: 100%; height: 100%; }
.fill-media > picture > img { object-fit: cover; }

/* --------------------------------------------------------------------------
   6. BUTTONS — template .btn + .btn-secondary + .rounded-pill
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dark);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out,
              border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn:hover { text-decoration: none; }

.btn-secondary {
  color: var(--dark);
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.btn-secondary:hover { background-color: #e3d24c; border-color: #e3d24c; color: var(--dark); }

.btn-primary {
  color: var(--light);
  background-color: var(--primary-deep);
  border-color: var(--primary-deep);
}
.btn-primary:hover { background-color: #33562d; border-color: #33562d; color: #fff; }

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

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

.btn-square {
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 400; border-radius: 50%;
}
.btn-lg-square { width: 48px; height: 48px; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

.link-plain { color: inherit; text-decoration: none; }
.link-plain:hover { color: inherit; }

/* Small chevron used by footer links, exactly as the template's ::before */
.chevron::before {
  content: "";
  display: inline-block;
  width: .45em; height: .45em;
  margin-right: .625rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  vertical-align: .12em;
}

/* --------------------------------------------------------------------------
   7. FORMS
   -------------------------------------------------------------------------- */
.form-control {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dark);
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(91, 140, 81, .2);
  /* No `outline: none` here. It was inherited from Bootstrap and, at
     (0,2,0) against a universal (0,1,0) :focus-visible rule, it killed the
     only real focus indicator on every input — leaving just a faint 0.2rem
     green glow that fails WCAG 2.4.11 on a white field. */
}
textarea.form-control { min-height: 160px; resize: vertical; }

.form-label {
  display: inline-block;
  margin-bottom: .35rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--dark);
}
.form-hint { display: block; margin-top: .35rem; font-size: .82rem; }
.form-field-error { color: var(--danger); }
.form-control[aria-invalid="true"] { border-color: var(--danger); }

.form-floating { position: relative; }
.form-floating > .form-control { padding: 1.375rem .75rem .5rem; }
.form-floating > label {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: .75rem;
  pointer-events: none;
  color: var(--body-text);
  transition: opacity .1s ease-in-out, transform .1s ease-in-out;
  transform-origin: 0 0;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  opacity: .7;
  transform: scale(.82) translateY(-.35rem);
}

.form-alert {
  padding: .875rem 1.25rem;
  border-radius: var(--radius);
  font-size: .95rem;
}
.form-alert-success { background: #e6f2ea; color: var(--success); }
.form-alert-error { background: #fbeae9; color: var(--danger); }
.form-alert:empty { display: none; }

/* Contact page — the detail column next to the form. */
.contact-details { padding: 2rem; border-radius: var(--radius); background: var(--light); height: 100%; }
.contact-details__list { margin: 0 0 2rem; padding: 0; list-style: none; }
.contact-details__list li {
  display: flex; align-items: flex-start; gap: .875rem;
  padding-bottom: 1.125rem; margin-bottom: 1.125rem;
  border-bottom: 1px solid #e2e2e2;
}
.contact-details__list li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.wa-glyph { fill: currentColor; stroke: none; }
.contact-details__list svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .2rem; color: var(--primary-text); }
.contact-details__list span { display: flex; flex-direction: column; font-size: .95rem; }
.contact-details__list strong { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-text); margin-bottom: .15rem; }
.contact-details__list a { display: inline-flex; align-items: center; min-height: 24px; color: var(--dark); }
.contact-details__list a:hover { color: var(--primary-text); }
.contact-details__note { padding-top: 1.5rem; border-top: 1px solid #e2e2e2; font-size: .95rem; }

/* Farms page — the estate name list inside the "our own ground" section.
   The names are joined into one sentence rather than set as cards: a card per
   estate would mean a box of padding around each name, which is the
   overcrowding this site avoids. measure caps the line length so the
   comma-separated names stay readable instead of running the full width of a
   1440px screen. */
#estates-h ~ p { max-width: 68ch; }

/* Contact page — the Google Maps frame.
   The wrapper owns the height and the iframe is pinned to it with inset:0.
   Sizing the iframe with height:100% instead would depend on the wrapper having
   a definite height for the percentage to resolve against, which is exactly how
   the hero image collapsed to its intrinsic ratio on narrow screens. inset:0 has
   no such dependency.

   Height comes from clamp() rather than aspect-ratio. aspect-ratio:4/3 plus a
   min-height was tried first and is wrong: the ratio sets height from width,
   min-height then overrides that height, and the ratio re-derives the width
   from the new height. At 360px the box became 400px wide inside a 328px column
   and pushed 79px of horizontal scroll onto the page. A plain clamp() only ever
   constrains the cross axis, so it cannot widen the box. */
.map-embed {
  position: relative;
  overflow: hidden;
  height: clamp(280px, 38vw, 460px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: #e9e9ec;
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   8. TOPBAR — template: full-bleed dark strip, yellow phone block right

   Root cause of the "squeezed" contact item, fixed rather than padded around:
   the phone block is an inline-flex row whose icon had no intrinsic size, so
   the icon claimed 300px of the row's width and flex-shrink squeezed both the
   icon and the number. Sizing the icon (see section 2) is the actual fix. The
   remaining rules here give the two groups room to breathe and stop the strip
   wrapping into a ragged two-line block at awkward widths.
   -------------------------------------------------------------------------- */
.topbar { background-color: var(--ink); color: var(--footer-text); font-size: .9rem; }
.topbar-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem 2rem;
  min-height: 46px; padding: .25rem 0;
}
.topbar a { color: var(--light); text-decoration: none; }
.topbar a:hover { color: var(--secondary); }
.topbar-list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .375rem 1.75rem;
  margin: 0; padding: 0; list-style: none;
}
.topbar-list li { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.topbar-list svg { color: var(--secondary); }
.topbar-call {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .5rem 1.25rem;
  background-color: var(--secondary);
  color: var(--dark); font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  /* Never let the row compress the number; the strip may wrap instead. */
  flex: none;
}
.topbar-call:hover { background-color: #e3d24c; color: var(--dark); }
.topbar-call svg { color: var(--dark); }
/* .topbar a is (0,1,1) and would beat .topbar-call's (0,1,0), leaving the
   number white on the yellow block — 1.3:1. Match the specificity. */
.topbar a.topbar-call, .topbar a.topbar-call:hover { color: var(--dark); }

/* Between the two breakpoints there is not enough width for the trade name,
   the hours and the phone on one line. Centre the two tidy rows rather than
   letting flex-wrap break mid-item. */
@media (max-width: 1199.98px) {
  .topbar-inner { justify-content: center; }
}
@media (max-width: 991.98px) { .topbar { display: none; } }

/* --------------------------------------------------------------------------
   9. NAVBAR — template: white, sticky, slides away on scroll

   Root cause of the links reading as one long sentence: the desktop bar was
   laid out as a flex row from 992px, but eight links plus the brand and the
   pill need roughly 1300px. Below that width the links were flex-shrinking
   into each other with no breathing room, because `.nav-links a` had no
   `flex: none` and no `white-space: nowrap`.

   The fix is the breakpoint, not extra margin. The inline bar now starts at
   1200px, where the content genuinely fits; between 992 and 1199 the burger
   menu is used, which is what a visitor at that width would expect anyway.
   Spacing is expressed as a gap rather than per-item margins so the rhythm is
   even and the last item needs no correction.
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: -100px;
  z-index: 100;
  background-color: #fff;
  padding: .5rem 1.5rem;
  transition: top var(--ease), box-shadow var(--ease);
}
@media (min-width: 1200px) { .site-nav { padding: .5rem 3rem; } }
.site-nav.is-stuck { top: 0; box-shadow: var(--shadow-nav); }

.site-nav-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1320px; margin: 0 auto;
}

.brand {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .3125rem 0; margin-right: 1rem;
  text-decoration: none;
  flex: none;
}
.brand-mark {
  display: grid; gap: 3px; width: 26px; flex: none;
}
.brand-mark span { display: block; height: 4px; border-radius: 2px; background: var(--primary-deep); }
.brand-mark span:first-child { width: 26px; }
.brand-mark span:last-child { width: 17px; background: var(--secondary); }
.brand-words { display: flex; flex-direction: column; line-height: 1.05; }
.brand-words strong {
  font-family: var(--serif); font-weight: 700; font-size: 1.3rem;
  letter-spacing: .01em; color: var(--dark);
}
.brand-words small {
  font-size: .7rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--primary-text);
}

/* Mobile panel: stacked links with hairline separators. */
.nav-links { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.nav-links a {
  position: relative;
  display: block;
  padding: 12px 0;
  color: var(--dark);
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
}
.nav-links a + a { border-top: 1px solid #eee; }
.nav-links a:hover { color: var(--primary-text); }

/* --------------------------------------------------------------------------
   ACTIVE NAV STATE

   One rule serves all three cases, so the indicator can never drift between
   the current page, the section being scrolled through, and the focused link:

     [aria-current]           the page you are on (server-rendered)
     .is-current              the section currently in view (scroll-spy)
     :hover / :focus-visible  pointer and keyboard

   The bar is a ::after pinned to the bottom edge of the link box rather than a
   text-decoration, so its width and position are unaffected by the text
   metrics and it stays aligned when a label wraps.
   -------------------------------------------------------------------------- */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 3px; border-radius: 2px;
  background: var(--primary-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease, background-color .28s ease;
}
.nav-links a:hover::after { transform: scaleX(1); background: var(--primary); }
.nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-links a[aria-current] { color: var(--primary-text); font-weight: 600; }
.nav-links a[aria-current]::after {
  transform: scaleX(1);
  background: var(--primary-deep);
}
.nav-links a.is-current { color: var(--primary-text); font-weight: 600; }

/* The hover bar is the same colour as the resting text, so a hover must not
   compete with the active marker. */
.nav-links a:hover { color: var(--primary-deep); }

.nav-toggle {
  padding: .25rem .75rem;
  font-size: 1.25rem; line-height: 1;
  background: transparent; border: 1px solid rgba(0, 0, 0, .1);
  border-radius: var(--radius);
  color: rgba(0, 0, 0, .55);
  cursor: pointer;
}
.nav-toggle-bars { display: block; width: 24px; }
.nav-toggle-bars span {
  display: block; height: 2px; background: currentColor; border-radius: 2px;
}
.nav-toggle-bars span + span { margin-top: 5px; }

.nav-panel { display: none; width: 100%; }
.nav-panel.is-open { display: block; }
.nav-panel-inner {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1rem 0 1.5rem;
  border-top: 1px solid #eee;
}
.nav-panel .btn { align-self: flex-start; }

@media (min-width: 1200px) {
  .nav-toggle { display: none; }
  .nav-panel { display: block !important; }
  .nav-panel-inner {
    flex-direction: row; align-items: center; gap: 0;
    padding: 0; border-top: 0;
  }
  .nav-links {
    flex-direction: row;
    align-items: center;
    margin-left: auto;
    gap: 2rem;
  }
  /* The two declarations that stop the links running together: a flex item may
     not shrink below its text, and the text may not wrap. Without them the
     bar compresses gracefully-looking-ly into an unreadable run-on. */
  .nav-links li { flex: none; }
  .nav-links a {
    padding: 22px 0;
    white-space: nowrap;
    font-size: 1.0625rem;
  }
  .nav-links a + a { border-top: 0; }
  .nav-links a::after { bottom: 12px; }
  .nav-cta { margin-left: 2rem; padding-left: 2rem; border-left: 1px solid #eee; }
  .nav-panel .btn { align-self: auto; }
}

/* --------------------------------------------------------------------------
   10. HERO CAROUSEL — template .carousel-item + .carousel-caption treatment.

   Built by hand rather than with Bootstrap's carousel: four slides, previous
   and next, a dot for each slide, keyboard support, and no autoplay.

   No autoplay is deliberate. It would keep every slide's image competing for
   bandwidth during the LCP window, it moves content out from under a reader
   who has stopped to read, and there is no way to pause a CSS-only timer for
   someone who has asked for reduced motion.

   The slides are stacked and the band has a fixed height, so cross-fading
   between them cannot shift the layout — CLS stays at zero. The scrim is a
   flat rgba fill, not a gradient, so the copy keeps its contrast everywhere.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  margin-bottom: var(--section-y);
  background-color: var(--dark);
}
.hero-viewport {
  position: relative;
  /* Sized from the tallest of the four captions, not from taste: below 968px
     the 600px floor is what the copy actually needs. See the note on
     .hero-caption-inner for what has to fit inside it. If a headline or a
     paragraph is reworded, re-measure - these numbers are load-bearing. */
  height: clamp(600px, 62vw, 640px);
  overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  /* visibility flips only after the fade has finished, so the outgoing slide
     is not yanked away mid-transition and the two scrims never stack. */
  transition: opacity .55s ease, visibility 0s linear .55s;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .55s ease, visibility 0s linear 0s;
}
.hero-media { position: absolute; inset: 0; overflow: hidden; }
/* Both boxes need a height, not just the img. picture is display:block (see
   the reset above), so it - not .hero-media - is the containing block for a
   percentage height on the img. With picture left at height:auto the 100%
   had nothing to resolve against and fell back to auto, which sized the photo
   by its own 3:2 ratio: 230px of photograph in a 460px band on a 360px screen,
   i.e. the blank strip under the hero. Same two-line shape as .fill-media. */
.hero-media picture, .hero-media img { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: center; }

.hero-caption {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  background: var(--scrim);
}
.hero-caption-inner { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 .75rem 4rem; }
.hero-row { display: flex; flex-wrap: wrap; margin: 0 -.75rem; }
.hero-col { width: 100%; padding: 0 .75rem; }
@media (min-width: 992px) { .hero-col { width: 66.66667%; } }
.hero-eyebrow { color: #fff; font-size: calc(1.275rem + .3vw); margin-bottom: 1rem; }
.hero-title { color: #fff; margin-bottom: 1.5rem; text-wrap: balance; }
/* 4rem of the caption box is reserved for the control strip: a 44px arrow or
   dot, 20px of inset, and 16px of air. It is real padding rather than a hope,
   because the arrows and the dots are position:absolute over the band - without
   it they land on the CTA buttons (that was the mobile overlap) and the scroll
   cue lands on them at 1280. Since the box is centred, the copy sits this much
   above the band's centre and clears the strip at every width. */
.hero-text { color: #fff; font-size: 1.25rem; max-width: 34rem; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* The display scale is sized for a desktop measure. In a 360px column it put a
   42px headline on four lines and pushed the caption out of the band; these
   two steps bring the type down to what the phone can actually hold. */
@media (max-width: 1199.98px) { .hero-title { font-size: clamp(1.75rem, 5.2vw, 4rem); } }
@media (max-width: 767.98px) {
  .hero-eyebrow { font-size: 1rem; }
  .hero-text { font-size: 1.125rem; margin-bottom: 1.5rem; }
}

/* --- Controls ----------------------------------------------------------- */
.hero-controls {
  position: absolute; z-index: 4;
  right: 1rem; bottom: 1.25rem;
  display: flex; align-items: center; gap: .375rem;
}
/* A reason to keep reading, stated once and quietly. Sits in the reserved strip
   below the copy, on the opposite side to the control cluster. Kept small: it is
   a hint, not a feature. */
.hero-scroll {
  position: absolute; z-index: 4;
  left: 50%; bottom: 1.25rem;
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: .3rem;
  color: rgba(255, 255, 255, .8);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease;
}
.hero-scroll:hover, .hero-scroll:focus-visible { color: #fff; }
.hero-scroll svg { width: 1.05rem; height: 1.05rem; animation: hero-scroll-nudge 2.6s ease-in-out infinite; }
@keyframes hero-scroll-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
/* It duplicates what a scroll gesture already says, and it is decoration, so it
   steps aside rather than insisting. */
@media (max-width: 575.98px) { .hero-scroll span { display: none; } }
/* Opposite the control cluster, on the same two breakpoints the cluster uses.
   Centred only where there is genuinely room for it: at 360px the cluster is
   228px of a 345px band and at 620px it is 256px of a 605px band, so a centred
   cue has nothing left to sit in at either end of the range. */
@media (min-width: 768px) { .hero-scroll { bottom: 2rem; } }
@media (max-width: 767.98px) { .hero-scroll { left: 1rem; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-scroll svg { animation: none; }
}
.hero-arrow {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background-color: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.hero-arrow:hover { background-color: var(--primary-deep); border-color: var(--primary-deep); }
.hero-arrow svg { width: 20px; height: 20px; }
.hero-arrow--prev svg { transform: scaleX(-1); }

.hero-dots {
  display: flex; align-items: center; gap: .25rem;
  margin: 0 0 0 .25rem; padding: 0; list-style: none;
}
.hero-dot {
  /* The bar is ::after, so the button box can be 44px tall while the bar stays
     4px. It was 34px tall and the "44px row" this comment used to claim was the
     arrows' height, not the dots': the row is only as tall as its tallest
     child, and the dots were 34. */
  width: 34px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
/* Four 34px dots plus two 44px arrows is 252px, which is 83% of a 320px band
   and left the scroll cue 4px away. Narrowing the dots to 28px - still wider
   than the 24px WCAG 2.5.8 minimum - gives the cue 32px of air, and 28x44
   keeps the target comfortable where a mis-tap actually hurts. */
@media (max-width: 575.98px) { .hero-dot { width: 28px; } }
.hero-dot::after {
  content: "";
  width: 100%; height: 4px; border-radius: 2px;
  background-color: rgba(255, 255, 255, .45);
  transition: background-color .2s ease, transform .2s ease;
}
.hero-dot:hover::after { background-color: rgba(255, 255, 255, .75); }
.hero-dot[aria-current="true"]::after { background-color: var(--secondary); transform: scaleY(1.5); }
@media (min-width: 768px) { .hero-controls { right: 2rem; bottom: 2rem; gap: .5rem; } }
/* No narrow-screen override any more. The cluster used to jump to the
   bottom-LEFT below 576px, which is exactly where the CTA column sits, so it
   was the one width range where it was guaranteed to overlap. It is bottom-
   right at every width now, inside the reserved strip. */

/* --------------------------------------------------------------------------
   11. SECTION TITLE — one reusable underline component

   The old treatment drew two rules flanking the label (`::before` above at
   `top: 5px`, `::after` below at a wider width), each offset by a negative
   left margin. That is what made "About Mara Coffee" look randomly placed: the
   upper rule did not touch the text, the two rules were different lengths, the
   `--start` variant shifted both of them again, and because they reached
   outside the element the whole pair had to be hidden below 576px to stop the
   page scrolling sideways.

   This is one bar instead, using the same visual language as the footer's
   MARA COFFEE EXPORTS mark: 4px tall, 2px radius, solid brand green, sitting
   under the label.

   Because the bar is positioned against the element box rather than the text
   metrics, it stays flush with the left edge and the right edge of the label
   however the label wraps, at every width — so nothing needs hiding on mobile.
   -------------------------------------------------------------------------- */
.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: .75rem;        /* the gap between the label and the bar */
  color: var(--primary-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; min-width: 2.75rem;
  height: 4px; border-radius: 2px;
  background-color: var(--primary-deep);
}

/* Retained for existing markup. The bar is anchored to the element box, so a
   start-aligned label needs no correction — the rule states that explicitly
   rather than leaving the modifier as a no-op by accident. */
.section-title--start { padding-left: 0; }

/* Over photography the bar takes the yellow, which is the most legible option
   against a darkened image. No background patch is needed any more: the bar
   never crosses the text, so there is nothing to mask. */
.section-title--dark {
  color: var(--secondary);
}
.section-title--dark::after { background-color: var(--secondary); }

/* Centred section header, capped at 500px like the template */
.section-head { max-width: 500px; margin: 0 auto; text-align: center; padding-bottom: 1.5rem; }

/* Left-aligned heading + right-aligned supporting copy */
.section-split {
  display: grid; gap: 1rem 3rem; align-items: end;
}
@media (min-width: 992px) {
  .section-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .section-split--wide-left { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   12. ABOUT — explicit grid, and the stat block in normal flow

   Root cause of "1,500 Coffee growers with us" sitting on top of the next
   image: `.about-badge` was `position: absolute` at `width: 100%; height: 100%`
   offset by `right: -45px; bottom: -45px`. A full-size box pushed outside its
   parent's box does not sit beside the image, it sits over whatever is
   adjacent to it. That is why it collided with the neighbouring column.

   The badge is now an ordinary in-flow block in its own grid row, so it cannot
   overlap anything and cannot grow into a neighbour at any width. The grid
   tracks are `minmax(0, 1fr)`, which also stops a wide image from forcing the
   column wider than its share.
   -------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 992px) {
  .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  /* The text column is shorter than the image stack, so let the images keep
     their natural height rather than stretching to match. */
  .about-grid > * { min-width: 0; }
}

.about-badge {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  padding: 1.5rem;
  background-color: var(--secondary);
  border-radius: var(--radius);
}
.about-badge .display-1 { margin-bottom: 0; color: var(--dark); line-height: 1; }
.about-badge small { font-size: 1.125rem; font-weight: 700; color: var(--dark); }
@media (max-width: 575.98px) {
  /* Below the sm breakpoint the number and its label stop being two columns
     of a flex row, so the number gets the full line to itself. */
  .about-badge { flex-direction: column; align-items: flex-start; }
}

.mini-feature img { width: 56px; height: 56px; margin-bottom: 1rem; }
.mini-feature h5 { margin-bottom: .75rem; }
.mini-feature span { display: block; }

/* --------------------------------------------------------------------------
   13. FEATURE LIST (green ticks) — template's check-list
   -------------------------------------------------------------------------- */
.check-list { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 2rem; margin-bottom: .75rem; }
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: .42em;
  width: .5rem; height: .85rem;
  border: solid var(--primary-text);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.check-list--steps { counter-reset: step; }
.check-list--steps li { padding-left: 2.75rem; margin-bottom: 1rem; }
.check-list--steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  left: 0; top: 0;
  width: 2rem; height: 2rem;
  border: 0; border-radius: 50%;
  background: var(--light);
  color: var(--primary-text);
  font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transform: none;
}
/* Nested inside a card, where the ticks are a detail list and not the subject of
   the block. The base spacing (.75rem between rows, 2rem indent) reads as a second
   heading when the list sits under a paragraph in a narrower column. */
.check-list--tight li {
  margin-bottom: .4rem;
  padding-left: 1.6rem;
  font-size: .9rem;
}
.check-list--tight li:last-child { margin-bottom: 0; }
.check-list--tight li::before { top: .38em; width: .42rem; height: .72rem; }

/* --------------------------------------------------------------------------
   14. FACT BOXES — template's 2x2 grid of green / yellow boxes
   -------------------------------------------------------------------------- */
.fact-grid { display: grid; gap: 0; overflow: hidden; border-radius: var(--radius); }
@media (min-width: 576px) { .fact-grid { grid-template-columns: repeat(2, 1fr); } }
.fact-box {
  text-align: center;
  padding: 3rem 1.5rem;
  background-color: var(--primary-deep);
  color: #fff;
}
/* The icon is a small flat-filled circle, sized well under the number so the
   figure stays the thing you read first. flex: none stops it being squeezed
   by the centring box, and width/height come from the `svg` base rule. */
.fact-box__icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .16);
  color: #fff;
  flex: none;
}
.fact-box:nth-child(even) { background-color: var(--secondary); color: var(--dark); }
.fact-box:nth-child(even) .fact-box__icon { background-color: rgba(0, 0, 0, .10); color: var(--dark); }
/* The figure and its label are separate elements with separate rules.

   This used to be a blanket `.fact-box span { font-size: 1.25rem }`, which at
   specificity (0,1,1) outranked `.display-6` at (0,1,0) and won. The numbers
   were therefore rendering at 20px — exactly the same size as the label below
   them, so "1,500" read as a caption rather than as the figure it is. Naming
   the label removes the collision: the number keeps its own scale and the
   label gets its own. */
.fact-box .display-6 { display: block; margin-bottom: .5rem; }
.fact-box__label { display: block; font-size: 1.125rem; font-weight: 500; line-height: 1.35; }
.fact-box--flat { padding: 1.5rem 1rem; }
@media (max-width: 575.98px) {
  .fact-box { padding: 2.25rem 1.25rem; }
  .fact-box__icon { width: 46px; height: 46px; margin-bottom: 1rem; }
}

/* --------------------------------------------------------------------------
   15. BANNER — template full-bleed photo block with two columns
   -------------------------------------------------------------------------- */
.banner {
  position: relative;
  background-image: none;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.banner-media {
  position: absolute; inset: 0; overflow: hidden;
}
.banner-media picture, .banner-media img { width: 100%; height: 100%; }
.banner-media img { object-fit: cover; }
.banner-scrim { position: absolute; inset: 0; background: var(--scrim); }
.banner-inner { position: relative; padding-top: 3rem; padding-bottom: 3rem; }
.banner-inner > * { position: relative; }

/* --------------------------------------------------------------------------
   16. SERVICE CARD — photo, white wipe on hover, circular icon
   -------------------------------------------------------------------------- */
.service-item {
  position: relative;
  height: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: #fff;
  overflow: hidden;
}
.service-item .service-img { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.service-item .service-img picture { display: block; width: 100%; height: 100%; }
.service-item .service-img img { width: 100%; height: 100%; object-fit: cover; }
.service-item .service-img::before { content: ""; position: absolute; inset: 0; background: var(--scrim-strong); }
.service-item .service-img::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  transition: width var(--ease) ease-out; width: 100%;
}
.service-item:hover .service-img::after,
.service-item:focus-within .service-img::after { width: 0; }

.service-text { position: relative; z-index: 1; padding: 3rem 3rem 0; }
.service-icon {
  width: 140px; height: 140px; padding: 15px;
  margin-top: -70px; margin-bottom: 40px;
  background: #fff; border-radius: 50%;
  box-shadow: var(--shadow-badge);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-text);
}
.service-icon svg { width: 52%; height: 52%; }
.service-text h3 { margin-bottom: 1rem; transition: color var(--ease); }
.service-text p { margin-bottom: 1.5rem; transition: color var(--ease); }
.service-text .btn { color: var(--dark); background: #fff; box-shadow: 0 0 45px rgba(0, 0, 0, .25); }
.service-text .btn:hover { color: var(--dark); background: var(--secondary); }

@media (hover: none) {
  /* No hover on touch: keep the photo visible behind the copy. */
  .service-item .service-img::after { width: 0; }
  .service-item .service-img::before { background: var(--scrim-strong); }
  .service-text h3, .service-text p { color: #fff; }
}
@media (max-width: 767.98px) {
  .service-item .service-img::after { width: 0; }
  .service-text h3, .service-text p { color: #fff; }
}
@media (min-width: 768px) {
  /* The photo only shows once the white panel has been wiped away, so the
     copy has to stay dark until then. */
  .service-item .service-text h3, .service-item .service-text p { color: var(--dark); }
  .service-item:hover .service-text h3, .service-item:hover .service-text p,
  .service-item:focus-within .service-text h3, .service-item:focus-within .service-text p { color: #fff; }
}

/* --------------------------------------------------------------------------
   17. PRODUCT CARD — template .product-item
   -------------------------------------------------------------------------- */
.product-item {
  position: relative;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #fff;
}
.product-item img { width: 100%; }
.product-body { padding: 1.5rem; }
.product-body h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.product-body h3 a { color: var(--dark); text-decoration: none; }
.product-body h3 a:hover { color: var(--primary-text); }
.product-body p { margin-bottom: 0; font-size: .95rem; }

/* Spec rows: label / value pairs, the pattern the exporter sites use */
.spec-list { margin: 0; font-size: .95rem; }
.spec-row {
  display: flex; gap: 1rem; justify-content: space-between;
  padding: .5rem 0; border-top: 1px solid #ececec;
}
.spec-row:first-child { border-top: 0; padding-top: 0; }
.spec-row dt { font-weight: 600; color: var(--dark); }
.spec-row dd { margin: 0; text-align: right; }
/* Some values are lists rather than single facts — the flavour notes run to eight
   items. Side by side, a right-aligned value that wraps over four lines reads
   badly on a phone, so below the small breakpoint the pair stacks instead. */
@media (max-width: 575.98px) {
  .spec-row { flex-direction: column; gap: .15rem; }
  .spec-row dd { text-align: left; }
}

/* Chip row: a wrapping set of short labels — varietals, flavour notes, the
   pillars of the business model, the payment terms. Four of those lists are
   short enough to read in one line each, so they are chips rather than cards:
   a card per item would make a short list look like a large one. */
.chip-row {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  margin: 0; padding: 0; list-style: none;
}
.chip-row > li {
  padding: .35rem .85rem;
  border: 1px solid #e2e2e2;
  border-radius: 999px;
  background: var(--light);
  font-size: .9rem;
  color: var(--dark);
}
.chip-row > li strong { font-weight: 600; color: var(--primary-deep); }
/* On a dark band the chips need their own surface, or they inherit the band and
   disappear. One override, scoped to the modifier, rather than a second set of
   rules fighting the base. */
.chip-row--on-dark > li {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.chip-row--on-dark > li strong { color: var(--secondary); }

/* The farmer journey: five connected steps, Support → Grow → Deliver → Get paid
   → Grow with Mara.

   This is the one place on the site where a diagram earns its keep, because the
   point being made is the ORDER and the CONTINUITY of the relationship — that
   Mara Coffee is there before the harvest and still there after it. A list could
   carry the same five facts but not the claim that they are one unbroken line.

   Deliberately not cards. No borders, no shadows, no per-item padding, no icon
   badges. Five boxes would contradict the argument they are meant to make, and
   the brief rules out a card per item. What is left is a marker, a connector and
   some text.

   Phone: a vertical timeline, because five columns of prose at 360px is five
   unreadable stubs. Desktop: the same five steps turn on their side and the
   connector runs between them. */
.journey {
  display: grid;
  gap: 0;
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: journey;
}
.journey__step {
  position: relative;
  padding: 0 0 2rem 2.75rem;
  counter-increment: journey;
}
.journey__step:last-child { padding-bottom: 0; }
.journey__marker {
  position: absolute; left: 0; top: 0;
  width: 2.1rem; height: 2.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--primary-deep);
  color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
/* The connector, drawn between consecutive markers only. */
.journey__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.05rem; top: 2.1rem; bottom: .25rem;
  width: 2px;
  background: var(--line);
}
.journey__label {
  display: block;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary-text);
  margin-bottom: .3rem;
}
.journey__copy {
  margin: 0 0 .6rem;
  font-size: 1rem;
  color: var(--body-text);
  max-width: 34rem;
}
.journey__points {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  margin: 0; padding: 0; list-style: none;
  font-size: .82rem;
}
.journey__points li {
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--light);
  color: var(--dark);
}

/* The strip only turns horizontal once the columns are wide enough to read.
   Measured: at 992px+ the five columns come out 168px wide each and the copy
   wraps to six lines, which is a worse read than the vertical timeline it
   replaced — and it looks like the crowding this site is meant to avoid. The
   crossover is 1200px, where each column clears 200px. */
@media (min-width: 1200px) {
  .journey {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
  }
  .journey__step {
    padding: 2.9rem 0 0;
  }
  /* Horizontal connector: runs from the marker to the next step's marker, so it
     has to reach the full column and stop one gap short. */
  .journey__step:not(:last-child)::after {
    left: 2.1rem; top: 1.05rem; bottom: auto;
    width: calc(100% - .75rem); height: 2px;
  }
  .journey__label { margin-bottom: .35rem; }
  .journey__copy { font-size: .95rem; margin-bottom: .7rem; max-width: none; }
  /* Below the widest breakpoint the columns get narrow enough that a chip row of
     three starts wrapping onto three lines, which reads as clutter. One per line
     is calmer and still scannable. */
  .journey__points { flex-direction: column; gap: .3rem; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   18. PLAIN CARD — used for farmer partnerships, sustainability, insights
   -------------------------------------------------------------------------- */
.plain-card {
  height: 100%;
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: #fff;
}
.plain-card h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.plain-card p { margin-bottom: 0; font-size: .95rem; }
.plain-card--tint { background: var(--light); box-shadow: none; }
.plain-card__icon {
  width: 56px; height: 56px; margin-bottom: 1.25rem;
  border-radius: 50%; background: var(--light);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-text);
}
.plain-card__icon svg { width: 55%; height: 55%; }
/* The same badge sitting in a flex row beside a heading, rather than above a
   paragraph. One modifier, because the base has to keep the margin that spaces
   it off the text underneath it in card form. */
.plain-card__icon--inline {
  margin-bottom: 0;
  flex: none;
}

/* --------------------------------------------------------------------------
   19. FEATURED STORY — 1 large + 2 small, template card treatment
   -------------------------------------------------------------------------- */

/* "View all insights" + arrow. inline-flex so the icon sits on the text's
   baseline and takes its size from the base `svg` rule instead of stretching
   to fill the block it happens to be in. */
.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600;
  text-decoration: none;
}
.link-arrow svg { width: 1.125rem; height: 1.125rem; transition: transform .25s ease; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover svg { transform: translateX(3px); }

.feature-row { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .feature-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.feature-lead { position: relative; display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.feature-lead img { width: 100%; height: 100%; object-fit: cover; }
.feature-lead-body {
  position: absolute; inset: auto 0 0 0;
  padding: 1.5rem;
  background: rgba(0, 0, 0, .68);
  color: #fff;
}
.feature-lead-body h3 { color: #fff; font-size: 1.5rem; margin-bottom: .5rem; }
.feature-lead-body p { margin-bottom: 0; color: #ececec; font-size: .95rem; }

.feature-side { display: grid; gap: 1.5rem; align-content: start; }
@media (min-width: 992px) { .feature-side { grid-template-rows: repeat(2, minmax(0, 1fr)); } }
.feature-mini {
  display: grid; gap: 1rem; align-items: center;
  padding: 1rem; height: 100%;
  border-radius: var(--radius); box-shadow: var(--shadow-card); background: #fff;
}
.feature-mini .feature-mini__img { display: block; border-radius: var(--radius); overflow: hidden; }
.feature-mini .feature-mini__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.feature-mini h3 { font-size: 1.125rem; margin-bottom: .25rem; }
.feature-mini h3 a { display: inline-block; padding: .15rem 0; color: var(--dark); text-decoration: none; }
.feature-mini h3 a:hover { color: var(--primary-text); }
.feature-mini span { font-size: .85rem; }

/* --------------------------------------------------------------------------
   20. ARTICLE CARD + PROSE
   -------------------------------------------------------------------------- */
.article-card { height: 100%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); background: #fff; }
.article-card img { width: 100%; }
.article-card-body { padding: 1.5rem; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-bottom: .75rem; font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--primary-text);
}
.article-card h2, .article-card h3 { font-size: 1.25rem; line-height: 1.2; margin-bottom: .75rem; }
.article-card h2 a, .article-card h3 a { color: var(--dark); text-decoration: none; }
.article-card h2 a:hover, .article-card h3 a:hover { color: var(--primary-text); }
.article-card p { font-size: .95rem; margin-bottom: 0; }

.prose { max-width: 720px; }
.prose > p, .prose > ul, .prose > ol { font-size: 1.0625rem; line-height: 1.8; }
.prose > p + p { margin-top: 1.375rem; }
.prose > p.lead {
  font-size: 1.1875rem; line-height: 1.6; color: var(--dark);
  margin-bottom: 2.25rem;
}
.prose h2 { margin: 3rem 0 .875rem; font-size: 1.75rem; line-height: 1.15; }
.prose ul, .prose ol { margin-bottom: 1.375rem; padding-left: 1.375rem; }
.prose li { margin-bottom: .5rem; }
.prose strong { color: var(--dark); }
.prose a { padding: .15rem 0; }
.prose .callout p { margin-bottom: 0; }
.prose .article-foot a { display: inline-flex; align-items: center; gap: .5rem; color: var(--primary-text); font-weight: 600; }
.prose .article-foot a svg { width: 1.125rem; height: 1.125rem; }

.callout {
  margin-top: 2.5rem;
  padding: 2.5rem;
  border-radius: var(--radius);
  background: var(--primary-deep);
  color: #fff;
}
.callout h2 { margin-bottom: .75rem; color: #fff; font-size: 1.875rem; }
.callout p { color: #e2e9e0; }

/* --------------------------------------------------------------------------
   21. PAGE HEADER — template .page-header
   -------------------------------------------------------------------------- */
.page-header {
  position: relative;
  padding-top: 3rem; padding-bottom: 3rem;
  margin-bottom: 3rem;
  background-color: var(--dark);
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.page-header-bg { position: absolute; inset: 0; }
.page-header-bg picture, .page-header-bg img { width: 100%; height: 100%; }
.page-header-bg img { object-fit: cover; }
.page-header-scrim { position: absolute; inset: 0; background: var(--scrim); }
.page-header-inner { position: relative; padding-top: 3rem; padding-bottom: 3rem; }
.page-header h1 { color: #fff; margin-bottom: 1.5rem; }
.page-header .breadcrumb { justify-content: center; margin-bottom: 0; }
.page-header .breadcrumb a, .page-header .breadcrumb-item { color: #fff; }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .75); }
.page-header .breadcrumb-item.active { color: rgba(255, 255, 255, .9); }

.breadcrumb { display: flex; flex-wrap: wrap; padding: 0; margin-bottom: 1rem; list-style: none; font-size: 1rem; }
.breadcrumb-item + .breadcrumb-item { padding-left: .5rem; }
.breadcrumb-item + .breadcrumb-item::before { float: left; padding-right: .5rem; color: #6c757d; content: "/"; }
.breadcrumb-item.active { color: #5b6167; }

/* Article headers carry no photograph, so the treatment is the light one. */
.page-header--plain { background-color: #fff; color: var(--dark); text-align: left; padding-top: 0; padding-bottom: 0; }
.page-header--plain .page-header-inner { padding-top: 2rem; padding-bottom: 2.75rem; }
.page-header--plain h1 { color: var(--dark); margin-bottom: 0; }
.page-header--plain .breadcrumb { justify-content: flex-start; margin-bottom: 1.25rem; }
.page-header--plain .breadcrumb a { color: var(--primary-text); }
.page-header--plain .breadcrumb-item { color: #5b6167; }
/* The photo-header rules above are (0,3,1) for .active, so the plain variant
   needs matching specificity or the active crumb stays white on white. */
.page-header--plain .breadcrumb-item.active { color: var(--body-text); }
.page-header--plain .breadcrumb-item + .breadcrumb-item::before { color: #8d9196; }
.page-header--plain .article-meta { margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
    21b. ARTICLE PAGE
    -------------------------------------------------------------------------- */
.article-hero { margin: 0 0 3rem; }
.article-hero .fill-media { border-radius: var(--radius); box-shadow: var(--shadow-card); }

.article-layout { display: grid; gap: 3rem; }
@media (min-width: 992px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}
.article-aside { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .article-aside { position: sticky; top: 124px; } }

.aside-box { padding: 1.5rem; border-radius: var(--radius); background: var(--light); }
.aside-box h2 { font-size: 1.0625rem; margin-bottom: 1rem; }
.aside-box p { font-size: .95rem; margin-bottom: 0; }
.aside-box ul { margin: 0; padding-left: 1.125rem; }
.aside-box li { margin-bottom: .5rem; font-size: .95rem; }
.aside-box li:last-child { margin-bottom: 0; }
/* :not(.btn) so a link button keeps its own button colours — the aside CTA
   is a yellow pill, and green-on-yellow only reached 3.85:1. */
.aside-box a:not(.btn) { color: var(--primary-text); font-weight: 500; }

/* Data tables — used for the indicative income figures. */
.data-table-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
/* The wrapper is focusable so the columns past the edge are reachable by
   keyboard. It needs a visible focus ring for the same reason — without one,
   tabbing onto it looks like nothing happened. */
.data-table-wrap:focus-visible {
  outline: 2px solid var(--primary-text);
  outline-offset: 2px;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.data-table th, .data-table td { padding: .9375rem 1.25rem; text-align: left; }
.data-table thead th {
  background: var(--dark);
  color: #fff;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.data-table tbody th { font-weight: 600; color: var(--dark); white-space: nowrap; }
.data-table tbody td { color: var(--body-text); }
.data-table tbody tr + tr th, .data-table tbody tr + tr td { border-top: 1px solid var(--line); }
.data-table tbody tr:hover { background: var(--light); }
.data-table__figure { font-weight: 700; color: var(--primary-text) !important; white-space: nowrap; }
@media (max-width: 575.98px) {
  .data-table th, .data-table td { padding: .75rem .875rem; font-size: .9375rem; }
}
/* Below roughly 400px the four figure columns still do not fit, so the wrapper
   scrolls sideways. Tighten the cells once more to shorten how far it has to,
   rather than shrinking the type past the point where it stays readable. */
@media (max-width: 400px) {
  .data-table th, .data-table td { padding: .625rem .5rem; font-size: .875rem; }
}

.article-foot { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   22. TABLE — the income table
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
.table-wrap:focus-visible { outline: 3px solid var(--primary-deep); outline-offset: 2px; }
table.data-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.data-table caption { padding-bottom: 1.125rem; color: var(--dark); font-weight: 600; text-align: left; }
.data-table th, .data-table td { padding: .875rem 1rem; text-align: left; border-bottom: 1px solid #ececec; }
.data-table thead th { background: var(--light); color: var(--dark); font-weight: 600; }
.data-table tbody th { font-weight: 600; color: var(--dark); }
.table-note { margin-top: 1.25rem; font-size: .9rem; }

/* --------------------------------------------------------------------------
   23. FAQ — native <details>, one open at a time (handled in mara.js)
   -------------------------------------------------------------------------- */
.faq-item { border-bottom: 1px solid #ececec; }
.faq-item summary {
  padding: 1.125rem 2.5rem 1.125rem 0;
  position: relative;
  font-family: var(--serif); font-weight: 700; font-size: 1.0625rem;
  color: var(--dark); cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: .5rem; top: 1.6rem;
  width: .6rem; height: .6rem;
  border: solid var(--primary-text); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item > div { padding-bottom: 1.125rem; }

/* --------------------------------------------------------------------------
   24. CTA BAND + FOOTER
   -------------------------------------------------------------------------- */
.cta-band { background-color: var(--primary-deep); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #e2e9e0; }
.cta-band-layout { display: grid; gap: 1.5rem 3rem; }
@media (min-width: 992px) { .cta-band-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }

.site-footer { background-color: var(--ink); color: var(--footer-text); }
.site-footer h2 { color: #fff; font-size: 1.25rem; margin-bottom: 1.5rem; }
.site-footer a { color: var(--footer-text); text-decoration: none; }
.site-footer a:hover { color: var(--light); }
.footer-grid { display: grid; gap: 2rem 3rem; }
@media (min-width: 576px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand { margin-bottom: 1rem; }
.footer-brand p { font-size: .95rem; }
.site-footer .brand-mark span:first-child { background: var(--secondary); }
.site-footer .brand-mark span:last-child { background: var(--primary); }
.site-footer .brand-words strong { color: #fff; }
.site-footer .brand-words small { color: var(--secondary); }
.footer-contact { margin: 0; padding: 0; list-style: none; }
.footer-contact li {
  display: flex; align-items: flex-start; gap: .625rem;
  margin-bottom: .625rem; font-size: .95rem;
}
.footer-contact svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: .15rem; color: var(--secondary); }
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links li { margin-bottom: .3125rem; }
.footer-links a { display: inline-block; padding: .25rem 0; }
.footer-hours { margin: 0; font-size: .95rem; }
.footer-hours dt { color: var(--light); font-weight: 500; margin-top: .5rem; }
.footer-hours dd { margin: 0; }

/* Pointer targets. WCAG 2.5.8 asks for 24 x 24 CSS px; 44 x 44 is the
   comfortable figure, so coarse pointers get the larger box and mouse users
   keep the compact footer. */
.footer-contact a,
.footer-hours a,
.copyright a,
.aside-box a,
.breadcrumb-item a,
.site-footer p > a { display: inline-flex; align-items: center; min-height: 24px; }
@media (pointer: coarse) {
  .footer-links a,
  .footer-contact a,
  .footer-hours a,
  .copyright a,
  .aside-box a,
  .breadcrumb-item a,
  .site-footer p > a,
  .contact-details__list a,
  .feature-mini h3 a,
  .brand { min-height: 44px; }
}

.copyright {
  background-color: var(--secondary);
  color: var(--dark);
  padding-top: 1.5rem; padding-bottom: 1.5rem;
  font-size: .9rem;
}
/* The copyright link sits inside a prose sentence, so colour alone is not an
   affordance - the link takes the same colour as the text around it and the only
   other difference is a slightly heavier weight, which is not enough to read as
   "this goes somewhere". Underline it. text-underline-offset keeps the line off
   the descenders of a name rather than striking through them. */
.copyright a {
  color: var(--dark);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.copyright a:hover,
.copyright a:focus-visible { color: var(--primary-text); }
.copyright-layout { display: grid; gap: .5rem 1.5rem; text-align: center; }
@media (min-width: 768px) { .copyright-layout { grid-template-columns: 1fr 1fr; text-align: left; } .copyright-layout > :last-child { text-align: right; } }
.copyright p { margin: 0; }
.copyright small { display: block; }

/* --------------------------------------------------------------------------
   25. FLOATING ACTIONS
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed; right: 30px; bottom: 30px; z-index: 99;
  display: none;
  border: 0; cursor: pointer;
}
.back-to-top.is-visible { display: inline-flex; }
.back-to-top svg { width: 22px; height: 22px; }

.whatsapp-float {
  position: fixed; right: 24px; bottom: 92px; z-index: 99;
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #128c7e; color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.whatsapp-float svg { width: 30px; height: 30px; fill: currentColor; }
@media (max-width: 575.98px) { .whatsapp-float { right: 16px; bottom: 84px; } }

/* --------------------------------------------------------------------------
   26. SCROLL REVEAL — WOW.js replacement. Content is visible by default;
   the hidden state is only applied once JS confirms it can undo it.
   -------------------------------------------------------------------------- */
/* One animation for every .reveal on the site: a short 18px rise and a fade,
   0.5s, no per-element delay. --reveal-delay is declared but never assigned
   anywhere in the markup, which is deliberate — staggering each card turns a
   quiet entrance into a sequence the reader has to wait out. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease-out, transform .5s ease-out; transition-delay: var(--reveal-delay, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   27. UTILITIES
   -------------------------------------------------------------------------- */
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.stack-sm > * + * { margin-top: .75rem; }
.stack-md > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: 3rem; }
.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.measure { max-width: 44rem; }

@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;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .topbar, .site-nav, .back-to-top, .whatsapp-float, .nav-panel { display: none !important; }
  body { color: #000; }
  .section { padding: 1rem 0; }
}