/* ============================================================
   Northline — نورثلاين  |  Design System
   Architectural & Engineering Consultancy — Riyadh, KSA
   ============================================================ */

:root{
  --copper:#a97a4f;        /* primary accent */
  --copper-dark:#8a5e3b;
  --copper-soft:#c9a982;
  --cream:#f6f1ea;         /* page background */
  --cream-2:#efe8dd;       /* alt section bg */
  --card:#ffffff;
  --line:#e4dccf;          /* borders */
  --charcoal:#2c2a27;      /* dark sections / footer */
  --charcoal-2:#3a3733;
  --ink:#2a2724;           /* main text */
  --muted:#7b736a;         /* secondary text */
  --maxw:1180px;
  --radius:6px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Tajawal','Segoe UI',Tahoma,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.7;
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
section{padding:72px 0;}

/* ---------- Logo ---------- */
.logo{display:flex;flex-direction:column;line-height:1;}
.logo .en{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;letter-spacing:.5px;color:var(--ink);}
.logo .en span{font-weight:400;color:var(--copper);}
.logo .ar{font-size:12px;color:var(--muted);letter-spacing:2px;margin-top:2px;}

/* ---------- Header / Nav ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(246,241,234,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;}
.nav ul{display:flex;gap:28px;list-style:none;align-items:center;}
.nav ul a{font-size:15px;color:var(--ink);padding:6px 0;position:relative;transition:color .2s;}
.nav ul a:hover,.nav ul a.active{color:var(--copper);}
.nav ul a.active::after{content:"";position:absolute;bottom:-2px;right:0;width:100%;height:2px;background:var(--copper);}
.nav-right{display:flex;align-items:center;gap:18px;}
.lang{font-size:13px;color:var(--muted);letter-spacing:1px;}
.lang b{color:var(--ink);}
.monogram{width:34px;height:38px;border:1.5px solid var(--copper);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--copper);}
.menu-toggle{display:none;background:none;border:0;font-size:26px;color:var(--ink);cursor:pointer;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--charcoal);color:#fff;
  padding:13px 26px;border-radius:var(--radius);
  font-size:15px;font-weight:500;border:0;cursor:pointer;transition:.2s;
}
.btn:hover{background:var(--copper);}
.btn .chev{font-size:12px;}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn-outline:hover{background:var(--ink);color:#fff;}
.btn-copper{background:var(--copper);}
.btn-copper:hover{background:var(--copper-dark);}

/* ---------- Hero ---------- */
.hero{padding-top:54px;}
.hero .grid{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:center;}
.hero .accent-line{border-right:2px solid var(--copper);padding-right:26px;}
.hero h1{font-size:46px;font-weight:800;line-height:1.25;margin-bottom:18px;}
.hero h1 .dot{color:var(--copper);}
.hero p{color:var(--muted);font-size:17px;max-width:440px;margin-bottom:28px;}
.hero .media{border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(44,42,39,.18);}
.hero .media img{width:100%;height:430px;object-fit:cover;}
.img-ph{background:linear-gradient(135deg,#cfc3b2,#a89a86);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;letter-spacing:1px;}

/* ---------- Section heading ---------- */
.sec-head{text-align:center;margin-bottom:44px;}
.sec-head .kicker{color:var(--copper);font-size:14px;letter-spacing:3px;display:block;margin-bottom:8px;}
.sec-head .kicker::before,.sec-head .kicker::after{content:"◆";font-size:8px;margin:0 8px;vertical-align:middle;}
.sec-head h2{font-size:30px;font-weight:800;}
.sec-head.light h2,.sec-head.light .kicker{color:#fff;}

/* ---------- Feature row (3 cols, about strip) ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.feature{text-align:center;}
.feature .ic{width:54px;height:54px;margin:0 auto 14px;color:var(--copper);}
.feature h3{font-size:18px;margin-bottom:8px;}
.feature p{color:var(--muted);font-size:14.5px;}

/* ---------- About split ---------- */
.about{background:var(--cream-2);}
.about .grid{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start;}
.about .intro h2{font-size:26px;color:var(--copper);margin-bottom:14px;}
.about .intro p{color:var(--muted);margin-bottom:18px;}

/* ---------- Services grid ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;transition:.2s;}
.svc:hover{box-shadow:0 14px 34px rgba(44,42,39,.10);transform:translateY(-3px);}
.svc .ic{width:42px;height:42px;color:var(--copper);margin-bottom:14px;}
.svc h3{font-size:17px;margin-bottom:8px;}
.svc p{color:var(--muted);font-size:14px;}

/* ---------- Projects ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.proj{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.proj .thumb{height:190px;}
.proj .body{padding:16px 18px;}
.proj h3{font-size:17px;margin-bottom:8px;}
.proj .tags{display:flex;gap:14px;color:var(--muted);font-size:13px;}
.proj .tags span::before{content:"•";margin-left:6px;color:var(--copper);}

/* ---------- Methodology (5 steps) ---------- */
.method{position:relative;}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative;}
.steps::before{content:"";position:absolute;top:27px;right:8%;left:8%;height:1px;border-top:1px dashed var(--copper-soft);z-index:0;}
.step{text-align:center;position:relative;z-index:1;}
.step .circle{width:56px;height:56px;border:1.5px solid var(--copper);border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--copper);}
.step .num{color:var(--copper);font-weight:800;font-size:15px;margin-bottom:4px;}
.step h3{font-size:16px;margin-bottom:6px;}
.step p{color:var(--muted);font-size:13px;}

/* ---------- Dark value band ---------- */
.band{background:var(--charcoal);color:#fff;}
.band .features .feature{color:#fff;}
.band .features .feature p{color:#bdb4a8;}
.band .features .feature .ic{color:var(--copper-soft);}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(rgba(44,42,39,.86),rgba(44,42,39,.86)),var(--cta-bg,#3a3733);background-size:cover;background-position:center;color:#fff;text-align:center;}
.cta h2{font-size:32px;font-weight:800;margin-bottom:12px;}
.cta p{color:#d9d1c6;margin-bottom:24px;}

/* ---------- Footer ---------- */
footer.site{background:var(--charcoal);color:#cfc7bb;padding:54px 0 22px;}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;}
footer.site .logo .en{color:#fff;}
footer.site .logo .ar{color:#9b9285;}
footer.site h4{color:#fff;font-size:16px;margin-bottom:16px;}
footer.site ul{list-style:none;}
footer.site ul li{margin-bottom:9px;font-size:14px;}
footer.site ul li a:hover{color:var(--copper-soft);}
footer.site .brandcol p{font-size:14px;color:#9b9285;margin-top:12px;max-width:260px;}
footer.site .contact li{display:flex;gap:10px;}
footer.site .copyright{border-top:1px solid #45413c;margin-top:36px;padding-top:18px;display:flex;justify-content:space-between;font-size:13px;color:#8b837a;flex-wrap:wrap;gap:8px;}

/* ---------- Page hero (inner pages) ---------- */
.page-hero .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:center;}
.page-hero h1{font-size:40px;font-weight:800;margin-bottom:16px;}
.page-hero p{color:var(--muted);max-width:460px;}
.page-hero .media{border-radius:10px;overflow:hidden;}
.page-hero .media img,.page-hero .media .img-ph{height:340px;width:100%;object-fit:cover;}

/* ---------- 4-col grid (values / why / phases) ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}

/* ---------- Sectors (image cards w/ label) ---------- */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.sector{position:relative;border-radius:8px;overflow:hidden;height:230px;}
.sector .img-ph{height:100%;}
.sector .label{position:absolute;bottom:16px;right:16px;background:rgba(255,255,255,.92);padding:8px 16px;border-radius:5px;font-weight:700;display:flex;align-items:center;gap:8px;}
.sector .label .ic{width:18px;height:18px;color:var(--copper);}

/* ---------- Filter tabs ---------- */
.tabs{display:flex;gap:10px;justify-content:center;margin-bottom:28px;flex-wrap:wrap;}
.tabs button{background:transparent;border:1px solid var(--line);color:var(--muted);padding:8px 20px;border-radius:40px;font-family:inherit;font-size:14px;cursor:pointer;transition:.2s;}
.tabs button.active,.tabs button:hover{background:var(--copper);color:#fff;border-color:var(--copper);}

/* ---------- Phase cards (methodology detail) ---------- */
.phase-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.phase{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;}
.phase .ic{width:36px;height:36px;color:var(--copper);margin-bottom:10px;}
.phase h3{font-size:16px;margin-bottom:10px;}
.phase ul{list-style:none;}
.phase ul li{font-size:13px;color:var(--muted);padding-right:14px;position:relative;margin-bottom:6px;}
.phase ul li::before{content:"•";color:var(--copper);position:absolute;right:0;}

/* ---------- Contact form ---------- */
.contact-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:start;}
.cform{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:30px;}
.cform h3{font-size:20px;margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cform input,.cform select,.cform textarea{
  width:100%;font-family:inherit;font-size:14px;padding:12px 14px;margin-bottom:14px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);direction:rtl;
}
.cform textarea{min-height:110px;resize:vertical;}
.cform .note{font-size:12px;color:var(--muted);margin-top:6px;}
.info-panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:30px;}
.info-panel h3{font-size:20px;margin-bottom:20px;}
.info-list{list-style:none;}
.info-list li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;}
.info-list li .ic{width:20px;height:20px;color:var(--copper);flex:none;margin-top:3px;}
.hours{margin-top:18px;}
.hours b{display:block;margin-bottom:4px;}
.map-ph{height:220px;border-radius:8px;margin-top:20px;}

@media(max-width:900px){
  .grid-4{grid-template-columns:1fr 1fr;}
  .sectors{grid-template-columns:1fr;}
  .phase-grid{grid-template-columns:1fr 1fr;}
  .contact-wrap{grid-template-columns:1fr;}
  .cform .row{grid-template-columns:1fr;}
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .nav ul{position:fixed;inset:74px 0 auto 0;background:var(--cream);flex-direction:column;gap:0;padding:10px 24px;border-bottom:1px solid var(--line);display:none;}
  .nav ul.open{display:flex;}
  .nav ul li{width:100%;padding:10px 0;border-bottom:1px solid var(--line);}
  .menu-toggle{display:block;}
  .hero .grid,.about .grid,.page-hero .grid{grid-template-columns:1fr;}
  .features,.svc-grid,.proj-grid{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .steps::before{display:none;}
  footer.site .cols{grid-template-columns:1fr 1fr;}
  .hero h1,.page-hero h1{font-size:34px;}
}
@media(max-width:560px){
  .features,.svc-grid,.proj-grid,.steps,footer.site .cols{grid-template-columns:1fr;}
}

/* Contact form status message */
.form-status{margin:10px 0 0;padding:12px 14px;border-radius:8px;font-size:14px;font-weight:500;line-height:1.6;}
.form-status.ok{background:#eef7ef;color:#1e6b2e;border:1px solid #bfe0c4;}
.form-status.err{background:#fdeeee;color:#9a2b2b;border:1px solid #efc4c4;}
.cform button[disabled]{opacity:.6;cursor:not-allowed;}