/* ================================================================
   LABEL: ROOT TOKENS
   Spec colors (do not change):
     Header/Footer background : #000000
     Hero / CTA background    : #EFEFEF
     Content background       : #FFFFFF
     Subnav / hamburger panel : #FFFFFF
   --side / --vert drive section margins and are re-defined per
   breakpoint below, so every section just reads var(--side)/var(--vert).
   ================================================================ */
:root{
  --black:#000000;
  --white:#FFFFFF;
  --grey:#EFEFEF;
  --ink:#141414;
  --ink-soft:#5A5A5A;
  --line:#DADADA;
  --accent:#E2A33B;      /* single accent used for hover states + callout button */
  --accent-ink:#241A06;

  --font-primary:'Aleo', serif;
  --font-secondary:'Inter', sans-serif;

  --radius-pill:999px;

  /* MOBILE (base) — < 768px */
  --side:16px;
  --vert:30px;
}

/* TABLET — 768px to 1023px */
@media (min-width:768px){
  :root{ --side:32px; --vert:60px; }
}

/* DESKTOP — >= 1024px */
@media (min-width:1024px){
  :root{ --side:165px; --vert:60px; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-secondary);
  font-weight:400;
  font-size:18px;
  line-height:27px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
/* LABEL: TYPE SCALE
   H1–H3 share one style (same values given for both Desktop and Mobile,
   so no breakpoint override is needed). H4–H6, Eyebrow, Body, Caption,
   and the two Nav styles are shared across all breakpoints per spec. */
h1{
  font-family:var(--font-primary);
  font-weight:700;
  font-size:32px;
  line-height:48px;
  margin:0;
}
h2{
  font-family:var(--font-primary);
  font-weight:700;
  font-size:28px;
  line-height:42px;
  margin:0;
}
h3{
  font-family:var(--font-primary);
  font-weight:700;
  font-size:26px;
  line-height:39px;
  margin:0;
}
h4{
  font-family:var(--font-primary);
  font-weight:700;
  font-size:24px;
  line-height:36px;
  margin:0;
}
h5{
  font-family:var(--font-primary);
  font-weight:700;
  font-size:22px;
  line-height:33px;
  margin:0;
}
h6{
  font-family:var(--font-primary);
  font-weight:700;
  font-size:20px;
  line-height:30px;
  margin:0;
}

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Eyebrow label — small utility tag used above headings (e.g. Project Title section) */
.eyebrow{
  display:block;
  font-family:var(--font-secondary);
  font-weight:700;
  font-size:22px;
  line-height:28px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:14px;
}

/* Pill buttons — used in CTA cards and the contact callout */
.pill-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  background:var(--black);
  color:var(--white);
  border:none;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:0.95rem;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.pill-btn:hover{ background:var(--accent); color:var(--accent-ink); transform:translateY(-2px); }
/* Variant used on the black callout card — accent by default so it reads on a dark bg */
.pill-btn--accent{ background:var(--accent); color:var(--accent-ink); }
.pill-btn--accent:hover{ background:var(--white); color:var(--black); }

/* ================================================================
   LABEL: HEADER SECTION — bg #000000
   ================================================================ */
.site-header{
  background:var(--black);
  padding:14px var(--side);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:60;
}
.logo{
  display:inline-flex;
  align-items:center;
  transition:opacity .18s ease;
}
.logo-img{
  display:block;
  height:32px;
  width:auto;
}
/* LABEL: logo hover state */
.logo:hover{ opacity:0.7; }
/* Non-clickable logo (landing.html uses a <span>, not <a>) — no hover cue, since there's nothing to click */
span.logo:hover{ opacity:1; }

/* --- Desktop primary nav (>=1024px only, see breakpoint block) --- */
.primary-nav{ display:none; }
.primary-nav > ul{ display:flex; align-items:center; gap:40px; }
.primary-nav a.nav-link{
  font-family:var(--font-primary);
  font-size:18px;
  font-weight:500;
  line-height:normal;
  color:var(--white);
  position:relative;
  padding:4px 0;
  transition:color .18s ease;
}
/* LABEL: nav link hover state */
.primary-nav a.nav-link:hover{ color:var(--accent); }
.primary-nav a.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:2px;
  background:var(--accent);
  transition:width .2s ease;
}
.primary-nav a.nav-link:hover::after,
.primary-nav .has-dropdown:hover a.nav-link::after,
.primary-nav .has-dropdown:focus-within a.nav-link::after{ width:100%; }

/* "My Work" mega dropdown — LABEL: WORK SUBNAV (12 subpages), bg #FFFFFF */
.has-dropdown{ position:relative; }
.dropdown-caret{
  display:inline-block;
  width:6px; height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  margin-left:8px;
  transition:transform .2s ease;
}
.has-dropdown:hover .dropdown-caret,
.has-dropdown:focus-within .dropdown-caret{ transform:rotate(225deg); }

.work-dropdown{
  position:absolute;
  top:calc(100% + 22px);
  right:0;
  width:640px;
  background:var(--white);
  border-radius:14px;
  padding:24px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:4px 32px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  box-shadow:0 20px 44px rgba(0,0,0,0.28);
}
.has-dropdown:hover .work-dropdown,
.has-dropdown:focus-within .work-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.work-dropdown a{
  font-family:var(--font-secondary);
  font-size:18px;
  font-weight:400;
  line-height:normal;
  padding:8px 6px;
  border-radius:6px;
  color:var(--ink);
  transition:background .15s ease, color .15s ease;
}
/* LABEL: subnav link hover state */
.work-dropdown a:hover{ background:var(--grey); color:var(--accent-ink); }

/* --- Hamburger trigger (tablet + mobile, <1024px) --- */
.hamburger{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  background:transparent;
  border:1.5px solid var(--white);
  border-radius:50%;
  transition:border-color .18s ease;
}
.hamburger span{
  display:block; position:relative;
  width:18px; height:2px; background:var(--white);
}
.hamburger span::before, .hamburger span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--white);
  transition:transform .2s ease;
}
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }
.hamburger:hover{ border-color:var(--accent); }
.hamburger[aria-expanded="true"] span{ background:transparent; }
.hamburger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); background:var(--white); }
.hamburger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); background:var(--white); }

/* Mobile / tablet nav panel — LABEL: MOBILE NAV PANEL, bg #FFFFFF
   NOTE: padding lives on .mobile-nav-inner, not this element — padding
   can't be compressed below its own size by max-height, so keeping it
   here would leave a visible white sliver even when "closed". */
.mobile-nav-panel{
  display:block;
  position:absolute;
  top:100%; left:0; right:0;
  background:var(--white);
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  box-shadow:0 20px 44px rgba(0,0,0,0.28);
}
.mobile-nav-panel.open{ max-height:640px; overflow-y:auto; }
.mobile-nav-inner{ padding:8px var(--side) 24px; }
.mobile-nav-panel a.nav-link,
.mobile-work-toggle{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  background:transparent;
  border:none;
  font-family:var(--font-primary);
  font-size:18px;
  font-weight:500;
  line-height:normal;
  color:var(--ink);
  padding:16px 0;
  border-bottom:1px solid var(--line);
  transition:color .15s ease;
}
/* LABEL: mobile nav link hover state */
.mobile-nav-panel a.nav-link:hover,
.mobile-work-toggle:hover{ color:var(--accent-ink); }
.mobile-work-toggle::after{
  content:"+";
  font-size:1.2rem;
}
.mobile-work-toggle[aria-expanded="true"]::after{ content:"–"; }
.mobile-work-list{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.mobile-work-list.open{ max-height:600px; }
.mobile-work-list a{
  display:block;
  font-family:var(--font-secondary);
  font-size:18px;
  font-weight:400;
  line-height:normal;
  padding:12px 0 12px 14px;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  transition:color .15s ease;
}
.mobile-work-list a:hover{ color:var(--accent-ink); }

/* ================================================================
   LABEL: PROJECT TITLE SECTION — bg #FFFFFF (Project page only)
   Eyebrow + H1 + H2, standard section margins
   ================================================================ */
.project-title{
  background:var(--white);
  padding:var(--vert) var(--side);
}
.project-title h1{
  margin-bottom:18px;
}
.project-title h2{
  color:var(--ink-soft);
  max-width:60ch;
  margin-bottom:0;
}

/* ================================================================
   LABEL: HERO CAROUSEL SECTION — bg #EFEFEF, 0px margins
   ================================================================ */
.hero{
  margin:0;
  padding:0;
  background:var(--grey);
  overflow:hidden;
}
.hero-track-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
}
.hero-track{
  display:flex;
  height:100%;
  transition:transform .6s cubic-bezier(.65,0,.35,1);
  will-change:transform;
}
.hero-slide{ flex:0 0 100%; height:100%; position:relative; }
.hero-slide a{ display:block; width:100%; height:100%; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }

/* LABEL: HERO SLIDE SCRIM — 75% black overlay above the image, below the caption */
.hero-slide-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.40);
  pointer-events:none;
  z-index:1;
}
.hero-slide-caption{
  position:absolute;
  left:var(--side);
  right:var(--side);
  bottom:20px;
  z-index:2;
  color:#fff;
  font-family:var(--font-secondary);
  font-size:15px;
  font-weight:400;
  line-height:22px;
  text-transform:capitalize;
  text-shadow:0 2px 12px rgba(0,0,0,0.45);
  pointer-events:none;
}

/* LABEL: CAROUSEL ARROWS */
.hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  border:none;
  display:flex; align-items:center; justify-content:center;
  z-index:20;
  transition:background .18s ease, transform .18s ease;
}
.hero-arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.hero-arrow svg{ width:24px; height:24px; }
.hero-arrow.prev{ left:24px; }
.hero-arrow.next{ right:24px; }

/* LABEL: CAROUSEL PAGINATION DOTS */
.hero-dots{
  position:absolute;
  bottom:60px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:20;
}
.hero-dot{
  width:9px; height:9px;
  border-radius:50%;
  background:rgba(0,0,0,0.28);
  border:none;
  padding:0;
  transition:background .2s ease, transform .2s ease;
}
.hero-dot[aria-current="true"]{ background:var(--black); transform:scale(1.3); }

@media (prefers-reduced-motion:reduce){
  .hero-track{ transition:none; }
}

/* ================================================================
   LABEL: CALL-TO-ACTION SECTION — bg #EFEFEF
   ================================================================ */
.cta-section{
  background:var(--grey);
  padding:var(--vert) var(--side);
}
.cta-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.cta-card{
  background:var(--white);
  border-radius:18px;
  padding:30px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.cta-card p{ color:var(--ink-soft); margin:0; flex-grow:1; }
.cta-card .pill-btn{ align-self:flex-start; }

/* ================================================================
   LABEL: CONTENT SECTION — bg #FFFFFF
   ================================================================ */
.content-section{
  background:var(--white);
  padding:var(--vert) var(--side);
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
}
.content-main h1{
  margin-bottom:18px;
}
.content-main h2{
  color:var(--ink-soft);
  margin-bottom:22px;
}
.content-main p{
  color:var(--ink-soft);
  max-width:68ch;
  margin:0 0 18px 0;
}
.content-main p:last-child{ margin-bottom:0; }

/* Modifier: content section with no callout aside (Project page) —
   keeps a single readable column instead of the two-column split
   used on the Home page. See desktop breakpoint below for the
   grid-template-columns override. */
.content-section.single-column{ grid-template-columns:1fr; }
.content-section.single-column .content-main{ max-width:80ch; }

/* Callout — LABEL: CONTACT CALLOUT, bg #000000 */
.callout{
  background:var(--black);
  color:var(--white);
  border-radius:20px;
  padding:30px;
}
.callout h4{ color:var(--white); margin-bottom:14px; }
.callout p{ color:#C7C7C7; margin:0 0 26px 0; }

/* When a callout sits alone inside the CTA section (Project page,
   no 3-card grid), center it and cap its width for readability. */
.cta-section > .callout{ max-width:640px; margin:0 auto; }

/* ================================================================
   LABEL: FOOTER SECTION — bg #000000
   Mobile/Tablet: logo above centered nav (default below).
   ================================================================ */
.site-footer{
  background:var(--black);
  color:var(--white);
  padding:30px var(--side);
  text-align:center;
}
.footer-top-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
}
.footer-nav ul{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; row-gap:10px; }
.footer-nav a.nav-link{
  font-family:var(--font-primary);
  font-size:16px;
  font-weight:500;
  line-height:normal;
  color:var(--white);
  transition:color .18s ease;
}
/* LABEL: footer nav link hover state */
.footer-nav a.nav-link:hover{ color:var(--accent); }

/* LABEL: FOOTER SOCIAL — vertical divider + LinkedIn icon after the nav links */
.footer-social{
  display:flex;
  align-items:center;
  gap:28px;
}
.footer-divider{
  display:inline-block;
  width:2px;
  height:28px;
  background:rgba(255,255,255,0.35);
}
.footer-social-link{
  display:flex;
  align-items:center;
  transition:opacity .18s ease;
}
.footer-social-link:hover{ opacity:0.7; }
.footer-social-icon{
  display:block;
  width:24px;
  height:24px;
}
.footer-copy{
  font-family:var(--font-secondary);
  font-size:15px;
  font-weight:400;
  line-height:22px;
  color:#B8B8B8;
  text-align:center;
  margin:0;
}

/* ================================================================
   BREAKPOINT: TABLET — 768px and up
   ================================================================ */
@media (min-width:768px){
  .cta-grid{ grid-template-columns:repeat(2, 1fr); }
  .logo-img{ height:32px; }

  /* LABEL: TYPE SCALE — Desktop & Tablet H1–H3 sizes (same at both breakpoints) */
  h1{ font-size:36px; line-height:54px; }
  h2{ font-size:32px; line-height:48px; }
  h3{ font-size:28px; line-height:42px; }

  /* Project page's standalone callout: full-width, text left / button right
     (Home page's callout, nested in .content-section, is unaffected). Applies
     from tablet up through desktop. */
  .cta-section > .callout{
    max-width:none;
    margin:0;
    position:static;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:48px;
  }
  .callout-text{ max-width:65ch; }
  .callout-text p{ margin-bottom:0; }
  .cta-section > .callout .pill-btn{ flex-shrink:0; }
}

/* ================================================================
   BREAKPOINT: DESKTOP — 1024px and up
   ================================================================ */
@media (min-width:1024px){

  /* LABEL: Restore original padding on callout/CTA cards at desktop —
     the 30px value above is scoped to tablet + mobile only. */
  .callout{ padding:40px; }
  .cta-card{ padding:32px; }

  /* Header: show full nav row, hide hamburger */
  .primary-nav{ display:flex; }
  .hamburger, .mobile-nav-panel{ display:none; }
  .logo-img{ height:36px; }
  .site-header{ padding-top:24px; padding-bottom:24px; }

  /* Content: main copy + sticky callout side by side (Home page) */
  .content-section{ grid-template-columns:1.1fr 0.9fr; align-items:start; gap:64px; }
  .callout{ position:sticky; top:40px; }


  /* Project page override: single readable column, no aside to split against */
  .content-section.single-column{ grid-template-columns:1fr; }
  .content-section.single-column .callout{ position:static; }

  /* Footer: logo left, nav right */
  .site-footer{ text-align:left; }
  .footer-top-row{ flex-direction:row; justify-content:space-between; margin-bottom:22px; }
  .footer-nav ul{ justify-content:flex-start; }
  .site-footer{ display:block; }
}

/* ================================================================
   LABEL: BACK TO TOP BUTTON
   Fixed circular button, bottom-right. Hidden until the page is
   scrolled down (toggled via JS adding/removing .visible), then
   fades and slides in. Shared across all pages/site.
   ================================================================ */
.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(0,0,0,0.6);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .18s ease;
}
.back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{ background:var(--accent); }
.back-to-top svg{ width:20px; height:20px; }