/* =========================================================
   Rabih Gharib — Minimal Luxury (No DB)
   Palette per brand: Black Onyx #000, Graphite Gray #686867
   Typography: Gotham HTF (fallbacks included)
   ========================================================= */

:root{
  --bg:#0b0b0b;
  --panel:#101010;
  --text:#ffffff;
  --muted:#b9b9b9;
  --muted2:#686867; /* Graphite Gray */
  --line:rgba(255,255,255,.10);
  --shadow: 0 22px 60px rgba(0,0,0,.55);

  --max: 1180px;
  --radius: 18px;
}

@font-face{
  font-family:"GothamHTF";
  src:url("../fonts/GothamHTF-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family:"GothamHTF";
  src:url("../fonts/GothamHTF-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family:"GothamHTF";
  src:url("../fonts/GothamHTF-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: radial-gradient(1000px 700px at 20% 10%, rgba(255,255,255,.06), transparent 55%),
              radial-gradient(900px 650px at 80% 35%, rgba(255,255,255,.05), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family:"GothamHTF", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .2px;
}

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

.container{max-width:var(--max); margin:0 auto; padding:0 22px}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: #000000;
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand img{
  height:44px;
  width:auto;
}
.navlinks{
  display:flex; gap:18px; align-items:center;
  font-weight:500;
  color:rgba(255,255,255,.86);
}
.navlinks a{
  padding:10px 10px;
  border-radius:12px;
  transition:.18s ease;
}
.navlinks a:hover{background:rgba(255,255,255,.06)}
.navlinks a.active{background:rgba(255,255,255,.09)}

.menuBtn{
  display:none;
  height:44px; width:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
}

.mobileMenu{
  display:none;
  border-top:1px solid var(--line);
  padding:12px 0 16px;
}
.mobileMenu a{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  color:rgba(255,255,255,.9);
}
.mobileMenu a:hover{background:rgba(255,255,255,.06)}

.hero{
  position:relative;
  padding:74px 0 44px;
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  align-items:stretch;
}
.heroCard{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: var(--radius);
  padding:38px;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.kicker{
  color:rgba(255,255,255,.75);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.hero h1{
  margin:12px 0 12px;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height:1.02;
  letter-spacing:-.02em;
}
.hero p{
  margin:0;
  max-width:64ch;
  color:rgba(255,255,255,.78);
  font-size:15.5px;
  line-height:1.7;
}
.heroActions{
  display:flex;
  gap:12px;
  margin-top:20px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  font-weight:600;
  transition:.18s ease;
}
.btn:hover{transform: translateY(-1px); background:rgba(255,255,255,.09)}
.btn.primary{
  background:#fff; color:#000;
  border-color: rgba(255,255,255,.3);
}
.btn.primary:hover{background:#f2f2f2}

.heroMedia{
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  position:relative;
  background:#0a0a0a;
  box-shadow: var(--shadow);
  min-height: 360px;
}
.heroMedia::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.65));
  pointer-events:none;
}
.heroMedia img, .heroMedia video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.heroMedia .caption{
  position:absolute;
  left:18px; right:18px; bottom:16px;
  z-index:2;
  color:rgba(255,255,255,.86);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.badges{
  margin-top:18px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.badge{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding:9px 12px;
  color:rgba(255,255,255,.78);
  font-size:12.5px;
}

.section{
  padding:44px 0;
}
.sectionHead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.sectionHead h2{
  margin:0;
  font-size:22px;
  letter-spacing:-.01em;
}
.sectionHead p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:13.5px;
  max-width:56ch;
  line-height:1.6;
}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  overflow:hidden;
  transition: .18s ease;
}
.card:hover{transform: translateY(-2px); background:rgba(255,255,255,.05)}
.card .thumb{
  height: 190px;
  background:#111;
}
.card .thumb img{width:100%; height:100%; object-fit:cover}
.card .body{padding:16px}
.meta{
  display:flex; gap:10px; flex-wrap:wrap;
  color:rgba(255,255,255,.72);
  font-size:12.5px;
}
.meta span{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  padding:6px 10px;
  border-radius:999px;
}
.card h3{
  margin:10px 0 0;
  font-size:15.5px;
  letter-spacing:-.01em;
}
.card p{
  margin:8px 0 0;
  color:rgba(255,255,255,.72);
  font-size:13.5px;
  line-height:1.6;
}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:stretch;
}
.panel{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding:18px;
}
.quote{
  font-size:18px;
  line-height:1.5;
  letter-spacing:-.01em;
  margin:0;
}
.quote small{
  display:block;
  margin-top:10px;
  color:rgba(255,255,255,.68);
  font-size:13px;
}

.materials{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.material{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding:16px;
}
.material .t{
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(255,255,255,.85);
}
.material .d{
  margin-top:8px;
  color:rgba(255,255,255,.72);
  font-size:13.5px;
  line-height:1.6;
}

.footer{
  margin-top:40px;
  border-top:1px solid var(--line);
  padding:24px 0 36px;
  color:rgba(255,255,255,.68);
  font-size:13px;
}
.footerGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:start;
}
.footer a{color:rgba(255,255,255,.78)}
.footer a:hover{color:#fff}
.footerLogo{
  height:34px; width:auto; opacity:.92;
}
.footerLinks{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end;
}
.small{
  color:rgba(255,255,255,.55);
  margin-top:10px;
  line-height:1.6;
}

/* Contact form */
.form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.field label{
  font-size:12.5px;
  color:rgba(255,255,255,.72);
}
.field input, .field textarea{
  background: rgba(0,0,0,.35);
  border:1px solid var(--line);
  color:rgba(255,255,255,.92);
  border-radius: 14px;
  padding:12px 12px;
  outline:none;
  font-family: inherit;
}
.field textarea{min-height:130px; resize:vertical}
.field.full{grid-column: 1 / -1}

/* Fade-in reveal */
.reveal{opacity:0; transform: translateY(10px); transition: .6s ease}
.reveal.show{opacity:1; transform:none}

/* Responsive */
@media (max-width: 980px){
  .heroGrid{grid-template-columns:1fr; }
  .heroMedia{min-height: 300px}
  .grid3{grid-template-columns: 1fr 1fr}
  .materials{grid-template-columns: 1fr 1fr}
  .footerGrid{grid-template-columns:1fr}
  .footerLinks{justify-content:flex-start}
}
@media (max-width: 700px){
  .navlinks{display:none}
  .menuBtn{display:inline-flex; align-items:center; justify-content:center}
  .mobileMenu{display:block}
  .grid3{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .form{grid-template-columns: 1fr}
}
.heroMedia img{
  transition: transform 6s ease;
}

.heroMedia:hover img{
  transform: scale(1.05);
}
.material{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding:22px;
  transition:.3s ease;
}

.material:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-4px);
}

.material svg{
  width:38px;
  height:38px;
  stroke:#ffffff;
  stroke-width:1.4;
  fill:none;
  margin-bottom:14px;
  opacity:.9;
  transition:.3s ease;
}

.material:hover svg{
  opacity:1;
  transform:scale(1.05);
}

.material .t{
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:8px;
}