/*
Theme Name: Madar
Theme URI: https://madar.example
Author: Madar
Description: Custom theme for MADAR — Madar International Pioneering Investment, Muscat, Oman. Design III "Split Canvas".
Version: 2.3.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: madar
*/


/* ============================================================
   MADAR INTERNATIONAL VENTURES
   Design III — "Split Canvas" (Structural Contrast)
   Rebuilt 1:1 from the source Figma Make project
   (src/designs/DesignThree.tsx) — same tokens, same copy.
   ============================================================ */

:root{
  --emerald:      #123C2E;
  --dark-emerald: #0A2419;
  --ivory:        #F5F0E6;
  --gold:         #C6A15B;
  --sand:         #E4D5B7;
  --brown:        #8C6F4A;
  --charcoal:     #1B1B1B;

  --serif: 'Playfair Display', serif;
  --sans:  'DM Sans', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ display:block; max-width:100%; }
em{ font-style: italic; }

/* media containers hold a full-bleed <img> */
.hero-right, .who-media, .sector-media, .quad-media, .why-media{
  min-height:320px;
}

/* ---------------- NAV ---------------- */

.nav{
  position:sticky; top:0; z-index:10;
  background: var(--emerald);
  padding:1.1rem 4rem;
  display:flex; align-items:center; justify-content:space-between;
}
.nav .brand{ display:flex; align-items:center; gap:2.5rem; }
.nav .brand .word{
  font-family:var(--serif); font-size:calc(1.1rem * var(--madar-fs, 1)); color:var(--ivory);
  letter-spacing:0.2em; text-transform:uppercase; font-weight:600;
}
.nav .brand .rule{ width:1px; height:1.25rem; background:rgba(245,240,230,0.2); }
.nav .brand .tag{
  font-family:var(--sans); font-size:calc(0.55rem * var(--madar-fs-small, 1)); letter-spacing:0.25em;
  text-transform:uppercase; color:var(--gold);
}
.nav .links{
  display:flex; gap:2.5rem;
  font-family:var(--sans); font-size:calc(0.65rem * var(--madar-fs-small, 1)); letter-spacing:0.15em; text-transform:uppercase;
}
.nav .links a{ color:rgba(245,240,230,0.55); text-decoration:none; }
.nav .cta{
  font-family:var(--sans); font-size:calc(0.62rem * var(--madar-fs-small, 1)); letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(198,161,91,0.4); padding:0.5rem 1.25rem; cursor:pointer;
  background:none;
}

/* ---------------- HERO ---------------- */

.hero{ display:grid; grid-template-columns:45% 55%; min-height:95vh; }
.hero-left{
  background:var(--emerald);
  padding:6rem 4.5rem;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.hero-left .ghost{
  position:absolute; bottom:-2rem; right:-1rem;
  font-family:var(--serif); font-size:22rem; color:rgba(255,255,255,0.04);
  font-weight:700; line-height:1; pointer-events:none; user-select:none;
}
.hero-left .eyebrow{
  font-family:var(--sans); font-size:calc(0.58rem * var(--madar-fs-small, 1)); letter-spacing:0.3em; color:var(--gold);
  text-transform:uppercase; margin-bottom:4rem; position:relative;
}
.hero-left h1{
  font-family:var(--serif); font-size:calc(4.5rem * var(--madar-fs-head, 1)); line-height:1.0;
  font-weight:500; color:var(--ivory); margin-bottom:2.5rem; letter-spacing:-0.01em;
  position:relative;
}
.hero-left h1 em{ color:var(--gold); font-style:italic; }
.hero-left p{
  font-family:var(--sans); font-size:calc(0.9rem * var(--madar-fs, 1)); line-height:1.9;
  color:rgba(245,240,230,0.65); max-width:26rem; position:relative;
}
.hero-steps{ display:flex; gap:2.5rem; position:relative; }
.hero-steps .step{ border-top:1px solid rgba(198,161,91,0.3); padding-top:1rem; }
.hero-steps .step .n{ font-family:var(--serif); font-style:italic; font-size:calc(0.9rem * var(--madar-fs, 1)); color:var(--gold); }
.hero-steps .step .l{
  font-family:var(--sans); font-size:calc(0.6rem * var(--madar-fs-small, 1)); letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(245,240,230,0.5); margin-top:0.25rem;
}
.hero-right{ position:relative; overflow:hidden; background:var(--sand); }
.hero-right .caption{
  position:absolute; bottom:2.5rem; right:2.5rem;
  font-family:var(--sans); font-size:calc(0.58rem * var(--madar-fs-small, 1)); letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.7); background:rgba(0,0,0,0.3); padding:0.5rem 1rem;
}

/* ---------------- WHO WE ARE ---------------- */

.who{ display:grid; grid-template-columns:55% 45%; min-height:70vh; }
.who-media{ overflow:hidden; background:var(--sand); }
.who-media .fill{ filter:saturate(0.3) brightness(0.9); }
.who-text{ padding:6rem 4rem; background:var(--ivory); display:flex; flex-direction:column; justify-content:center; }
.eyebrow-gold{
  font-family:var(--sans); font-size:calc(0.58rem * var(--madar-fs-small, 1)); letter-spacing:0.3em; color:var(--gold);
  text-transform:uppercase; margin-bottom:1.5rem;
}
.who-text h2{
  font-family:var(--serif); font-size:calc(2.75rem * var(--madar-fs-head, 1)); line-height:1.1; color:var(--emerald);
  font-weight:400; margin-bottom:2rem;
}
.who-text p{
  font-family:var(--sans); font-size:calc(0.9rem * var(--madar-fs, 1)); line-height:1.9; color:var(--charcoal);
  opacity:0.7; margin-bottom:2.5rem;
}
.tag-row{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.tag-row .tag{
  font-family:var(--sans); font-size:calc(0.6rem * var(--madar-fs-small, 1)); letter-spacing:0.2em; text-transform:uppercase;
  color:var(--emerald); border:1px solid var(--sand); padding:0.4rem 1rem;
}

/* ---------------- SECTOR HEADER ---------------- */

.sector-header{ background:var(--charcoal); padding:5rem 4rem; }
.sector-header h2{
  font-family:var(--serif); font-size:calc(3rem * var(--madar-fs-head, 1)); color:var(--ivory); font-weight:400; line-height:1.2;
}

/* ---------------- SECTOR PANELS ---------------- */

.sector{ display:grid; grid-template-columns:50% 50%; min-height:65vh; }

.sector-media{ position:relative; overflow:hidden; }
.sector-media.sand{ background:var(--sand); }
.sector-media.charcoal-bg{ background:var(--charcoal); }
.sector-media .fill.dim{ filter:saturate(0.85); }
.sector-media .fill.dark{ filter:brightness(0.6) saturate(0.6); }

.sector-num{
  position:absolute; font-family:var(--serif); font-weight:700; line-height:1;
  font-size:8rem; pointer-events:none; user-select:none;
}
.sector-num.left{ top:2.5rem; left:2.5rem; color:rgba(255,255,255,0.15); }
.sector-num.right{ top:2.5rem; right:2.5rem; color:rgba(255,255,255,0.12); }

.sector-text{
  padding:5rem 4rem; display:flex; flex-direction:column; justify-content:center;
}
.sector-text.ivory-bg{ background:var(--ivory); border-bottom:1px solid var(--sand); }
.sector-text.emerald-bg{ background:var(--emerald); border-bottom:1px solid rgba(255,255,255,0.05); }
.sector-text.sand-bg{ background:var(--sand); border-bottom:1px solid rgba(140,111,74,0.2); }

.sector-text .kicker{
  font-family:var(--sans); font-size:calc(0.58rem * var(--madar-fs-small, 1)); letter-spacing:0.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.25rem;
}
.sector-text h3{
  font-family:var(--serif); font-size:calc(2rem * var(--madar-fs-head, 1)); line-height:1.2; font-weight:400; margin-bottom:1.5rem;
}
.sector-text.ivory-bg h3, .sector-text.sand-bg h3{ color:var(--emerald); }
.sector-text.emerald-bg h3{ color:var(--ivory); }
.sector-text p{ font-family:var(--sans); font-size:calc(0.85rem * var(--madar-fs, 1)); line-height:1.85; margin-bottom:2rem; }
.sector-text.ivory-bg p, .sector-text.sand-bg p{ color:var(--charcoal); opacity:0.65; }
.sector-text.emerald-bg p{ color:var(--ivory); opacity:0.55; }
.sector-text .underline{ width:2rem; height:1px; background:var(--gold); }

/* ---------------- QUAD (Cleaning + Chemicals) ---------------- */

.quad{ display:grid; grid-template-columns:25% 25% 25% 25%; min-height:55vh; }
.quad-media{ overflow:hidden; }
.quad-media.charcoal-bg{ background:var(--charcoal); }
.quad-media.dark-emerald-bg{ background:var(--dark-emerald); }
.quad-text{ padding:4rem 3rem; display:flex; flex-direction:column; justify-content:center; }
.quad-text.charcoal-bg{ background:var(--charcoal); border-right:1px solid rgba(255,255,255,0.05); }
.quad-text.dark-emerald-bg{ background:var(--dark-emerald); }
.quad-text .kicker{
  font-family:var(--sans); font-size:calc(0.55rem * var(--madar-fs-small, 1)); letter-spacing:0.25em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1rem;
}
.quad-text h3{
  font-family:var(--serif); font-size:calc(1.5rem * var(--madar-fs, 1)); line-height:1.2; color:var(--ivory); font-weight:400; margin-bottom:1rem;
}
.quad-text p{ font-family:var(--sans); font-size:calc(0.78rem * var(--madar-fs-small, 1)); line-height:1.8; color:rgba(245,240,230,0.5); }

/* ---------------- HOW WE WORK ---------------- */

.process{ padding:8rem 4rem; background:var(--ivory); }
.process-inner{ max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 2fr; gap:8rem; align-items:start; }
.process-inner h2{
  font-family:var(--serif); font-size:calc(2.5rem * var(--madar-fs-head, 1)); line-height:1.1; color:var(--emerald); font-weight:400;
}
.process-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.process-step{ border-top:2px solid var(--sand); padding-top:2.5rem; }
.process-step .n{
  font-family:var(--serif); font-size:calc(3rem * var(--madar-fs-head, 1)); color:var(--gold); font-weight:400; line-height:1; margin-bottom:1rem;
}
.process-step .t{
  font-family:var(--sans); font-size:calc(0.65rem * var(--madar-fs-small, 1)); letter-spacing:0.2em; text-transform:uppercase;
  color:var(--emerald); margin-bottom:1rem; font-weight:500;
}
.process-step p{ font-family:var(--sans); font-size:calc(0.85rem * var(--madar-fs, 1)); line-height:1.85; color:var(--charcoal); opacity:0.65; }

/* ---------------- WHY OMAN ---------------- */

.why{ display:grid; grid-template-columns:50% 50%; min-height:70vh; }
.why-text{ background:var(--emerald); padding:7rem 5rem; display:flex; flex-direction:column; justify-content:center; }
.why-text h2{
  font-family:var(--serif); font-size:calc(3rem * var(--madar-fs-head, 1)); line-height:1.1; color:var(--ivory); font-weight:400; margin-bottom:2rem;
}
.why-text h2 em{ color:var(--gold); font-style:italic; }
.why-text p{ font-family:var(--sans); font-size:calc(0.9rem * var(--madar-fs, 1)); line-height:1.9; color:rgba(245,240,230,0.65); margin-bottom:3rem; }
.region-list{ display:flex; flex-direction:column; gap:0.75rem; }
.region-list .r{ display:flex; align-items:center; gap:1rem; }
.region-list .r .dash{ width:1.5rem; height:1px; background:var(--gold); }
.region-list .r .l{
  font-family:var(--sans); font-size:calc(0.7rem * var(--madar-fs-small, 1)); letter-spacing:0.15em; text-transform:uppercase; color:rgba(245,240,230,0.6);
}
.why-media{ overflow:hidden; background:var(--sand); }

/* ---------------- BRAND STATEMENT ---------------- */

.statement{ padding:10rem 4rem; background:var(--dark-emerald); }
.statement-inner{ max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:8rem; align-items:center; }
.statement .kicker{
  font-family:var(--sans); font-size:calc(0.58rem * var(--madar-fs-small, 1)); letter-spacing:0.3em; text-transform:uppercase; color:var(--gold);
  margin-bottom:3rem;
}
.statement blockquote{
  font-family:var(--serif); font-size:calc(2.75rem * var(--madar-fs-head, 1)); line-height:1.2; color:var(--ivory); font-weight:400; font-style:italic;
}
.statement-side p{ font-family:var(--sans); font-size:calc(1rem * var(--madar-fs, 1)); line-height:1.95; color:rgba(245,240,230,0.5); margin-bottom:3rem; }
.partner-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px; }
.partner-grid .cell{
  padding:1.25rem; background:rgba(255,255,255,0.04); border-top:1px solid rgba(198,161,91,0.2);
  font-family:var(--sans); font-size:calc(0.6rem * var(--madar-fs-small, 1)); letter-spacing:0.15em; text-transform:uppercase; color:rgba(245,240,230,0.45);
}

/* ---------------- CONTACT ---------------- */

.contact{ display:grid; grid-template-columns:40% 60%; min-height:50vh; }
.contact-gold{ background:var(--gold); padding:6rem 4rem; display:flex; flex-direction:column; justify-content:center; }
.contact-gold div{
  font-family:var(--serif); font-size:calc(2.25rem * var(--madar-fs-head, 1)); line-height:1.15; color:var(--dark-emerald); font-weight:400;
}
.contact-info{ background:var(--ivory); padding:6rem 4rem; display:flex; flex-direction:column; justify-content:center; }
.contact-info .company{ font-family:var(--sans); font-size:calc(1.1rem * var(--madar-fs, 1)); font-weight:500; color:var(--emerald); margin-bottom:0.5rem; }
.contact-info .location{ font-family:var(--sans); font-size:calc(0.85rem * var(--madar-fs, 1)); color:var(--charcoal); opacity:0.6; margin-bottom:2rem; }
.contact-info .scope{
  font-family:var(--sans); font-size:calc(0.75rem * var(--madar-fs-small, 1)); letter-spacing:0.15em; text-transform:uppercase; color:var(--brown);
}

/* ---------------- FOOTER ---------------- */

.footer{ padding:3rem 4rem; background:var(--charcoal); }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; }
.footer .brand{
  font-family:var(--serif); font-size:calc(0.9rem * var(--madar-fs, 1)); color:rgba(245,240,230,0.4); letter-spacing:0.2em; text-transform:uppercase;
}
.footer .sectors{
  font-family:var(--sans); font-size:calc(0.58rem * var(--madar-fs-small, 1)); color:rgba(245,240,230,0.25); letter-spacing:0.18em; text-transform:uppercase;
  text-align:center;
}
.footer .oman{
  font-family:var(--sans); font-size:calc(0.58rem * var(--madar-fs-small, 1)); color:rgba(198,161,91,0.4); letter-spacing:0.18em; text-transform:uppercase;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px){
  .nav{ padding:1.1rem 1.5rem; }
  .nav .links{ display:none; }
  .hero, .who, .why, .contact{ grid-template-columns:minmax(0,1fr); min-height:auto; }
  .sector, .why{ grid-template-columns:minmax(0,1fr); }
  .quad{ grid-template-columns:1fr 1fr; }
  .process-inner, .statement-inner{ grid-template-columns:minmax(0,1fr); gap:3rem; }
  .process-grid{ grid-template-columns:minmax(0,1fr); gap:2.5rem; }
  .hero-left, .who-text, .sector-text, .why-text, .contact-gold, .contact-info,
  .process, .statement, .sector-header{ padding:4rem 1.75rem; }
  .hero-left h1{ font-size:calc(2.75rem * var(--madar-fs-head, 1)); }
  .hero-left .ghost{ font-size:12rem; }
}

@media (max-width: 640px){
  .quad{ grid-template-columns:minmax(0,1fr); }
  .partner-grid{ grid-template-columns:1fr 1fr; }
  .footer-inner{ flex-direction:column; text-align:center; }
}


/* ============================================================
   WORDPRESS ADAPTATIONS
   ============================================================ */
.hero-right, .who-media, .sector-media, .quad-media, .why-media{
  position:relative; overflow:hidden; min-height:320px;
}
.media-img, .media-ph{ position:absolute; inset:0; width:100%; height:100%; }
.media-img{ object-fit:cover; display:block; }
.media-ph{
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(135deg,#a9a79b,#6f6d62);
}
.f-map{ filter:saturate(0.3) brightness(0.9); }
.f-dim{ filter:saturate(0.85); }
.f-dark1{ filter:brightness(0.7) saturate(0.6); }
.f-dark2{ filter:brightness(0.6) saturate(0.6); }
.hero-right .caption, .sector-num{ z-index:2; }
.nav .links ul{ display:flex; gap:2.5rem; list-style:none; margin:0; padding:0; }
.nav .links li{ list-style:none; }
body.admin-bar .nav{ top:32px; }
@media (max-width:782px){ body.admin-bar .nav{ top:46px; } }
html{ scroll-behavior:smooth; }
.nav .links a, .nav .cta{ text-decoration:none; display:inline-block; }

/* ============================================================
   BUILDER ADDITIONS
   ============================================================ */
@media (min-width:1101px){ .who.rev{ grid-template-columns:45% 55%; } }
@media (max-width:1100px){ .quad{ grid-template-columns:1fr 1fr !important; } }
@media (max-width:640px){ .quad{ grid-template-columns:1fr !important; } }

.txt{ padding:7rem 4rem; }
.txt.ivory{ background:var(--ivory); }
.txt.sand{ background:var(--sand); }
.txt.emerald{ background:var(--emerald); }
.txt-in{ max-width:760px; margin:0 auto; }
.txt h2{ font-family:var(--serif); font-size:calc(2.75rem * var(--madar-fs-head, 1)); line-height:1.1; font-weight:400; color:var(--emerald); margin-bottom:2rem; }
.txt.emerald h2{ color:var(--ivory); }
.txt p{ font-family:var(--sans); font-size:calc(0.95rem * var(--madar-fs, 1)); line-height:1.95; color:var(--charcoal); opacity:0.75; margin-bottom:1.25rem; }
.txt.emerald p{ color:var(--ivory); }
@media (max-width:1100px){ .txt{ padding:4rem 1.75rem; } .txt h2{ font-size:calc(2rem * var(--madar-fs-head, 1)); } }

/* Phones and tablets: home photos keep their own proportions, so pictures that
   contain text (like the MADAR ship) are shown whole, not cropped. */
@media (max-width:1100px){
  .hero-right[style*="--ar"], .who-media[style*="--ar"], .why-media[style*="--ar"]{ aspect-ratio:var(--ar); min-height:0; height:auto; }
}