/* ==========================================================================
   ASIMA FURNITURE — Design System
   Palette derived from the brand mark: warm bronze/walnut line-art on cream.
   Signature motif: an angled "cut corner" echoing the slanted roofline in
   the logo — used on hero edges, image frames and section dividers.
   Layout uses CSS logical properties so English (LTR) and Arabic (RTL)
   share one stylesheet without duplicated rules.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Jost:wght@400;500;600;700&family=Cairo:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Color palette (from logo bronze/walnut line-art) ---- */
  --cream:        #FAF5EC;
  --cream-alt:    #F1E5D3;
  --cream-deep:   #E9D8BE;
  --ivory:        #FFFFFF;
  --walnut-900:   #241811;
  --walnut-800:   #33221A;
  --walnut-700:   #4A3122;
  --bronze-600:   #8C5A34;
  --bronze-500:   #B07C45;
  --bronze-400:   #C89A61;
  --bronze-300:   #DBB989;
  --ink:          #2A2019;
  --ink-soft:     #6B5C4F;
  --ink-faint:    #9A8B7C;
  --line:         #E3D5C1;
  --success:      #4C7A5A;

  /* ---- Type ---- */
  --font-display: 'Fraunces', 'Amiri', serif;
  --font-body:    'Jost', 'Cairo', sans-serif;
  --font-ar:      'Cairo', 'Jost', sans-serif;

  /* ---- Spacing / shape ---- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --cut: 48px;               /* signature angled-corner cut size */
  --cut-sm: 22px;
  --container: 1240px;
  --shadow-sm: 0 2px 10px rgba(36,24,17,.06);
  --shadow-md: 0 12px 32px rgba(36,24,17,.12);
  --shadow-lg: 0 24px 60px rgba(36,24,17,.18);
  --ease: cubic-bezier(.22,.8,.28,1);
}

/* ---------------------------- Reset ---------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html[dir="rtl"] body{ font-family: var(--font-ar); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--walnut-900); margin:0 0 .5em; line-height:1.15; font-weight:600; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4{ font-family: var(--font-ar); font-weight:700; }
p{ margin:0 0 1em; color: var(--ink-soft); }
:focus-visible{ outline: 2.5px solid var(--bronze-500); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------------------------- Layout helpers ---------------------------- */
.container{ width:100%; max-width: var(--container); margin-inline:auto; padding-inline: 20px; }
.section{ padding-block: 88px; }
.section--tight{ padding-block: 56px; }
.section--alt{ background: var(--cream-alt); }
.section--dark{ background: var(--walnut-900); color: var(--cream); }
.section--dark p{ color: rgba(250,245,236,.72); }
.section--dark h2, .section--dark h3{ color: var(--ivory); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--bronze-600); font-weight:600; margin-bottom:14px;
}
html[dir="rtl"] .eyebrow{ letter-spacing:0; }
.eyebrow::before{ content:""; width:26px; height:2px; background: var(--bronze-500); display:inline-block; }

.section-head{ max-width:640px; margin-bottom:48px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); }

.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-6{ grid-template-columns: repeat(6, 1fr); }

.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* Signature angled-cut shape, echoing the logo's roofline frame */
.cut-tr{ clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.cut-bl{ clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.cut-tr-sm{ clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%); }
html[dir="rtl"] .cut-tr{ clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
html[dir="rtl"] .cut-tr-sm{ clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-sm)); }

/* ---------------------------- Buttons ---------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 30px; border-radius: var(--radius-sm); font-weight:600; font-size:.95rem;
  border:1.5px solid transparent; transition: all .25s var(--ease); white-space:nowrap;
}
.btn-primary{ background: var(--walnut-900); color: var(--ivory); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.btn-primary:hover{ background: var(--bronze-600); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline{ background: transparent; border-color: var(--walnut-900); color: var(--walnut-900); }
.btn-outline:hover{ background: var(--walnut-900); color:var(--ivory); }
.btn-light{ background: var(--ivory); color: var(--walnut-900); }
.btn-light:hover{ background: var(--bronze-400); color:var(--ivory); }
.btn-sm{ padding: 10px 20px; font-size:.85rem; }
.btn-block{ width:100%; }

/* ---------------------------- Header ---------------------------- */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(250,245,236,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s;
}
.site-header.is-scrolled{ box-shadow: var(--shadow-sm); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px; }
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ height:84px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-family:var(--font-display); font-size:1.3rem; color:var(--walnut-900); letter-spacing:.02em; }
html[dir="rtl"] .brand-text strong{ font-family: var(--font-ar); }
.brand-text span{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze-600); }
html[dir="rtl"] .brand-text span{ letter-spacing:0; }

.main-nav{ display:flex; align-items:center; gap:36px; }
.main-nav a{ font-weight:500; font-size:.95rem; color: var(--walnut-800); position:relative; padding-block:6px; }
.main-nav a::after{ content:""; position:absolute; inset-inline-start:0; bottom:0; width:0; height:2px; background: var(--bronze-500); transition: width .25s var(--ease); }
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.main-nav a.active{ color: var(--bronze-600); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.lang-switch{
  display:flex; align-items:center; gap:6px; padding:8px 14px;
  border:1.5px solid var(--walnut-900); border-radius: 999px; font-size:.82rem; font-weight:600;
  transition: all .2s;
}
.lang-switch:hover{ background:var(--walnut-900); color:var(--ivory); }
.header-phone{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem; color:var(--walnut-800); }
.header-phone svg{ width:18px; height:18px; stroke: var(--bronze-500); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:6px; }
.nav-toggle span{ width:26px; height:2px; background:var(--walnut-900); border-radius:2px; transition: all .25s; }

/* ---------------------------- Hero Slider ---------------------------- */
.hero{ position:relative; height: min(88vh, 780px); min-height:520px; overflow:hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
html[dir="rtl"] .hero{ clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.hero-slides{ position:relative; width:100%; height:100%; }
.hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition: opacity 1.1s var(--ease), visibility 1.1s;
  background-size:cover; background-position:center;
}
.hero-slide.is-active{ opacity:1; visibility:visible; z-index:2; }
.hero-slide::before{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(28,18,12,.78) 0%, rgba(28,18,12,.35) 45%, rgba(28,18,12,.55) 100%); }
.hero-slide-inner{ position:relative; z-index:2; height:100%; display:flex; align-items:flex-end; padding-bottom:100px; }
.hero-text{ max-width:620px; color:var(--ivory); }
.hero-text .eyebrow{ color: var(--bronze-300); }
.hero-text .eyebrow::before{ background: var(--bronze-300); }
.hero-text h1{ color:var(--ivory); font-size: clamp(2.1rem, 5vw, 3.6rem); margin-bottom:.4em; }
.hero-text p{ color: rgba(255,255,255,.82); font-size:1.05rem; max-width:480px; margin-bottom:2em; }

.hero-slide{ transform: scale(1.08); transition: opacity 1.1s var(--ease), visibility 1.1s, transform 6s linear; }
.hero-slide.is-active{ transform: scale(1); }

.hero-nav{ position:absolute; bottom:36px; inset-inline-end:40px; z-index:5; display:flex; gap:12px; }
.hero-arrow{
  width:46px; height:46px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.08); color:var(--ivory); display:flex; align-items:center; justify-content:center;
  transition: all .2s;
}
.hero-arrow:hover{ background: var(--bronze-500); border-color: var(--bronze-500); }
.hero-arrow svg{ width:18px; height:18px; }
html[dir="rtl"] .hero-arrow.next svg{ transform: rotate(180deg); }
html[dir="rtl"] .hero-arrow.prev svg{ transform: rotate(180deg); }

.hero-dots{ position:absolute; bottom:40px; inset-inline-start:40px; z-index:5; display:flex; gap:10px; align-items:center; }
.hero-dot{ width:34px; height:3px; background: rgba(255,255,255,.4); border:0; border-radius:3px; transition: all .25s; padding:0; }
.hero-dot.is-active{ background: var(--bronze-400); width:50px; }

/* ---------------------------- Trust strip ---------------------------- */
.trust-strip{ background: var(--walnut-900); }
.trust-strip .container{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; padding-block:22px; }
.trust-item{ display:flex; align-items:center; gap:12px; color: rgba(250,245,236,.9); font-size:.88rem; }
.trust-item svg{ width:22px; height:22px; stroke: var(--bronze-400); flex-shrink:0; }
.trust-item strong{ display:block; color:var(--ivory); font-size:.92rem; }

/* ---------------------------- Category cards ---------------------------- */
.cat-card{
  position:relative; border-radius: var(--radius-md); overflow:hidden; height:320px;
  box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.cat-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(36,24,17,0) 30%, rgba(36,24,17,.88) 100%); }
.cat-card-body{ position:absolute; inset-inline:0; bottom:0; z-index:2; padding:24px; color:var(--ivory); }
.cat-card-body span{ font-size:.78rem; color: rgba(255,255,255,.72); display:block; margin-bottom:2px; }
.cat-card-body h3{ color:var(--ivory); margin:0; font-size:1.25rem; }
.cat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cat-card:hover img{ transform: scale(1.08); }

/* ---------------------------- Product cards ---------------------------- */
.product-card{
  background: var(--ivory); border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  border:1px solid var(--line);
}
.product-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.product-media{ position:relative; aspect-ratio: 1/1; overflow:hidden; background: var(--cream-alt); }
.product-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.product-card:hover .product-media img{ transform: scale(1.06); }
.product-tag{ position:absolute; top:14px; inset-inline-start:14px; background: var(--ivory); color:var(--walnut-900); font-size:.72rem; font-weight:600; padding:5px 12px; border-radius:999px; }
.product-body{ padding:20px; }
.product-body h3{ font-size:1.05rem; margin-bottom:6px; }
.product-body p{ font-size:.87rem; margin-bottom:16px; }
.product-foot{ display:flex; align-items:center; justify-content:space-between; }

.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.filter-btn{
  padding:10px 20px; border-radius:999px; border:1.5px solid var(--line); background: var(--ivory);
  font-size:.86rem; font-weight:600; color: var(--ink-soft); transition: all .2s;
}
.filter-btn:hover{ border-color: var(--bronze-400); color: var(--bronze-600); }
.filter-btn.is-active{ background: var(--walnut-900); border-color: var(--walnut-900); color: var(--ivory); }

/* ---------------------------- Why / values / process ---------------------------- */
.feature-card{ background: var(--ivory); padding:34px 28px; border-radius: var(--radius-md); border:1px solid var(--line); transition: all .3s var(--ease); }
.feature-card:hover{ border-color: var(--bronze-400); box-shadow: var(--shadow-sm); transform: translateY(-4px); }
.feature-icon{ width:52px; height:52px; border-radius: var(--radius-sm); background: var(--cream-alt); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.feature-icon svg{ width:26px; height:26px; stroke: var(--bronze-600); }
.feature-card h3{ font-size:1.1rem; margin-bottom:8px; }
.feature-card p{ font-size:.92rem; margin:0; }

.process-list{ counter-reset: step; }
.process-item{ display:flex; gap:24px; padding-block:28px; border-top:1px solid var(--line); }
.process-item:last-child{ border-bottom:1px solid var(--line); }
.process-num{ font-family: var(--font-display); font-size:2.1rem; color: var(--bronze-400); flex-shrink:0; width:70px; }
.process-item h3{ font-size:1.15rem; margin-bottom:6px; }
.process-item p{ margin:0; max-width:520px; }

/* ---------------------------- Certifications ---------------------------- */
.cert-card{
  background: var(--ivory); border:1px solid var(--line); border-radius: var(--radius-md);
  overflow:hidden; cursor:pointer; transition: all .3s var(--ease); position:relative;
}
.cert-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--bronze-400); }
.cert-thumb{ aspect-ratio: 4/3; overflow:hidden; background:var(--cream-alt); position:relative; }
.cert-thumb img{ width:100%; height:100%; object-fit:cover; object-position: top; transition: transform .4s; }
.cert-card:hover .cert-thumb img{ transform: scale(1.04); }
.cert-view-badge{
  position:absolute; inset:0; background: rgba(36,24,17,.45); opacity:0; transition: opacity .25s;
  display:flex; align-items:center; justify-content:center;
}
.cert-card:hover .cert-view-badge{ opacity:1; }
.cert-view-badge span{ background: var(--ivory); color:var(--walnut-900); padding:10px 22px; border-radius:999px; font-size:.85rem; font-weight:600; }
.cert-body{ padding:18px 20px; display:flex; align-items:center; gap:12px; }
.cert-body svg{ width:24px; height:24px; stroke: var(--success); flex-shrink:0; }
.cert-body h4{ margin:0; font-size:.98rem; color:var(--walnut-900); }
.cert-body small{ color: var(--ink-faint); font-size:.78rem; }

.reg-table{ width:100%; border-collapse: collapse; margin-top:8px; }
.reg-table tr{ border-bottom:1px solid var(--line); }
.reg-table tr:last-child{ border-bottom:0; }
.reg-table td{ padding:14px 6px; font-size:.92rem; }
.reg-table td:first-child{ color: var(--ink-faint); width:45%; }
.reg-table td:last-child{ font-weight:600; color: var(--walnut-900); }

/* ---------------------------- CTA banner ---------------------------- */
.cta-banner{
  background: var(--walnut-900); color:var(--ivory); border-radius: var(--radius-lg);
  padding: 60px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; inset-inline-end:-60px; top:-60px; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle, rgba(176,124,69,.35), transparent 70%);
}
.cta-banner h2{ color:var(--ivory); margin-bottom:8px; font-size: clamp(1.5rem, 3vw, 2.1rem); max-width:480px; }
.cta-banner p{ color: rgba(255,255,255,.72); margin:0; max-width:420px; }

/* ---------------------------- Lightbox ---------------------------- */
.lightbox{ position:fixed; inset:0; background: rgba(20,13,9,.92); z-index:1000; display:none; align-items:center; justify-content:center; padding:40px 20px; }
.lightbox.is-open{ display:flex; }
.lightbox-inner{ max-width: 900px; width:100%; max-height:90vh; display:flex; flex-direction:column; align-items:center; gap:16px; }
.lightbox-inner img{ max-height:78vh; width:auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.lightbox-caption{ color: var(--cream); font-size:.92rem; text-align:center; }
.lightbox-close{
  position:absolute; top:26px; inset-inline-end:30px; width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.4); color:var(--ivory);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; transition:.2s;
}
.lightbox-close:hover{ background: var(--bronze-500); border-color:var(--bronze-500); }

/* ---------------------------- Forms ---------------------------- */
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; font-size:.86rem; font-weight:600; color: var(--walnut-800); margin-bottom:8px; }
.form-control{
  width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--ivory); font-size:.95rem; color:var(--ink); transition: border-color .2s;
}
.form-control:focus{ border-color: var(--bronze-500); }
textarea.form-control{ resize:vertical; min-height:130px; }
.form-note{ font-size:.78rem; color: var(--ink-faint); margin-top:14px; }

.contact-card{ background: var(--ivory); border-radius: var(--radius-md); border:1px solid var(--line); padding:36px; box-shadow: var(--shadow-sm); }
.info-row{ display:flex; gap:16px; padding-block:18px; border-top:1px solid var(--line); }
.info-row:first-of-type{ border-top:0; }
.info-row svg{ width:22px; height:22px; stroke: var(--bronze-500); flex-shrink:0; margin-top:2px; }
.info-row h4{ margin:0 0 4px; font-size:.92rem; color: var(--walnut-900); }
.info-row p{ margin:0; font-size:.9rem; }
.map-frame{ border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--line); height:280px; margin-top:24px; }
.map-frame iframe{ width:100%; height:100%; border:0; }

/* ---------------------------- Footer ---------------------------- */
.site-footer{ background: var(--walnut-900); color: rgba(250,245,236,.72); padding-top: 80px; }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.footer-brand img{ height:64px; }
.footer-brand strong{ font-family: var(--font-display); color:var(--ivory); font-size:1.2rem; }
html[dir="rtl"] .footer-brand strong{ font-family: var(--font-ar); }
.site-footer h4{ color: var(--ivory); font-size:.95rem; margin-bottom:20px; letter-spacing:.04em; }
.footer-links li{ margin-bottom:12px; }
.footer-links a{ font-size:.9rem; transition: color .2s; }
.footer-links a:hover{ color: var(--bronze-300); }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; transition: all .2s; }
.footer-social a:hover{ background: var(--bronze-500); border-color: var(--bronze-500); }
.footer-social svg{ width:16px; height:16px; }
.footer-legal-badges{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.footer-legal-badges span{ font-size:.82rem; display:flex; gap:6px; }
.footer-legal-badges span b{ color: var(--bronze-300); font-weight:600; }
.footer-bottom{ padding-block:26px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem; }
.footer-bottom a{ color: var(--bronze-300); font-weight:600; }
.footer-bottom a:hover{ text-decoration:underline; }

/* ---------------------------- WhatsApp float ---------------------------- */
.float-whatsapp{
  position:fixed; bottom:26px; inset-inline-end:26px; z-index:400; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md);
  transition: transform .2s;
}
.float-whatsapp:hover{ transform: scale(1.08); }
.float-whatsapp svg{ width:28px; height:28px; fill:#fff; }

/* ---------------------------- Scroll reveal ---------------------------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.2s; }
.reveal-delay-3{ transition-delay:.3s; }

/* ---------------------------- Page hero (inner pages) ---------------------------- */
.page-hero{
  background: linear-gradient(140deg, var(--walnut-900) 0%, var(--walnut-800) 100%);
  color:var(--ivory); padding-block: 90px 70px; position:relative; overflow:hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
html[dir="rtl"] .page-hero{ clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.page-hero::after{ content:""; position:absolute; inset-inline-end:-100px; bottom:-120px; width:340px; height:340px; border-radius:50%; background: radial-gradient(circle, rgba(176,124,69,.25), transparent 70%); }
.page-hero .eyebrow{ color: var(--bronze-300); }
.page-hero .eyebrow::before{ background: var(--bronze-300); }
.page-hero h1{ color:var(--ivory); font-size: clamp(2rem, 4.4vw, 3.1rem); max-width:640px; }
.page-hero p{ color: rgba(255,255,255,.75); max-width:560px; font-size:1.05rem; margin:0; }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:.85rem; color: rgba(255,255,255,.55); margin-bottom:18px; }
.breadcrumb a:hover{ color: var(--bronze-300); }

/* ---------------------------- About specifics ---------------------------- */
.story-media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; height:100%; min-height:380px; }
.story-media img{ width:100%; height:100%; object-fit:cover; }
.mv-card{ background: var(--ivory); border:1px solid var(--line); border-radius: var(--radius-md); padding:32px; }
.mv-card h3{ font-size:1.15rem; display:flex; align-items:center; gap:10px; }
.mv-card h3 svg{ width:22px; height:22px; stroke: var(--bronze-500); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px){
  .main-nav{
    position:fixed; inset-block:0 0; inset-inline-end:0; width:min(340px, 82vw); height:100vh;
    background: var(--cream); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:110px 32px 32px; gap:26px; box-shadow: var(--shadow-lg);
    transform: translateX(110%); transition: transform .4s var(--ease); z-index:400;
  }
  html[dir="rtl"] .main-nav{ transform: translateX(-110%); }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav a{ font-size:1.15rem; }
  .nav-toggle{ display:flex; }
  .header-phone{ display:none; }
  .hero-slide-inner{ padding-bottom:70px; }
  .hero-nav{ inset-inline-end:20px; bottom:20px; }
  .hero-dots{ inset-inline-start:20px; bottom:24px; }
}

@media (max-width: 760px){
  .section{ padding-block:60px; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .grid-6{ grid-template-columns: repeat(3,1fr); }
  .cta-banner{ padding:38px 28px; flex-direction:column; align-items:flex-start; text-align:start; }
  .footer-grid{ grid-template-columns: 1fr; gap:34px; }
  .process-item{ flex-direction:column; gap:10px; }
  .process-num{ width:auto; }
  .contact-card{ padding:26px; }
  .hero{ height: min(78vh, 620px); }
}

@media (max-width: 480px){
  .grid-6{ grid-template-columns: repeat(2,1fr); }
  .brand-text strong{ font-size:1.1rem; }
  .brand img{ height:42px; }
  .cta-banner{ border-radius: var(--radius-md); }
  .lightbox-close{ top:14px; inset-inline-end:14px; }
}