/* ============================================================
   elluminét — custom stylesheet
   Rebuilt as static HTML from the live WordPress site (2026).
   Design tokens taken from the live site's computed styles.
   ============================================================ */

/* Self-hosted webfonts (no external CDN dependency, so rendering is
   consistent regardless of network/firewall policy) */
@font-face{
  font-family:'Open Sans'; font-style:normal; font-weight:400;
  src: url('../fonts/webfonts/OpenSans-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face{
  font-family:'Open Sans'; font-style:normal; font-weight:600;
  src: url('../fonts/webfonts/OpenSans-SemiBold.woff2') format('woff2');
  font-display: swap;
}
@font-face{
  font-family:'Open Sans'; font-style:normal; font-weight:700;
  src: url('../fonts/webfonts/OpenSans-Bold.woff2') format('woff2');
  font-display: swap;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:300;
  src: url('../fonts/webfonts/Montserrat-Light.woff2') format('woff2');
  font-display: swap;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:400;
  src: url('../fonts/webfonts/Montserrat-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:600;
  src: url('../fonts/webfonts/Montserrat-SemiBold.woff2') format('woff2');
  font-display: swap;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:700;
  src: url('../fonts/webfonts/Montserrat-Bold.woff2') format('woff2');
  font-display: swap;
}

:root{
  --gold: #DFB947;
  --text: #2D2D2D;
  --heading: #373737;
  --bg-alt: #F3F3F3;
  --white: #FFFFFF;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --maxw: 1300px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; transition: color .2s ease; }
a:hover{ color: var(--gold); }
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading);
  color: var(--heading);
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 20px;
}
p{ margin: 0 0 16px; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 30px; }
.row{ display:flex; flex-wrap:wrap; margin: 0 -15px; }
.col{ padding: 0 15px; }

.section{ padding: 90px 0; }
.section.alt{ background: var(--bg-alt); }
.section-title{
  text-align:center;
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-lead{
  text-align:center;
  max-width: 760px;
  margin: 0 auto 60px;
  color: var(--text);
  font-family: var(--font-heading);
}
.eyebrow{
  display:block;
  text-align:center;
  color: var(--gold);
  font-family: var(--font-heading);
  letter-spacing:.2em;
  font-size:13px;
  text-transform:uppercase;
  margin-bottom: 12px;
}
.separator{
  width: 60px;
  height: 3px;
  background: var(--gold);
  margin: 0 auto 40px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding: 14px 34px;
  border: 1px solid var(--heading);
  color: var(--heading);
  font-family: var(--font-heading);
  font-weight:600;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .12em;
  background: transparent;
}
.btn:hover{ border-color: var(--gold); color: var(--gold); background: transparent; }

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--white);
  border-bottom: 1px solid #eee;
}
.header-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo img{ height: 46px; width:auto; }
nav.main-nav{ display:flex; align-items:center; }
nav.main-nav > ul{ list-style:none; display:flex; gap: 34px; margin:0; padding:0; align-items:center; }
nav.main-nav li{ position:relative; }
nav.main-nav > ul > li > a{
  font-family: var(--font-heading);
  font-weight:600;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--heading);
  padding: 8px 0;
}
nav.main-nav > ul > li > a:hover,
nav.main-nav > ul > li.active > a{ color: var(--gold); }
.dropdown-menu{
  position:absolute;
  top: 100%;
  left:0;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  min-width: 170px;
  padding: 10px 0;
  display:none;
  list-style:none;
  margin:0;
}
.dropdown-menu.show{ display:block; }
.dropdown-menu li a{
  display:block;
  padding: 10px 20px;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--heading);
  font-family: var(--font-heading);
  font-weight:600;
}
.dropdown-menu li a:hover{ color: var(--gold); }
.social-icons{ display:flex; gap:16px; margin-left:34px; }
.social-icons a{ color: var(--heading); font-size:15px; }
.social-icons a:hover{ color: var(--gold); }
.nav-toggle{ display:none; background:none; border:none; font-size:26px; color:var(--heading); cursor:pointer; }

/* ---------- Hero / Slider ---------- */
.hero{ position:relative; overflow:hidden; height: 78vh; min-height: 460px; max-height: 720px; background:#111; }
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition: opacity 1.4s ease;
}
.hero-slide.active{ opacity:1; }
.hero-slide::after{ content:''; position:absolute; inset:0; background: rgba(0,0,0,.38); }
.hero-caption{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff; padding: 0 20px;
}
.hero-caption h1{
  color:#fff; font-size: 40px; max-width: 820px; text-transform:uppercase;
}
.hero-caption p{ color:#f1f1f1; max-width:640px; font-size:16px; }
.hero-dots{ position:absolute; z-index:3; bottom: 26px; left:0; right:0; display:flex; justify-content:center; gap:10px; }
.hero-dots span{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; }
.hero-dots span.active{ background: var(--gold); }

/* ---------- Page banner (interior pages) ---------- */
.page-banner{
  position:relative;
  height: 320px;
  background-size:cover;
  background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.page-banner::after{ content:''; position:absolute; inset:0; background: rgba(0,0,0,.45); }
.page-banner-inner{ position:relative; z-index:2; text-align:center; color:#fff; }
.page-banner h1{ color:#fff; font-size:32px; text-transform:uppercase; margin-bottom:10px; }
.breadcrumb{ color:#eee; font-size:13px; letter-spacing:.08em; }
.breadcrumb a{ color:#eee; }
.breadcrumb a:hover{ color: var(--gold); }

/* ---------- Core values / About ---------- */
.values-grid{ display:flex; flex-wrap:wrap; gap: 40px; justify-content:center; }
.value-card{ flex: 1 1 240px; max-width: 280px; text-align:center; }
.value-card img{ width:56px; height:56px; margin: 0 auto 22px; }
.value-card h3{ font-weight:300; font-size:20px; text-transform:uppercase; letter-spacing:.06em; }
.value-card p{ font-size:14px; color:#555; }

/* ---------- Featured projects / Portfolio grid ---------- */
.grid{ display:flex; flex-wrap:wrap; margin: 0 -10px; }
.grid-item{ padding: 10px; flex: 0 0 25%; max-width:25%; }
.grid-item.wide{ flex: 0 0 50%; max-width:50%; }
.grid-thumb{
  position:relative; overflow:hidden; display:block; background:#000;
  aspect-ratio: 1 / 1;
}
.grid-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.grid-thumb:hover img{ transform: scale(1.08); }
.grid-thumb .cap{
  position:absolute; left:0; right:0; bottom:0; padding: 18px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
  color:#fff; font-family: var(--font-heading); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  opacity:0; transition: opacity .3s ease;
}
.grid-thumb:hover .cap{ opacity:1; }

/* Featured Projects: explicit grid so the 2x2 block of regular tiles sits
   flush next to the wide tile with no leftover gap (flex-wrap alone can't
   pack a second wrapped row underneath a taller first-row item). */
.featured-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; margin:0; }
.featured-grid .grid-item{ padding:0; flex:none; max-width:none; }
.featured-grid .grid-thumb{ height:100%; }
.featured-grid .grid-item.wide .grid-thumb{ aspect-ratio:auto; }

/* ---------- Stats band ---------- */
.stats-row{ display:flex; flex-wrap:wrap; justify-content:space-around; text-align:center; gap: 30px; }
.stat-num{ font-family: var(--font-heading); font-weight:700; font-size:42px; color: var(--gold); }
.stat-label{ font-family: var(--font-heading); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--heading); margin-top:6px; }

/* ---------- Full-bleed hover-caption grid (home page: featured projects, team) ---------- */
.bleed-grid{ display:flex; flex-wrap:wrap; }
.bleed-item{
  position:relative; overflow:hidden; flex: 0 0 50%; max-width:50%;
  aspect-ratio: 1 / 0.95; display:block; background:#111;
}
.bleed-item img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease, opacity .4s ease; }
.bleed-item:hover img{ transform: scale(1.04); opacity:.55; }
.bleed-item .bleed-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding: 26px 30px; opacity:0; transition: opacity .4s ease;
  background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 60%);
}
.bleed-item:hover .bleed-overlay{ opacity:1; }
.bleed-overlay .name{ color:#fff; font-family: var(--font-heading); font-weight:700; font-size:15px; letter-spacing:.05em; text-transform:uppercase; }
.bleed-overlay .sub{ color: var(--gold); font-family: var(--font-heading); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-top:4px; }
.team-bleed .bleed-item{ aspect-ratio: 1 / 0.8; flex: 0 0 33.3334%; max-width: 33.3334%; }
.team-bleed .bleed-overlay{ justify-content:center; align-items:flex-start; padding-left:40px; background: rgba(20,20,20,.35); }

/* ---------- Team ---------- */
/* ---------- Services list ---------- */
.services-list{ display:flex; flex-wrap:wrap; gap: 40px; }
.service-item{ flex: 1 1 45%; max-width: calc(50% - 20px); border-top: 3px solid var(--gold); padding-top: 20px; }

/* ---------- Process grid (home page) ---------- */
.process-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; }
.process-item .icon{ color: var(--gold); font-size:27px; margin-top:4px; }
.process-item h3{ font-family: var(--font-heading); font-weight:300; font-size:20px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; display:flex; align-items:flex-start; gap:10px; }
.process-item p{ font-size:14px; color:#555; margin:0; }
.service-item h3{ font-weight:300; font-size:20px; margin-bottom:12px; text-transform:uppercase; letter-spacing:.06em; }
.service-item p{ font-size:14px; color:#555; }

.skills-list{ list-style:none; margin:0; padding:0; }
.skills-list li{ padding: 12px 0; border-bottom: 1px solid #e6e6e6; font-family: var(--font-heading); font-weight:600; font-size:14px; letter-spacing:.03em; color:var(--heading); }

/* ---------- Project detail ---------- */
.project-meta{ list-style:none; margin:0 0 30px; padding:0; }
.project-meta li{ padding: 10px 0; border-bottom:1px solid #e6e6e6; font-size:14px; }
.project-meta strong{ font-family: var(--font-heading); text-transform:uppercase; font-size:11px; letter-spacing:.08em; color: var(--gold); display:block; margin-bottom:3px; }
.project-gallery{ display:flex; flex-wrap:wrap; gap: 16px; margin-top: 20px; }
.project-gallery img{ flex: 1 1 300px; max-width: calc(50% - 8px); object-fit:cover; }
.project-list-inline{ margin:0; padding-left: 18px; font-size:14px; color:#555; }
.project-list-inline li{ margin-bottom:6px; }
.back-link{ display:inline-block; margin-bottom: 30px; font-family: var(--font-heading); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.back-link:before{ content:'← '; }

/* ---------- Contact ---------- */
.contact-wrap{ display:flex; flex-wrap:wrap; gap: 60px; }
.contact-info{ flex: 1 1 320px; }
.contact-info ul{ list-style:none; margin:0; padding:0; }
.contact-info li{ margin-bottom: 18px; font-size:15px; }
.contact-info strong{ display:block; font-family: var(--font-heading); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--gold); margin-bottom:4px; }
.contact-form{ flex: 1 1 400px; }
.contact-form input, .contact-form textarea{
  width:100%; padding: 14px 16px; margin-bottom: 16px; border:1px solid #ddd;
  font-family: var(--font-body); font-size:14px; background:#fafafa;
}
.contact-form textarea{ min-height: 140px; resize:vertical; }
.contact-form button{ cursor:pointer; }

/* ---------- Footer ---------- */
.site-footer{
  background: linear-gradient(rgba(20,20,20,.86), rgba(20,20,20,.86)),
              url('../images/contact/15808_Panorama1-short-scaled.jpg') center/cover no-repeat;
  color: #eee;
  padding: 70px 0 26px;
}
.footer-grid{ display:flex; flex-wrap:wrap; gap: 40px; justify-content:space-between; margin-bottom: 40px; }
.footer-grid.footer-grid-2{ justify-content:center; }
.footer-grid.footer-grid-2 .footer-col{ flex: 1 1 0; min-width: 220px; max-width: 320px; }
.footer-col{ flex: 1 1 220px; }
.footer-col .logo{ display:inline-block; margin-bottom: 18px; }
.footer-col .logo img{ height:36px; margin-bottom:0; }
.footer-col h4{ color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; }
.footer-col p, .footer-col a{ color:#ccc; font-size:14px; line-height:1.2; }
.footer-col ul{ list-style:none; margin:0; padding:0; line-height:1.2; }
.footer-col li{ margin-bottom:0; }
.footer-icon-circle{
  display:inline-flex; align-items:center; justify-content:center;
  width: 38px; height:38px; border-radius:50%; background: var(--gold); color:#222;
  margin-right:10px; font-size:14px;
}
.footer-social{ display:flex; gap:12px; margin-top:14px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid #555;
  display:flex; align-items:center; justify-content:center; color:#eee;
}
.footer-social a:hover{ border-color: var(--gold); color: var(--gold); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.15); padding-top: 22px; text-align:center; font-size:12px; color:#aaa; }
.footer-bottom a{ color:#ccc; }
.footer-bottom a:hover{ color: var(--gold); }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .services-list .service-item{ flex: 1 1 100%; max-width:100%; }
  .grid-item{ flex: 0 0 50%; max-width:50%; }
  .process-grid{ grid-template-columns: repeat(2, 1fr); }
  .featured-grid{ grid-template-columns: 1fr 1fr; }
  .featured-grid .grid-item{ grid-column:auto !important; grid-row:auto !important; }
  .featured-grid .grid-item.wide{ grid-column: 1 / -1 !important; }
  .featured-grid .grid-thumb{ aspect-ratio: 4/3 !important; height:auto !important; }
}
@media (max-width: 760px){
  nav.main-nav{ position:fixed; top:0; right:-100%; width:78%; max-width:320px; height:100vh; background:#fff; flex-direction:column; padding: 90px 30px; box-shadow: -10px 0 30px rgba(0,0,0,.15); transition: right .3s ease; z-index: 600; }
  nav.main-nav.open{ right:0; }
  nav.main-nav > ul{ flex-direction:column; align-items:flex-start; gap: 22px; }
  .dropdown-menu{ position:static; box-shadow:none; display:block; padding-left:14px; }
  .social-icons{ margin-left:0; margin-top:20px; }
  .nav-toggle{ display:block; }
  .hero-caption h1{ font-size:26px; }
  .grid-item{ flex: 0 0 100%; max-width:100%; }
  .bleed-item, .team-bleed .bleed-item{ flex: 0 0 100%; max-width:100%; aspect-ratio: 1 / 0.9; }
  .process-grid{ grid-template-columns: 1fr; }
  .project-gallery img{ max-width:100%; }
  .contact-wrap{ gap: 30px; }
  .featured-grid{ grid-template-columns: 1fr; }
  .featured-grid .grid-item{ grid-column:1 !important; grid-row:auto !important; }
  .featured-grid .grid-thumb{ aspect-ratio: 4/3 !important; height:auto !important; }
}