/* =========================================================================
   RAFIQA — Business & Concierge Services
   Built to the 2026 brand guidelines.

   Palette (from the brand book, section 04):
     Primary Gold      #CDAA6D      Primary Burgundy  #4B161B
     Primary Black     #1A1A1A      Secondary Beige   #D2B48C
     Secondary Ivory   #E8D9B9      Bronze            #A36F28
     Metallic Gold     #D4AF37
   Type: Playfair Display (display serif) + Geist (brand sans)
   ========================================================================= */

/* ---------- tokens ---------- */
:root{
  /* brand */
  --gold:        #cdaa6d;
  --gold-metal:  #d4af37;
  --bronze:      #a36f28;
  --burgundy:    #4b161b;
  --beige:       #d2b48c;
  --ivory:       #e8d9b9;
  --black:       #1a1a1a;

  /* surfaces */
  --ink:         #141213;   /* main dark ground */
  --ink-deep:    #0d0b0c;   /* deepest ground   */
  --ink-soft:    #1e1b1c;   /* raised dark card */
  --paper:       #f7f2e8;   /* warm ivory page  */
  --paper-soft:  #efe7d7;

  /* text */
  --on-dark:        #f4efe6;
  --on-dark-muted:  #b7ada0;
  --on-light:       #241f1d;
  --on-light-muted: #6a5f56;

  /* lines */
  --hair-gold:  rgba(205,170,109,.42);
  --hair-gold-2:rgba(205,170,109,.18);
  --hair-dark:  rgba(36,31,29,.16);

  /* type */
  --f-display: "Playfair Display", "Times New Roman", serif;
  --f-body:    "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* metrics */
  --shell: 1240px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(4.5rem, 9vw, 8.5rem);
  --r: 2px;

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

/* ---------- Arabic brand typeface: The Year of The Camel ---------- */
@font-face{
  font-family:"Camel"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/camel-300.woff2") format("woff2");
}
@font-face{
  font-family:"Camel"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/camel-400.woff2") format("woff2");
}
@font-face{
  font-family:"Camel"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/camel-500.woff2") format("woff2");
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--f-body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sprite symbol{ fill:none; stroke:currentColor; stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round; }
.sprite #i-star{ fill:currentColor; stroke:none; }
.ico{ width:1.5rem; height:1.5rem; fill:none; stroke:currentColor; stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ico use{ fill:inherit; }
svg.star{ fill:currentColor; stroke:none; }

.sr-only,.skip-link:not(:focus){
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link:focus{
  position:fixed; inset:1rem auto auto 1rem; z-index:200;
  background:var(--gold); color:var(--ink-deep);
  padding:.7rem 1.2rem; border-radius:var(--r); font-size:.85rem;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
}
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- brand mark (masked SVG so it can take any colour) ---------- */
.brand-mark{
  display:block; width:158px; height:71px;
  background-color:var(--gold);
  -webkit-mask:url("../img/rafiqa-logo.svg") no-repeat center / contain;
          mask:url("../img/rafiqa-logo.svg") no-repeat center / contain;
  transition:background-color .35s var(--ease);
}
.brand{ display:block; text-decoration:none; flex:none; }
.brand:hover .brand-mark{ background-color:var(--gold-metal); }
.brand-mark--footer{ width:190px; height:86px; background-color:var(--ivory); }

/* ---------- shared type ---------- */
.eyebrow{
  font-size:.72rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.1rem;
}
.h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.1rem,1.4rem + 2.9vw,3.6rem);
  line-height:1.1; letter-spacing:-.01em; margin:0 0 1.1rem;
}
.h2 em{ font-style:italic; color:var(--gold); }
.lede{ font-size:1.12em; }
.sec-head{ max-width:56ch; margin:0 0 clamp(2.5rem,5vw,4rem); }
.sec-intro{ color:var(--on-dark-muted); max-width:60ch; }

.section{ padding-block:var(--sec-y); position:relative; }
/* keeps anchor jumps clear of the fixed header */
section[id]{ scroll-margin-top:100px; }
.section-ink{ background:var(--ink); }
.section-deep{ background:var(--ink-deep); }
.section-ivory{ background:var(--paper); color:var(--on-light); }
.section-ivory .sec-intro,
.section-ivory .lede + p,
.section-ivory p{ color:var(--on-light-muted); }
.section-ivory .lede{ color:var(--on-light); }
.section-ivory .h2{ color:var(--on-light); }
.section-ivory .eyebrow{ color:var(--bronze); }
.section-burgundy{ background:var(--burgundy); }

/* thin gold hairline between dark sections */
.section-ink + .section-ink,
.section-deep{ border-top:1px solid var(--hair-gold-2); }

/* ---------- buttons ---------- */
.btn{
  --btn-fg:var(--ink-deep); --btn-bg:var(--gold); --btn-bd:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.9rem; border:1px solid var(--btn-bd); border-radius:var(--r);
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:.76rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.btn .ico{ width:1.05rem; height:1.05rem; transition:transform .35s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover .ico{ transform:translateX(4px); }

.btn-gold:hover{ background:var(--gold-metal); border-color:var(--gold-metal); }
.btn-outline,.btn-ghost{ background:transparent; color:var(--gold); border-color:var(--hair-gold); }
.btn-outline:hover,.btn-ghost:hover{ background:var(--gold); color:var(--ink-deep); border-color:var(--gold); }
.section-ivory .btn-outline,.section-ivory .btn-ghost{ color:var(--bronze); border-color:rgba(163,111,40,.4); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; pointer-events:none; }

/* ---------- gold rule with the brand star ---------- */
.rule-star{ display:flex; align-items:center; gap:.9rem; max-width:20rem; margin:1.6rem 0; }
.rule-star .rule{ height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.rule-star .star{ width:.95rem; height:.95rem; color:var(--gold); flex:none; }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background-color .4s var(--ease), border-color .4s var(--ease),
             backdrop-filter .4s var(--ease), padding .4s var(--ease);
  border-bottom:1px solid transparent;
  padding-block:.65rem;
}
/* The blur lives on a pseudo-element, never on .site-header itself.
   `backdrop-filter` on an ancestor makes position:fixed descendants resolve
   against that ancestor instead of the viewport — which collapses the mobile
   nav drawer into the height of the header bar. */
.site-header::before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  pointer-events:none; opacity:0;
  background:rgba(13,11,12,.92);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:opacity .4s var(--ease);
}
.site-header.is-stuck::before,
body:not(.page-home) .site-header::before{ opacity:1; }
.site-header.is-stuck,
body:not(.page-home) .site-header{ border-bottom-color:var(--hair-gold-2); }

.header-inner{
  position:relative;   /* sits above the backdrop layer */
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.site-header.is-stuck .brand-mark{ width:130px; height:58px; }

.nav{ display:flex; align-items:center; gap:2.4rem; }
.nav-list{ display:flex; align-items:center; gap:2rem; }
.nav-list a{
  position:relative; text-decoration:none; font-size:.74rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-muted);
  padding-block:.4rem; transition:color .3s var(--ease);
}
.nav-list a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .35s var(--ease);
}
.nav-list a:hover,.nav-list a.is-active{ color:var(--gold); }
.nav-list a:hover::after,.nav-list a.is-active::after{ width:100%; }
.nav-cta{ padding:.72rem 1.4rem; font-size:.7rem; }

.nav-toggle{
  display:none; width:46px; height:46px; padding:0;
  background:transparent; border:1px solid var(--hair-gold); border-radius:var(--r);
  cursor:pointer; position:relative;
}
.nav-toggle .bar{
  position:absolute; left:13px; width:20px; height:1px; background:var(--gold);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle .bar:nth-child(2){ top:17px; }
.nav-toggle .bar:nth-child(3){ top:23px; }
.nav-toggle .bar:nth-child(4){ top:29px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(4){ transform:translateY(-6px) rotate(-45deg); }

/* =========================================================================
   HERO — cinematic full-bleed
   ========================================================================= */
.hero{
  position:relative; display:grid; place-items:center; text-align:center;
  min-height:min(100vh,980px);   /* fallback first */
  min-height:min(100svh,980px);  /* small-viewport unit where supported */
  padding:clamp(7rem,13vw,9.5rem) 0 clamp(6rem,11vw,8.5rem);
  background:var(--ink-deep); overflow:hidden;
}
/* longhand offsets alongside `inset` so the photo still sits behind the type
   on browsers that do not know the shorthand */
.hero-media{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  margin:0;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  filter:saturate(.92) contrast(1.02);
}
/* two stacked washes: one pools darkness behind the type,
   the other keeps the top and bottom edges readable */
.hero-scrim{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 58% 52% at 50% 46%,
      rgba(13,11,12,.82), rgba(13,11,12,.52) 58%, rgba(13,11,12,.94) 100%),
    linear-gradient(180deg,
      rgba(13,11,12,.82) 0%, rgba(13,11,12,.12) 34%, rgba(13,11,12,.93) 100%);
}
/* the top edge drops below the header so the two rules do not collide */
.hero-frame{
  position:absolute;
  top:clamp(4.4rem,6.4vw,5.6rem);
  right:clamp(1.1rem,2.4vw,2.25rem);
  bottom:clamp(1.1rem,2.4vw,2.25rem);
  left:clamp(1.1rem,2.4vw,2.25rem);
  border:1px solid rgba(205,170,109,.34); pointer-events:none;
}
.hero-inner{ position:relative; max-width:66rem; }

.brand-mark--hero{
  width:clamp(128px,13vw,180px); height:auto; aspect-ratio:640/288;
  margin:0 auto clamp(1.7rem,3.2vw,2.7rem);
  background-color:var(--gold-metal);
  filter:drop-shadow(0 2px 26px rgba(0,0,0,.95));
}
.hero-title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.7rem,1.3rem + 5.4vw,5.6rem);
  line-height:1.04; letter-spacing:-.018em; margin:0; text-wrap:balance;
}
.hero-title .t-gold{ color:var(--gold); font-style:italic; }
.hero .rule-star{ width:min(22rem,78%); margin:clamp(1.2rem,2.2vw,1.7rem) auto; }
/* the second half of the brand line, set in the display serif like the brand book */
.hero-sub{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.15rem,1rem + .62vw,1.65rem);
  color:var(--on-dark); margin:0 0 1.4rem;
}
.hero-lede{
  color:var(--on-dark-muted); max-width:52ch; margin:0 auto clamp(2rem,3.5vw,2.6rem);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

.hero-scroll{
  position:absolute; left:50%; bottom:clamp(2rem,3.6vw,3.2rem); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.75rem; z-index:2;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(205,170,109,.7); text-decoration:none;
  transition:color .35s var(--ease);
}
.hero-scroll:hover{ color:var(--gold); }
.hero-scroll .line{
  width:1px; height:2.6rem;
  background:linear-gradient(180deg,var(--gold),transparent);
  transform-origin:top; animation:drip 2.6s var(--ease) infinite;
}
@keyframes drip{
  0%,100%{ transform:scaleY(.45); opacity:.45; }
  50%    { transform:scaleY(1);   opacity:1; }
}

/* On the home page the wordmark sits in the middle of the hero, so the header
   only takes it back once you scroll. Every other page shows it immediately. */
.page-home .site-header .brand{ opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s var(--ease); }
.page-home .site-header.is-stuck .brand{ opacity:1; visibility:visible; }

/* Inner pages have no full-bleed hero behind the bar, so it reads solid from
   the top — handled by the ::before backdrop layer defined with the header. */

/* =========================================================================
   PAGE HEADER — the opening band on every page except home
   ========================================================================= */
.page-head{
  position:relative; overflow:hidden; text-align:center;
  background:var(--ink-deep);
  border-bottom:1px solid var(--hair-gold-2);
  padding-top:clamp(7.5rem,6rem + 7vw,10.5rem);
  padding-bottom:clamp(2.75rem,2rem + 3.5vw,4.5rem);
}
.page-head-glow{
  position:absolute; top:-60%; left:50%; width:min(900px,120%); aspect-ratio:1;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(205,170,109,.14),transparent 62%);
}
.page-head-inner{ position:relative; max-width:60rem; }
.page-title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.1rem,1.4rem + 3.1vw,4rem);
  line-height:1.08; letter-spacing:-.015em; margin:0; text-wrap:balance;
}
.page-title em{ font-style:italic; color:var(--gold); }
.page-head .rule-star{ width:min(18rem,70%); margin:clamp(1rem,2vw,1.5rem) auto; }
.page-lede{
  color:var(--on-dark-muted); max-width:56ch; margin:0 auto;
  font-size:clamp(.95rem,.92rem + .15vw,1.05rem);
}

/* =========================================================================
   HOME — short "who we are" block
   ========================================================================= */
.intro-grid{
  display:grid; gap:clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:minmax(0,.95fr) minmax(0,1fr); align-items:start;
}
.intro-body p{ max-width:56ch; }
.link-more{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.4rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze); text-decoration:none;
  padding-bottom:.35rem; border-bottom:1px solid rgba(163,111,40,.4);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.link-more .ico{ width:1rem; height:1rem; transition:transform .35s var(--ease); }
.link-more:hover{ color:var(--black); border-bottom-color:var(--bronze); }
.link-more:hover .ico{ transform:translateX(4px); }

/* =========================================================================
   CLOSING CALL TO ACTION — ends every page
   ========================================================================= */
.cta-band{
  position:relative; overflow:hidden; text-align:center;
  background:var(--ink); border-top:1px solid var(--hair-gold-2);
  padding-block:clamp(3.5rem,6vw,5.5rem);
}
.cta-band::before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:url("../img/gold-texture.jpg") center / cover; opacity:.06;
}
.cta-inner{ position:relative; max-width:48rem; }
.cta-star{ width:1.2rem; height:1.2rem; color:var(--gold); margin:0 auto 1.4rem; }
.cta-band .h2{ margin-bottom:.8rem; }
.cta-band p{ color:var(--on-dark-muted); margin-bottom:2rem; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }
.cta-actions .ico{ width:1.05rem; height:1.05rem; }

/* values, when given a section of their own on About */
.values--page{ margin-top:0; padding-top:0; border-top:0; }

/* pillars strip */
.pillars{
  background:var(--ink);
  border-top:1px solid var(--hair-gold-2);
  border-bottom:1px solid var(--hair-gold-2);
}
.pillars-inner{
  display:grid; grid-template-columns:repeat(5,1fr);
  padding-block:clamp(1.75rem,3vw,2.5rem);
}
.pillar{ padding-inline:1rem; color:var(--gold); }
.pillar + .pillar{ border-left:1px solid var(--hair-gold-2); }
.pillar a{
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  text-align:center; text-decoration:none; color:inherit;
  transition:color .35s var(--ease);
}
.pillar a:hover{ color:var(--gold-metal); }
.pillar .ico{ width:1.6rem; height:1.6rem; stroke-width:1.1; transition:transform .4s var(--ease); }
.pillar a:hover .ico{ transform:translateY(-3px); }
.pillar span{
  font-family:var(--f-display); font-size:.98rem; line-height:1.45;
  color:var(--ivory); letter-spacing:.01em;
}

/* =========================================================================
   STORY
   ========================================================================= */
.story-grid{
  display:grid; gap:clamp(2.5rem,6vw,5.5rem);
  grid-template-columns:minmax(0,.95fr) minmax(0,1fr); align-items:center;
}
.story-media{ position:relative; padding:0 0 4.5rem 0; }
.story-img{ margin:0; border-radius:var(--r); overflow:hidden; }
.story-img img{ width:100%; object-fit:cover; }
.story-img--a img{ aspect-ratio:5/4; }
.story-img--b{
  position:absolute; right:-1.75rem; bottom:0; width:50%;
  box-shadow:0 26px 60px -28px rgba(26,26,26,.55);
  border:6px solid var(--paper);
}
.story-img--b img{ aspect-ratio:5/4; }
.story-frame{
  position:absolute; inset:-1.5rem auto auto -1.5rem; width:45%; height:55%;
  border:1px solid rgba(163,111,40,.45); border-right:0; border-bottom:0;
  pointer-events:none;
}
.story-copy p{ max-width:58ch; }

.story-h3{
  font-family:var(--f-display); font-size:1.3rem; color:var(--on-light);
  margin:2rem 0 .7rem;
}

/* the dictionary-style definition of the name */
.meaning{
  margin:2.4rem 0 0; padding:1.6rem 1.8rem;
  border:1px solid rgba(163,111,40,.3); border-left:2px solid var(--bronze);
  background:rgba(163,111,40,.045); border-radius:var(--r);
}
.meaning-ar{
  font-family:"Amiri","Noto Naskh Arabic",serif;
  font-size:2.4rem; line-height:1.2; color:var(--bronze); margin:0;
}
.meaning-tr{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-light-muted); margin:.35rem 0 .7rem;
}
.meaning-tr i{ font-style:italic; text-transform:none; letter-spacing:.04em; }
.meaning-def{ font-size:.95rem; color:var(--on-light-muted); margin:0 0 .9rem; }
.meaning-line{
  font-family:var(--f-display); font-style:italic; font-size:1.25rem;
  color:var(--on-light); margin:0;
}

/* vision & mission */
.vm{
  display:grid; gap:1.8rem; margin-top:2.4rem; padding-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border-top:1px solid var(--hair-dark);
}
.vm-k{
  display:block; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bronze); margin-bottom:.6rem;
}
.vm p{ font-size:.9rem; line-height:1.7; margin:0; }

/* =========================================================================
   FOUNDER
   ========================================================================= */
.founder-grid{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,.7fr) minmax(0,1fr); align-items:center;
}
.founder-portrait{ position:relative; margin:0; max-width:400px; }
/* shown whole, exactly as it appears in the company profile — no crop, no zoom */
.founder-portrait img{
  position:relative; z-index:1; width:100%; height:auto;
  border-radius:var(--r); filter:saturate(.92);
}
.founder-portrait .frame{
  position:absolute; top:20px; right:-20px; bottom:-20px; left:20px; z-index:0;
  border:1px solid var(--hair-gold); border-radius:var(--r); pointer-events:none;
}
.founder-quote{
  margin:1.6rem 0 1.9rem; padding-left:1.4rem; border-left:1px solid var(--gold);
}
.founder-quote p{
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.15rem,1rem + .7vw,1.55rem); line-height:1.45;
  color:var(--ivory); margin:0;
}
.founder-copy p{ color:var(--on-dark-muted); max-width:60ch; }
.founder-copy b{ color:var(--on-dark); font-weight:500; }
.founder-name{
  margin-top:1.8rem; padding-top:1.3rem; border-top:1px solid var(--hair-gold-2);
  font-family:var(--f-display); font-size:1.2rem; color:var(--gold) !important;
}
.founder-name span{
  display:block; font-family:var(--f-body); font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--on-dark-muted); margin-top:.35rem;
}

/* =========================================================================
   SERVICES — five areas, one row each
   ========================================================================= */
.areas{ border-top:1px solid var(--hair-gold-2); }
.area{
  display:grid; gap:clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  padding:clamp(2rem,3.6vw,3rem) 0;
  border-bottom:1px solid var(--hair-gold-2);
  scroll-margin-top:100px;
}
.area-head{ position:relative; padding-left:3.4rem; }
.area-num{
  position:absolute; top:.1rem; left:0;
  font-family:var(--f-display); font-size:1.5rem; line-height:1;
  color:var(--gold); opacity:.6;
}
.area-head .ico{
  width:1.7rem; height:1.7rem; color:var(--gold); stroke-width:1; margin-bottom:.9rem;
}
.area-head h3{
  font-family:var(--f-display); font-size:clamp(1.35rem,1.2rem + .55vw,1.75rem);
  line-height:1.25; color:var(--on-dark); margin-bottom:.5rem; text-wrap:balance;
}
.area-line{
  font-family:var(--f-display); font-style:italic; font-size:1.02rem;
  color:var(--beige); margin:0;
}
.area-list{
  display:grid; gap:.7rem 2rem; align-content:start;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.area-list li{
  position:relative; padding-left:1.4rem;
  font-size:.94rem; line-height:1.55; color:var(--on-dark-muted);
}
.area-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; background:var(--gold); transform:rotate(45deg);
}

.bespoke{
  display:flex; gap:1.3rem; align-items:flex-start;
  margin-top:clamp(2rem,3.5vw,3rem); padding:clamp(1.5rem,2.6vw,2rem);
  border:1px solid var(--hair-gold-2); border-left:2px solid var(--gold);
  background:rgba(205,170,109,.04); border-radius:var(--r);
}
.bespoke .ico{ width:1.5rem; height:1.5rem; color:var(--gold); margin-top:.2rem; }
.bespoke h3{
  font-family:var(--f-display); font-size:1.25rem; color:var(--ivory); margin-bottom:.5rem;
}
.bespoke p{ font-size:.94rem; line-height:1.7; color:var(--on-dark-muted); }
.bespoke a{ color:var(--gold); text-decoration:none; border-bottom:1px solid var(--hair-gold); }
.bespoke a:hover{ border-bottom-color:var(--gold); }

/* =========================================================================
   WHO WE SERVE
   ========================================================================= */
.section-burgundy .sec-intro{ color:rgba(244,239,230,.72); }
/* five cards: three across, then the last two sharing the row */
.client-grid{
  display:grid; gap:clamp(1.5rem,2.5vw,2.2rem);
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.client{ grid-column:span 2; }
.client:nth-child(4),
.client:nth-child(5){ grid-column:span 3; }
.client{
  display:flex; flex-direction:column; min-width:0;
  background:rgba(0,0,0,.22); border:1px solid rgba(232,217,185,.16);
  border-radius:var(--r); overflow:hidden;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.client:hover{ border-color:var(--hair-gold); transform:translateY(-4px); }
.client-img{ margin:0; overflow:hidden; }
.client-img img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .8s var(--ease); filter:saturate(.9);
}
/* the two wide cards are ~1.5x the width, so widen the crop to keep
   every image on the same visual height */
.client:nth-child(4) .client-img img,
.client:nth-child(5) .client-img img{ aspect-ratio:5/2; }
.client:hover .client-img img{ transform:scale(1.05); }
.client-body{ padding:clamp(1.5rem,2.4vw,1.9rem); }
.client-num{
  display:block; font-family:var(--f-display); font-size:.95rem; letter-spacing:.14em;
  color:var(--gold); margin-bottom:.6rem;
}
.client-body h3{
  font-family:var(--f-display); font-size:1.28rem; line-height:1.3;
  color:var(--ivory); margin-bottom:.6rem; text-wrap:balance;
}
.client-body p{ font-size:.92rem; line-height:1.7; color:rgba(244,239,230,.7); }

/* =========================================================================
   WHY RAFIQA
   ========================================================================= */
.std-grid{
  display:grid; gap:clamp(1.8rem,3vw,2.6rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.std{ position:relative; padding-top:2.6rem; border-top:1px solid rgba(163,111,40,.32); }
.std-num{
  position:absolute; top:1.1rem; left:0;
  font-family:var(--f-display); font-size:.95rem; letter-spacing:.16em; color:var(--bronze);
}
.std h3{
  font-family:var(--f-display); font-size:1.32rem; line-height:1.3;
  color:var(--on-light); margin:.5rem 0 .6rem; text-wrap:balance;
}
.std p{ font-size:.94rem; line-height:1.72; }

/* values: names only, set as a quiet rule across the foot of the section */
.values{
  margin-top:clamp(2.5rem,4.5vw,3.5rem); padding-top:1.8rem;
  border-top:1px solid var(--hair-dark);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.9rem 2.2rem;
}
.values-k{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bronze); margin:0;
}
.values ul{ display:flex; flex-wrap:wrap; gap:.6rem 1.8rem; }
.values li{
  font-family:var(--f-display); font-size:1.05rem; color:var(--on-light);
}
.values li + li{ position:relative; }
.values li + li::before{
  content:"·"; position:absolute; left:-1rem; color:var(--bronze);
}

/* =========================================================================
   QUOTE BAND
   ========================================================================= */
.quote-band{
  position:relative; background:var(--ink-deep);
  padding-block:clamp(4.5rem,8vw,7.5rem); text-align:center; overflow:hidden;
}
.quote-band::before{
  content:""; position:absolute; inset:0;
  background:url("../img/gold-texture.jpg") center / cover;
  opacity:.1; filter:grayscale(.15);
}
.quote-band::after{
  content:""; position:absolute; inset:clamp(1.25rem,3vw,2.5rem);
  border:1px solid var(--hair-gold-2); pointer-events:none;
}
.quote-inner{ position:relative; max-width:62rem; }
.quote-star{ width:1.4rem; height:1.4rem; color:var(--gold); margin:0 auto 1.8rem; }
.quote-band blockquote{ margin:0; }
.quote-band blockquote p{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,1.1rem + 1.9vw,2.6rem); line-height:1.35;
  color:var(--on-dark); margin:0;
}
.quote-attr{
  margin-top:1.8rem; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
}

/* =========================================================================
   PROCESS
   ========================================================================= */
.process-grid{
  display:grid; gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr); align-items:start;
}
.process-copy .btn{ margin-top:1.8rem; }
.steps li{
  display:grid; grid-template-columns:auto 1fr; gap:1.6rem;
  padding:1.9rem 0; border-top:1px solid var(--hair-gold-2);
}
.steps li:last-child{ border-bottom:1px solid var(--hair-gold-2); }
.step-num{
  font-family:var(--f-display); font-size:1.85rem; line-height:1; color:var(--gold);
  opacity:.75; min-width:2.4rem;
}
.steps h3{
  font-family:var(--f-display); font-size:1.25rem; color:var(--on-dark); margin-bottom:.4rem;
}
.steps p{ font-size:.94rem; color:var(--on-dark-muted); }

/* =========================================================================
   CONTACT
   ========================================================================= */
/* Cairo sits faintly behind the closing section — "Based in Cairo, Egypt" */
#contact{ overflow:hidden; }
#contact::before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  background:url("../img/cairo.jpg") center / cover no-repeat;
  opacity:.1; filter:grayscale(.35) contrast(1.05); pointer-events:none;
}
.contact-grid{
  position:relative; z-index:1;
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr); align-items:start;
}
.contact-list{ margin-top:2.4rem; display:grid; gap:1.4rem; }
.contact-list li{ display:flex; gap:1.1rem; align-items:flex-start; }
.contact-list .ico{ width:1.25rem; height:1.25rem; color:var(--gold); margin-top:.3rem; }
.c-k{
  display:block; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-dark-muted); margin-bottom:.15rem;
}
.contact-list a,.contact-list div > span:not(.c-k){
  color:var(--on-dark); text-decoration:none; font-size:1.02rem;
}
.contact-list a{ border-bottom:1px solid transparent; transition:border-color .3s var(--ease), color .3s var(--ease); }
.contact-list a:hover{ color:var(--gold); border-bottom-color:var(--hair-gold); }

.corp-note{
  margin-top:2.6rem; padding:1.6rem 1.7rem;
  border:1px solid var(--hair-gold-2); border-left:2px solid var(--gold);
  background:rgba(205,170,109,.04); border-radius:var(--r);
}
.corp-note .ico{ width:1.4rem; height:1.4rem; color:var(--gold); stroke-width:1; margin-bottom:.8rem; }
.corp-note h3{
  font-family:var(--f-display); font-size:1.15rem; color:var(--ivory); margin-bottom:.5rem;
}
.corp-note p{ font-size:.88rem; line-height:1.7; color:var(--on-dark-muted); }

/* ---------- form ---------- */
.form-wrap{ position:relative; }
.form-wrap .frame{
  position:absolute; inset:-14px -14px 14px 14px; border:1px solid var(--hair-gold-2);
  border-radius:var(--r); pointer-events:none;
}
.form{
  position:relative; background:var(--ink); border:1px solid var(--hair-gold-2);
  border-radius:var(--r); padding:clamp(1.6rem,3.4vw,2.8rem);
}
.form-title{
  font-family:var(--f-display); font-size:clamp(1.4rem,1.2rem + .6vw,1.8rem);
  color:var(--gold); margin-bottom:1.9rem;
  padding-bottom:1.1rem; border-bottom:1px solid var(--hair-gold-2);
}
.field{ margin-bottom:1.3rem; border:0; padding:0; min-width:0; }
.field-row{ display:grid; gap:1.3rem; grid-template-columns:1fr 1fr; }
.field label,.field legend{
  display:block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-dark-muted); margin-bottom:.6rem; padding:0;
}
.req{ color:var(--gold); }
.opt{ letter-spacing:.08em; text-transform:none; opacity:.7; }

.field input:not([type="radio"]):not([type="checkbox"]),
.field select,
.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(183,173,160,.3);
  border-radius:0; padding:.6rem 0; color:var(--on-dark); font-size:1rem; font-weight:300;
  transition:border-color .3s var(--ease);
}
.field textarea{ resize:vertical; line-height:1.65; }
.field select{
  appearance:none; cursor:pointer; padding-right:1.6rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 10px) 1.15rem, calc(100% - 5px) 1.15rem;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.field select option{ background:var(--ink-soft); color:var(--on-dark); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--gold);
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(183,173,160,.5); }
.field input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(.7) sepia(1) saturate(3) hue-rotate(5deg); cursor:pointer; }
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-bottom-color:#c9636b; }

.err{ margin:.45rem 0 0; font-size:.78rem; color:#d98a90; min-height:0; }
.err:empty{ display:none; }

.field-inline{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; }
.field-inline legend{ width:100%; margin-bottom:.8rem; }
/* these selectors must outrank `.field label` above, hence the extra class */
.field label.radio,
.field label.check{
  display:flex; align-items:center; gap:.6rem; cursor:pointer;
  font-size:.92rem; font-weight:300; letter-spacing:0; text-transform:none;
  color:var(--on-dark-muted); margin:0;
}
.field label.check{ align-items:flex-start; line-height:1.6; }
.radio input,.check input{
  appearance:none; width:1.05rem; height:1.05rem; flex:none; margin:0;
  border:1px solid rgba(183,173,160,.45); background:transparent; cursor:pointer;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.check input{ margin-top:.22rem; border-radius:2px; }
.radio input{ border-radius:50%; }
.radio input:checked,.check input:checked{ border-color:var(--gold); background:var(--gold); }
.check input:checked{
  background-image:linear-gradient(45deg,transparent 42%,var(--ink-deep) 42%,var(--ink-deep) 52%,transparent 52%),
                   linear-gradient(-45deg,transparent 48%,var(--ink-deep) 48%,var(--ink-deep) 58%,transparent 58%);
}
.radio input:checked{ box-shadow:inset 0 0 0 2px var(--ink); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

#submitBtn{ margin-top:.8rem; }
.form-status{
  margin:1.1rem 0 0; font-size:.92rem; line-height:1.6;
}
.form-status:empty{ display:none; }
.form-status.is-ok{ color:var(--gold); }
.form-status.is-bad{ color:#d98a90; }
.form-fine{
  margin-top:1.1rem; font-size:.78rem; line-height:1.6; color:rgba(183,173,160,.65);
}

/* shown when there is no form endpoint, or a configured one fails */
.handoff{
  margin-top:1.3rem; padding:1.3rem 1.4rem;
  border:1px solid var(--hair-gold-2); border-left:2px solid var(--gold);
  background:rgba(205,170,109,.05); border-radius:var(--r);
}
.handoff-k{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1rem;
}
.handoff-actions{ display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:1rem; }
.handoff-actions .btn{ padding:.72rem 1.25rem; font-size:.66rem; }
.handoff-text{
  display:block; width:100%; resize:vertical;
  background:rgba(0,0,0,.32); border:1px solid rgba(183,173,160,.25);
  border-radius:var(--r); padding:.85rem .95rem;
  color:var(--on-dark-muted); font-size:.85rem; line-height:1.6;
  font-family:var(--f-body); font-weight:300;
}
.handoff-text:focus{ outline:none; border-color:var(--gold); }
.handoff-fine{
  margin:.85rem 0 0; font-size:.78rem; line-height:1.6; color:rgba(183,173,160,.65);
}
@media (max-width:640px){
  .handoff-actions{ flex-direction:column; }
  .handoff-actions .btn{ width:100%; }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ background:#0a0809; border-top:1px solid var(--hair-gold-2); }
.footer-top{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  padding-block:clamp(3rem,5vw,4.5rem);
}
.footer-tag{
  margin-top:1.4rem; font-family:var(--f-display); font-style:italic;
  font-size:1.05rem; color:var(--on-dark-muted); max-width:26ch;
}
.footer-nav{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.footer-nav h4{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.1rem;
}
.footer-nav li + li{ margin-top:.55rem; }
.footer-nav a{
  text-decoration:none; font-size:.92rem; color:var(--on-dark-muted);
  transition:color .3s var(--ease);
}
.footer-nav a:hover{ color:var(--ivory); }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between;
  padding-block:1.6rem; border-top:1px solid rgba(205,170,109,.12);
  font-size:.8rem; color:rgba(183,173,160,.7);
}
.footer-bottom p{ margin:0; }
.footer-contact a{ text-decoration:none; transition:color .3s var(--ease); }
.footer-contact a:hover{ color:var(--gold); }

/* floating whatsapp */
.wa-float{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:90;
  width:54px; height:54px; display:grid; place-items:center;
  background:var(--ink-soft); color:var(--gold);
  border:1px solid var(--hair-gold); border-radius:50%;
  box-shadow:0 12px 34px -12px rgba(0,0,0,.8);
  transition:background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.wa-float:hover{ background:var(--gold); color:var(--ink-deep); transform:translateY(-3px); }
.wa-float .ico{ width:1.55rem; height:1.55rem; }

/* =========================================================================
   REVEAL ANIMATION
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease) var(--d,0s), transform .85s var(--ease) var(--d,0s);
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
  .btn:hover,.client:hover,.wa-float:hover{ transform:none; }
  .client-img img{ transition:none; }
  .hero-scroll .line{ animation:none; transform:none; opacity:1; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .nav-list{ gap:1.4rem; }
  .nav{ gap:1.4rem; }
  .brand-mark{ width:132px; height:60px; }
  .std-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .founder-grid{ grid-template-columns:minmax(0,.75fr) minmax(0,1fr); }
  .pillars-inner{ grid-template-columns:repeat(3,1fr); gap:1.75rem 0; }
  .pillar:nth-child(3n+1){ border-left:0; }
  .pillar:nth-child(4){ border-left:0; }
}

@media (max-width:900px){
  .site-header{ padding-block:.5rem; }
  .nav-toggle{ display:block; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(360px,84vw);
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:2rem;
    background:var(--ink-deep); border-left:1px solid var(--hair-gold-2);
    padding:5.5rem 2.2rem 2.5rem;
    transform:translateX(102%); transition:transform .45s var(--ease);
    overflow-y:auto; overscroll-behavior:contain;
  }
  /* The auto margins centre the menu when there is room and collapse to zero
     when there is not — so on a short screen the list starts below the header
     and scrolls, instead of overflowing upwards behind the close button. */
  .nav-list{ margin-top:auto; }
  .nav-cta{ margin-bottom:0; }
  .lang-switch{ margin-bottom:auto; }
  .nav.is-open{ transform:none; box-shadow:-30px 0 70px -30px rgba(0,0,0,.9); }
  .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-list li + li{ border-top:1px solid var(--hair-gold-2); }
  .nav-list a{ display:block; padding:1.15rem 0; font-size:.86rem; }
  .nav-list a::after{ display:none; }
  .nav-cta{ text-align:center; padding:1rem 1.4rem; font-size:.74rem; }
  body.nav-open{ overflow:hidden; }

  .story-grid,.process-grid,.contact-grid,.founder-grid,.area,.intro-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .intro-grid{ gap:1.5rem; }
  .hero-media img{ object-position:58% 42%; }
  .story-media{ padding-bottom:3.5rem; }
  .founder-portrait{ max-width:300px; }
  .founder-portrait .frame{ top:14px; right:-14px; bottom:-14px; left:14px; }
  .area{ gap:1.6rem; }
  .client-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .client,
  .client:nth-child(4),
  .client:nth-child(5){ grid-column:span 1; }
  .client:nth-child(5){ grid-column:span 2; }
  .client:nth-child(4) .client-img img{ aspect-ratio:16/10; }
  .client:nth-child(5) .client-img img{ aspect-ratio:3/1; }
  .story-img--b{ right:0; width:46%; }
  .footer-top{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:640px){
  :root{ --sec-y:clamp(3.5rem,11vw,5rem); }
  .pillars-inner{ grid-template-columns:repeat(2,1fr); }
  .pillar{ border-left:0 !important; }
  .pillar:nth-child(odd){ border-right:1px solid var(--hair-gold-2); }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .std-grid{ grid-template-columns:minmax(0,1fr); }
  section[id]{ scroll-margin-top:76px; }
  .area{ scroll-margin-top:76px; }
  .area-head{ padding-left:2.8rem; }
  .area-list{ grid-template-columns:minmax(0,1fr); }
  .values{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .client-grid{ grid-template-columns:minmax(0,1fr); }
  .client,
  .client:nth-child(4),
  .client:nth-child(5){ grid-column:span 1; }
  .client:nth-child(4) .client-img img,
  .client:nth-child(5) .client-img img{ aspect-ratio:16/10; }
  .bespoke{ flex-direction:column; gap:.9rem; }
  .cta-actions{ flex-direction:column; }
  .cta-actions .btn{ width:100%; }
  .page-head .rule-star{ width:min(14rem,80%); }
  .hero-actions .btn{ width:100%; }
  .story-img--b{ position:static; width:100%; margin-top:1rem; border-width:0; }
  .story-media{ padding-bottom:0; }
  .story-frame{ display:none; }
  .steps li{ gap:1rem; }
  .footer-bottom{ flex-direction:column; }
  .wa-float{ width:48px; height:48px; }
}

@media (max-width:360px){
  .pillars-inner{ grid-template-columns:1fr; }
  .pillar:nth-child(odd){ border-right:0; }
  .pillar + .pillar{ border-top:1px solid var(--hair-gold-2); padding-top:1.5rem; }
}

/* =========================================================================
   ARABIC / RIGHT-TO-LEFT
   The layout is overwhelmingly logical already (grid, flex, inline padding),
   so this only has to flip the handful of physical values and swap the fonts.
   ========================================================================= */
.lang-ar{
  font-family:"Camel","Noto Naskh Arabic",var(--f-body);
  font-weight:400;
  line-height:1.95;          /* Arabic needs more room between lines */
  letter-spacing:0;
}
.lang-ar .h2,
.lang-ar .hero-title,
.lang-ar .page-title,
.lang-ar h3,
.lang-ar h4,
.lang-ar .form-title,
.lang-ar .quote-band blockquote p,
.lang-ar .founder-quote p,
.lang-ar .values li,
.lang-ar .fact-k,
.lang-ar .pillar span,
.lang-ar .area-line,
.lang-ar .meaning-line,
.lang-ar .footer-tag{
  font-family:"Camel","Noto Naskh Arabic",serif;
  font-style:normal;         /* the Arabic face has no italic */
  letter-spacing:0;
}
/* the gold "emphasis" words are italic in English; in Arabic colour carries it */
.lang-ar em,
.lang-ar .h2 em,
.lang-ar .page-title em,
.lang-ar .hero-title .t-gold{ font-style:normal; }

/* Arabic does not use letterspacing — it breaks the joins */
.lang-ar .eyebrow,
.lang-ar .hero-sub,
.lang-ar .quote-attr,
.lang-ar .c-k,
.lang-ar .vm-k,
.lang-ar .values-k,
.lang-ar .btn,
.lang-ar .nav-list a,
.lang-ar .footer-nav h4,
.lang-ar .link-more,
.lang-ar .hero-scroll,
.lang-ar .field label,
.lang-ar .field legend,
.lang-ar .founder-name span,
.lang-ar .handoff-k,
.lang-ar .page-head .eyebrow{
  letter-spacing:.04em; text-transform:none;
}
.lang-ar .area-num,
.lang-ar .std-num,
.lang-ar .step-num,
.lang-ar .client-num{ letter-spacing:0; }

/* --- physical values that must mirror --- */
[dir="rtl"] .meaning{ border-left:0; border-right:2px solid var(--bronze); }
[dir="rtl"] .founder-quote{
  padding-left:0; padding-right:1.4rem;
  border-left:0; border-right:1px solid var(--gold);
}
[dir="rtl"] .corp-note,
[dir="rtl"] .bespoke,
[dir="rtl"] .handoff{ border-left-width:1px; border-right:2px solid var(--gold); }
[dir="rtl"] .area-head{ padding-left:0; padding-right:3.4rem; }
[dir="rtl"] .area-num{ left:auto; right:0; }
[dir="rtl"] .std-num{ left:auto; right:0; }
[dir="rtl"] .area-list li{ padding-left:0; padding-right:1.4rem; }
[dir="rtl"] .area-list li::before{ left:auto; right:0; }
[dir="rtl"] .values li + li::before{ left:auto; right:-1rem; }
[dir="rtl"] .link-more{ border-bottom-color:rgba(163,111,40,.4); }
[dir="rtl"] .link-more .ico,
[dir="rtl"] .btn .ico{ transform:scaleX(-1); }
[dir="rtl"] .btn:hover .ico{ transform:scaleX(-1) translateX(4px); }
[dir="rtl"] .link-more:hover .ico{ transform:scaleX(-1) translateX(4px); }
[dir="rtl"] .nav-list a::after{ left:auto; right:0; }
[dir="rtl"] .story-img--b{ right:auto; left:-1.75rem; }
[dir="rtl"] .story-frame{ left:auto; right:-1.5rem; border-right:0;
  border-left:1px solid rgba(163,111,40,.45); }
[dir="rtl"] .founder-portrait .frame{ left:-20px; right:20px; }
[dir="rtl"] .form-wrap .frame{ left:-14px; right:14px; }
[dir="rtl"] .pillar + .pillar{ border-left:0; border-right:1px solid var(--hair-gold-2); }
[dir="rtl"] .wa-float{ right:auto; left:clamp(1rem,3vw,2rem); }
[dir="rtl"] .skip-link:focus{ inset:1rem 1rem auto auto; }

/* the drawer slides in from the left in RTL */
@media (max-width:900px){
  [dir="rtl"] .nav{
    inset:0 auto 0 0;
    border-left:0; border-right:1px solid var(--hair-gold-2);
    transform:translateX(-102%);
  }
  [dir="rtl"] .nav.is-open{ box-shadow:30px 0 70px -30px rgba(0,0,0,.9); }
  [dir="rtl"] .nav.is-open{ transform:none; }
  [dir="rtl"] .pillar:nth-child(odd){ border-right:0;
    border-left:1px solid var(--hair-gold-2); }
}

/* =========================================================================
   LANGUAGE SWITCH — a plain two-letter box, same in both directions
   ========================================================================= */
.lang-switch{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:3.1rem; min-height:2.6rem; padding:.5rem .7rem;
  border:1px solid var(--hair-gold-2); border-radius:var(--r);
  font-family:var(--f-body); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; color:var(--on-dark-muted);
  text-decoration:none; white-space:nowrap; direction:ltr;
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background-color .3s var(--ease);
}
.lang-switch:hover{
  color:var(--ink-deep); background:var(--gold); border-color:var(--gold);
}

@media (max-width:900px){
  .lang-switch{ width:100%; min-height:3rem; font-size:.78rem; }
}

/* =========================================================================
   PHONE FIELD — dial code beside the number
   ========================================================================= */
.phone-row{ display:flex; align-items:stretch; gap:.6rem; }
.phone-row select{
  flex:0 0 auto; width:7.5rem; min-width:0;
  /* the arrow is drawn on the right in both directions: the code reads LTR */
  background-position:calc(100% - 10px) 1.15rem, calc(100% - 5px) 1.15rem;
}
.phone-row input{ flex:1 1 auto; min-width:0; }
[dir="rtl"] .phone-row{ flex-direction:row-reverse; }
[dir="rtl"] .phone-row select{ direction:rtl; text-align:right; }

@media (max-width:420px){
  .phone-row select{ width:6.4rem; font-size:.92rem; }
}

/* the corporate note reads as three short beats rather than one long sentence */
.corp-lead{
  color:var(--ivory) !important; font-size:.92rem; margin-bottom:.6rem !important;
}
.corp-ask{
  margin-top:.7rem !important; color:var(--gold) !important; font-size:.86rem;
}