/* Middle East Made Yours — stylesheet (palette from brand logo: red #B62B37, navy #383D4A) */

/* ==========================================================
   MIDDLE EAST MADE YOURS — design system
   Palette derived from the brand logo:
   red #B62B37 · navy #383D4A · taupe #C4BFBE
   ========================================================== */
:root{
  --red:#A8242F;          /* MEMY red, slightly deepened for UI */
  --red-deep:#871D26;     /* hover / pressed */
  --red-faded:rgba(168,36,47,.32); /* hairlines */
  --black:#181620;        /* soft black */
  --charcoal:#34323D;     /* secondary dark (logo navy family) */
  --ivory:#F7F3EB;        /* warm ivory background */
  --sand:#EDE5D6;         /* soft sand panels */
  --sand-deep:#E2D8C5;
  --bronze:#A8895B;       /* sparing accent only */
  --mut:#5E5A64;          /* muted body text */
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', -apple-system, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--ivory);color:var(--black);font-weight:300;line-height:1.7;font-size:16.5px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:var(--ivory)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.1}

.wrap{max-width:1280px;margin:0 auto;padding:0 6vw}
.narrow{max-width:820px;margin:0 auto}

/* --- typographic system --- */
.eyebrow{font-size:.66rem;letter-spacing:.38em;text-transform:uppercase;color:var(--red);font-weight:400;margin-bottom:1.3rem}
.sec-title{font-family:var(--serif);text-transform:uppercase;letter-spacing:.16em;font-weight:500;font-size:clamp(1.5rem,3vw,2.3rem)}
.display{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,5.2vw,4.6rem);letter-spacing:.01em}
.lede{font-size:clamp(1.02rem,1.45vw,1.22rem);line-height:1.85;color:var(--mut);font-weight:300}
.ital{font-family:var(--serif);font-style:italic;font-weight:400}
.rule{height:1px;background:var(--red-faded);border:none}
.on-dark{color:var(--ivory)}
.on-dark .lede{color:rgba(247,243,235,.78)}
.on-dark .eyebrow{color:#D9909A}

/* --- buttons --- */
.btn{display:inline-block;font-family:var(--sans);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:400;padding:1.05rem 2.6rem;background:var(--red);color:var(--ivory);border:1px solid var(--red);cursor:pointer;transition:background .35s,border-color .35s,color .35s}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn.ghost{background:transparent;color:var(--black);border-color:var(--black)}
.btn.ghost:hover{background:var(--black);color:var(--ivory)}
.btn.ghost-light{background:transparent;color:var(--ivory);border-color:rgba(247,243,235,.65)}
.btn.ghost-light:hover{background:var(--ivory);color:var(--black);border-color:var(--ivory)}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap}
.tlink{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;font-weight:400;color:var(--red);padding-bottom:4px;border-bottom:1px solid var(--red-faded);transition:border-color .3s,color .3s}
.tlink:hover{border-color:var(--red);color:var(--red-deep)}
.on-dark .tlink{color:var(--ivory);border-color:rgba(247,243,235,.35)}
.on-dark .tlink:hover{border-color:var(--ivory)}

/* --- header --- */
header{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.4rem 0;transition:background .4s,box-shadow .4s,padding .4s}
header.scrolled{background:rgba(247,243,235,.97);box-shadow:0 1px 0 var(--red-faded);padding:.7rem 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.4rem}
.logo-img{height:52px;width:auto;display:block;transition:height .4s}
header.scrolled .logo-img{height:42px}
.logo-img.dark-v{display:none}
header.on-hero:not(.scrolled) .logo-img.light-v{display:none}
header.on-hero:not(.scrolled) .logo-img.dark-v{display:block}
.nav-links{display:flex;gap:1.3rem;align-items:center;list-style:none}
.nav-links a{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:var(--black);padding-bottom:3px;border-bottom:1px solid transparent;transition:.3s;white-space:nowrap}
header.on-hero:not(.scrolled) .nav-links a{color:rgba(247,243,235,.92)}
.nav-links a:hover,.nav-links a.active{border-color:var(--red);color:var(--red)}
header.on-hero:not(.scrolled) .nav-links a:hover{color:#fff;border-color:rgba(247,243,235,.8)}
.nav-cta{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--red);color:var(--red);padding:.62rem 1.1rem;transition:.3s;white-space:nowrap}
.nav-cta:hover{background:var(--red);color:var(--ivory)}
header.on-hero:not(.scrolled) .nav-cta{border-color:rgba(247,243,235,.7);color:var(--ivory)}
header.on-hero:not(.scrolled) .nav-cta:hover{background:var(--ivory);color:var(--black)}
.burger{display:none;background:none;border:none;cursor:pointer;width:32px;height:22px;position:relative;z-index:120}
.burger span{position:absolute;left:0;width:100%;height:1px;background:var(--black);transition:.35s}
header.on-hero:not(.scrolled) .burger span{background:var(--ivory)}
.burger span:nth-child(1){top:2px}.burger span:nth-child(2){top:10px}.burger span:nth-child(3){top:18px}
body.menu-open .burger span{background:var(--ivory)!important}
body.menu-open .burger span:nth-child(1){top:10px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:10px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;background:var(--black);z-index:110;display:flex;flex-direction:column;justify-content:center;padding:0 9vw;opacity:0;pointer-events:none;transition:opacity .4s}
body.menu-open .mobile-menu{opacity:1;pointer-events:auto}
.mobile-menu img{height:40px;width:auto;margin-bottom:2.6rem}
.mobile-menu a{font-family:var(--serif);font-size:clamp(1.4rem,5vw,1.9rem);color:var(--ivory);padding:.45rem 0;border-bottom:1px solid rgba(247,243,235,.08)}
.mobile-menu a:hover{color:#E8B4BA}
.mm-small{font-family:var(--sans)!important;font-size:.72rem!important;letter-spacing:.3em;text-transform:uppercase;color:#D9909A!important;margin-top:2rem;border:none!important}

/* --- hero --- */
.hero{height:100svh;min-height:620px;position:relative;display:flex;align-items:flex-end;color:var(--ivory);overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,22,32,.45) 0%,rgba(24,22,32,.06) 45%,rgba(24,22,32,.72) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:8.5vh}
.hero .kicker{font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;color:rgba(247,243,235,.8);margin-bottom:1.6rem}
.hero h1{font-size:clamp(2.7rem,6.2vw,5.6rem);font-weight:500;max-width:17ch}
.hero .sub{font-size:clamp(1rem,1.6vw,1.2rem);letter-spacing:.1em;color:rgba(247,243,235,.88);margin:1.5rem 0 2.5rem;max-width:44ch}
.hero .credit{position:absolute;right:6vw;bottom:2rem;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(247,243,235,.5);z-index:2}

/* --- sections --- */
section{padding:7.5rem 0}
section.tight{padding:5rem 0}
.dark{background:var(--black)}
.sand-bg{background:var(--sand)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:3.4rem}
.split{display:grid;grid-template-columns:5fr 6fr;gap:5.5rem;align-items:start}

/* --- editorial image rows --- */
.ed-row{display:grid;grid-template-columns:7fr 5fr;gap:0;align-items:stretch;margin-top:4.5rem}
.ed-row.flip{grid-template-columns:5fr 7fr}
.ed-row .img{min-height:480px;background-size:cover;background-position:center;position:relative}
.ed-row .txt{background:var(--ivory);padding:4rem 4.5rem;display:flex;flex-direction:column;justify-content:center;gap:1.1rem;border-top:1px solid var(--red-faded);border-bottom:1px solid var(--red-faded)}
.ed-row .txt h3{font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:500}
.ed-row .txt p{color:var(--mut);font-size:.99rem}

/* --- full-bleed band --- */
.band{position:relative;min-height:74vh;display:flex;align-items:center;background-size:cover;background-position:center;color:var(--ivory)}
.band .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,22,32,.66) 0%,rgba(24,22,32,.25) 55%,rgba(24,22,32,.1) 100%)}
.band .wrap{position:relative;z-index:2}
.band h2{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:500;max-width:18ch}
.band p{max-width:46ch;margin:1.4rem 0 2.2rem;color:rgba(247,243,235,.85)}

/* --- photo placeholder (REPLACE WITH REAL IMAGE) --- */
.ph{background:var(--sand);position:relative;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--red-faded);border-bottom:1px solid var(--red-faded)}
.ph::before{content:'';position:absolute;inset:14px;border:1px solid var(--red-faded)}
.ph span{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:#9A8F7C;text-align:center;padding:1rem;position:relative;line-height:2.2}
.ph span b{display:block;color:var(--red);font-weight:400}

/* --- map section --- */
.map-sec{background:var(--ivory)}
.map-grid{display:grid;grid-template-columns:7fr 5fr;gap:4.5rem;align-items:center;margin-top:3rem}
.map-holder svg{width:100%;height:auto;display:block}
.m-land{fill:var(--sand);stroke:#C9BBA2;stroke-width:1}
.m-sea{fill:none}
.m-pin{cursor:pointer}
.m-pin .ring{fill:none;stroke:var(--red);stroke-width:1;opacity:.45;transition:.3s}
.m-pin .dot{fill:var(--red);transition:.3s}
.m-pin text{font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;fill:var(--charcoal);font-weight:400;transition:.3s}
.m-pin:hover .dot,.m-pin.active .dot{fill:var(--red-deep)}
.m-pin.active .ring{opacity:1;stroke-width:1.5}
.m-pin.active text{fill:var(--red)}
.map-panel{border-left:1px solid var(--red-faded);padding-left:3.5rem;min-height:380px}
.map-panel .k{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--red)}
.map-panel h3{font-size:clamp(1.8rem,3vw,2.6rem);margin:.7rem 0 .4rem;font-weight:500}
.map-panel .posline{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--charcoal);margin-bottom:1.6rem}
.map-panel .row{display:flex;gap:1rem;padding:.85rem 0;border-top:1px solid var(--red-faded);font-size:.92rem}
.map-panel .row b{flex:0 0 92px;font-weight:400;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mut);padding-top:.25rem}
.map-panel .row span{color:var(--charcoal)}
.map-panel .tlink{display:inline-block;margin-top:1.8rem}
.map-index{display:none}

/* --- destination editorial index --- */
.d-index{border-top:1px solid var(--red-faded)}
.d-item{display:grid;grid-template-columns:80px 3fr 4fr 2fr;gap:2.5rem;align-items:baseline;padding:2.4rem 0;border-bottom:1px solid var(--red-faded);transition:background .3s;cursor:pointer}
.d-item:hover{background:rgba(237,229,214,.5)}
.d-item .no{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--red)}
.d-item h3{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:500}
.d-item .pos{font-family:var(--serif);font-style:italic;color:var(--mut);font-size:1.05rem}
.d-item .go{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--red);text-align:right}

/* --- numbered experience list --- */
.exp-list{border-top:1px solid var(--red-faded);margin-top:3rem}
.exp-item{display:grid;grid-template-columns:58px 1fr;gap:1.8rem;padding:1.9rem 0;border-bottom:1px solid var(--red-faded);align-items:baseline}
.exp-item .n{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--red)}
.exp-item p{font-size:1rem;color:var(--charcoal)}
.exp-item strong{font-weight:400;font-family:var(--serif);font-size:1.18rem}

/* --- themed columns --- */
.theme-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem;margin-top:3rem}
.theme-col h4{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;font-family:var(--sans);font-weight:400;color:var(--red);margin-bottom:.9rem;padding-bottom:.8rem;border-bottom:1px solid var(--red-faded)}
.theme-col p{font-size:.92rem;color:var(--mut)}

/* --- collections (editorial list, not cards) --- */
.coll-list{border-top:1px solid var(--red-faded);margin-top:3.5rem}
.coll-item{display:grid;grid-template-columns:3fr 2fr 6fr;gap:3rem;padding:2.3rem 0;border-bottom:1px solid var(--red-faded);align-items:baseline}
.coll-item h3{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:500}
.coll-item .one{font-family:var(--serif);font-style:italic;color:var(--red);font-size:1.05rem}
.coll-item p{font-size:.94rem;color:var(--mut)}

/* --- journeys editorial --- */
.j-list{border-top:1px solid var(--red-faded);margin-top:3.5rem}
.j-item{display:grid;grid-template-columns:110px 3fr 6fr;gap:2.6rem;padding:2.2rem 0;border-bottom:1px solid var(--red-faded);align-items:baseline}
.j-item .k{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--red)}
.j-item h3{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:500}
.j-item p{font-size:.94rem;color:var(--mut)}

/* --- quiet capability grid (no cards, ruled) --- */
.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);margin-top:3.4rem;border-top:1px solid var(--red-faded);border-left:1px solid var(--red-faded)}
.cap{padding:2.6rem 2.8rem;border-right:1px solid var(--red-faded);border-bottom:1px solid var(--red-faded)}
.cap h3{font-size:1.45rem;margin-bottom:.8rem;font-weight:500}
.cap p{font-size:.95rem;color:var(--mut)}
.dark .cap{border-color:rgba(247,243,235,.14)}
.dark .cap-grid{border-color:rgba(247,243,235,.14)}
.dark .cap h3{color:var(--ivory)}
.dark .cap p{color:rgba(247,243,235,.7)}
.cap-grid.three{grid-template-columns:repeat(3,1fr)}

/* --- page hero (interior) --- */
.page-hero{padding:12.5rem 0 5.5rem;position:relative}
.page-hero.with-img{min-height:78vh;display:flex;align-items:flex-end;color:var(--ivory);background-size:cover;background-position:center;padding-bottom:5rem}
.page-hero.with-img::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,22,32,.4),rgba(24,22,32,.15) 45%,rgba(24,22,32,.75))}
.page-hero .wrap{position:relative;z-index:2;width:100%}
.page-hero h1{font-size:clamp(2.3rem,5vw,4.3rem);font-weight:500;max-width:20ch}
.page-hero .sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2vw,1.5rem);color:var(--mut);margin-top:1.3rem;max-width:52ch;font-weight:400}
.page-hero.with-img .sub{color:rgba(247,243,235,.85)}
.page-hero.dark-h{background:var(--black);color:var(--ivory)}
.page-hero.dark-h .sub{color:rgba(247,243,235,.75)}

/* --- pull quote --- */
.pull{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.5;text-align:center;max-width:30ch;margin:0 auto;color:var(--charcoal)}
.pull::before{content:'{ ';color:var(--red)}
.pull::after{content:' }';color:var(--red)}
.on-dark .pull{color:var(--ivory)}

/* --- testimonials --- */
.t-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--red-faded);border-left:1px solid var(--red-faded);margin-top:3rem}
.t-cell{padding:2.6rem;border-right:1px solid var(--red-faded);border-bottom:1px solid var(--red-faded);display:flex;flex-direction:column;gap:1.4rem}
.t-cell p{font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.65;flex:1}
.t-cell .who{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--red)}

/* --- tags --- */
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.tags span{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--red-faded);color:var(--charcoal);padding:.42rem 1rem}

/* --- form --- */
.form{display:grid;gap:2.3rem;margin-top:3rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:2.3rem}
.field label{display:block;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--red);margin-bottom:.55rem}
.field input,.field select,.field textarea{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(24,22,32,.3);padding:.65rem 0;font-family:var(--sans);font-size:1.02rem;color:var(--black);font-weight:300;border-radius:0;-webkit-appearance:none}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--red)}
.aud-select{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem}
.aud-select button{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;padding:.66rem 1.25rem;border:1px solid rgba(24,22,32,.3);background:transparent;color:var(--black);cursor:pointer;transition:.3s}
.aud-select button.sel,.aud-select button:hover{background:var(--red);color:var(--ivory);border-color:var(--red)}
.promise{font-family:var(--serif);font-style:italic;color:var(--mut)}

/* --- footer --- */
footer{background:var(--black);color:var(--ivory);padding:5.5rem 0 2.4rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3.5rem}
.foot-grid h4{font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;font-family:var(--sans);font-weight:400;color:#D9909A;margin-bottom:1.2rem}
.foot-grid a,.foot-grid p{display:block;font-size:.9rem;color:rgba(247,243,235,.68);padding:.26rem 0}
.foot-grid a:hover{color:var(--ivory)}
.foot-logo{height:44px;width:auto}
.foot-tag{font-family:var(--serif);font-style:italic;color:rgba(247,243,235,.6);margin-top:1.4rem;max-width:30ch;font-size:1.05rem}
.foot-base{border-top:1px solid rgba(247,243,235,.12);margin-top:4rem;padding-top:2rem;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;font-size:.7rem;letter-spacing:.14em;color:rgba(247,243,235,.42)}

/* --- reveal --- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}}

/* --- responsive --- */
@media(max-width:1180px){
.nav-links{display:none}
.burger{display:block}
}
@media(max-width:1020px){
.split,.map-grid{grid-template-columns:1fr;gap:3rem}
.map-panel{border-left:none;padding-left:0;border-top:1px solid var(--red-faded);padding-top:2.5rem;min-height:0}
.ed-row,.ed-row.flip{grid-template-columns:1fr}
.ed-row .img{min-height:340px}
.ed-row .txt{padding:3rem 2.2rem}
.theme-cols{grid-template-columns:repeat(2,1fr)}
.t-row{grid-template-columns:1fr}
.cap-grid.three{grid-template-columns:1fr}
.coll-item{grid-template-columns:1fr;gap:.6rem}
.j-item{grid-template-columns:1fr;gap:.5rem}
.d-item{grid-template-columns:48px 1fr;grid-template-rows:auto auto auto;gap:.4rem 1.4rem}
.d-item .pos{grid-column:2}.d-item .go{grid-column:2;text-align:left;margin-top:.4rem}
.foot-grid{grid-template-columns:1fr 1fr}
#contactGrid{grid-template-columns:1fr!important;gap:3rem}
}
@media(max-width:640px){
.nav-cta{display:none}
section{padding:4.8rem 0}
.f-row,.theme-cols,.cap-grid{grid-template-columns:1fr}
.exp-item{grid-template-columns:38px 1fr;gap:1rem}
.hero .credit{display:none}
.map-holder{display:none}
.map-index{display:block}
}