/* ═══════════════════════════════════════════════
   Atelier El Alaoui — theme.css
   Exact faithful port of the original design.
═══════════════════════════════════════════════ */

:root {
  --navy:       #1B2B43;
  --cream:      #E2D9B7;
  --paper:      #F9F7F0;
  --white:      #FFFFFF;
  --grey-light: #C5C6CE;
  --grey-mid:   #75777E;
  --grey-dark:  #44474D;
  --on-surface: #111C2C;

  --font-serif: 'Noto Serif', Georgia, serif;
  --font-sans:  'Manrope', sans-serif;
  --font-ar:    'Noto Naskh Arabic', serif;

  --unit: 8px;
  --gutter: 32px;
  --margin: 64px;
}

/* ── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; width: 100%; }
a   { text-decoration: none; color: inherit; }

/* ── Ruler ──────────────────────────────────── */
.ruler { width:100%; height:40px; position:relative; overflow:hidden; flex-shrink:0; }
.ruler svg { width:100%; height:100%; }
.ruler--cream svg line, .ruler--cream svg text { stroke:var(--cream); fill:var(--cream); }
.ruler--navy  svg line, .ruler--navy  svg text  { stroke:var(--navy);  fill:var(--navy); }

/* ── Navigation ─────────────────────────────── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  background: var(--navy);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--margin);
  height: 64px;
  border-bottom: 1px solid rgba(226,217,183,.15);
  transition: background .4s;
}
.nav-logo { display:flex; align-items:center; gap:12px; }
.nav-logo svg { width:32px; height:32px; }
/* Custom logo from WP */
.nav-logo .custom-logo-link img { width:32px; height:32px; object-fit:contain; }
.nav-logo-text {
  font-family: var(--font-serif);
  font-size: 15px; letter-spacing:.12em;
  color: var(--cream); text-transform:uppercase;
}
.nav-links { display:flex; gap:40px; list-style:none; }
.nav-links a {
  font-family: var(--font-sans); font-size:11px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color: rgba(226,217,183,.7);
  position:relative; padding-bottom:4px; transition:color .2s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--cream); transition:width .3s;
}
.nav-links a:hover { color:var(--cream); }
.nav-links a:hover::after { width:100%; }
.nav-cta {
  font-family:var(--font-sans); font-size:11px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--navy); background:var(--cream); padding:10px 20px;
  transition:background .2s,color .2s;
}
.nav-cta:hover { background:var(--white); color:var(--navy); }

/* ── Buttons ────────────────────────────────── */
.btn-primary {
  display:inline-block; background:var(--cream); color:var(--navy);
  font-family:var(--font-sans); font-size:11px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; padding:16px 32px;
  transition:background .2s,transform .2s;
}
.btn-primary:hover { background:var(--white); transform:translateY(-1px); }
.btn-secondary {
  display:inline-block; border:1px solid rgba(226,217,183,.4); color:var(--cream);
  font-family:var(--font-sans); font-size:11px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; padding:16px 32px;
  transition:border-color .2s,color .2s;
}
.btn-secondary:hover { border-color:var(--cream); color:var(--cream); }

/* ── Hero ───────────────────────────────────── */
.hero {
  margin-top:64px; min-height:calc(100vh - 64px);
  display:grid; grid-template-columns:1fr 1fr;
}
.hero-image { position:relative; overflow:hidden; background:var(--navy); }
.hero-image-inner {
  width:100%; height:100%;
  background-size:cover; background-position:center;
  filter:sepia(.15) contrast(1.05);
  transform:scale(1.05); transition:transform 8s ease-out;
}
.hero-image-inner.loaded { transform:scale(1); }
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right,rgba(27,43,67,.3) 0%,transparent 100%);
}
.hero-content {
  background:var(--navy); display:flex; flex-direction:column;
  justify-content:center; padding:80px var(--margin) 80px 64px; position:relative;
}
.hero-eyebrow {
  font-family:var(--font-sans); font-size:11px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--cream); opacity:.7;
  margin-bottom:32px; display:flex; align-items:center; gap:12px;
}
.hero-eyebrow::before {
  content:''; display:inline-block; width:32px; height:1px; background:var(--cream); opacity:.5;
}
.hero-title {
  font-family:var(--font-serif); font-size:64px; font-weight:400;
  line-height:1.1; letter-spacing:-.02em; color:var(--cream); margin-bottom:24px;
}
.hero-title em { font-style:italic; color:rgba(226,217,183,.6); }
.hero-title-ar {
  font-family:var(--font-ar); font-size:28px; font-weight:400;
  color:rgba(226,217,183,.5); text-align:right; margin-bottom:40px;
  line-height:1.8; direction:rtl;
}
.hero-body {
  font-family:var(--font-sans); font-size:16px; line-height:1.8;
  color:rgba(226,217,183,.65); max-width:380px; margin-bottom:56px;
}
.hero-actions { display:flex; gap:16px; align-items:center; }

/* ── Stats Bar ──────────────────────────────── */
.stats-bar {
  background:var(--paper); border-bottom:1px solid var(--grey-light);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat { padding:40px var(--margin); border-right:1px solid var(--grey-light); }
.stat:last-child { border-right:none; }
.stat-number { font-family:var(--font-serif); font-size:48px; font-weight:400; color:var(--navy); line-height:1; margin-bottom:8px; }
.stat-label  { font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--grey-mid); }

/* ── Section Commons ────────────────────────── */
section { position:relative; }
.section-header { display:flex; align-items:baseline; gap:24px; margin-bottom:64px; }
.section-number { font-family:var(--font-serif); font-size:13px; font-weight:400; color:var(--grey-light); letter-spacing:.05em; }
.section-title  { font-family:var(--font-serif); font-size:48px; font-weight:400; line-height:1.2; letter-spacing:-.01em; color:var(--navy); }

/* ── Services ───────────────────────────────── */
.services { padding:128px var(--margin); background:var(--paper); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--grey-light); border:1px solid var(--grey-light); }
.service-card { background:var(--paper); padding:48px 40px; position:relative; overflow:hidden; transition:background .3s; }
.service-card::before { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--navy); transition:width .4s; }
.service-card:hover { background:var(--white); }
.service-card:hover::before { width:100%; }
.service-icon { width:48px; height:48px; margin-bottom:32px; color:var(--navy); }
.service-name { font-family:var(--font-serif); font-size:24px; font-weight:400; color:var(--navy); margin-bottom:16px; }
.service-desc { font-family:var(--font-sans); font-size:14px; line-height:1.8; color:var(--grey-dark); }
.service-index { position:absolute; top:32px; right:32px; font-family:var(--font-serif); font-size:11px; color:var(--grey-light); letter-spacing:.1em; }

/* ── Projects ───────────────────────────────── */
.projects { padding:128px var(--margin); background:var(--white); }
.projects-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); }
.project-card { position:relative; overflow:hidden; cursor:pointer; }
.project-card-img { position:relative; overflow:hidden; height:420px; background:var(--navy); }
.project-card-img img { width:100%; height:100%; object-fit:cover; filter:sepia(.1) contrast(1.02); transition:transform .6s cubic-bezier(.25,.46,.45,.94),filter .4s; }
.project-card:hover .project-card-img img { transform:scale(1.04); filter:sepia(0) contrast(1.05); }
.project-card-body { padding:24px 0 0; }
.project-meta     { font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--grey-mid); margin-bottom:8px; }
.project-name     { font-family:var(--font-serif); font-size:28px; font-weight:400; color:var(--navy); margin-bottom:8px; transition:color .2s; }
.project-card:hover .project-name { color:var(--grey-dark); }
.project-location { font-family:var(--font-sans); font-size:14px; color:var(--grey-mid); }
.project-card--wide { grid-column:1 / -1; }
.project-card--wide .project-card-img { height:520px; }

/* ── About ──────────────────────────────────── */
.about { display:grid; grid-template-columns:1fr 1fr; min-height:700px; }
.about-image { position:relative; overflow:hidden; background:#0d1d30; }
.about-image-bg { width:100%; height:100%; background-size:cover; background-position:center; filter:sepia(.2) contrast(1.05); opacity:.85; }
.about-image-caption { position:absolute; bottom:32px; left:32px; font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:rgba(226,217,183,.7); }
.about-content { background:var(--navy); padding:96px 72px; display:flex; flex-direction:column; justify-content:center; }
.about-eyebrow { font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--cream); opacity:.5; margin-bottom:24px; }
.about-title   { font-family:var(--font-serif); font-size:40px; font-weight:400; color:var(--cream); line-height:1.3; margin-bottom:32px; }
.about-title em { font-style:italic; color:rgba(226,217,183,.5); }
.about-body    { font-family:var(--font-sans); font-size:15px; line-height:1.9; color:rgba(226,217,183,.65); margin-bottom:16px; }
.about-name    { margin-top:48px; padding-top:32px; border-top:1px solid rgba(226,217,183,.15); }
.about-name-main  { font-family:var(--font-serif); font-size:20px; color:var(--cream); margin-bottom:4px; }
.about-name-ar    { font-family:var(--font-ar); font-size:18px; color:rgba(226,217,183,.5); direction:rtl; text-align:left; }
.about-name-title { font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--cream); opacity:.4; margin-top:8px; }

/* ── Process ────────────────────────────────── */
.process { padding:128px var(--margin); background:var(--paper); }
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); position:relative; }
.process-steps::before { content:''; position:absolute; top:24px; left:24px; right:24px; height:1px; background:var(--grey-light); }
.process-step  { padding-top:64px; padding-right:40px; position:relative; }
.process-step-dot {
  position:absolute; top:0; left:0; width:48px; height:48px;
  background:var(--paper); border:1px solid var(--grey-light);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:16px; color:var(--navy);
  transition:background .3s,border-color .3s;
}
.process-step:hover .process-step-dot { background:var(--navy); border-color:var(--navy); color:var(--cream); }
.process-step-title { font-family:var(--font-serif); font-size:22px; color:var(--navy); margin-bottom:12px; }
.process-step-desc  { font-family:var(--font-sans); font-size:14px; line-height:1.8; color:var(--grey-dark); }

/* ── Testimonial ────────────────────────────── */
.testimonial { background:var(--navy); padding:96px var(--margin); position:relative; overflow:hidden; }
.testimonial-inner { max-width:820px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.testimonial-quote-mark { font-family:var(--font-serif); font-size:96px; color:rgba(226,217,183,.1); line-height:1; margin-bottom:-32px; }
.testimonial-text   { font-family:var(--font-serif); font-size:28px; font-weight:400; font-style:italic; color:var(--cream); line-height:1.6; margin-bottom:40px; }
.testimonial-author { font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:rgba(226,217,183,.4); }
.testimonial-bg-text { position:absolute; bottom:-20px; right:-20px; font-family:var(--font-serif); font-size:200px; color:rgba(226,217,183,.03); line-height:1; user-select:none; }

/* ── Contact ────────────────────────────────── */
.contact { padding:128px var(--margin); background:var(--white); display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:start; }
.contact-info-title  { font-family:var(--font-serif); font-size:48px; color:var(--navy); line-height:1.2; margin-bottom:32px; }
.contact-info-body   { font-size:15px; line-height:1.9; color:var(--grey-dark); margin-bottom:48px; }
.contact-details     { display:flex; flex-direction:column; gap:16px; }
.contact-detail      { display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--grey-light); }
.contact-detail:first-child { border-top:1px solid var(--grey-light); }
.contact-detail-label { font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--grey-mid); min-width:90px; padding-top:2px; }
.contact-detail-value { font-family:var(--font-sans); font-size:15px; color:var(--navy); line-height:1.5; }
.contact-form  { padding-top:8px; }
.form-group    { margin-bottom:32px; }
.form-label    { display:block; font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--grey-mid); margin-bottom:8px; }
.form-input, .form-textarea {
  display:block; width:100%; background:transparent; border:none;
  border-bottom:1px solid var(--grey-light); padding:12px 0;
  font-family:var(--font-sans); font-size:15px; color:var(--navy);
  outline:none; transition:border-color .2s; resize:none;
}
.form-input:focus, .form-textarea:focus { border-bottom-color:var(--navy); }
.form-textarea { min-height:120px; }
.contact-msg { padding:12px 16px; margin-bottom:24px; font-size:14px; border-radius:2px; }
.contact-msg.success { background:#e8f5e9; color:#2e7d32; }
.contact-msg.error   { background:#fce4ec; color:#c62828; }

/* ── Footer ─────────────────────────────────── */
footer { background:var(--navy); color:var(--cream); }
.footer-top { padding:64px var(--margin); display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:64px; border-bottom:1px solid rgba(226,217,183,.1); }
.footer-logo { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.footer-logo svg { width:36px; height:36px; }
.footer-logo-text { font-family:var(--font-serif); font-size:16px; letter-spacing:.1em; color:var(--cream); text-transform:uppercase; }
.footer-tagline   { font-size:14px; line-height:1.8; color:rgba(226,217,183,.5); max-width:280px; }
.footer-col-title { font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:rgba(226,217,183,.4); margin-bottom:24px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-col a  { font-size:14px; color:rgba(226,217,183,.65); transition:color .2s; }
.footer-col a:hover { color:var(--cream); }
.footer-bottom { padding:24px var(--margin); display:flex; justify-content:space-between; align-items:center; }
.footer-copy   { font-size:12px; color:rgba(226,217,183,.3); letter-spacing:.05em; }
.footer-social { display:flex; gap:16px; }
.footer-social a { font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:rgba(226,217,183,.4); transition:color .2s; }
.footer-social a:hover { color:var(--cream); }

/* ── Animations ─────────────────────────────── */
.fade-up { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

@keyframes slideInLeft {
  from { transform:translateX(-40px); opacity:0; }
  to   { transform:translateX(0);     opacity:1; }
}
.hero-eyebrow  { animation:slideInLeft .7s ease .2s  both; }
.hero-title    { animation:slideInLeft .7s ease .35s both; }
.hero-title-ar { animation:slideInLeft .7s ease .45s both; }
.hero-body     { animation:slideInLeft .7s ease .55s both; }
.hero-actions  { animation:slideInLeft .7s ease .65s both; }

/* ── Responsive ─────────────────────────────── */
@media (max-width:1024px) {
  :root { --margin:32px; }
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-image { height:50vw; }
  .hero-content { padding:64px 32px; }
  .hero-title { font-size:44px; }
  .stats-bar { grid-template-columns:1fr 1fr; }
  .services-grid { grid-template-columns:1fr; }
  .projects-grid { grid-template-columns:1fr; }
  .project-card--wide { grid-column:auto; }
  .about { grid-template-columns:1fr; }
  .about-image { height:400px; }
  .process-steps { grid-template-columns:1fr 1fr; gap:48px 32px; }
  .process-steps::before { display:none; }
  .contact { grid-template-columns:1fr; gap:64px; }
  .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
}

@media (max-width:640px) {
  .nav-links { display:none; }
  .hero-title { font-size:36px; }
  .section-title { font-size:32px; }
  .stats-bar { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
}