:root{
  --bg:#0A0A0A;
  --bg-alt:#121212;
  --ink:#F4F3EF;
  --ink-soft:#A6A49B;
  --ink-faint:#6E6C63;
  --accent:#C9CDD2;
  --line:rgba(244,243,239,.14);
  --line-soft:rgba(244,243,239,.08);
  --card-bg:#111111;
  --display:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw:1280px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-wrap:break-word;
}
html{overflow-x:hidden;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--accent); color:#0A0A0A;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,10,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:.01em;
  text-decoration:none; text-transform:uppercase; display:flex; align-items:center;
}
.logo-img{height:48px; width:auto; display:block;}
.nav{display:flex; align-items:center; gap:30px;}
.nav a{
  text-decoration:none; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500; transition:color .15s;
  padding:4px 0; border-bottom:1px solid transparent;
}
.nav a:hover, .nav a.active{color:var(--ink); border-color:var(--accent);}
.nav-cta{
  background:var(--ink); color:var(--bg)!important; padding:10px 20px!important;
  border-radius:999px; border-bottom:none!important; font-weight:600!important;
}
.nav-cta:hover{background:var(--accent)!important; color:#0A0A0A!important;}
.nav-toggle{display:none; background:none; border:0; padding:11px;}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:22px; height:1.5px; background:var(--ink); position:relative; transition:.2s;
}
.nav-toggle span::before{position:absolute; top:-7px;}
.nav-toggle span::after{position:absolute; top:7px;}

/* ---------- Hero ---------- */
.hero{padding:160px 0 90px; position:relative; overflow:visible;}
.hero-kicker{
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  font-weight:600; margin:0 0 20px; font-family:var(--sans);
}
.hero-stack{position:relative; margin:0 0 46px; overflow:visible;}
.hero-stack h1{
  font-family:var(--display); font-weight:800; font-size:clamp(52px,10.2vw,148px);
  line-height:.92; margin:0; letter-spacing:-.02em; text-transform:uppercase; position:relative; z-index:2;
}
.hero-stack h1 .hero-lead-line{
  display:block; font-weight:500; font-size:.28em; letter-spacing:.02em; color:var(--ink-soft);
  text-transform:none; margin-bottom:.18em;
}
.hero-stack h1 span.accent{color:var(--ink);}
.hero-blob{
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  filter:drop-shadow(0 40px 55px rgba(0,0,0,.55));
  animation:blob-float 8s ease-in-out infinite;
}
.hero-blob-back{z-index:0; mix-blend-mode:normal;}
.hero-blob-front{z-index:3; animation-direction:reverse;}
@keyframes blob-float{
  0%,100%{transform:translateY(0) rotate(var(--rot,0deg));}
  50%{transform:translateY(-16px) rotate(calc(var(--rot,0deg) + 3deg));}
}
.hero-foot{display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:end; position:relative; z-index:5;}
.hero-roles{
  display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; align-content:flex-start;
}
.hero-roles li{
  font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--line); border-radius:999px; padding:9px 17px; color:var(--ink-soft);
}
.hero-lede{
  font-size:18px; line-height:1.65; max-width:600px; color:var(--ink-soft); margin:0 0 30px;
  font-weight:400;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:16px 30px; border-radius:999px; border:1px solid var(--ink); transition:.15s;
}
.btn-primary{background:var(--ink); color:#0A0A0A;}
.btn-primary:hover{background:var(--accent); border-color:var(--accent);}
.btn-ghost{background:transparent; color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:#0A0A0A;}

/* ---------- Page header (non-home) ---------- */
.page-head{padding:150px 0 64px; border-bottom:1px solid var(--line);}
.page-head-num{font-family:var(--display); font-size:13px; color:var(--accent); font-weight:600; margin:0 0 18px; letter-spacing:.05em;}
.page-head h1{
  font-family:var(--display); font-size:clamp(38px,6.4vw,80px); font-weight:600; margin:0 0 18px;
  letter-spacing:-.01em; text-transform:uppercase; line-height:1;
}
.page-head p{color:var(--ink-soft); font-size:17px; max-width:560px; margin:0; line-height:1.6;}

/* ---------- Section (home) ---------- */
.section{padding:88px 0;}
.section-head{display:flex; gap:22px; align-items:flex-start; margin-bottom:48px; justify-content:space-between;}
.section-head-left{display:flex; gap:22px; align-items:flex-start;}
.section-num{font-family:var(--display); font-size:13px; color:var(--accent); font-weight:600; padding-top:8px;}
.section-title{font-family:var(--display); font-size:clamp(28px,4vw,44px); font-weight:600; margin:0 0 8px; letter-spacing:-.01em; text-transform:uppercase;}
.section-blurb{color:var(--ink-soft); font-size:15.5px; max-width:520px; margin:0;}
.section-link{
  align-self:center; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  text-decoration:none; color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:3px; white-space:nowrap;
}
.section-link:hover{color:var(--accent); border-color:var(--accent);}

/* ---------- Cards / grid ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.card-grid.featured{grid-template-columns:repeat(3,1fr);}
.card{display:block; text-decoration:none; color:inherit;}
.card__img-wrap{
  display:block; aspect-ratio:4/3; overflow:hidden; background:var(--card-bg);
  border:1px solid var(--line); margin-bottom:16px; position:relative;
}
.card__img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.card:hover .card__img{transform:scale(1.045);}
.card__img-wrap::after{
  content:'View Project ↗'; position:absolute; inset:auto 0 0 0; padding:12px 16px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color:#0A0A0A; background:var(--accent);
  opacity:0; transform:translateY(100%); transition:.2s;
}
.card:hover .card__img-wrap::after{opacity:1; transform:translateY(0);}
.card__title{display:block; font-family:var(--display); font-size:19px; font-weight:600; margin-bottom:4px;}
.card__tag{display:block; font-size:12.5px; color:var(--ink-soft);}

/* ---------- Project page ---------- */
.project-head{padding:150px 0 56px; border-bottom:1px solid var(--line);}
.project-eyebrow{
  display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:13px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--accent); font-weight:600; margin-bottom:18px;
}
.project-eyebrow a{color:var(--ink-soft); text-decoration:none;}
.project-eyebrow a:hover{color:var(--accent);}
.project-title{
  font-family:var(--display); font-size:clamp(32px,5.4vw,64px); font-weight:600; margin:0 0 14px;
  letter-spacing:-.01em; text-transform:uppercase; line-height:1.02; max-width:900px;
}
.project-tag{font-size:17px; color:var(--ink); font-weight:500; margin:0 0 10px;}
.project-meta{font-size:13.5px; color:var(--ink-faint); margin:0 0 30px;}
.project-desc{font-size:17px; line-height:1.7; color:var(--ink-soft); max-width:680px; margin:0 0 26px;}
.project-deliverables{
  font-size:13px; color:var(--ink-soft); padding-top:20px; border-top:1px solid var(--line); max-width:680px;
}
.project-deliverables span{text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--ink); margin-right:10px; font-size:11.5px;}

/* project About / Scope (Olivia-style) */
.project-info{
  display:grid; grid-template-columns:1.6fr 1fr; gap:56px; padding-top:8px; margin-top:6px;
  max-width:920px;
}
.project-info-about h3, .project-info-scope h3{
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 16px;
}
.project-info-about p{font-size:16px; line-height:1.7; color:var(--ink-soft); margin:0 0 16px;}
.project-info-about p:last-child{margin-bottom:0;}
.scope-list{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.scope-list li{
  font-size:14.5px; color:var(--ink); font-weight:500; padding-bottom:12px; border-bottom:1px solid var(--line);
}

.project-gallery{padding:64px 0 100px; display:grid; gap:20px;}
.project-gallery img{width:100%; border:1px solid var(--line);}

.project-gallery-hero{margin-bottom:20px;}
.project-gallery-hero img{width:100%; border:none; display:block;}
.project-gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.project-gallery-grid img{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center top; border:1px solid var(--line); display:block;}
/* if the last row of a 3-col grid has only one image, stretch it to fill the row so no gap shows */
.project-gallery-grid img:last-child:nth-child(3n+1){grid-column:1 / -1; aspect-ratio:2.6/1; object-position:center;}
@media (max-width:720px){
  .project-gallery-grid{grid-template-columns:repeat(2,1fr);}
  .project-gallery-grid img:last-child:nth-child(3n+1){grid-column:auto; aspect-ratio:1/1;}
  .project-gallery-grid img:last-child:nth-child(2n+1){grid-column:1 / -1; aspect-ratio:2.6/1; object-position:center;}
}

/* image placeholders */
.img-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  aspect-ratio:16/10; width:100%; border:1px dashed var(--line); background:var(--card-bg);
}
.img-placeholder-plus{
  font-family:var(--display); font-size:28px; color:var(--ink-faint); line-height:1;
  width:48px; height:48px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.img-placeholder-label{font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); font-weight:600;}
.img-placeholder-filename{font-size:11px; color:var(--ink-faint); opacity:.6; font-family:monospace;}
.img-slot{display:block; width:100%;}
.img-slot img{width:100%; border:1px solid var(--line); display:block;}

/* editorial mixed-layout gallery (project "blocks") */
.project-blocks{display:grid; gap:28px;}
.block-image img{width:100%; border:1px solid var(--line); display:block;}
.block-video{position:relative;}
.block-video video{width:100%; display:block; border:1px solid var(--line); background:#000;}
.block-video-caption{font-size:12.5px; color:var(--ink-faint); margin:14px 0 0;}
.block-row{
  display:grid; grid-template-columns:repeat(var(--cols, 2), 1fr); gap:28px;
}
.block-row img{width:100%; border:1px solid var(--line); display:block; height:100%; object-fit:cover;}
.block-cutout{
  display:flex; align-items:center; justify-content:center; padding:48px 0;
}
.block-cutout img{
  max-width:78%; max-height:640px; width:auto; border:0; display:block;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
}

.card__placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:var(--card-bg);
}
.card__placeholder-plus{
  font-family:var(--display); font-size:22px; color:var(--ink-faint); line-height:1;
  width:44px; height:44px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

.project-video{border:1px solid var(--line); padding:16px; background:var(--card-bg);}
.project-video video{width:100%; display:block; background:#000;}
.project-video-caption{font-size:13px; color:var(--ink-soft); margin:12px 0 0;}
.project-video-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:860px){
  .project-video-row{grid-template-columns:1fr;}
}

/* PDF slideshow ("Take a look at the full project") */
.project-pdf{border-top:1px solid var(--line); padding:64px 0 80px;}
.project-pdf-title{
  font-family:var(--display); font-size:clamp(22px,3vw,32px); font-weight:600;
  letter-spacing:-.01em; text-transform:uppercase; margin:0 0 28px;
}
.pdf-viewer{max-width:1200px; margin:0 auto;}
.pdf-viewer-frame{
  position:relative; width:100%; aspect-ratio:16/9.2; background:#0A0A0A;
  border:1px solid var(--line); overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.pdf-viewer-img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; user-select:none;}
.pdf-nav{
  position:absolute; top:0; bottom:0; width:64px; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; font-size:34px; color:#fff; opacity:0; transition:opacity .2s, background .2s;
}
.pdf-viewer-frame:hover .pdf-nav{opacity:.85;}
.pdf-nav:hover{opacity:1 !important; background:rgba(0,0,0,.28);}
.pdf-nav-prev{left:0; justify-content:flex-start; padding-left:14px;}
.pdf-nav-next{right:0; justify-content:flex-end; padding-right:14px;}
.pdf-nav[disabled]{opacity:0 !important; pointer-events:none;}
.pdf-viewer-meta{display:flex; justify-content:center; padding-top:16px;}
.pdf-viewer-counter{font-size:12.5px; letter-spacing:.06em; color:var(--ink-soft); font-variant-numeric:tabular-nums;}

.project-disclaimer{padding:40px 0; text-align:center;}
.project-disclaimer p{
  font-size:12px; line-height:1.7; letter-spacing:.02em; color:var(--ink-faint);
  max-width:820px; margin:0 auto; text-transform:uppercase;
}

.project-nav{
  border-top:1px solid var(--line); padding:48px 0 100px; display:flex; justify-content:space-between; gap:20px;
}
.project-nav a{
  text-decoration:none; font-size:13px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
  color:var(--ink-soft); display:flex; align-items:center; gap:8px;
}
.project-nav a:hover{color:var(--accent);}

/* ---------- About ---------- */
.page-head{position:relative; overflow:visible;}
.page-head-blob{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  filter:drop-shadow(0 35px 50px rgba(0,0,0,.55));
  animation:blob-float 9s ease-in-out infinite;
}
.page-head-num, .page-head h1, .page-head p{position:relative; z-index:1;}
.about-top .wrap{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; padding:70px 0 96px;
}
.about-portrait-wrap{position:relative;}
.about-portrait{width:100%; border:1px solid var(--line); display:block; position:relative; z-index:1; filter:grayscale(1) contrast(1.05);}
.about-portrait-blob{
  position:absolute; z-index:0; left:-16%; bottom:-10%; width:46%; pointer-events:none; user-select:none;
  filter:drop-shadow(0 30px 45px rgba(0,0,0,.55)); animation:blob-float 10s ease-in-out infinite;
}
.about-intro p{color:var(--ink-soft); font-size:15px; line-height:1.7; margin:0 0 18px;}
.about-facts{list-style:none; padding:0; margin:30px 0 0; display:grid; gap:14px;}
.about-facts li{
  font-size:15px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:14px;
  display:flex; justify-content:space-between; gap:16px;
}
.about-facts li span:first-child{color:var(--ink); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:11.5px; white-space:nowrap;}
.about-more{border-top:1px solid var(--line);}
.about-more .wrap{
  padding:80px 0 100px; display:grid; grid-template-columns:1.3fr .85fr .95fr; gap:56px; align-items:start;
}
.about-block h3{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 20px;}
.timeline{list-style:none; margin:0; padding:0; display:grid; gap:24px;}
.timeline li{border-top:1px solid var(--line); padding-top:18px;}
.timeline .role{font-weight:600; font-size:15.5px; margin:0 0 3px; font-family:var(--display);}
.timeline .org{font-size:15px; color:var(--ink-soft); margin:0 0 8px;}
.timeline .desc{font-size:15px; color:var(--ink-faint); margin:0; line-height:1.6;}
.tag-cloud{display:flex; flex-wrap:wrap; gap:8px;}
.tag-cloud span{font-size:12px; border:1px solid var(--line); border-radius:999px; padding:8px 15px; color:var(--ink-soft);}
.accomplishments{margin:0; padding-left:18px; color:var(--ink-soft); font-size:15px; line-height:1.85;}

/* ---------- Contact page ---------- */
.contact-page{padding:150px 0 60px; position:relative; overflow:visible;}
.contact-blob{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  filter:drop-shadow(0 35px 50px rgba(0,0,0,.55));
  animation:blob-float 9s ease-in-out infinite;
}
.contact-kicker, .contact-page h1, .contact-email, .contact-grid{position:relative; z-index:1;}
.contact-kicker{font-family:var(--display); font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 18px;}
.contact-page h1{
  font-family:var(--display); font-weight:600; font-size:clamp(38px,6.4vw,80px); margin:0 0 18px; letter-spacing:-.01em;
  text-transform:uppercase; line-height:1;
}
.contact-email{
  font-family:var(--display); font-size:clamp(22px,3.2vw,32px); color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:8px; display:inline-block; margin-bottom:56px; transition:.15s;
}
.contact-email:hover{color:var(--accent); border-color:var(--accent);}
.contact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-bottom:40px; padding-top:40px; border-top:1px solid var(--line);}
.contact-grid div span{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:9px;}
.contact-grid div a, .contact-grid div p{color:var(--ink); font-size:13.5px; text-decoration:none; margin:0;}
.contact-grid div a:hover{color:var(--accent);}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:56px 0 40px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px; margin-bottom:40px;}
.footer-logo{font-family:var(--display); font-size:22px; font-weight:600; text-decoration:none; text-transform:uppercase; display:flex; align-items:center;}
.footer-logo-img{height:58px; width:auto; display:block;}
.footer-links{display:flex; gap:28px; flex-wrap:wrap;}
.footer-links a{font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); text-decoration:none;}
.footer-links a:hover{color:var(--accent);}
.footer-bottom{
  border-top:1px solid var(--line); padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12px; color:var(--ink-faint);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .about-top .wrap{grid-template-columns:1fr;}
  .about-more .wrap{grid-template-columns:1fr 1fr; gap:36px;}
  .about-more .about-block:first-child{grid-column:1 / -1;}
  .contact-grid{grid-template-columns:repeat(2,1fr);}
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .project-info{grid-template-columns:1fr; gap:32px;}
  .block-row{grid-template-columns:1fr;}
  .block-cutout img{max-width:100%;}
  .hero-foot{grid-template-columns:1fr; gap:26px;}
}
@media (max-width: 720px){
  .site-header.menu-open, .site-header:has(.nav.open){background:var(--bg); backdrop-filter:none;}
  .nav{
    position:fixed; inset:76px 0 0 0; background:var(--bg); flex-direction:column;
    align-items:flex-start; padding:32px; gap:24px; transform:translateX(100%);
    transition:transform .25s ease; z-index:999; overflow-y:auto;
  }
  .nav.open{transform:translateX(0);}
  .nav a{font-size:16px;}
  .nav-toggle{display:block; position:relative; z-index:1000;}
  .card-grid{grid-template-columns:1fr;}
  .section-head{flex-direction:column; gap:16px;}
  .section-head-left{flex-direction:column; gap:8px;}
  .contact-grid{grid-template-columns:1fr;}
  .hero{padding:80px 0 56px;}
  .page-head{padding:120px 0 48px;}
  .contact-page{padding:120px 0 48px;}
  .project-head{padding:120px 0 40px;}
  .footer-top{flex-direction:column;}
  .footer-bottom{flex-direction:column;}
  .hero-blob{width:120px!important;}
  .hero-blob-front{width:76px!important;}
  .page-head-blob{width:84px!important; top:8px!important; right:16px!important; left:auto!important;}
  .about-portrait-blob{width:88px!important; left:2%!important; bottom:-4%!important;}
  .contact-blob{width:104px!important; top:8px!important; right:16px!important; left:auto!important;}
  .about-more .wrap{grid-template-columns:1fr;}
  .about-facts li{flex-direction:column; align-items:flex-start; gap:6px;}
  .about-top .wrap{gap:44px;}
  .about-page .wrap{padding:0 40px;}
}
@media (max-width: 480px){
  .page-head-blob{width:64px!important;}
  .about-portrait-blob{width:68px!important;}
  .about-page .wrap{padding:0 26px;}
}