/* ============================================
   CLAIRE HENRY — GLOBAL STYLES
   assets/css/global.css
   ============================================ */
 
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400&display=swap');
 
/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 
/* VARIABLES */
:root{
  --black:#0e0f0e;
  --white:#fcf5f8;
  --henry:#ee488b;
  --orange:#f15722;
  --gold:#FFBE0B;
  --pink:#ee488b;
  --violet:#9680bb;
  --blue:#489bd5;
  --green:#5DB37A;
  --white-dim:rgba(255,255,255,0.65);
  --border:rgba(255,255,255,0.1);
  --light-bg:#fcf5f8;
  --font-eyebrow:14px;
  --font-body:17px;
  --font-heading:clamp(36px,5vw,72px);
}
 
.hero-year{font-size:21px}
 
/* INSIGHT HEADINGS */
.insight-text strong{
  display:block;
  font-family:'Bebas Neue',sans-serif;
  font-size:27px;
  color:var(--white);
  font-weight:300;
  margin-bottom:0.25rem;
  letter-spacing:0.04em;
}
 
/* BASE */
html,body{
  background:var(--black);
  color:var(--white);
  font-family:'Bebas Neue',sans-serif;
  font-size:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
 
/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.5rem,7vw,7rem);height:90px;
  border-bottom:1px solid var(--border);
  background:var(--black);
}
.nav-logo{display:flex;align-items:center;gap:6px;text-decoration:none}
.nav-logo-text{font-family:'Bebas Neue',sans-serif;font-size:50px;letter-spacing:0.08em;color:var(--white)}
.nav-logo-henry{font-family:'Bebas Neue',sans-serif;font-size:50px;letter-spacing:0.08em;color:var(--henry)}
.nav-links{display:flex;gap:2.5rem;list-style:none;align-items:center}
.nav-links a{font-family:'DM Mono',monospace;font-size:var(--font-eyebrow);letter-spacing:0.14em;text-transform:uppercase;color:var(--white-dim);text-decoration:none;transition:color 0.2s}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
 
/* ── NAV: HIRE BUTTON (desktop) ───────────────────────────────────── */
/* Targets any Hire link by its href, so the button appears on EVERY page
   whether the link is hire/, ../hire/, or ../../hire/ — no class required. */
.nav-links a[href$="hire/"],
.nav-links .nav-hire{
  color:var(--black);
  background:var(--henry);
  padding:9px 22px;
  border-radius:100px;
  font-weight:900;
  transition:transform 0.2s, box-shadow 0.2s;
}
.nav-links a[href$="hire/"]:hover,
.nav-links .nav-hire:hover{
  color:var(--white);
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 6px 22px rgba(238,72,139,0.55);
}
 
/* HAMBURGER BUTTON */
.nav-hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;height:36px;
  background:none;border:none;cursor:pointer;padding:4px;
  z-index:110;
}
.nav-hamburger span{
  display:block;width:24px;height:2px;
  background:var(--white);border-radius:2px;
  transition:transform 0.3s ease,opacity 0.3s ease;
}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 
/* MOBILE DROPDOWN */
.nav-dropdown{
  display:none;
  position:fixed;
  top:70px;left:0;right:0;
  background:var(--black);
  border-bottom:1px solid var(--border);
  z-index:99;
  padding:0 1.5rem;
  flex-direction:column;
}
.nav-dropdown.open{display:flex}
.nav-dropdown li{list-style:none;border-bottom:1px solid var(--border)}
.nav-dropdown li:last-child{border-bottom:none}
.nav-dropdown a{
  display:block;
  padding:1.25rem 0;
  font-family:'DM Mono',monospace;
  font-size:var(--font-eyebrow);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--white-dim);
  text-decoration:none;
  transition:color 0.2s;
}
.nav-dropdown a:hover,.nav-dropdown a.active{color:var(--white)}
 
/* ── NAV: HIRE IN MOBILE DROPDOWN ─────────────────────────────────── */
.nav-dropdown li:has(a[href$="hire/"]){
  order:-1;                /* pin Hire to the top of the menu */
  border-bottom:none;
  padding:1rem 0 0.5rem;
}
.nav-dropdown a[href$="hire/"]{
  display:block;
  text-align:center;
  color:var(--white);
  background:var(--henry);
  padding:1rem;
  border-radius:100px;
  font-weight:500;
}
 
/* FOOTER */
footer{
  border-top:1px solid var(--border);
  padding:1.5rem clamp(1.5rem,7vw,7rem);
  display:flex;align-items:center;justify-content:space-between;
}
.footer-left{display:flex;align-items:center;gap:6px}
.footer-name{font-size:28px;letter-spacing:0.08em;color:var(--white-dim)}
.footer-henry{font-size:28px;letter-spacing:0.08em;color:var(--henry)}
.footer-contact{
  font-family:'DM Mono',monospace;font-size:var(--font-eyebrow);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--white-dim);text-decoration:none;transition:color 0.2s;
}
.footer-contact:hover{color:var(--white)}
 
/* BLOBS */
.blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:0.15}
.blob-1{width:300px;height:300px;background:var(--violet);top:-60px;right:10%;animation:drift 8s ease-in-out infinite}
.blob-2{width:200px;height:200px;background:var(--henry);bottom:10%;right:20%;animation:drift 6s ease-in-out infinite reverse}
.blob-3{width:150px;height:150px;background:var(--orange);top:30%;left:5%;animation:drift 10s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-20px)}}
 
/* MARQUEE */
.marquee-wrap{overflow:hidden;white-space:nowrap;border-top:1px solid var(--border)}
.marquee-track{display:inline-flex;animation:marquee 20s linear infinite}
.neon-word{font-size:clamp(32px,5vw,56px);letter-spacing:0.04em;padding:12px 28px}
.neon-word.c1{color:var(--gold)}
.neon-word.c2{color:var(--orange)}
.neon-word.c3{color:var(--henry)}
.neon-word.c4{color:var(--violet)}
.neon-word.c5{color:var(--blue)}
.neon-sep{font-size:clamp(32px,5vw,56px);color:var(--white-dim);padding:12px 4px}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
 
/* LIGHT SECTION */
.light{background:var(--light-bg);color:var(--black)}
 
/* UTILITY */
.dm{font-family:'DM Mono',monospace}
.tag{
  font-family:'DM Mono',monospace;font-size:var(--font-eyebrow);letter-spacing:0.1em;
  text-transform:uppercase;border:1px solid var(--border);border-radius:100px;
  padding:5px 14px;color:var(--white-dim);transition:border-color 0.2s,color 0.2s;
}
.tag:hover{border-color:var(--henry);color:var(--white)}
 
/* CASE STUDY RHYTHM */
.section{margin-bottom:80px}
.meta-row{margin:0 0 80px}
.meta-cell{padding:1.75rem 2rem}
.section-eyebrow{margin-bottom:0.75rem;letter-spacing:0.16em}
.section-heading{margin-bottom:1.25rem}
.insight-item{padding:1.5rem}
.challenge-block{padding:2.5rem}
.prestige-row{display:flex;gap:0.75rem;flex-wrap:wrap}
.prestige-badge{width:fit-content}
 
/* ── MOBILE NAV ─────────────────────────────────────────────────────── */
@media(max-width:720px){
  nav{padding:0 1.5rem;height:70px}
  .nav-logo-text,.nav-logo-henry{font-size:32px}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
}
 
/* ── MOBILE FONT SIZES ──────────────────────────────────────────────── */
@media(max-width:720px){
  :root{
    --font-eyebrow:13px;
    --font-body:16px;
  }
  .hero-year{font-size:15px}
  .insight-text strong{font-size:20px}
  .footer-name,.footer-henry{font-size:20px}
}