@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Mono:ital,wght@0,300;0,400;1,300&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg:    #0c0c0b;
  --bg2:   #141413;
  --bg3:   #1c1c1a;
  --line:  rgba(255,255,255,0.07);
  --line2: rgba(255,255,255,0.13);
  --ink:   #f0ede6;
  --muted: #9a9690;
  --hint:  #5a5752;
  --accent:  #c8b89a;
  --accent2: #7fa898;
  --serif: 'Cormorant Garamond',Georgia,serif;
  --mono:  'DM Mono','Courier New',monospace;
  --max:   1000px;
  --pad:   2.5rem;
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem var(--pad);
  border-bottom:0.5px solid var(--line);
  background:rgba(12,12,11,0.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:padding 0.3s;
}
.nav-mark{font-family:var(--serif);font-size:18px;font-weight:300;letter-spacing:0.05em;color:var(--ink)}
.nav-mark span{color:var(--accent);font-style:italic}
.nav-links{display:flex;align-items:center;gap:1.8rem;list-style:none}
.nav-links a{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);transition:color 0.2s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-cta{border:0.5px solid var(--line2) !important;padding:7px 18px !important;color:var(--ink) !important;transition:background 0.2s !important}
.nav-cta:hover{background:var(--bg3) !important}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px;background:none;border:none;padding:4px}
.hamburger span{display:block;width:22px;height:1px;background:var(--muted);transition:all 0.3s}

/* ── LAYOUT ── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{padding:5rem 0;border-bottom:0.5px solid var(--line)}
section:last-child{border-bottom:none}

.label{
  font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:var(--hint);
  margin-bottom:2.5rem;display:flex;align-items:center;gap:12px;
}
.label::after{content:'';flex:1;height:0.5px;background:var(--line)}

/* ── HERO ── */
.hero{padding:9rem 0 5rem;border-bottom:0.5px solid var(--line)}
.hero-eyebrow{
  font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent2);
  margin-bottom:1.4rem;display:flex;align-items:center;gap:10px;
}
.hero-eyebrow::before{content:'';display:inline-block;width:24px;height:0.5px;background:var(--accent2)}
h1.hero-hed{
  font-family:var(--serif);font-size:clamp(44px,6vw,72px);
  font-weight:300;line-height:1.06;color:var(--ink);
  margin-bottom:1.6rem;letter-spacing:-0.01em;
}
h1.hero-hed em{font-style:italic;color:var(--accent)}
.hero-sub{font-size:13px;line-height:1.9;color:var(--muted);max-width:540px;margin-bottom:2rem}
.hero-stats{
  display:flex;gap:3rem;padding:2rem 0;
  border-top:0.5px solid var(--line);border-bottom:0.5px solid var(--line);
  margin:2rem 0;flex-wrap:wrap;
}
.stat-n{font-family:var(--serif);font-size:38px;font-weight:300;color:var(--ink);line-height:1;margin-bottom:4px}
.stat-l{font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--hint)}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.15em;text-transform:uppercase;
  padding:13px 28px;transition:all 0.2s;cursor:pointer;border:none;
}
.btn-pri{background:var(--accent);color:var(--bg)}
.btn-pri:hover{opacity:0.85}
.btn-ghost{border:0.5px solid var(--line2);color:var(--muted)}
.btn-ghost:hover{color:var(--ink);border-color:var(--muted)}

/* ── SERVICE CARDS (homepage grid) ── */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:0.5px solid var(--line)}
.svc-card{
  background:var(--bg);padding:2rem 1.8rem;
  display:flex;flex-direction:column;
  transition:background 0.25s;position:relative;
  text-decoration:none;
}
.svc-card:hover{background:var(--bg2)}
.svc-card.current::after{
  content:'current focus';position:absolute;top:1rem;right:1rem;
  font-size:8px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--accent2);border:0.5px solid var(--accent2);padding:2px 8px;opacity:0.75;
}
.svc-num{font-family:var(--serif);font-size:12px;color:var(--hint);margin-bottom:1rem}
.svc-title{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--ink);margin-bottom:0.6rem;line-height:1.25}
.svc-desc{font-size:11px;line-height:1.75;color:var(--muted);flex:1}
.svc-link{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent2);margin-top:1.2rem}

/* ── WHAT WE DELIVER (outcomes) ── */
.outcomes{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:0.5px solid var(--line)}
.outcome{background:var(--bg);padding:1.8rem;transition:background 0.2s}
.outcome:hover{background:var(--bg2)}
.outcome-title{font-family:var(--serif);font-size:17px;font-weight:400;color:var(--ink);margin-bottom:0.4rem}
.outcome-desc{font-size:11px;line-height:1.75;color:var(--muted)}

/* ── SECTORS ── */
.sector-tags{display:flex;flex-wrap:wrap;gap:10px}
.tag{
  font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  padding:8px 16px;border:0.5px solid var(--line2);color:var(--muted);
  transition:all 0.2s;cursor:default;
}
.tag:hover{border-color:var(--accent);color:var(--accent)}

/* ── VENDOR GRID ── */
.vendor-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:0.5px solid var(--line)}
.vendor{background:var(--bg);padding:1.1rem;text-align:center;transition:background 0.2s}
.vendor:hover{background:var(--bg2)}
.vendor-n{font-size:11px;letter-spacing:0.03em;color:var(--muted);display:block;margin-bottom:3px}
.vendor-c{font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--hint)}

/* ── PROCESS ── */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:0.5px solid var(--line)}
.process-step{background:var(--bg);padding:2rem 1.5rem;transition:background 0.2s}
.process-step:hover{background:var(--bg2)}
.step-n{font-family:var(--serif);font-size:36px;font-weight:300;color:var(--line2);margin-bottom:0.8rem}
.step-title{font-family:var(--serif);font-size:17px;font-weight:400;color:var(--ink);margin-bottom:0.5rem}
.step-desc{font-size:11px;line-height:1.7;color:var(--muted)}

/* ── CERTS ── */
.cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:0.5px solid var(--line)}
.cert{background:var(--bg);padding:1.1rem 1.4rem;display:flex;align-items:flex-start;gap:10px;transition:background 0.2s}
.cert:hover{background:var(--bg2)}
.cert-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:6px;flex-shrink:0}
.cert-text{font-size:11px;line-height:1.6;color:var(--muted)}

/* ── BLOG CARDS ── */
.blog-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:0.5px solid var(--line)}
.blog-card{
  background:var(--bg);padding:2rem;
  display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:start;
  transition:background 0.25s;
}
.blog-card:hover{background:var(--bg2)}
.blog-meta{display:flex;align-items:center;gap:10px;margin-bottom:0.6rem;flex-wrap:wrap}
.blog-date{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--hint)}
.blog-tag{font-size:9px;letter-spacing:0.1em;text-transform:uppercase;padding:2px 8px;border:0.5px solid var(--line2);color:var(--muted)}
.blog-title{font-family:var(--serif);font-size:20px;font-weight:400;color:var(--ink);margin-bottom:0.4rem;line-height:1.28}
.blog-exc{font-size:11px;line-height:1.75;color:var(--muted)}
.blog-arrow{font-size:20px;color:var(--hint);align-self:center;transition:transform 0.2s,color 0.2s}
.blog-card:hover .blog-arrow{transform:translateX(5px);color:var(--accent)}

/* ── CONTACT FORM ── */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.contact-info{}
.contact-row{padding:1.2rem 0;border-bottom:0.5px solid var(--line)}
.contact-row:first-child{border-top:0.5px solid var(--line)}
.contact-key{font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--hint);margin-bottom:4px}
.contact-val{font-family:var(--serif);font-size:17px;font-weight:300;color:var(--ink)}
.form-grid{display:flex;flex-direction:column;gap:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field label{font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--hint)}
.form-field input,.form-field select,.form-field textarea{
  background:var(--bg2);border:0.5px solid var(--line2);
  color:var(--ink);font-family:var(--mono);font-size:12px;
  padding:10px 14px;outline:none;resize:vertical;
  transition:border-color 0.2s;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--accent2)}
.form-field select option{background:var(--bg2)}
.form-note{font-size:10px;color:var(--hint);margin-top:0.5rem}
#form-success{display:none;padding:1.2rem;border:0.5px solid var(--accent2);color:var(--accent2);font-size:11px;margin-top:1rem}

/* ── ABOUT PAGE ── */
.about-grid{display:grid;grid-template-columns:3fr 2fr;gap:4rem;align-items:start}
.about-body p{font-size:14px;line-height:2;color:var(--muted);margin-bottom:1.2rem}
.about-body p strong{color:var(--ink);font-weight:400}
.about-aside{}
.aside-block{padding:1.5rem;border:0.5px solid var(--line);margin-bottom:1px}
.aside-key{font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--hint);margin-bottom:0.8rem}
.aside-val{font-size:12px;color:var(--muted);line-height:1.8}

/* ── SERVICE DETAIL PAGE ── */
.svc-hero{padding:8rem 0 4rem;border-bottom:0.5px solid var(--line)}
.svc-hero-hed{font-family:var(--serif);font-size:clamp(36px,5vw,58px);font-weight:300;color:var(--ink);line-height:1.1;margin:1.2rem 0 1rem}
.deliverable-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:0.5px solid var(--line)}
.deliverable{background:var(--bg);padding:1.3rem 1.6rem;display:flex;gap:1rem;align-items:flex-start;transition:background 0.2s}
.deliverable:hover{background:var(--bg2)}
.del-bullet{width:5px;height:5px;border-radius:50%;background:var(--accent2);margin-top:7px;flex-shrink:0}
.del-text{font-size:12px;line-height:1.75;color:var(--muted)}
.del-text strong{color:var(--ink);font-weight:400}
.project-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border:0.5px solid var(--line)}
.project-card{background:var(--bg);padding:1.5rem;transition:background 0.2s}
.project-card:hover{background:var(--bg2)}
.project-sector{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent2);margin-bottom:0.5rem}
.project-title{font-family:var(--serif);font-size:16px;font-weight:400;color:var(--ink);margin-bottom:0.4rem;line-height:1.3}
.project-desc{font-size:10px;line-height:1.7;color:var(--muted)}

/* ── BLOG POST ── */
.post-header{padding:8rem 0 3rem;border-bottom:0.5px solid var(--line)}
.post-hed{font-family:var(--serif);font-size:clamp(32px,5vw,54px);font-weight:300;color:var(--ink);line-height:1.1;margin:1.2rem 0 1rem}
.post-body{max-width:660px;padding:3rem 0}
.post-body h2{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--ink);margin:2.5rem 0 0.8rem}
.post-body h3{font-family:var(--serif);font-size:20px;font-weight:400;color:var(--ink);margin:2rem 0 0.6rem}
.post-body p{font-size:14px;line-height:2;color:var(--muted);margin-bottom:1.2rem}
.post-body ul{margin:0 0 1.2rem 1.5rem}
.post-body li{font-size:13px;line-height:1.9;color:var(--muted);margin-bottom:0.3rem}
.post-body strong{color:var(--ink);font-weight:400}
.post-body code{font-family:var(--mono);font-size:12px;background:var(--bg3);padding:2px 7px;color:var(--accent2)}
blockquote{border-left:2px solid var(--accent);padding:0.5rem 0 0.5rem 1.5rem;margin:1.5rem 0;font-family:var(--serif);font-size:19px;font-weight:300;font-style:italic;color:var(--accent)}

/* ── FOOTER ── */
footer{
  padding:2.5rem var(--pad);border-top:0.5px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
}
.footer-mark{font-family:var(--serif);font-size:15px;font-weight:300;color:var(--hint)}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--hint);transition:color 0.2s}
.footer-links a:hover{color:var(--muted)}
.footer-copy{font-size:10px;color:var(--hint)}

/* ── FILTER BTNS ── */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;padding:1.5rem 0;border-bottom:0.5px solid var(--line)}
.fbtn{
  font-family:var(--mono);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;
  padding:6px 14px;border:0.5px solid var(--line2);color:var(--muted);
  background:transparent;cursor:pointer;transition:all 0.2s;
}
.fbtn:hover{color:var(--ink);border-color:var(--muted)}
.fbtn.on{color:var(--accent);border-color:var(--accent)}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  :root{--pad:1.4rem}
  nav{padding:1.1rem var(--pad)}
  .nav-links{
    display:none;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:var(--bg2);padding:1.5rem var(--pad);gap:1rem;
    border-bottom:0.5px solid var(--line);
  }
  .nav-links.open{display:flex}
  .hamburger{display:flex}
  .hero{padding:7rem 0 3rem}
  .hero-stats{gap:1.5rem}
  .svc-grid{grid-template-columns:1fr}
  .outcomes{grid-template-columns:1fr}
  .vendor-grid{grid-template-columns:repeat(2,1fr)}
  .cert-grid{grid-template-columns:1fr}
  .process{grid-template-columns:1fr 1fr}
  .contact-wrap{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .blog-card{grid-template-columns:1fr}
  .blog-arrow{display:none}
  footer{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .svc-grid,.process{grid-template-columns:1fr}
}

/* ── DROPDOWN MEGA MENU ────────────────────────────────────── */
.has-dropdown { position: relative; }

.has-dropdown > a {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.chevron {
  font-size: 9px;
  opacity: 0.5;
  display: inline-block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Fix #3 — anchor to left edge, handle vertical via padding-top (fix #4) */
/* Fix #5 — z-index 1000 not 9999 */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 12px; /* creates hover bridge — no dead zone */
  z-index: 1000;
  min-width: 580px;

  /* Fix #1 — one unified visibility system (max-height) for all breakpoints */
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.22s ease, max-height 0.28s ease, visibility 0.22s ease;
}

.dropdown-panel {
  background: #141413;
  border: 0.5px solid rgba(255,255,255,0.1);
  box-shadow: 0 24px 64px rgba(0,0,0,0.65);
  position: relative;
}

/* Arrow tip */
.dropdown-panel::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 80px;
  transform: rotate(45deg);
  width: 11px;
  height: 11px;
  background: #141413;
  border-left: 0.5px solid rgba(255,255,255,0.1);
  border-top: 0.5px solid rgba(255,255,255,0.1);
}

/* Desktop hover — show */
@media (min-width: 769px) {
  .has-dropdown:hover > .dropdown,
  .has-dropdown:focus-within > .dropdown {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .has-dropdown:hover .chevron,
  .has-dropdown:focus-within .chevron {
    transform: rotate(180deg);
    opacity: 1;
  }
}

/* Fix #2 — mobile: disable hover entirely, JS .open controls state */
@media (max-width: 768px) {
  .has-dropdown:hover > .dropdown { 
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .has-dropdown.open > .dropdown {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .has-dropdown.open .chevron {
    transform: rotate(180deg);
    opacity: 1;
  }
  .dropdown {
    position: static;
    min-width: 100%;
    padding-top: 0;
    box-shadow: none;
  }
  .dropdown-panel {
    box-shadow: none;
    border: none;
    border-top: 0.5px solid rgba(255,255,255,0.07);
  }
  .dropdown-panel::before { display: none; }
  .dropdown-inner { grid-template-columns: 1fr !important; }
  .dropdown-col:first-child {
    border-right: none;
    border-bottom: 0.5px solid rgba(255,255,255,0.07);
  }
}

.dropdown-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.dropdown-col {
  padding: 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
}

.dropdown-col:first-child {
  border-right: 0.5px solid rgba(255,255,255,0.07);
}

.dropdown-heading {
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hint);
  margin-bottom: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}

.dropdown-col a {
  display: block;
  padding: 0.55rem 0.7rem;
  margin: 0 -0.7rem;
  text-decoration: none;
  transition: background 0.15s;
}

.dropdown-col a:hover { background: rgba(255,255,255,0.04); }

.dropdown-title {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 2px;
  transition: color 0.15s;
}

.dropdown-col a:hover .dropdown-title { color: var(--accent); }

.dropdown-desc {
  display: block;
  font-size: 10px;
  color: var(--hint);
  letter-spacing: 0.02em;
}