/* =========================================================================
   NAVABI DAIRY FARMS — style.css
   Premium dairy / modern agriculture corporate theme
   Bilingual: English (LTR) + Dari فارسی دری (RTL)
   Built on Bootstrap 5 with custom design layer
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Brand palette (exact brief values) */
  --c-blue:        #0F3557;   /* Primary dark blue   */
  --c-green:       #4C8C2B;   /* Secondary green     */
  --c-green-light: #7FB33D;   /* Light green         */
  --c-green-accent:#6A9E2E;   /* Accent green        */
  --c-white:       #FFFFFF;
  --c-bg:          #F8F9F7;   /* Light background    */
  --c-text:        #2B2B2B;   /* Body text           */
  --c-border:      #DDE3D8;   /* Border / hairline   */

  /* Derived tints */
  --c-blue-deep:   #0a2740;
  --c-green-soft:  #eef4e6;
  --c-blue-soft:   #eaf1f7;
  --c-muted:       #5d6b66;

  /* Typography */
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", "Poppins", system-ui, -apple-system, sans-serif;

  /* Spacing & shape */
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --shadow-sm: 0 6px 18px rgba(15, 53, 87, .06);
  --shadow:    0 18px 40px rgba(15, 53, 87, .10);
  --shadow-lg: 0 30px 70px rgba(15, 53, 87, .16);
  --section-y: clamp(4rem, 8vw, 7.5rem);
  --container-pad: clamp(1.1rem, 4vw, 2rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Dari uses Vazirmatn for both display and body (Arabic-script ready) */
:root[dir="rtl"] {
  --font-display: "Vazirmatn", "Inter", sans-serif;
  --font-body:    "Vazirmatn", "Inter", sans-serif;
}

/* -------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
* { -webkit-font-smoothing: antialiased; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-white);
  line-height: 1.7;
  font-size: 1.02rem;
  overflow-x: hidden;       /* guarantee: no horizontal scroll */
}

h1, h2, h3, h4, .display-font {
  font-family: var(--font-display);
  color: var(--c-blue);
  line-height: 1.12;
  letter-spacing: -.01em;
  font-weight: 700;
}
:root[dir="rtl"] h1,
:root[dir="rtl"] h2,
:root[dir="rtl"] h3,
:root[dir="rtl"] h4 { letter-spacing: 0; line-height: 1.4; }

a { color: var(--c-green); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--c-green-accent); }

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

::selection { background: var(--c-green-light); color: #fff; }

.container { padding-inline: var(--container-pad); }

/* Section rhythm */
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.bg-soft { background: var(--c-bg); }
.bg-green-soft { background: var(--c-green-soft); }
.bg-blue { background: var(--c-blue); color: #eaf1f7; }
.bg-blue h1, .bg-blue h2, .bg-blue h3 { color: #fff; }

/* -------------------------------------------------------------------------
   3. TYPOGRAPHY HELPERS
   ------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body);
  font-weight: 600; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-green-accent);
  margin-bottom: 1rem;
}
:root[dir="rtl"] .eyebrow { letter-spacing: .04em; }
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--c-green-light);
}

.section-title { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1rem; }
.lead-text { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--c-muted); max-width: 60ch; }
.text-green { color: var(--c-green) !important; }
.text-blue  { color: var(--c-blue) !important; }
.fw-display { font-family: var(--font-display); }

/* -------------------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------------------- */
.btn { font-family: var(--font-body); font-weight: 600; border-radius: 999px;
  padding: .85rem 1.8rem; letter-spacing: .01em; transition: all .3s var(--ease);
  border: 2px solid transparent; }

.btn-primary { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.btn-primary:hover { background: var(--c-green-accent); border-color: var(--c-green-accent);
  transform: translateY(-3px); box-shadow: 0 14px 28px rgba(76,140,43,.32); color:#fff; }

.btn-blue { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.btn-blue:hover { background: var(--c-blue-deep); transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(15,53,87,.3); color:#fff; }

.btn-outline-light-2 { background: transparent; border-color: rgba(255,255,255,.6); color:#fff; }
.btn-outline-light-2:hover { background:#fff; color: var(--c-blue); transform: translateY(-3px); }

.btn-ghost { background: transparent; border-color: var(--c-border); color: var(--c-blue); }
.btn-ghost:hover { border-color: var(--c-green); color: var(--c-green); transform: translateY(-3px); }

.btn-lg { padding: 1rem 2.2rem; font-size: 1.02rem; }

/* arrow nudge — direction aware */
.btn .bi { transition: transform .3s var(--ease); }
.btn:hover .bi-arrow-right { transform: translateX(4px); }
:root[dir="rtl"] .btn:hover .bi-arrow-right { transform: translateX(-4px); }

/* -------------------------------------------------------------------------
   5. HEADER / NAVBAR
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--c-border); }

.navbar-brand { display: flex; align-items: center; gap: .7rem; }
.navbar-brand img { width: 230px; height: 87px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text strong { font-family: var(--font-display); font-size: 1.2rem; color: var(--c-blue); letter-spacing: .01em; }
.brand-text span { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-green-accent); font-weight: 600; margin-top: 4px; }
:root[dir="rtl"] .brand-text span { letter-spacing: .04em; }

.navbar-nav .nav-link {
  font-weight: 500; color: var(--c-blue); position: relative;
  padding: .5rem 0; margin-inline: .9rem;
}
.navbar-nav .nav-link::after {
  content: ""; position: absolute; bottom: -2px; inset-inline-start: 0;
  width: 0; height: 2px; background: var(--c-green-light); border-radius: 2px;
  transition: width .3s var(--ease);
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after { width: 100%; }
.navbar-nav .nav-link.active { color: var(--c-green); }

/* Language switcher */
.lang-switch { display: inline-flex; align-items: center; border: 1px solid var(--c-border);
  border-radius: 999px; overflow: hidden; background:#fff; }
.lang-switch button {
  border: 0; background: transparent; padding: .4rem .85rem; cursor: pointer;
  font-weight: 600; font-size: .85rem; color: var(--c-muted); line-height: 1;
  transition: all .25s var(--ease);
}
.lang-switch button.active { background: var(--c-blue); color: #fff; }
.lang-switch button:hover:not(.active) { color: var(--c-blue); }

/* mobile toggler */
.navbar-toggler { border: 1px solid var(--c-border); border-radius: 12px; padding: .4rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(76,140,43,.25); }

/* -------------------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative; color: #fff; isolation: isolate;
  padding-block: clamp(5rem, 12vw, 9rem);
  background-color: var(--c-blue-deep);   /* fallback if photo fails */
  background-image:
    linear-gradient(120deg, rgba(10,39,64,.86) 0%, rgba(15,53,87,.62) 55%, rgba(76,140,43,.42) 100%),
    var(--hero-img, linear-gradient(120deg, rgba(15,53,87,.5), rgba(76,140,43,.5)));
  background-size: cover; background-position: center;
  overflow: hidden;
}
.hero--page { padding-block: clamp(4rem, 9vw, 6.5rem); }
.hero h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.4rem); }
.hero .hero-sub { font-size: clamp(1.05rem, 2vw, 1.35rem); color: #dce7c9; font-weight: 500; }
.hero .hero-lead { color: rgba(255,255,255,.82); max-width: 54ch; }
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem; background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:.45rem 1.1rem;
  font-size:.82rem; font-weight:600; letter-spacing:.04em; color:#eaf6d8; backdrop-filter: blur(6px);
}

/* hero stat chips */
.hero-stats { display:flex; flex-wrap:wrap; gap:1rem 2.5rem; }
.hero-stat .num { font-family: var(--font-display); font-size: clamp(2rem,4vw,2.8rem);
  font-weight:700; color:#fff; line-height:1; }
.hero-stat .lbl { font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  color:#bcd39a; font-weight:600; margin-top:.4rem; }
:root[dir="rtl"] .hero-stat .lbl { letter-spacing:.02em; }

/* -------------------------------------------------------------------------
   7. CURVED SECTION DIVIDERS  (signature brochure element)
   ------------------------------------------------------------------------- */
.curve-divider { display:block; width:100%; height:auto; line-height:0; }
.curve-divider svg { display:block; width:100%; height:clamp(48px,7vw,110px); }
.hero .curve-divider { position:absolute; inset-inline:0; bottom:-1px; z-index:2; }

/* -------------------------------------------------------------------------
   8. CARDS
   ------------------------------------------------------------------------- */
.card-feature {
  background:#fff; border:1px solid var(--c-border); border-radius: var(--radius);
  padding: 2.2rem 1.8rem; height:100%;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  position: relative; overflow: hidden;
}
.card-feature::before {
  content:""; position:absolute; inset-inline-start:0; top:0; height:4px; width:100%;
  background: linear-gradient(90deg, var(--c-green), var(--c-green-light));
  transform: scaleX(0); transform-origin: inline-start; transition: transform .4s var(--ease);
}
.card-feature:hover { transform: translateY(-10px); box-shadow: var(--shadow); border-color: transparent; }
.card-feature:hover::before { transform: scaleX(1); }
.card-feature .icon-circle {
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background: var(--c-green-soft); color: var(--c-green); font-size:1.7rem; margin-bottom:1.3rem;
  transition: all .4s var(--ease);
}
.card-feature:hover .icon-circle { background: var(--c-green); color:#fff; transform: rotate(-6deg) scale(1.06); }
.card-feature h3 { font-size:1.3rem; margin-bottom:.6rem; }
.card-feature p { color: var(--c-muted); margin:0; font-size:.98rem; }

/* Service card */
.card-service { background:#fff; border:1px solid var(--c-border); border-radius:var(--radius);
  padding:2.4rem; height:100%; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  display:flex; flex-direction:column; }
.card-service:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.card-service .svc-icon { width:72px; height:72px; border-radius:20px;
  background: linear-gradient(135deg, var(--c-blue), #1d567f); color:#fff;
  display:grid; place-items:center; font-size:2rem; margin-bottom:1.5rem; }
.card-service h3 { font-size:1.45rem; }
.card-service .benefits { list-style:none; padding:0; margin:1.2rem 0 1.6rem; }
.card-service .benefits li { position:relative; padding-inline-start:1.7rem; margin-bottom:.5rem;
  color: var(--c-muted); font-size:.96rem; }
.card-service .benefits li::before { content:"\F26E"; font-family:"bootstrap-icons";
  position:absolute; inset-inline-start:0; color: var(--c-green-light); font-size:.9rem; top:1px; }
.card-service .btn { margin-top:auto; align-self:flex-start; }

/* Value / mission cards */
.value-card { background:#fff; border:1px solid var(--c-border); border-radius:var(--radius);
  padding:2rem; height:100%; transition:.4s var(--ease); }
.value-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-6px); }
.value-card .v-icon { font-size:2rem; color: var(--c-green); margin-bottom:.8rem; }

/* -------------------------------------------------------------------------
   9. CIRCULAR FRAMED IMAGES  (brochure element)
   ------------------------------------------------------------------------- */
.circle-frame {
  border-radius:50%; overflow:hidden; aspect-ratio:1; position:relative;
  border:6px solid #fff; box-shadow: var(--shadow);
  background-size:cover; background-position:center;
}
.circle-frame::after { content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--c-green-light); }

.image-card { border-radius:var(--radius-lg); overflow:hidden; box-shadow: var(--shadow);
  background-size:cover; background-position:center; min-height:340px; position:relative; }

/* decorative blobs */
.blob { position:absolute; border-radius:50%; filter: blur(2px); opacity:.5; z-index:-1; }

/* -------------------------------------------------------------------------
   10. STATS / COUNTERS / PROGRESS
   ------------------------------------------------------------------------- */
.stat-block { text-align:center; }
.stat-block .stat-num { font-family:var(--font-display); font-weight:700;
  font-size: clamp(2.4rem,5vw,3.4rem); color: var(--c-green); line-height:1;
  font-variant-numeric: tabular-nums; }
.stat-block .stat-lbl { color: var(--c-muted); font-weight:600; margin-top:.5rem;
  letter-spacing:.04em; }

.capacity-card { background:#fff; border:1px solid var(--c-border); border-radius:var(--radius);
  padding:2.2rem; box-shadow: var(--shadow-sm); }
.capacity-card .cap-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.6rem; }
.capacity-card .cap-val { font-family:var(--font-display); font-weight:700; color: var(--c-blue);
  font-size:1.5rem; font-variant-numeric: tabular-nums; }
.progress-rail { height:12px; background: var(--c-green-soft); border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; width:0; border-radius:999px;
  background: linear-gradient(90deg, var(--c-green), var(--c-green-light));
  transition: width 1.6s var(--ease); }

/* -------------------------------------------------------------------------
   11. PARTNERSHIP STRIP
   ------------------------------------------------------------------------- */
.partner-item { display:flex; gap:1rem; align-items:flex-start; padding:1.3rem;
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius); height:100%;
  transition:.35s var(--ease); }
.partner-item:hover { border-color: var(--c-green-light); box-shadow: var(--shadow-sm); transform: translateY(-4px); }
.partner-item .p-ic { flex:0 0 auto; width:48px; height:48px; border-radius:14px;
  background: var(--c-green-soft); color: var(--c-green); display:grid; place-items:center; font-size:1.4rem; }
.partner-item h4 { font-size:1.05rem; margin:0 0 .2rem; }
.partner-item p { margin:0; color:var(--c-muted); font-size:.9rem; }

/* -------------------------------------------------------------------------
   12. GALLERY
   ------------------------------------------------------------------------- */
.gallery-grid { display:grid; gap:1rem; grid-template-columns: repeat(12,1fr); }
.gallery-item { position:relative; overflow:hidden; border-radius:var(--radius);
  background-size:cover; background-position:center; min-height:200px; }
.gallery-item::after { content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(15,53,87,.55), transparent 60%);
  opacity:0; transition: opacity .4s var(--ease); }
.gallery-item:hover::after { opacity:1; }
.gallery-item .g-cap { position:absolute; inset-inline-start:1rem; bottom:1rem; color:#fff;
  font-weight:600; z-index:2; opacity:0; transform: translateY(8px);
  transition: all .4s var(--ease); text-shadow:0 2px 8px rgba(0,0,0,.4); }
.gallery-item:hover .g-cap { opacity:1; transform: translateY(0); }
.gallery-item .g-inner { width:100%; height:100%; background:inherit;
  transition: transform .6s var(--ease); }
.gallery-item:hover { box-shadow: var(--shadow); }
.gallery-item:hover .g-inner { transform: scale(1.08); }
.g-tall { grid-row: span 2; min-height:auto; }
.span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; } .span-8 { grid-column: span 8; }
@media (max-width: 767px){
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  .span-6,.span-4,.span-3,.span-8 { grid-column: span 1; }
  .g-tall { grid-row: span 1; }
  .gallery-item { min-height:160px; }
}

/* -------------------------------------------------------------------------
   13. TESTIMONIALS SLIDER
   ------------------------------------------------------------------------- */
.testi-track { display:flex; transition: transform .6s var(--ease); }
.testi-slide { flex:0 0 100%; padding-inline: clamp(0px, 4vw, 2rem); }
.testi-card { background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg);
  padding: clamp(2rem,4vw,3.2rem); box-shadow: var(--shadow-sm); text-align:center; max-width:760px; margin:0 auto; }
.testi-card .quote-mark { font-family:var(--font-display); font-size:4rem; color: var(--c-green-light);
  line-height:.6; height:2rem; }
.testi-card blockquote { font-family:var(--font-display); font-size: clamp(1.15rem,2.2vw,1.5rem);
  color: var(--c-blue); font-style:italic; margin:1rem 0 1.6rem; }
:root[dir="rtl"] .testi-card blockquote { font-style:normal; }
.testi-author { font-weight:700; color: var(--c-text); }
.testi-role { color: var(--c-muted); font-size:.9rem; }
.testi-dots { display:flex; justify-content:center; gap:.5rem; margin-top:1.8rem; }
.testi-dots button { width:10px; height:10px; border-radius:50%; border:0; cursor:pointer;
  background: var(--c-border); transition:.3s var(--ease); padding:0; }
.testi-dots button.active { background: var(--c-green); width:28px; border-radius:999px; }

/* -------------------------------------------------------------------------
   14. CTA BANNER
   ------------------------------------------------------------------------- */
.cta-banner { position:relative; isolation:isolate; color:#fff; border-radius:var(--radius-lg);
  overflow:hidden; padding: clamp(2.8rem,6vw,5rem);
  background: linear-gradient(120deg, var(--c-blue) 0%, var(--c-blue-deep) 60%, var(--c-green) 130%); }
.cta-banner h2 { color:#fff; }
.cta-banner .deco-curve { position:absolute; inset-block:0; inset-inline-end:-40px; height:100%; opacity:.18; z-index:-1; }
:root[dir="rtl"] .cta-banner .deco-curve { inset-inline-end:auto; inset-inline-start:-40px; transform: scaleX(-1); }

/* -------------------------------------------------------------------------
   15. CONTACT
   ------------------------------------------------------------------------- */
.contact-form { background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg);
  padding: clamp(1.6rem,4vw,2.6rem); box-shadow: var(--shadow-sm); }
.form-label { font-weight:600; color: var(--c-blue); font-size:.92rem; margin-bottom:.35rem; }
.form-control, .form-select { border:1.5px solid var(--c-border); border-radius:var(--radius-sm);
  padding:.8rem 1rem; font-size:.98rem; background:#fff; }
.form-control:focus, .form-select:focus { border-color: var(--c-green-light);
  box-shadow: 0 0 0 .2rem rgba(127,179,61,.18); }
.info-tile { display:flex; gap:1rem; align-items:flex-start; padding:1.4rem;
  border:1px solid var(--c-border); border-radius:var(--radius); background:#fff; height:100%;
  transition:.35s var(--ease); }
.info-tile:hover { border-color: var(--c-green-light); transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.info-tile .it-ic { flex:0 0 auto; width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background: var(--c-green-soft); color: var(--c-green); font-size:1.5rem; }
.info-tile h4 { margin:0 0 .25rem; font-size:1.05rem; }
.info-tile p, .info-tile a { margin:0; color: var(--c-muted); font-size:.95rem; word-break:break-word; }

.map-embed { border:1px solid var(--c-border); border-radius:var(--radius-lg); overflow:hidden;
  min-height:340px; position:relative; background: var(--c-green-soft);
  display:grid; place-items:center; text-align:center; }
.map-embed .map-inner { padding:2rem; }
.map-embed iframe { width:100%; height:100%; min-height:340px; border:0; display:block; }

.whatsapp-float { position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:1040;
  width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff; display:grid;
  place-items:center; font-size:1.9rem; box-shadow:0 12px 28px rgba(37,211,102,.45);
  transition: transform .3s var(--ease); }
.whatsapp-float:hover { transform: scale(1.1); color:#fff; }

/* -------------------------------------------------------------------------
   16. FOOTER
   ------------------------------------------------------------------------- */
.site-footer { background: var(--c-blue-deep); color: #b9c8d4; padding-top: clamp(3.5rem,6vw,5rem); }
.site-footer h5 { color:#fff; font-family:var(--font-body); font-weight:700; font-size:1rem;
  letter-spacing:.04em; margin-bottom:1.2rem; }
.site-footer a { color:#b9c8d4; }
.site-footer a:hover { color: var(--c-green-light); }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:.6rem; }
.footer-links a { display:inline-flex; align-items:center; gap:.5rem; }
.footer-brand img { width:44px; height:44px; }
.footer-contact li { display:flex; gap:.7rem; margin-bottom:.8rem; align-items:flex-start; }
.footer-contact .bi { color: var(--c-green-light); margin-top:3px; }
.social-row { display:flex; gap:.7rem; margin-top:1.2rem; }
.social-row a { width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background: rgba(255,255,255,.08); color:#fff; transition:.3s var(--ease); }
.social-row a:hover { background: var(--c-green); transform: translateY(-3px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:3rem; padding-block:1.4rem;
  font-size:.88rem; color:#8ba0b0; }

/* -------------------------------------------------------------------------
   17. SCROLL-REVEAL ANIMATIONS
   ------------------------------------------------------------------------- */
[data-reveal] { opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity:1; transform: none; }
[data-reveal][data-delay="1"]{ transition-delay:.12s; }
[data-reveal][data-delay="2"]{ transition-delay:.24s; }
[data-reveal][data-delay="3"]{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1 !important; transform:none !important; transition:none !important; }
  .progress-fill, .testi-track { transition:none !important; }
}

/* -------------------------------------------------------------------------
   18. RTL FINE-TUNING
   ------------------------------------------------------------------------- */
:root[dir="rtl"] body { font-size: 1.06rem; }
:root[dir="rtl"] .eyebrow::before { /* already logical */ }
:root[dir="rtl"] .testi-card .quote-mark { transform: scaleX(-1); display:inline-block; }
/* keep latin numerals/phone LTR inside rtl text */
.ltr-inline { direction:ltr; unicode-bidi:isolate; display:inline-block; }

/* -------------------------------------------------------------------------
   19. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 991px){
  .navbar-collapse { background:#fff; border:1px solid var(--c-border); border-radius:var(--radius);
    margin-top:.8rem; padding:1rem 1.2rem; box-shadow: var(--shadow-sm); }
  .navbar-nav .nav-link { margin-inline:0; padding:.6rem 0; }
  .navbar-nav .nav-link::after { display:none; }
  .nav-mobile-extra { margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--c-border);
    display:flex; align-items:center; justify-content:space-between; gap:1rem; }
}
@media (min-width: 992px){ .nav-mobile-extra { display:none; } }

@media (max-width: 575px){
  .btn { width:100%; }
  .btn-inline-auto, .hero .btn { width:auto; }
  .hero-stats { gap:1.2rem 1.8rem; }
}

/* page hero breadcrumb */
.page-crumb { color: rgba(255,255,255,.7); font-size:.9rem; }
.page-crumb a { color:#cfe0b3; }

/* timeline (about / roadmap) */
.roadmap { position:relative; padding-inline-start: 0; list-style:none; margin:0; }
.roadmap .rm-item { position:relative; padding-inline-start:2.4rem; padding-bottom:2.2rem; }
.roadmap .rm-item::before { content:""; position:absolute; inset-inline-start:9px; top:6px; bottom:-6px;
  width:2px; background: var(--c-border); }
.roadmap .rm-item:last-child::before { display:none; }
.roadmap .rm-dot { position:absolute; inset-inline-start:0; top:2px; width:20px; height:20px;
  border-radius:50%; background:#fff; border:3px solid var(--c-green); }
.roadmap .rm-item.done .rm-dot { background: var(--c-green); }
.roadmap h4 { font-size:1.15rem; margin:0 0 .3rem; }
.roadmap .rm-tag { font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--c-green-accent); }
.roadmap p { color: var(--c-muted); margin:.2rem 0 0; }

/* split media row */
.media-frame { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);
  background-size:cover; background-position:center; min-height:380px; }

/* generic divider line */
.soft-hr { height:1px; background: var(--c-border); border:0; }

/* ===================================================================
   CONTACT PAGE — info stack, map pin, whatsapp box, outline-blue btn
   =================================================================== */
.info-stack { display:flex; flex-direction:column; gap:1rem; }

.btn-outline-blue { background:transparent; border-color: var(--c-blue); color: var(--c-blue); }
.btn-outline-blue:hover { background: var(--c-blue); color:#fff; transform: translateY(-3px); }

.map-embed { position:relative; }
.map-embed .map-pin { position:absolute; inset-block-end:14px; inset-inline-start:14px;
  background:#fff; color: var(--c-blue); font-weight:600; font-size:.9rem;
  padding:.5rem .9rem; border-radius:999px; box-shadow: var(--shadow-sm);
  display:inline-flex; align-items:center; gap:.4rem; }
.map-embed .map-pin i { color: var(--c-green); }

.whats-box { background: linear-gradient(150deg, var(--c-green) 0%, var(--c-green-accent) 100%);
  color:#fff; border-radius:var(--radius-lg); padding:2.4rem; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; box-shadow: var(--shadow-sm); }
.whats-box .whats-ic { width:60px; height:60px; border-radius:16px; display:grid; place-items:center;
  background:rgba(255,255,255,.18); font-size:1.7rem; margin-bottom:1rem; }
.whats-box h3 { color:#fff; margin:0 0 .5rem; }
.whats-box p { color:rgba(255,255,255,.9); margin:0 0 1.4rem; }
.whats-box .btn-primary { background:#fff; border-color:#fff; color: var(--c-green-accent); }
.whats-box .btn-primary:hover { background: var(--c-blue); border-color: var(--c-blue); color:#fff; }

/* form helper visibility + action buttons spacing */
.form-actions { display:flex; flex-wrap:wrap; gap:.75rem; }

/* =====================================================================
   20. PREMIUM ENHANCEMENT LAYER  (v2 — luxury refinement)
   Brand colours unchanged; only depth, type, motion & spacing refined.
   ===================================================================== */

/* ---- 20.1 Refined depth tokens (softer, layered) -------------------- */
:root {
  --shadow-sm: 0 2px 6px rgba(15,53,87,.05), 0 8px 24px rgba(15,53,87,.06);
  --shadow:    0 4px 12px rgba(15,53,87,.06), 0 22px 48px rgba(15,53,87,.12);
  --shadow-lg: 0 8px 24px rgba(15,53,87,.10), 0 40px 80px rgba(15,53,87,.18);
  --ring-green: 0 0 0 4px rgba(127,179,61,.28);
}

/* ---- 20.2 Typography polish ---------------------------------------- */
body { font-size: 1.04rem; letter-spacing: .002em; }
h1,h2,h3,h4 { text-wrap: balance; }
p { text-wrap: pretty; }
.section-title { font-size: clamp(2rem, 4.2vw, 3.25rem); letter-spacing: -.018em; line-height:1.08; }
:root[dir="rtl"] .section-title { letter-spacing: 0; line-height:1.4; }
.lead-text { line-height:1.75; }
.eyebrow { font-size:.78rem; letter-spacing:.2em; }
:root[dir="rtl"] .eyebrow { letter-spacing:.05em; }
/* refined link underline on inline content links */
.testi-card, .value-card, .card-feature, .card-service { letter-spacing: .002em; }

/* anchor offset under the sticky header */
section[id], [id].section { scroll-margin-top: 92px; }

/* ---- 20.3 Accessibility: visible focus ----------------------------- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .nav-link:focus-visible {
  outline: none; box-shadow: var(--ring-green); border-radius: 8px;
}
.btn:focus-visible { border-radius: 999px; }

/* ---- 20.4 HERO — cinematic image layer + vignette ------------------ */
.hero {
  /* image + scrim move to pseudo-layers so the photo can animate;
     element keeps only the solid fallback colour underneath */
  background-image: none;
}
.hero::before {
  content:""; position:absolute; inset:0; z-index:-2;
  background-image: var(--hero-img, linear-gradient(120deg, var(--c-blue), var(--c-green)));
  background-size: cover; background-position: center; background-color: var(--c-blue-deep);
  transform: scale(1.12); transform-origin: 60% 40%;
  animation: heroKen 16s var(--ease) forwards;
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(115deg, rgba(10,39,64,.90) 0%, rgba(15,53,87,.62) 50%, rgba(76,140,43,.38) 100%),
    radial-gradient(120% 90% at 70% 18%, transparent 38%, rgba(8,30,50,.50) 100%);
}
@keyframes heroKen { to { transform: scale(1); } }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); letter-spacing:-.022em; }
:root[dir="rtl"] .hero h1 { letter-spacing:0; }
.hero .hero-sub { letter-spacing:.02em; }
/* refined hero stat divider */
.hero-stats { gap:1.4rem 0; align-items:stretch; }
.hero-stat { padding-inline-end:2.6rem; margin-inline-end:2.6rem; position:relative; }
.hero-stat + .hero-stat::before {
  content:""; position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%);
  width:1px; height:64%; background:linear-gradient(180deg,transparent,rgba(255,255,255,.35),transparent);
}
@media (max-width:575px){
  .hero-stat { padding-inline-end:0; margin-inline-end:0; }
  .hero-stat + .hero-stat::before { display:none; }
}

/* ---- 20.5 Premium image presentation ------------------------------ */
.media-frame, .image-card {
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  position: relative;
}
.media-frame::after, .image-card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, transparent 55%, rgba(10,39,64,.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.media-frame:hover, .image-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* layered offset accent behind feature media (premium depth) */
.media-accent { position:relative; }
.media-accent::before {
  content:""; position:absolute; z-index:-1; inset:auto -18px -18px auto;
  width:62%; height:72%; border-radius: var(--radius-lg);
  background: var(--c-green-soft); border:1px solid var(--c-border);
}
:root[dir="rtl"] .media-accent::before { inset:auto auto -18px -18px; }

.circle-frame { border:7px solid #fff; box-shadow: var(--shadow-lg); }
.circle-frame::after { border-color: var(--c-green-light); inset:-7px; }

/* gallery — richer overlay + caption chip */
.gallery-item { box-shadow: var(--shadow-sm); }
.gallery-item::after {
  background: linear-gradient(to top, rgba(10,39,64,.72) 0%, rgba(10,39,64,.10) 55%, transparent 100%);
}
.gallery-item .g-cap {
  inset-inline-start:1.1rem; bottom:1.1rem; font-size:.95rem; letter-spacing:.01em;
  padding:.32rem .7rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; backdrop-filter: blur(4px); text-shadow:none;
}
.gallery-item:hover { box-shadow: var(--shadow-lg); }

/* ---- 20.6 Cards — refined surfaces --------------------------------- */
.card-feature, .card-service, .value-card, .partner-item, .info-tile, .capacity-card {
  box-shadow: var(--shadow-sm);
}
.card-feature { padding:2.4rem 2rem; }
.card-service { border-radius: var(--radius-lg); }
.card-service .svc-icon { box-shadow: 0 10px 24px rgba(15,53,87,.22); }
.value-card { border-radius: var(--radius-lg); padding:2.4rem; }

/* ---- 20.7 Buttons — subtle premium finish -------------------------- */
.btn { letter-spacing:.012em; }
.btn-primary {
  background: linear-gradient(135deg, var(--c-green) 0%, var(--c-green-accent) 100%);
  border-color: var(--c-green); box-shadow: 0 8px 20px rgba(76,140,43,.22);
}
.btn-primary:hover { box-shadow: 0 16px 32px rgba(76,140,43,.34); }
.btn-blue { box-shadow: 0 8px 20px rgba(15,53,87,.20); }
.btn-lg { padding:1.05rem 2.4rem; }

/* ---- 20.8 Owner monogram medallion (replaces stock face) ----------- */
.owner-medallion {
  position:relative; width:min(260px, 70vw); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 30% 25%, #15406a 0%, var(--c-blue) 55%, var(--c-blue-deep) 100%);
  box-shadow: var(--shadow-lg), inset 0 2px 10px rgba(255,255,255,.08);
}
.owner-medallion .om-initials {
  font-family: var(--font-display); font-weight:700; color:#fff;
  font-size: clamp(3.2rem, 9vw, 4.6rem); letter-spacing:.02em; line-height:1;
}
.owner-medallion .om-ring { position:absolute; inset:0; width:100%; height:100%; }
.owner-medallion .om-ring circle {
  fill:none; stroke: var(--c-green-light); stroke-width:1.5;
  stroke-dasharray:6 10; opacity:.65;
}

/* ---- 20.9 Section divider fill helpers ----------------------------- */
.curve-divider svg path { fill: #FFFFFF; }
.bg-soft + .section .curve-divider svg path { fill: var(--c-bg); }

/* ---- 20.10 RESPONSIVE HARDENING ------------------------------------ */
/* never let flex/grid children force horizontal scroll */
.partner-item > div, .info-tile > div, .footer-contact li > * { min-width:0; }
.hero .row > [class*="col-"] { min-width:0; }

/* tablet: gallery to a clean 6-col rhythm, taller tiles */
@media (min-width:768px) and (max-width:991px){
  .gallery-item { min-height:230px; }
  .card-service { padding:2rem; }
  .hero-stat .num { font-size: clamp(2rem,5vw,2.6rem); }
}

/* small tablets / large phones */
@media (max-width:767px){
  .media-frame { min-height:300px; }
  .media-accent::before { display:none; }
  .gallery-item .g-cap { font-size:.85rem; }
}

/* phones */
@media (max-width:575px){
  :root { --section-y: clamp(3rem,11vw,4rem); }
  .card-feature, .card-service, .value-card { padding:1.8rem 1.5rem; }
  .testi-card { padding:1.8rem 1.4rem; }
  .cta-banner { padding:2.4rem 1.5rem; }
  .hero { padding-block: clamp(4rem,18vw,6rem); }
  .owner-medallion { width:min(200px,60vw); }
  /* stack mobile-nav action button full width for a clean tap target */
  .nav-mobile-extra .btn { flex:1; text-align:center; }
}

/* very small phones — keep gallery 2-up but shorter */
@media (max-width:380px){
  .gallery-item { min-height:140px; }
  .hero h1 { font-size: clamp(2rem,9vw,2.6rem); }
}

/* reduce hero motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  .hero::before { animation:none; transform:none; }
}

/* ---- 20.11 Mobile gutter fix (prevent sub-pixel horizontal scroll) -- */
html { overflow-x: clip; }                 /* belt-and-suspenders */
@media (max-width: 575px){
  .row { --bs-gutter-x: 1.25rem; }         /* cap horizontal gutter so g-5 rows can't exceed container padding */
  :root { --container-pad: clamp(1.15rem, 4vw, 2rem); }
}

@media (max-width: 767px) {
    .navbar-brand img {
        width: 217px;
        height: 87px;
    }
}