<style>
/* ============================================================
   NOOR — halal-modern, deep midnight-green + warm gold
   (dark luxe canvas, cinematic glows, khatam watermark)
   ============================================================ */

/* ---------- reset basics ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{text-decoration:none;color:inherit}

/* ---------- palette + tokens ---------- */
:root{
  /* core */
  --ink:#0E1116;            /* deep ink background */
  --panel:#141A22;          /* slightly lighter panels */
  --panel-2:#1A222C;
  --gold:#C9A227;           /* warm gold accent */
  --gold-soft:#E0C25F;
  --gold-dim:rgba(201,162,39,.32);
  --ivory:#F2EFE8;          /* soft ivory text */

  /* Noor emerald undertone */
  --emerald:#0F3B33;
  --emerald-deep:#0A2A25;

  /* text */
  --text:var(--ivory);
  --muted:#B9B4A8;          /* 7.2:1 on --ink, 6.4:1 on --panel */
  --muted-2:#9E998E;        /* 5.6:1 on --ink */

  /* lines */
  --line:rgba(201,162,39,.22);
  --line-soft:rgba(242,239,232,.10);

  /* type scale */
  --fs-xs:.78rem;
  --fs-sm:.875rem;
  --fs-base:1.0625rem;
  --fs-lead:1.1875rem;
  --fs-h3:1.375rem;
  --fs-h2:clamp(1.75rem,3.4vw,2.75rem);
  --fs-h1:clamp(2.25rem,5.4vw,4rem);
  --lh-tight:1.16;
  --lh-body:1.75;           /* Amharic-friendly generous leading */
  --ls-display:.06em;
  --ls-label:.22em;

  /* space */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem;
  --sp-4:2rem;  --sp-5:3rem; --sp-6:4.5rem;
  --pad-y:clamp(3.5rem,8vw,7rem);
  --radius:18px;
  --radius-lg:26px;
  --maxw:1140px;
  --shadow:0 24px 60px -30px rgba(0,0,0,.85);
}

/* ---------- base ---------- */
body{
  background:var(--ink);
  color:var(--text);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"Noto Sans Ethiopic",sans-serif;
  font-size:var(--fs-base);
  font-weight:300;
  line-height:var(--lh-body);
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* khatam watermark texture + cinematic radial glows */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 50% 0%,rgba(201,162,39,.10),transparent 55%),
    radial-gradient(circle at 12% 78%,rgba(15,59,51,.55),transparent 52%),
    radial-gradient(circle at 88% 22%,rgba(15,59,51,.40),transparent 48%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:
    linear-gradient(45deg,transparent 46%,var(--gold) 46%,var(--gold) 54%,transparent 54%),
    linear-gradient(-45deg,transparent 46%,var(--gold) 46%,var(--gold) 54%,transparent 54%);
  background-size:46px 46px;
}
body>*{position:relative;z-index:1}

h1,h2,h3,h4{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);
  color:var(--ivory);
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:.04em}
p{max-width:62ch}
strong{font-weight:500;color:var(--ivory)}
em{font-style:italic;color:var(--gold-soft)}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}
.section{padding-block:var(--pad-y);position:relative}
.section + .section{border-top:1px solid var(--line-soft)}
.center{text-align:center}
.center p{margin-inline:auto}
.center .lead{margin-inline:auto}
.muted{color:var(--muted)}
.lead{font-size:var(--fs-lead);font-weight:300;color:var(--muted);line-height:1.8;max-width:56ch}

.eyebrow{
  display:block;
  font-size:var(--fs-xs);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:var(--ls-label);
  color:var(--gold);
  margin-bottom:var(--sp-2);
}
.eyebrow::after{
  content:"";display:block;width:34px;height:1px;
  background:var(--gold);opacity:.6;margin-top:.7rem;
}
.center .eyebrow::after{margin-inline:auto}

/* full-bleed band */
.band{
  width:100%;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(201,162,39,.10),transparent 60%),
    linear-gradient(180deg,var(--emerald-deep),var(--ink) 70%);
  border-block:1px solid var(--line);
  padding-block:var(--pad-y);
}

/* thin gold hairline frame */
.frame{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,4vw,3rem);
  background:linear-gradient(180deg,rgba(20,26,34,.85),rgba(14,17,22,.65));
  box-shadow:var(--shadow);
  position:relative;
}
.frame::before{
  content:"";position:absolute;inset:8px;border:1px solid var(--line-soft);
  border-radius:calc(var(--radius-lg) - 8px);pointer-events:none;
}

/* two columns that stack */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.75rem,5vw,4rem);align-items:center;
}
.split > *{min-width:0}

/* stat: big number + label */
.stat{display:flex;flex-direction:column;gap:.35rem}
.stat strong,.stat b,.stat .stat-num{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2rem,4vw,2.9rem);
  font-weight:400;color:var(--gold);line-height:1;
  letter-spacing:.02em;white-space:nowrap;
}
.stat span,.stat small{
  font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:var(--ls-label);color:var(--muted);
}

/* ---------- grids & cards ---------- */
.grid{
  display:grid;gap:clamp(1.15rem,2.6vw,1.85rem);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:linear-gradient(180deg,var(--panel),rgba(14,17,22,.9));
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:clamp(1.35rem,3vw,2.1rem);
  position:relative;
  transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease;
}
.card:hover{
  border-color:var(--gold-dim);
  transform:translateY(-4px);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9);
}
.card h3{margin-bottom:.6rem}
.card p{color:var(--muted);font-size:var(--fs-sm);line-height:1.8}
.card .eyebrow{margin-bottom:.75rem}
.card .stat{margin-bottom:.75rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.75rem;
  border-radius:999px;
  border:1px solid var(--gold-dim);
  background:transparent;
  color:var(--gold);
  font-family:inherit;
  font-size:var(--fs-sm);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
  transition:background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.btn:hover,.btn:focus-visible{
  background:rgba(201,162,39,.10);
  border-color:var(--gold);
  color:var(--gold-soft);
  outline:none;
}
.btn-primary{
  background:linear-gradient(135deg,var(--gold),#A9871B);
  border-color:transparent;
  color:#0E1116;
  font-weight:600;
  box-shadow:0 14px 34px -16px rgba(201,162,39,.65);
}
.btn-primary:hover,.btn-primary:focus-visible{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:#0E1116;
  box-shadow:0 18px 40px -14px rgba(201,162,39,.8);
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding-block:clamp(3rem,7vw,6rem) var(--pad-y);
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 8%,rgba(201,162,39,.14),transparent 58%),
    radial-gradient(ellipse at 50% 100%,rgba(15,59,51,.6),transparent 62%);
  border-bottom:1px solid var(--line-soft);
}
.hero h1{max-width:22ch;margin-inline:auto;margin-bottom:var(--sp-3)}
.hero .lead{margin-inline:auto;margin-bottom:var(--sp-4)}
.hero .btn{margin:.35rem .3rem}
.hero .grid{margin-top:clamp(2.5rem,6vw,4.5rem);text-align:left}
.hero .frame{text-align:left}

/* ---------- site chrome: header ---------- */
body.wpb-canvas .site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(14,17,22,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
body.wpb-canvas .header-inner{
  max-width:var(--maxw);margin-inline:auto;
  padding:.85rem clamp(1.15rem,4vw,2.5rem);
  display:flex;align-items:center;gap:1.15rem;
  flex-wrap:nowrap;
}
body.wpb-canvas .brand{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.3rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ivory);white-space:nowrap;flex:0 0 auto;
}
body.wpb-canvas .brand::before{content:"";display:inline-block;width:7px;height:7px;margin-right:.6rem;
  background:var(--gold);transform:rotate(45deg);vertical-align:middle}
body.wpb-canvas .nav{flex:1 1 auto;min-width:0}
body.wpb-canvas .nav ul{display:flex;align-items:center;gap:clamp(.85rem,2vw,1.6rem);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  padding-block:.35rem}
body.wpb-canvas .nav ul::-webkit-scrollbar{display:none}
body.wpb-canvas .nav li{flex:0 0 auto}
body.wpb-canvas .nav a{
  display:inline-block;white-space:nowrap;
  font-size:var(--fs-xs);font-weight:400;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--muted);padding-block:.25rem;
  border-bottom:1px solid transparent;
  transition:color .3s ease,border-color .3s ease;
}
body.wpb-canvas .nav a:hover, body.wpb-canvas .nav a:focus-visible{color:var(--gold);border-bottom-color:var(--gold-dim);outline:none}
body.wpb-canvas .nav-cta{flex:0 0 auto;padding:.6rem 1.15rem;font-size:var(--fs-xs)}

/* ---------- site chrome: footer ---------- */
body.wpb-canvas .site-footer{
  background:linear-gradient(180deg,var(--ink),var(--emerald-deep));
  border-top:1px solid var(--line);
  padding-top:clamp(2.75rem,6vw,4.5rem);
  color:var(--muted);
}
body.wpb-canvas .footer-grid{
  max-width:var(--maxw);margin-inline:auto;
  padding:0 clamp(1.15rem,4vw,2.5rem) clamp(2rem,5vw,3.25rem);
  display:grid;grid-template-columns:1.3fr 1fr 1fr;
  gap:clamp(1.75rem,4vw,3.5rem);
}
body.wpb-canvas .footer-col{min-width:0}
body.wpb-canvas .footer-col p{font-size:var(--fs-sm);line-height:1.85;color:var(--muted);max-width:34ch}
body.wpb-canvas .footer-col ul{display:flex;flex-direction:column;gap:.6rem}
body.wpb-canvas .footer-col li, body.wpb-canvas .footer-col a{font-size:var(--fs-sm);color:var(--muted)}
body.wpb-canvas .footer-col a{transition:color .3s ease}
body.wpb-canvas .footer-col a:hover, body.wpb-canvas .footer-col a:focus-visible{color:var(--gold);outline:none}
body.wpb-canvas .footer-heading{
  font-size:var(--fs-xs);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--ls-label);
  color:var(--gold);margin-bottom:1.1rem;
}
/* short values must never break */
body.wpb-canvas .footer-col a[href^="tel"], body.wpb-canvas .footer-col .nowrap,.stat strong,.stat b,.stat .stat-num{
  white-space:nowrap;
}
body.wpb-canvas .footer-bottom{
  max-width:var(--maxw);margin-inline:auto;
  padding:1.15rem clamp(1.15rem,4vw,2.5rem);
  border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  align-items:center;justify-content:space-between;
  font-size:var(--fs-xs);letter-spacing:.06em;color:var(--muted-2);
}
body.wpb-canvas .footer-bottom span, body.wpb-canvas .footer-bottom p{white-space:nowrap}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:var(--sp-4)}
  body.wpb-canvas .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:768px){
  :root{--fs-base:1rem;--fs-lead:1.0625rem;--lh-body:1.8}
  .grid,.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  body.wpb-canvas .header-inner{gap:.85rem;padding-block:.7rem}
  body.wpb-canvas .brand{font-size:1.05rem;letter-spacing:.12em}
  body.wpb-canvas .nav ul{gap:1rem}
  body.wpb-canvas .nav a{font-size:.7rem;letter-spacing:.12em}
  body.wpb-canvas .nav-cta{padding:.5rem .85rem;font-size:.68rem;letter-spacing:.08em}
  body.wpb-canvas .footer-grid{grid-template-columns:1fr;gap:1.85rem}
  body.wpb-canvas .footer-bottom{justify-content:flex-start}
  .hero{text-align:left}
  .hero h1,.hero .lead{margin-inline:0}
  .center{text-align:left}
  .center .eyebrow::after{margin-inline:0}
  .center p,.center .lead{margin-inline:0}
  .frame{padding:1.35rem}
}
@media (max-width:420px){
  body.wpb-canvas .nav-cta{display:none}
}

@media (max-width:768px){
  body.wpb-canvas .header-inner{flex-wrap:wrap !important;row-gap:.5rem}
  body.wpb-canvas .nav{max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  body.wpb-canvas .nav ul{flex-wrap:wrap !important}
  body.wpb-canvas .nav li{flex:0 0 auto}
  body.wpb-canvas .nav a{white-space:nowrap}
  body.wpb-canvas .footer-grid{grid-template-columns:1fr !important;gap:1.5rem}
}
</style>