/* HST Holding — brand tokens
   Ink navy #14273B / Deep teal #1F4B47 / Bronze #A9814A / Parchment #F5F2EA / Text ink #1C2430
*/

:root{
  --navy:#14273B;
  --navy-deep:#0B1A26;
  --teal:#1F4B47;
  --bronze:#A9814A;
  --bronze-light:#C9A66B;
  --parchment:#F5F2EA;
  --parchment-alt:#EFEADD;
  --ink:#1C2430;
  --ink-soft:#4A5566;
  --line:rgba(20,39,59,0.14);
  --white:#FFFFFF;

  --serif: "Fraunces", "Georgia", serif;
  --sans: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --arserif: "Noto Kufi Arabic", sans-serif;
  --arsans: "Cairo", sans-serif;

  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
html[lang="ar"] body{
  font-family:var(--arsans);
  direction:rtl;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .brand-word{
  font-family:var(--arserif);
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  color:var(--navy);
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.1rem, 4.4vw, 3.4rem); line-height:1.08;}
h2{font-size:clamp(1.5rem, 2.6vw, 2.1rem); line-height:1.16;}
h3{font-size:1.15rem;}
p{margin:0 0 1em; color:var(--ink-soft);}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze); font-weight:700; margin-bottom:14px;
}
.eyebrow::before{
  content:""; display:inline-block; width:16px; height:1px; background:var(--bronze);
}
html[lang="ar"] .eyebrow{letter-spacing:0; direction:rtl;}
html[lang="ar"] .eyebrow::before{display:none;}
html[lang="ar"] .eyebrow::after{
  content:""; display:inline-block; width:16px; height:1px; background:var(--bronze);
}

.rule{
  width:56px; height:2px; background:var(--bronze); border:none; margin:22px 0;
}
.rule.center{margin-left:auto; margin-right:auto;}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(20,39,59,0.97);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; max-width:var(--maxw); margin:0 auto;
}
.brand{
  display:flex; flex-direction:column; color:var(--white); line-height:1.1;
}
.brand-word{
  font-family:var(--serif); font-size:1.28rem; font-weight:600; letter-spacing:.01em;
}
.brand-sub{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze-light); margin-top:3px;
}
.nav-links{
  display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  color:rgba(255,255,255,0.82); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;
  font-weight:600; position:relative; padding:6px 0;
}
.nav-links a:hover, .nav-links a.active{color:var(--white);}
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--bronze);
}
.lang-switch{
  display:flex; align-items:center; gap:8px; margin-inline-start:26px;
  font-size:.74rem; font-weight:700; letter-spacing:.06em;
}
.lang-switch a{
  color:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.22); padding:5px 11px; border-radius:3px;
}
.lang-switch a.is-current{color:var(--navy); background:var(--bronze-light); border-color:var(--bronze-light);}
.nav-toggle{display:none; background:none; border:none; color:var(--white); font-size:1.5rem; cursor:pointer;}

@media (max-width: 880px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--navy-deep);
    flex-direction:column; align-items:flex-start; gap:0; padding:6px 28px 18px;
    display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links li{width:100%; border-bottom:1px solid rgba(255,255,255,0.08);}
  .nav-links a{display:block; padding:13px 0;}
  .lang-switch{margin:14px 0 0; margin-inline-start:0;}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; color:var(--white); overflow:hidden;
  min-height:78vh; display:flex; align-items:center;
}
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(11,26,38,0.94) 0%, rgba(20,39,59,0.86) 42%, rgba(20,39,59,0.55) 100%);
}
.hero-inner{position:relative; z-index:2; padding:120px 0 90px;}
.hero h1{color:var(--white); max-width:15ch;}
.hero .lead{color:rgba(255,255,255,0.82); max-width:56ch; font-size:1.06rem;}
.hero-cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:8px;
  color:var(--bronze-light); font-weight:700; font-size:.86rem; letter-spacing:.05em; text-transform:uppercase;
  border-bottom:1px solid rgba(201,166,107,0.5); padding-bottom:4px;
}
.hero-cta:hover{border-color:var(--bronze-light);}

.page-hero{
  background:var(--navy); color:var(--white); padding:150px 0 60px;
}
.page-hero h1{color:var(--white);}
.page-hero .lead{color:rgba(255,255,255,0.78); max-width:62ch;}

/* ---------- Sections ---------- */
section{padding:88px 0;}
.section-alt{background:var(--parchment-alt);}
.section-navy{background:var(--navy); color:rgba(255,255,255,0.85);}
.section-navy h2{color:var(--white);}
.section-navy p{color:rgba(255,255,255,0.72);}

.two-col{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
}
@media (max-width:800px){.two-col{grid-template-columns:1fr; gap:32px;}}

.sector-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:40px;
}
.sector-card{background:var(--parchment); padding:36px 30px;}
.sector-card h3{margin-bottom:10px;}
@media (max-width:800px){.sector-grid{grid-template-columns:1fr;}}

/* ---------- Plaques (portfolio / partners) ---------- */
.plaque-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:26px; margin-top:44px;
}
@media (max-width:800px){.plaque-grid{grid-template-columns:1fr;}}
.plaque{
  background:var(--white); border:1px solid var(--line); padding:34px 32px;
  position:relative;
}
.plaque::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--bronze);
}
html[lang="ar"] .plaque::before{left:auto; right:0;}
.plaque .tag{
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); font-weight:700;
}
.plaque h3{margin-top:10px;}
.plaque p{font-size:.94rem; margin-bottom:0;}
.plaque .est{
  display:inline-block; margin-top:14px; font-size:.72rem; color:var(--bronze); font-weight:700; letter-spacing:.04em;
}

/* ---------- Management bios ---------- */
.bio-list{display:flex; flex-direction:column; gap:0; margin-top:40px;}
.bio{
  display:grid; grid-template-columns:120px 1fr; gap:32px; padding:40px 0; border-top:1px solid var(--line);
}
.bio:last-child{border-bottom:1px solid var(--line);}
@media (max-width:700px){.bio{grid-template-columns:72px 1fr; gap:20px;}}
.monogram{
  width:100px; height:100px; border:1px solid var(--bronze); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.5rem; color:var(--bronze); font-weight:600;
}
@media (max-width:700px){.monogram{width:64px; height:64px; font-size:1.1rem;}}
.bio h3{margin-bottom:2px;}
.bio .role{color:var(--bronze); font-size:.82rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; margin-bottom:14px; display:block;}
.bio p{font-size:.96rem;}

/* ---------- Client experience ---------- */
.client-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px;
}
@media (max-width:800px){.client-grid{grid-template-columns:1fr;}}
.client-card{
  padding:36px 30px; border:1px solid rgba(255,255,255,0.18);
}
.client-card h3{color:var(--white);}

/* ---------- Gallery ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:40px;
}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
.gallery-item{overflow:hidden; background:var(--navy); position:relative;}
.gallery-item img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:transform .5s ease;
}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item.featured{grid-column:span 2; grid-row:span 2;}
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px 12px;
  background:linear-gradient(0deg, rgba(11,26,38,0.88), rgba(11,26,38,0));
  color:var(--white); font-size:.78rem; opacity:0; transition:opacity .3s ease;
}
.gallery-item:hover .gallery-caption{opacity:1;}

/* ---------- Contact ---------- */
.office-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:44px;
}
@media (max-width:800px){.office-grid{grid-template-columns:1fr;}}
.office{border-top:2px solid var(--bronze); padding-top:22px;}
.office h3{margin-bottom:16px;}
.office .row{display:flex; gap:10px; font-size:.92rem; color:var(--ink-soft); margin-bottom:8px;}
.office .row .k{min-width:52px; color:var(--navy); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;}
.office a{color:var(--teal); font-weight:600;}
.office a:hover{text-decoration:underline;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-deep); color:rgba(255,255,255,0.6); padding:56px 0 30px; font-size:.86rem;
}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-brand{font-family:var(--serif); color:var(--white); font-size:1.15rem;}
.footer-links{display:flex; gap:24px; list-style:none; padding:0; margin:0; flex-wrap:wrap;}
.footer-links a{color:rgba(255,255,255,0.65);}
.footer-links a:hover{color:var(--bronze-light);}
.footer-bottom{padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.78rem; color:rgba(255,255,255,0.4);}

/* utility */
.mt-0{margin-top:0;}
.center{text-align:center;}