/*
Theme Name: Rana Rice Mills
Theme URI: https://ranaricemills.com/
Author: DIGIT
Author URI: https://digit.com.pk/
Description: Custom WordPress theme designed and developed by DIGIT for Rana Rice Mills — a family-run, ISO 9001 & HACCP certified Basmati and long-grain rice miller and exporter established in Narowal, Punjab, Pakistan in 1998, exporting to Saudi Arabia, the UK, Spain, the Netherlands, Greece and Italy.
Version: 1.1.1
Requires at least: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rrm-theme
Tags: custom-theme, rice-mill, rice-exporter, agriculture, manufacturing, export, responsive
*/

/* ===== Self-hosted fonts (no Google Fonts <link> — self-hosted per site policy) ===== */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/fraunces-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/inter-normal.woff2') format('woff2');
}

/* ===== Design tokens ===== */
:root {
  --color-ivory: #faf6ee;
  --color-ivory-dim: #f1e9d8;
  --color-charcoal: #1c1712;
  --color-charcoal-soft: #2a2119;
  --color-maroon: #7a1f2b;
  --color-maroon-deep: #591620;
  --color-gold: #c9a13b;
  --color-gold-soft: #e8cf8e;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --container-max: 80rem; /* 1280px, ~max-w-7xl */
}

/* ===== Reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-ivory);
  color: var(--color-charcoal);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 1 auto; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; cursor: pointer; }
:where(blockquote, figure, dl, dd) { margin: 0; padding: 0; border: 0; }
::selection { background: var(--color-gold-soft); color: var(--color-charcoal); }

.font-display { font-family: var(--font-display); }

/* ===== Layout ===== */
.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .container { padding-left: 2rem; padding-right: 2rem; } }

.section { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 640px) { .section { padding-top: 6rem; padding-bottom: 6rem; } }
.section--tight { padding-top: 3rem !important; padding-bottom: 3rem !important; }

.bg-charcoal { background: var(--color-charcoal); color: var(--color-ivory); }
.bg-charcoal-soft { background: var(--color-charcoal-soft); color: var(--color-ivory); }
.bg-ivory-dim { background: var(--color-ivory-dim); }
.bg-maroon { background: var(--color-maroon); }

/* ===== Eyebrow + gold rule ===== */
.gold-rule { width: 3rem; height: 2px; background: linear-gradient(90deg, var(--color-gold), var(--color-maroon)); margin-top: 0.75rem; }
.eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; color: var(--color-maroon); }
.eyebrow--light { color: var(--color-gold-soft); }

.section-heading { margin-top: 1rem; font-family: var(--font-display); font-weight: 500; font-size: 1.875rem; color: var(--color-charcoal); max-width: 42rem; }
@media (min-width: 640px) { .section-heading { font-size: 2.25rem; } }
.section-heading--light { color: var(--color-ivory); }
.section-lead { margin-top: 1.25rem; max-width: 42rem; font-size: 1rem; line-height: 1.75rem; color: rgba(28,23,18,.7); }
.section-lead--light { color: rgba(250,246,238,.75); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 9999px; padding: 0.75rem 1.75rem; font-size: 0.875rem; font-weight: 600;
  transition: background-color .15s, color .15s; border: 1px solid transparent; line-height: 1;
  background: transparent; appearance: none; -webkit-appearance: none;
}
.btn-primary { background: var(--color-maroon); color: var(--color-ivory); }
.btn-primary:hover { background: var(--color-maroon-deep); }
.btn-outline { border-color: rgba(250,246,238,.3); color: var(--color-ivory); }
.btn-outline:hover { background: rgba(250,246,238,.1); }
.btn-outline-dark { border-color: rgba(28,23,18,.2); color: var(--color-charcoal); }
.btn-outline-dark:hover { background: rgba(28,23,18,.05); }
.btn-gold { background: var(--color-gold); color: var(--color-charcoal); }
.btn-gold:hover { background: var(--color-gold-soft); }
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-whatsapp:hover { filter: brightness(1.05); }
.btn-block { width: 100%; }
@media (min-width: 640px) { .btn-block { width: auto; } }

/* ===== Header ===== */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(201,161,59,.2); background: rgba(28,23,18,.95); backdrop-filter: blur(8px); }
.site-header__bar { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem 1rem; }
@media (min-width: 640px) { .site-header__bar { padding: .75rem 1.5rem; } }
@media (min-width: 1024px) { .site-header__bar { padding: .75rem 2rem; } }
.site-header__brand { display: flex; align-items: center; gap: .625rem; min-width: 0; flex-shrink: 0; color: var(--color-ivory); }
.site-header__brand img { height: 2.25rem; width: 2.25rem; object-fit: contain; flex-shrink: 0; }
@media (min-width: 640px) { .site-header__brand img { height: 2.75rem; width: 2.75rem; } }
.site-header__brand-name { font-family: var(--font-display); font-size: 1rem; line-height: 1.25; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) { .site-header__brand-name { font-size: 1.125rem; } }
.site-header__brand-sub { display: block; font-family: var(--font-sans); font-size: 9px; font-weight: 500; letter-spacing: .18em; color: var(--color-gold-soft); text-transform: uppercase; white-space: nowrap; }
@media (min-width: 640px) { .site-header__brand-sub { font-size: 11px; letter-spacing: .2em; } }

.site-nav { display: none; align-items: center; gap: 1.25rem; }
@media (min-width: 1280px) { .site-nav { display: flex; } }
.site-nav a { font-size: .875rem; font-weight: 500; letter-spacing: .01em; color: rgba(250,246,238,.8); white-space: nowrap; }
.site-nav a:hover, .site-nav a.is-active { color: var(--color-gold-soft); }
.site-nav a.is-active { color: var(--color-gold); }

.site-header__cta { display: none; flex-shrink: 0; }
@media (min-width: 1280px) { .site-header__cta { display: block; } }

.nav-toggle { display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border-radius: .375rem; background: transparent; border: 0; color: var(--color-ivory); }
.nav-toggle:hover { background: rgba(250,246,238,.1); }
@media (min-width: 1280px) { .nav-toggle { display: none; } }

.mobile-nav { overflow: hidden; max-height: 0; border-top: 0 solid rgba(201,161,59,.2); background: var(--color-charcoal); transition: max-height .3s ease-in-out; }
.mobile-nav.is-open { max-height: 32rem; border-top-width: 1px; }
@media (min-width: 1280px) { .mobile-nav { display: none; } }
.mobile-nav ul { display: flex; flex-direction: column; gap: .25rem; padding: .5rem 1rem 1rem; }
.mobile-nav a { display: block; border-radius: .375rem; padding: .625rem .75rem; font-size: .875rem; font-weight: 500; color: rgba(250,246,238,.85); }
.mobile-nav a:hover { background: var(--color-charcoal-soft); }
.mobile-nav a.is-active { background: rgba(122,31,43,.3); color: var(--color-gold); }
.mobile-nav .btn { display: block; text-align: center; margin-top: .5rem; }

/* ===== Hero (home) ===== */
.hero { position: relative; overflow: hidden; background: var(--color-charcoal); color: var(--color-ivory); }
.hero__media { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; opacity: .35; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--color-charcoal), rgba(28,23,18,.8) 55%, rgba(28,23,18,.5)); }
.hero__content { position: relative; padding: 7rem 0; }
@media (min-width: 640px) { .hero__content { padding: 9rem 0; } }
.hero__kicker { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .3em; color: var(--color-gold-soft); }
.hero__title { margin-top: 1.5rem; max-width: 42rem; font-family: var(--font-display); font-weight: 500; font-size: 2.25rem; line-height: 1.15; }
@media (min-width: 640px) { .hero__title { font-size: 3.75rem; } }
.hero__title em { font-style: italic; color: var(--color-gold-soft); }
.hero__lead { margin-top: 1.5rem; max-width: 36rem; font-size: 1rem; line-height: 1.75rem; color: rgba(250,246,238,.75); }
@media (min-width: 640px) { .hero__lead { font-size: 1.125rem; } }
.hero__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* Page hero (interior pages) */
.page-hero { position: relative; overflow: hidden; background: var(--color-charcoal); color: var(--color-ivory); }
.page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.page-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--color-charcoal), rgba(28,23,18,.85) 55%, rgba(28,23,18,.6)); }
.page-hero__content { position: relative; padding: 6rem 0; }
@media (min-width: 640px) { .page-hero__content { padding: 8rem 0; } }
.page-hero--compact .page-hero__content { padding: 4rem 0; }
@media (min-width: 640px) { .page-hero--compact .page-hero__content { padding: 5rem 0; } }
.page-hero__title { margin-top: 1.5rem; max-width: 48rem; font-family: var(--font-display); font-weight: 500; font-size: 2.25rem; line-height: 1.15; }
@media (min-width: 640px) { .page-hero__title { font-size: 3rem; } }
.page-hero__lead { margin-top: 1.25rem; max-width: 42rem; font-size: 1rem; line-height: 1.75rem; color: rgba(250,246,238,.75); }
@media (min-width: 640px) { .page-hero__lead { font-size: 1.125rem; } }

/* Ripple ring around "Watch Full Video" */
@keyframes ripple-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.55); opacity: 0; } }
.ripple-ring { position: absolute; inset: 0; border-radius: 9999px; border: 2px solid rgba(232,207,142,.7); pointer-events: none; animation: ripple-pulse 2.2s cubic-bezier(.2,.6,.4,1) infinite; }
.ripple-ring--delay { animation-delay: 1.1s; }
@media (prefers-reduced-motion: reduce) { .ripple-ring { animation: none; display: none; } }
.ripple-wrap { position: relative; display: inline-flex; }

/* ===== Stat strip ===== */
.stat-strip { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat-strip--dark { background: var(--color-charcoal-soft); color: var(--color-ivory); }
.stat-strip--light { background: var(--color-ivory-dim); color: var(--color-charcoal); }
.stat-strip__item { padding: 2rem 1.5rem; text-align: center; border: 1px solid transparent; }
.stat-strip--dark .stat-strip__item { border-color: rgba(250,246,238,.1); border-width: 0 1px 1px 0; }
.stat-strip--light .stat-strip__item { border-color: rgba(28,23,18,.1); border-width: 0 1px 1px 0; }
.stat-strip__item:nth-child(2n) { border-right: 0; }
@media (min-width: 640px) { .stat-strip__item { border-bottom: 0; } .stat-strip__item:nth-child(2n) { border-right-width: 1px; } .stat-strip__item:last-child { border-right: 0; } }
.stat-strip__value { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: var(--color-gold); }
@media (min-width: 640px) { .stat-strip__value { font-size: 1.875rem; } }
.stat-strip__label { margin-top: .25rem; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: rgba(250,246,238,.6); }
.stat-strip--light .stat-strip__label { color: rgba(28,23,18,.6); }

/* ===== Grids ===== */
.grid { display: grid; gap: 2.5rem; }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.grid-6 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid-6 { grid-template-columns: repeat(6, 1fr); } }
.grid-tight { gap: 1.25rem; }
.grid-items-center { align-items: center; }

/* ===== Feature card ===== */
.feature-card { border-top: 1px solid rgba(201,161,59,.3); padding-top: 1.5rem; }
.feature-card__index { font-family: var(--font-display); font-size: .875rem; color: var(--color-gold); }
.feature-card__title { margin-top: .5rem; font-family: var(--font-display); font-size: 1.25rem; color: var(--color-charcoal); }
.feature-card__body { margin-top: .75rem; font-size: .875rem; line-height: 1.5rem; color: rgba(28,23,18,.7); }

/* ===== Product / image cards ===== */
.card { overflow: hidden; border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); border: 1px solid rgba(28,23,18,.05); transition: box-shadow .2s; }
.card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-ivory-dim); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.card:hover .card__media img { transform: scale(1.05); }
.card__media--contain img { object-fit: contain; padding: .5rem; }
.card__media--tall { aspect-ratio: 3 / 4; }
.card__badge { position: absolute; left: .75rem; top: .75rem; border-radius: 9999px; background: rgba(28,23,18,.8); padding: .25rem .75rem; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-gold-soft); }
.card__body { padding: 1.25rem; }
.card__title { font-family: var(--font-display); font-size: 1.125rem; color: var(--color-charcoal); }
.card__title--sm { font-size: .875rem; font-weight: 600; }
.card__desc { margin-top: .5rem; font-size: .875rem; line-height: 1.5rem; color: rgba(28,23,18,.65); }
.card__note { margin-top: .75rem; border-radius: .5rem; background: var(--color-ivory-dim); padding: .5rem .75rem; font-size: 12px; line-height: 1.25rem; color: rgba(28,23,18,.7); }
.card__note strong { font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--color-maroon); }
.card__link { margin-top: 1rem; display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 600; color: var(--color-maroon); }
.card__link:hover { text-decoration: underline; }

/* ===== CTA band ===== */
.cta-band { background: var(--color-maroon); }
.cta-band__inner { text-align: center; padding: 4rem 0; }
@media (min-width: 640px) { .cta-band__inner { padding: 5rem 0; } }
.cta-band__title { font-family: var(--font-display); font-weight: 500; font-size: 1.875rem; color: var(--color-ivory); }
@media (min-width: 640px) { .cta-band__title { font-size: 2.25rem; } }
.cta-band__lead { margin: 1rem auto 0; max-width: 36rem; font-size: .875rem; color: rgba(250,246,238,.8); }
@media (min-width: 640px) { .cta-band__lead { font-size: 1rem; } }
.cta-band__actions { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; }
@media (min-width: 640px) { .cta-band__actions { flex-direction: row; } }

/* ===== Footer ===== */
.site-footer { background: var(--color-charcoal); color: rgba(250,246,238,.8); }
.site-footer__grid { display: grid; gap: 2.5rem; padding: 3rem 0; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(4, 1fr); } }
.site-footer__brand { display: flex; align-items: center; gap: .75rem; }
.site-footer__brand img { height: 3rem; width: 3rem; object-fit: contain; flex-shrink: 0; }
.site-footer__brand-name { font-family: var(--font-display); font-size: 1.125rem; color: var(--color-ivory); }
.site-footer__brand-sub { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: .2em; color: var(--color-gold-soft); text-transform: uppercase; }
.site-footer__desc { margin-top: 1rem; max-width: 20rem; font-size: .875rem; line-height: 1.5rem; color: rgba(250,246,238,.6); }
.site-footer h3 { font-family: var(--font-display); font-size: .875rem; text-transform: uppercase; letter-spacing: .2em; color: var(--color-gold-soft); }
.site-footer__list { margin-top: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1rem; font-size: .875rem; }
@media (min-width: 768px) { .site-footer__list { grid-template-columns: 1fr; } }
.site-footer__list a { color: rgba(250,246,238,.7); }
.site-footer__list a:hover { color: var(--color-gold-soft); }
.site-footer__contact { margin-top: 1rem; display: flex; flex-direction: column; gap: .625rem; font-size: .875rem; }
.site-footer__contact li { display: flex; align-items: flex-start; gap: .625rem; }
.site-footer__contact a { color: rgba(250,246,238,.7); word-break: break-word; }
.site-footer__contact a:hover { color: var(--color-gold-soft); }
.site-footer__contact svg { flex-shrink: 0; margin-top: 2px; color: rgba(232,207,142,.7); }
.site-footer__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: rgba(250,246,238,.45); padding-top: .25rem; }
.site-footer__bottom { border-top: 1px solid rgba(250,246,238,.1); }
.site-footer__bottom-inner { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem 0; text-align: center; font-size: 12px; color: rgba(250,246,238,.45); }
@media (min-width: 640px) { .site-footer__bottom-inner { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; } }
.site-footer__bottom-inner a { font-weight: 600; color: rgba(250,246,238,.6); text-decoration: underline; text-decoration-color: rgba(201,161,59,.4); text-underline-offset: 2px; }
.site-footer__bottom-inner a:hover { color: var(--color-gold-soft); }

/* ===== Bordered service cards (Private Label / MOR) ===== */
.service-card { display: flex; flex-direction: column; border-radius: 1rem; border: 1px solid rgba(28,23,18,.1); padding: 2rem; }
.service-card__num { font-family: var(--font-display); font-size: .875rem; color: var(--color-gold); }
.service-card__title { margin-top: .5rem; font-family: var(--font-display); font-size: 1.25rem; color: var(--color-charcoal); }
.service-card__body { margin-top: .75rem; flex: 1; font-size: .875rem; line-height: 1.5rem; color: rgba(28,23,18,.7); }
.service-card__link { margin-top: 1.5rem; display: inline-flex; align-items: center; font-size: .875rem; font-weight: 600; color: var(--color-maroon); }
.service-card__link:hover { text-decoration: underline; }

/* ===== Certifications strip (charcoal-soft) ===== */
.cert-tile { border-radius: .75rem; background: rgba(250,246,238,.05); padding: 1rem; text-align: center; border: 1px solid rgba(250,246,238,.1); }
.cert-tile__media { position: relative; margin: 0 auto; aspect-ratio: 3 / 4; width: 100%; overflow: hidden; border-radius: .375rem; background: var(--color-ivory); }
.cert-tile__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cert-tile__name { margin-top: .75rem; font-size: 12px; font-weight: 600; color: rgba(250,246,238,.85); }

/* ===== Export markets / buyer tiles ===== */
.tile { display: flex; flex-direction: column; align-items: center; gap: .5rem; border-radius: .75rem; padding: 1.5rem 1rem; text-align: center; }
.tile--dark { background: var(--color-charcoal); color: var(--color-ivory); }
.tile--outline { border: 1px solid rgba(28,23,18,.1); }
.tile--outline svg { color: var(--color-maroon); }
.tile__flag { font-size: 2.25rem; line-height: 1; }
.tile__label { font-size: .875rem; font-weight: 500; }
.tile__label--muted { color: rgba(28,23,18,.8); font-weight: 600; }
.pill { display: inline-block; border-radius: 9999px; padding: .25rem .75rem; font-size: 12px; font-weight: 500; }
.pill--light { background: var(--color-ivory-dim); color: rgba(28,23,18,.7); }
.pill--outline-gold { border: 1px solid rgba(201,161,59,.3); color: var(--color-gold-soft); }
.pill--outline-maroon { border: 1px solid rgba(122,31,43,.2); background: #fff; color: var(--color-maroon); font-weight: 600; }

/* ===== History timeline (About) ===== */
.timeline { margin-top: 3rem; border-left: 1px solid rgba(201,161,59,.3); padding-left: 2rem; display: flex; flex-direction: column; gap: 2rem; }
.timeline__item { position: relative; }
.timeline__dot { position: absolute; left: -2.375rem; top: .25rem; height: .75rem; width: .75rem; border-radius: 9999px; background: var(--color-maroon); }
.timeline__year { font-family: var(--font-display); font-size: 1.125rem; color: var(--color-gold); }
.timeline__text { margin-top: .25rem; max-width: 42rem; font-size: .875rem; line-height: 1.5rem; color: rgba(28,23,18,.7); }

/* ===== Team / founder ===== */
.founder-photo { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: 9999px; box-shadow: 0 0 0 4px rgba(201,161,59,.3); }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.founder-quote { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.3; color: var(--color-gold-soft); }
@media (min-width: 640px) { .founder-quote { font-size: 1.875rem; } }
.team-card { display: flex; gap: 1.25rem; border-radius: 1rem; background: #fff; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); border: 1px solid rgba(28,23,18,.05); }
.team-card__photo { position: relative; height: 7rem; width: 7rem; flex-shrink: 0; overflow: hidden; border-radius: .75rem; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.team-card__name { font-family: var(--font-display); font-size: 1.125rem; color: var(--color-charcoal); }
.team-card__title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--color-maroon); }
.team-card__bio { margin-top: .5rem; font-size: .875rem; line-height: 1.5rem; color: rgba(28,23,18,.65); }

/* ===== Process timeline (Our Process) ===== */
.process-rail { position: relative; }
.process-rail__line { position: absolute; left: 50%; top: 0; display: none; height: 100%; width: 1px; transform: translateX(-50%); background: linear-gradient(to bottom, transparent, rgba(28,23,18,.15), transparent); }
@media (min-width: 1024px) { .process-rail__line { display: block; } }
.process-steps { display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 1024px) { .process-steps { gap: 0; } }
.process-step { position: relative; }
@media (min-width: 1024px) { .process-step { display: grid; grid-template-columns: repeat(2,1fr); align-items: center; gap: 4rem; padding: 2.5rem 0; } }
.process-step__marker { position: absolute; left: 50%; top: 2.5rem; display: none; height: 2.75rem; width: 2.75rem; transform: translateX(-50%); align-items: center; justify-content: center; border-radius: 9999px; border: 2px solid var(--color-gold); background: var(--color-charcoal); font-family: var(--font-display); font-size: .875rem; color: var(--color-gold); }
@media (min-width: 1024px) { .process-step__marker { display: flex; } }
.process-step__media { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 1rem; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.process-step__media img { width: 100%; height: 100%; object-fit: cover; }
.process-step--reverse .process-step__media { order: 2; }
.process-step__badge { position: absolute; left: 1rem; top: 1rem; border-radius: 9999px; background: rgba(28,23,18,.8); padding: .25rem .75rem; font-family: var(--font-display); font-size: .875rem; color: var(--color-gold); }
@media (min-width: 1024px) { .process-step__badge { display: none; } }
.process-step__body { margin-top: 1.5rem; }
@media (min-width: 1024px) { .process-step__body { margin-top: 0; padding-left: 2rem; } .process-step--reverse .process-step__body { order: 1; padding-left: 0; padding-right: 2rem; } }
.process-step__eyebrow { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .3em; color: var(--color-maroon); }
.process-step__title { margin-top: .75rem; font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: var(--color-charcoal); }
@media (min-width: 640px) { .process-step__title { font-size: 1.875rem; } }
.process-step__text { margin-top: 1rem; max-width: 28rem; font-size: .875rem; line-height: 1.75rem; color: rgba(28,23,18,.7); }

/* ===== Sustainability cards ===== */
.sustain-card { overflow: hidden; border-radius: 1rem; border: 1px solid rgba(28,23,18,.1); }
.sustain-card__media { position: relative; aspect-ratio: 4/3; }
.sustain-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sustain-card__body { padding: 1.5rem; }
.sustain-card__body svg { color: var(--color-maroon); }
.sustain-card__title { margin-top: 1rem; font-family: var(--font-display); font-size: 1.125rem; color: var(--color-charcoal); }
.sustain-card__text { margin-top: .5rem; font-size: .875rem; line-height: 1.5rem; color: rgba(28,23,18,.65); }

/* ===== Gallery (masonry via CSS columns) ===== */
.masonry { margin-top: 2rem; column-count: 1; column-gap: 1.25rem; }
@media (min-width: 640px) { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }
.masonry__item { margin-bottom: 1.25rem; break-inside: avoid; overflow: hidden; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); border: 1px solid rgba(28,23,18,.05); }
.masonry__item img { width: 100%; height: auto; object-fit: cover; }

/* ===== RFQ / contact form ===== */
.form-panel { border-radius: 1rem; background: #fff; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); border: 1px solid rgba(28,23,18,.05); }
@media (min-width: 640px) { .form-panel { padding: 2.5rem; } }
.form-row { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: repeat(2,1fr); } }
.field { display: block; }
.field__label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: rgba(28,23,18,.7); }
.field__label .req { color: var(--color-maroon); }
.field__hint { display: block; margin-top: .25rem; font-size: 12px; color: rgba(28,23,18,.45); }
.field input, .field select, .field textarea {
  margin-top: .375rem; width: 100%; border-radius: .5rem; border: 1px solid rgba(28,23,18,.15);
  background: #fff; padding: .625rem 1rem; font-size: .875rem; color: var(--color-charcoal);
  box-shadow: 0 1px 2px rgba(0,0,0,.03); font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-maroon); box-shadow: 0 0 0 3px rgba(122,31,43,.15); }
.form-actions { display: flex; flex-direction: column; gap: .75rem; padding-top: .5rem; }
@media (min-width: 640px) { .form-actions { flex-direction: row; } }
.form-success { border-radius: 1rem; border: 1px solid rgba(201,161,59,.3); background: var(--color-ivory-dim); padding: 2rem; text-align: center; }
.form-success h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-charcoal); }
.form-success p { margin-top: .75rem; font-size: .875rem; color: rgba(28,23,18,.7); }

.contact-card { border-radius: 1rem; border: 1px solid rgba(28,23,18,.1); padding: 1.5rem; }
.contact-card + .contact-card { margin-top: 2rem; }
.contact-card__name { margin-top: .75rem; display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--color-charcoal); }
.contact-card__list { margin-top: .75rem; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; color: rgba(28,23,18,.7); }
.contact-card__list a:hover, .contact-card__name svg { color: var(--color-maroon); }
.contact-card__list li { display: flex; align-items: flex-start; gap: .5rem; }
.contact-card__list svg { flex-shrink: 0; margin-top: 2px; color: var(--color-maroon); }
.contact-card__list a:hover { color: var(--color-maroon); }
.map-embed { margin-top: 1rem; aspect-ratio: 16/9; overflow: hidden; border-radius: .5rem; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* ===== WhatsApp floating button ===== */
.whatsapp-fab {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 50; display: flex; height: 3.5rem; width: 3.5rem;
  align-items: center; justify-content: center; border-radius: 9999px; background: #25D366; color: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.2); transition: transform .15s;
}
.whatsapp-fab:hover { transform: scale(1.05); }

/* ===== Video modal ===== */
.video-modal-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(28,23,18,.9); padding: 1rem; backdrop-filter: blur(4px); }
.video-modal-overlay.is-hidden { display: none; }
.video-modal { position: relative; width: 100%; max-width: 56rem; overflow: hidden; border-radius: 1rem; background: var(--color-charcoal); box-shadow: 0 25px 50px rgba(0,0,0,.4); }
.video-modal__close { position: absolute; right: .75rem; top: .75rem; z-index: 10; display: flex; height: 2.25rem; width: 2.25rem; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(28,23,18,.8); color: var(--color-ivory); border: 0; }
.video-modal__close:hover { background: var(--color-charcoal); }
.video-modal__frame { aspect-ratio: 16/9; width: 100%; }
.video-modal__frame video { width: 100%; height: 100%; }

/* ===== Utility ===== */
.text-center { text-align: center; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.flex-between { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.link-arrow { font-size: .875rem; font-weight: 600; color: var(--color-maroon); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow--light { color: var(--color-gold-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }