/* ===========================================================
   FIDAR CURTAINS — light theme
   Brand palette sampled from the FIDAR logo:
   petrol teal #106060 · gold #FFC040
   =========================================================== */

:root{
  /* surfaces */
  --bg:        #ffffff;
  --bg-alt:    #f8f6f2;   /* warm off-white section band */
  --bg-brand:  #0d554c;   /* deep teal band */

  /* ink — all pass 4.5:1 on white */
  --ink:       #16211f;
  --ink-soft:  #5a6764;
  --ink-faint: #636f6b;  /* clears 4.5:1 on both white and the off-white band */

  /* brand */
  --brand:      #0e5f55;
  --brand-deep: #0a473f;
  --brand-tint: #eef4f2;

  /* gold is decorative only — never small text on white (fails contrast) */
  --gold:      #e0a32e;
  --gold-warm: #ffc040;
  --gold-tint: #fdf4e2;

  --line:      #e7e3db;
  --line-soft: #f0ede7;

  /* 4/8pt rhythm */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r-sm:8px; --r:14px; --r-lg:22px;
  --shadow: 0 1px 2px rgba(22,33,31,.04), 0 12px 32px -16px rgba(22,33,31,.16);

  --serif:'Playfair Display','Amiri',serif;
  --sans:'Inter','Tajawal',system-ui,sans-serif;
  --container:1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body{ font-family:'Tajawal','Inter',sans-serif; }

h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); line-height:1.15; margin:0 0 var(--s3); font-weight:600; }
html[dir="rtl"] :is(h1,h2,h3,h4){ font-family:'Tajawal',serif; font-weight:800; }
p{ margin:0 0 var(--s4); color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }
/* height:auto is required — the width/height HTML attributes (kept for CLS)
   apply as presentational hints, and an explicit height makes the browser
   ignore aspect-ratio entirely. Without this the hero renders at its full
   1232px natural height and the footer logo at 704px. */
img{ max-width:100%; display:block; height:auto; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; }

/* Latin digits must never be re-ordered by the bidi algorithm in RTL.
   Without isolation "050 452 5131" renders as "5131 452 050", because the
   spaces between digit runs are neutral and take the paragraph direction. */
bdi, [dir="ltr"]{ unicode-bidi:isolate; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:24px; }
section{ padding-block: clamp(56px,7vw,88px); }
.band{ background:var(--bg-alt); }

/* ---------- type helpers ---------- */
.eyebrow{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand); margin-bottom:var(--s3);
}
.sec-head{ max-width:640px; margin-bottom:var(--s7); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{ font-size:clamp(1.75rem,3.4vw,2.6rem); letter-spacing:-.01em; }
.sec-head p{ font-size:1.05rem; margin:0; }
.rule{ width:52px; height:2px; background:var(--gold); margin-bottom:var(--s4); border:0; }
.sec-head.center .rule{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 26px; border-radius:999px;
  font-size:.94rem; font-weight:600; letter-spacing:.01em;
  border:1.5px solid transparent; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-deep); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--brand); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--brand); background:var(--brand-tint); }
.btn-on-dark{ background:#fff; color:var(--brand-deep); }
.btn-on-dark:hover{ background:var(--gold-warm); color:#3a2a05; }
.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  padding-block:var(--s3); }
.brand{ display:flex; align-items:center; gap:10px; flex:none; min-height:44px; }
/* portrait monogram — size by height so it never squashes */
.brand img{ height:38px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-text b{
  font-family:var(--serif); font-size:1.22rem; font-weight:700;
  color:var(--brand); letter-spacing:.09em;
}
.brand-text span{
  font-size:.56rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:3px; font-weight:600;
}
.nav-links{ display:flex; align-items:center; gap:var(--s6); }
.nav-links a{ font-size:.93rem; font-weight:500; color:var(--ink-soft); position:relative; padding-block:4px; }
.nav-links a::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1.5px;
  background:var(--brand); transform:scaleX(0); transition:transform .22s ease;
}
.nav-links a:hover{ color:var(--brand); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-right{ display:flex; align-items:center; gap:var(--s3); }

.lang{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.lang button{
  border:0; background:transparent; color:var(--ink-faint); cursor:pointer;
  font-family:inherit; font-size:.78rem; font-weight:700;
  min-height:44px; min-width:46px; padding-inline:12px;  /* 44px touch target */
}
.lang button.active{ background:var(--brand); color:#fff; }

.nav-cta{ display:none; min-height:42px; padding:10px 20px; font-size:.88rem; }
@media(min-width:1040px){ .nav-cta{ display:inline-flex; } }

.burger{ display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; background:none; border:0; cursor:pointer;
  width:44px; height:44px; margin-inline-end:-10px; }
.burger span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }
@media(max-width:1039px){
  .burger{ display:flex; }
  .nav-links{
    position:fixed; inset-block-start:65px; inset-inline:0; background:#fff;
    flex-direction:column; align-items:stretch; gap:0; padding:var(--s2) 24px var(--s5);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    opacity:0; transform:translateY(-10px); pointer-events:none; transition:.22s ease;
  }
  .nav-links.open{ opacity:1; transform:none; pointer-events:auto; }
  .nav-links a{ padding-block:14px; border-bottom:1px solid var(--line-soft); font-size:1rem; }
  .nav-links a::after{ display:none; }
}

/* ---------- hero ---------- */
.hero{ padding-block: clamp(40px,6vw,76px) clamp(48px,7vw,88px); }
.hero-grid{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}
.hero h1{
  font-size:clamp(2.1rem,4.6vw,3.5rem); letter-spacing:-.02em; margin-bottom:var(--s4);
}
.hero h1 em{ font-style:italic; color:var(--brand); }
.hero .lead{ font-size:1.08rem; max-width:50ch; margin-bottom:var(--s6); }
.hero-cta{ display:flex; gap:var(--s3); flex-wrap:wrap; }

.hero-media{ position:relative; }
/* the source is square (1208x1232) — a square frame crops almost nothing */
.hero-media img{
  width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center;
  border-radius:var(--r-lg); box-shadow:var(--shadow);
}
.hero-badge{
  position:absolute; inset-block-end:-18px; inset-inline-start:-18px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:14px 18px; box-shadow:var(--shadow); display:flex; align-items:center; gap:11px;
}
.hero-badge .stars{ display:flex; gap:2px; }
.hero-badge .stars svg{ width:14px; height:14px; fill:var(--gold); }
.hero-badge b{ font-size:1.05rem; color:var(--ink); display:block; line-height:1.2; }
.hero-badge span{ font-size:.75rem; color:var(--ink-faint); }

/* trust bar */
.trust{ border-block:1px solid var(--line-soft); }
.trust ul{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4);
  padding-block:var(--s5);
}
.trust li{ display:flex; align-items:center; gap:10px; font-size:.9rem;
  font-weight:500; color:var(--ink); }
.trust svg{ width:19px; height:19px; flex:none; stroke:var(--brand); }

/* ---------- services ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.svc{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s6) var(--s5); transition:border-color .2s, box-shadow .2s, transform .2s;
}
.svc:hover{ border-color:var(--brand); box-shadow:var(--shadow); transform:translateY(-3px); }
.svc .ic{
  width:44px; height:44px; border-radius:50%; background:var(--brand-tint);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--s4);
}
.svc .ic svg{ width:21px; height:21px; stroke:var(--brand); }
.svc h3{ font-family:var(--sans); font-size:1.04rem; font-weight:700; margin-bottom:6px; }
.svc p{ font-size:.92rem; margin:0; }
.svc.feature{ background:var(--gold-tint); border-color:#f0dfba; }
.svc.feature .ic{ background:#fff; }
.tag-new{
  display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#5f4103; background:var(--gold-warm);
  padding:3px 8px; border-radius:999px; margin-inline-start:8px; vertical-align:2px;
}

/* ---------- process ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); counter-reset:step; }
.step{ position:relative; padding-top:var(--s5); border-top:2px solid var(--line); }
.step::before{
  counter-increment:step; content:"0" counter(step);
  position:absolute; top:-14px; inset-inline-start:0; background:var(--bg-alt);
  padding-inline-end:10px; font-family:var(--serif); font-size:1.4rem;
  font-weight:700; color:var(--gold); line-height:1;
}
.step h3{ font-family:var(--sans); font-size:1rem; font-weight:700; margin-bottom:5px; }
.step p{ font-size:.9rem; margin:0; }

/* ---------- gallery ---------- */
/* Every project photo is square (~0.98), so uniform square cells keep the
   curtains intact. A masonry span here cropped them badly. */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }
.gal figure{
  position:relative; margin:0; overflow:hidden; border-radius:var(--r);
  background:var(--bg-alt); aspect-ratio:1/1;
}
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gal figure:hover img{ transform:scale(1.05); }
.gal figcaption{
  position:absolute; inset-block-end:10px; inset-inline-start:10px;
  background:rgba(255,255,255,.94); color:var(--ink); font-size:.74rem; font-weight:600;
  padding:6px 12px; border-radius:999px;
}

/* ---------- about ---------- */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
/* shopfront source is 1360x628 (~2.17) — 16/9 keeps the signage readable */
.about-media img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-lg); }
.about-media figcaption{
  margin-top:var(--s3); font-size:.82rem; color:var(--ink-faint); text-align:center;
}

/* showroom location */
.locate{
  margin-top:var(--s4); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:#fff;
}
.locate iframe{ display:block; width:100%; height:210px; border:0; filter:saturate(.9); }
.locate-bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s4); flex-wrap:wrap; border-top:1px solid var(--line-soft);
}
.locate-bar .where{ display:flex; gap:10px; align-items:flex-start; min-width:0; }
.locate-bar .where svg{ width:18px; height:18px; flex:none; stroke:var(--brand); margin-top:3px; }
.locate-bar b{ display:block; font-size:.92rem; color:var(--ink); }
.locate-bar span{ font-size:.82rem; color:var(--ink-soft); }
.locate-bar .btn{ min-height:44px; padding:11px 20px; font-size:.88rem; }
.checks{ display:grid; gap:var(--s3); margin:var(--s5) 0 var(--s6); }
.checks li{ display:flex; gap:11px; align-items:flex-start; font-size:.96rem; font-weight:500; }
.checks svg{ width:20px; height:20px; flex:none; stroke:var(--brand); margin-top:2px; }
.quote{
  border-inline-start:3px solid var(--gold); padding-inline-start:var(--s4);
  font-family:var(--serif); font-size:1.06rem; font-style:italic; color:var(--ink); margin:0;
}

/* ---------- contact ---------- */
.contact{ background:var(--bg-brand); color:#fff; }
.contact h2{ color:#fff; }
.contact .eyebrow{ color:var(--gold-warm); }
.contact .rule{ background:var(--gold-warm); }
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); }
.contact p{ color:rgba(255,255,255,.76); }
.contact-cta{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s6); }
.info{ display:grid; gap:var(--s4); }
.info-row{ display:flex; gap:13px; align-items:flex-start; }
.info-row .ic{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; flex:none; }
.info-row svg{ width:17px; height:17px; stroke:var(--gold-warm); }
.info-row h4{ font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin:0 0 3px; }
.info-row p{ margin:0; color:#fff; font-size:.98rem; }
/* tel:/mailto: are primary actions here — give them a real touch target */
.info-row a{ display:inline-flex; align-items:center; min-height:44px; }
.info-row a:hover{ color:var(--gold-warm); }

.card{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg); padding:var(--s6);
}
.card h3{ color:#fff; font-size:1.25rem; }
.socials{ display:flex; gap:10px; margin-top:var(--s5); }
.socials a{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.socials a:hover{ background:var(--gold-warm); border-color:var(--gold-warm); }
.socials svg{ width:18px; height:18px; stroke:#fff; }
.socials a:hover svg{ stroke:#3a2a05; }

/* ---------- footer ---------- */
footer{ background:#fff; border-top:1px solid var(--line); padding-block:var(--s7) var(--s5); }
.foot-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--s7); margin-bottom:var(--s7); }
.foot-brand img{ width:92px; height:auto; margin-bottom:var(--s4); }
.foot-top p{ font-size:.9rem; max-width:38ch; }
footer h4{ font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--s4); }
footer li{ margin-bottom:10px; font-size:.92rem; color:var(--ink-soft); }
footer li a:hover{ color:var(--brand); }
.foot-bottom{ border-top:1px solid var(--line-soft); padding-top:var(--s4);
  display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
  font-size:.82rem; color:var(--ink-faint); }

/* ---------- whatsapp fab ---------- */
.fab{
  position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:200;
  width:56px; height:56px; border-radius:50%; background:#25d366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px -6px rgba(37,211,102,.55);
}
.fab svg{ width:28px; height:28px; fill:#fff; }

/* ---------- scroll reveal ----------
   The `.anim` hidden state is NEVER written by the stylesheet on its own —
   main.js adds the class only after it has created the IntersectionObserver.
   So if the script is blocked, fails, or the observer is unsupported, the
   class never lands and everything stays visible. (An earlier version hid
   content in CSS by default and blanked the gallery on mobile.) */
.anim{
  opacity:0; transform:translateY(20px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.anim.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .anim, .anim.in{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ order:-1; }
  .hero-badge{ inset-inline-start:auto; inset-inline-end:14px; inset-block-end:-16px; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:var(--s6) var(--s5); }
  .about,.contact-grid{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .trust ul{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){
  .svc-grid{ grid-template-columns:1fr; }
  .gal{ grid-template-columns:repeat(2,1fr); gap:var(--s3); }
  .foot-top{ grid-template-columns:1fr; gap:var(--s6); }
  .hero-cta .btn, .contact-cta .btn{ width:100%; }
  .foot-bottom{ flex-direction:column; }
}