:root{
  --bg:#000;
  --fg:#fff;
  --muted:#6e6e6e;
  --accent:#edff00;
  --line: rgba(255,255,255,.15);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter', sans-serif;
}
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1400px; margin:0 auto; padding:0 40px; }

/* ---- logo header ---- */
header.logo-wrap{
  max-width:1400px; margin:0 auto; padding:20px 40px 0;
  box-sizing:border-box;
}
header.logo-wrap svg{
  width:calc(100% + 40px);
  height:auto;
  margin-left:-20px;
  display:block;
  cursor:default;
}
header.logo-wrap svg *{
  transform-origin:center center;
  transform-box:fill-box;
  transition:transform 180ms ease, fill 180ms ease, stroke 180ms ease;
  will-change:transform;
}
header.logo-wrap svg path,
header.logo-wrap svg g{ pointer-events:all; }
#base > path:hover,
#base > g:hover{
  transform:rotate(var(--rot, 2deg)) translate(var(--tx, 8px), var(--ty, -8px));
}
#base > path:hover,
#base > path:hover *,
#base > g:hover,
#base > g:hover *{
  fill:var(--accent) !important;
  stroke:var(--accent) !important;
}

/* ---- nav ---- */
nav.main-nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 40px;
  margin:0 auto 70px;
  max-width:1400px;
  position:sticky; top:0; z-index:100;
  background:transparent;
}
nav.main-nav a{
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:9px 22px;
  font-size:13px;
  background:var(--bg);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
nav.main-nav a:hover{ background:var(--accent); color:#000; border-color:var(--accent); }
nav.main-nav a.current{ background:var(--accent); color:#000; border-color:var(--accent); }

/* ---- hero (home) ---- */
.hero{ padding:20px 0 110px; }
.hero p{
  width:calc((100% - 40px) / 2);
  margin-left:calc(50% + 20px);
  font-size:16px;
  line-height:1.55;
  color:#cfcfcf;
}

/* ---- projects grid (home + works index) ---- */
.projects{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:70px 40px;
  padding-bottom:150px;
}
.projects.page-top{ padding-top:10px; }
.project .row{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px; gap:12px;
}
.project h3{ font-size:17px; font-weight:600; }
.chips{ display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; }
.chip{
  background:rgba(255,255,255,.1); color:#c9c9c9; font-size:10px; font-weight:500;
  padding:3px 10px; border-radius:999px; white-space:nowrap;
}
.chip.outline{
  background:transparent; color:#cfcfcf;
  border:1px solid rgba(255,255,255,.3);
}
.project a.thumb{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:var(--ar, 4/3); background:#111;
}
.project.tall a.thumb{ max-width:480px; }
.project a.thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.project a.thumb .overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease;
  font-size:14px; font-weight:600;
}
.project a.thumb:hover img{ transform:scale(1.04); }
.project a.thumb:hover .overlay{ opacity:1; }
.project a.thumb.placeholder{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(255,255,255,.3); background:#0a0a0a;
  color:#666; font-size:14px;
}
.project a.thumb.placeholder:hover{ border-color:var(--accent); color:var(--accent); }

.page-title{
  font-size:56px; font-weight:800; letter-spacing:-.02em;
  padding:20px 0 70px;
}

/* ---- about ---- */
.about{ padding-bottom:90px; }
.about .label{ font-size:14px; color:#9a9a9a; margin-bottom:20px; }
.about p{
  width:calc((100% - 40px) / 2);
  margin-left:calc(50% + 20px);
  font-size:17px; line-height:1.6; color:#e6e6e6;
}
.about-deliverables{
  width:calc((100% - 40px) / 2);
  margin:38px 0 70px calc(50% + 20px);
}
.about-deliverables-label{ font-size:14px; color:#9a9a9a; margin-bottom:14px; }
.about-deliverables ul{ list-style:none; }
.about-deliverables li{
  display:flex; align-items:center; gap:12px;
  padding:8px 0; font-size:15px; color:#cfcfcf;
  cursor:default; transition:color .2s ease;
}
.about-deliverables .line{
  flex:1; height:1px; background:rgba(255,255,255,.15);
  transition:background .2s ease;
}
.about-deliverables .dot{
  width:4px; height:4px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.3); transition:background .2s ease;
}
.about-deliverables li:hover{ color:var(--accent); }
.about-deliverables li:hover .line,
.about-deliverables li:hover .dot{ background:var(--accent); }

.about-carousel{ width:100%; }
.about-carousel-controls{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.about-carousel-count{ font-size:13px; color:#9a9a9a; }
.about-carousel-controls > div{ display:flex; gap:10px; }
.about-carousel-arrow{
  width:48px; height:48px; border:1px solid rgba(255,255,255,.35);
  border-radius:50%; background:transparent; color:#fff;
  font:inherit; font-size:22px; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.about-carousel-arrow:hover{
  background:var(--accent); border-color:var(--accent);
  color:#000; transform:scale(1.05);
}
.about-carousel-frame{ width:100%; overflow:hidden; background:transparent; }
.about-carousel-track{ display:flex; gap:16px; align-items:flex-start; }
.about-carousel figure{
  flex:0 0 auto; overflow:hidden; background:transparent;
}
.about-carousel img,
.about-carousel video{ width:100%; height:100%; object-fit:contain; display:block; }
.about-carousel-thumbnails{
  display:none;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.about-carousel-thumbnail{
  aspect-ratio:1/1;
  overflow:hidden;
  border:1px solid var(--line);
  background:#111;
  padding:0;
  cursor:pointer;
  opacity:.55;
  transition:opacity .2s ease, border-color .2s ease;
}
.about-carousel-thumbnail img,
.about-carousel-thumbnail video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.about-carousel-thumbnail:hover,
.about-carousel-thumbnail.active{
  opacity:1;
  border-color:var(--accent);
}

/* ---- contact ---- */
.contact{ padding:70px 0 110px; }
.contact p{
  width:calc((100% - 32px) / 3);
  margin-left:calc(66.6667% + 10.6667px);
  font-size:16px; line-height:1.5; color:#e6e6e6; margin-bottom:22px;
}
.contact .row{
  width:calc((100% - 32px) / 3);
  margin-left:calc(66.6667% + 10.6667px);
  display:flex; gap:12px; justify-content:flex-start; flex-wrap:wrap;
}
.contact .email-pill,
.contact .copy-btn{
  border-radius:999px; padding:13px 24px; font-size:14px; font-family:inherit;
}
.contact .email-pill{ background:#fff; color:#000; font-weight:600; }
.contact .copy-btn{
  border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff;
  cursor:pointer; display:flex; align-items:center; gap:8px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.contact .copy-btn:hover{ background:var(--accent); color:#000; border-color:var(--accent); }

/* ---- shared footer ---- */
.site-footer{ border-top:1px solid var(--line); background:var(--bg); }
.site-footer-inner{
  max-width:1400px; margin:0 auto; padding:54px 40px 28px;
}
.site-footer-top{
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
  padding-bottom:70px;
}
.site-footer-heading{
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  column-gap:36px;
  align-items:start;
}
.site-footer-label{ color:#9a9a9a; font-size:13px; margin-bottom:14px; }
.site-footer-logo{
  grid-column:1; grid-row:2;
  display:block; width:210px; max-width:100%;
  height:auto; margin:0; align-self:center;
  transform:translateY(-6px);
}
.site-footer-label,
.site-footer-heading p{ grid-column:2; }
.site-footer-heading p{
  max-width:480px; font-size:clamp(28px,4vw,56px);
  font-weight:800; line-height:1; letter-spacing:-.04em;
}
.site-footer-links{
  width:100%; max-width:420px; justify-self:end;
  align-self:center; transform:translateY(10px);
  display:flex; flex-direction:column; align-items:flex-start;
}
.site-footer-links a{
  width:100%; padding:13px 0; border-bottom:1px solid var(--line);
  font-size:15px; transition:color .2s ease, padding-left .2s ease;
}
.site-footer-links a:hover{ color:var(--accent); padding-left:8px; }
.site-footer-bottom{
  border-top:1px solid var(--line); padding-top:22px;
  display:flex; justify-content:space-between; gap:20px;
  color:#9a9a9a; font-size:12px;
}
.site-footer-bottom a{ transition:color .2s ease; }
.site-footer-bottom a:hover{ color:var(--accent); }

/* ---- case study (project detail) pages ---- */
nav.main-nav.standalone{ padding-top:34px; }

.case-hero-image{
  position:relative; overflow:hidden;
  margin-bottom:60px; background:#111;
  aspect-ratio:var(--ar, 16/9);
}
.case-hero-image img, .case-hero-image video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.case-hero-image .scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);
}
.case-hero-image h1{
  position:absolute; left:32px; right:32px; bottom:28px;
  font-size:56px; font-weight:800; letter-spacing:-.02em; color:#fff;
}
.case-hero-image.placeholder{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(255,255,255,.3); background:#0a0a0a;
}
.case-hero-image.placeholder .ph-label{
  color:#666; font-size:15px; letter-spacing:.02em;
}
.case-hero-image.placeholder h1{ color:#fff; }

.case-info{ padding-bottom:24px; }
.case-info .eyebrow{ font-size:14px; color:#9a9a9a; margin-bottom:20px; }
.case-info .content-row{ display:flex; gap:40px; align-items:flex-start; }
.case-info .info-widget-col{
  flex:1; display:flex; flex-direction:column; align-items:center;
  margin-top:30px;
}
.case-info .info-widget{
  width:460px; max-width:100%; aspect-ratio:1/1;
  background:#000; overflow:hidden;
}
.case-info .info-widget iframe{ width:100%; height:100%; border:0; display:block; }
.case-info .widget-hint{
  margin-top:16px; font-size:12px; color:var(--accent); letter-spacing:.02em; text-align:center;
}
.case-info .right-col{ margin-left:auto; width:700px; max-width:100%; }
.case-info .info-row{
  display:grid; grid-template-columns:56px 1fr; gap:24px; align-items:start;
}
.case-info .year-label{
  display:inline-block;
  background:var(--accent); color:#000; font-weight:700;
  font-size:12px; padding:4px 12px; border-radius:999px;
  white-space:nowrap;
}
.case-info .desc{
  font-size:17px; line-height:1.6; color:#cfcfcf;
  white-space:pre-line;
}

.deliverables{ display:flex; padding-bottom:16px; }
.deliverables .d-grid{
  margin-left:auto; width:700px; max-width:100%;
  display:grid; grid-template-columns:56px 1fr; gap:24px;
}
.deliverables .d-label{ font-size:14px; color:#9a9a9a; margin-bottom:14px; }
.deliverables .d-list{ list-style:none; }
.deliverables .d-list li{
  display:flex; align-items:center; gap:12px;
  padding:6px 0;
  font-size:15px; color:#cfcfcf; cursor:default;
  transition:color .2s ease;
}
.deliverables .d-list .d-line{
  flex:1; height:1px; background:rgba(255,255,255,.15);
  transition:background .2s ease;
}
.deliverables .d-list .d-dot{
  width:4px; height:4px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.3);
  transition:background .2s ease;
}
.deliverables .d-list li:hover{ color:var(--accent); }
.deliverables .d-list li:hover .d-line{ background:var(--accent); }
.deliverables .d-list li:hover .d-dot{ background:var(--accent); }

.case-gallery{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  align-items:stretch;
  padding-top:10px; padding-bottom:80px;
}
.case-gallery figure{ overflow:hidden; background:#111; aspect-ratio:var(--ar, 1/1); }
.case-gallery figure.full{ grid-column:1 / -1; }
.case-gallery img, .case-gallery video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.case-gallery iframe{
  width:100%; height:100%; border:0; display:block;
}
.case-gallery + .case-gallery{ padding-top:0; }

.case-embed{
  width:100%; aspect-ratio:16/9; background:#111;
  margin-bottom:30px; border:1px solid var(--line);
}
.case-embed iframe{ width:100%; height:100%; display:block; border:0; }

.phone-mockup-wrap{
  display:flex; justify-content:center;
  padding:20px 0 60px;
}
.phone-mockup{
  position:relative;
  width:320px; max-width:100%;
  aspect-ratio:9/19.5;
  background:linear-gradient(160deg, #2b2b2b, #0a0a0a);
  border-radius:52px;
  padding:14px;
  box-shadow:0 0 0 2px rgba(255,255,255,.08) inset, 0 50px 100px rgba(0,0,0,.55);
}
.phone-mockup::before{
  content:'';
  position:absolute; top:90px; left:-3px;
  width:3px; height:60px; background:#1c1c1c; border-radius:2px 0 0 2px;
}
.phone-mockup::after{
  content:'';
  position:absolute; top:170px; left:-3px;
  width:3px; height:90px; background:#1c1c1c; border-radius:2px 0 0 2px;
}
.phone-mockup .screen{
  position:relative;
  width:100%; height:100%;
  border-radius:38px;
  overflow:hidden;
  background:#fff;
}
.phone-mockup .screen iframe{
  width:100%; height:100%; border:0; display:block;
}
.experience-placeholder{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  background:#111;
}
.experience-placeholder[hidden]{ display:none; }
.experience-placeholder img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.45);
}
.experience-launch{
  position:relative; z-index:1;
  border:0; border-radius:999px;
  padding:12px 18px;
  background:var(--accent); color:#000;
  font:600 12px/1 'Inter', sans-serif;
  cursor:pointer;
}
.experience-launch:hover{ transform:scale(1.03); }
.reel-player{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:#111;
}
.reel-figure{
  padding:12px;
  border:1px solid rgba(237,255,0,.4);
  background:#0b0b0b !important;
}
.reel-figure .reel-player{
  border:1px solid rgba(255,255,255,.15);
}
.reel-player video{ width:100%; height:100%; object-fit:cover; display:block; }
.reel-launch{
  position:absolute; z-index:1;
  border:0; border-radius:999px;
  padding:13px 20px;
  background:var(--accent); color:#000;
  font:600 12px/1 'Inter', sans-serif;
  cursor:pointer;
}
.reel-launch[hidden]{ display:none; }
.reel-launch:hover{ transform:scale(1.03); }
.case-note{
  border:1px solid var(--line); border-radius:14px;
  padding:22px 26px; margin-bottom:60px;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  flex-wrap:wrap;
}
.case-note p{ color:#cfcfcf; font-size:15px; max-width:520px; }
.case-note a{
  border:1px solid rgba(255,255,255,.35); border-radius:999px;
  padding:10px 20px; font-size:13px; white-space:nowrap;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.case-note a:hover{ background:var(--accent); color:#000; border-color:var(--accent); }

.project-carousel{
  border-top:1px solid var(--line);
  padding:50px 0 110px;
}
.carousel-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}
.carousel-kicker{ font-size:14px; color:#9a9a9a; margin-bottom:8px; }
.carousel-header h2{ font-size:32px; font-weight:800; letter-spacing:-.02em; margin:0; }
.carousel-controls{ display:flex; gap:10px; }
.carousel-arrow{
  width:48px; height:48px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:transparent; color:#fff;
  font:inherit; font-size:22px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.carousel-arrow:hover{ background:var(--accent); border-color:var(--accent); color:#000; transform:scale(1.05); }
.carousel-viewport{ overflow:hidden; }
.carousel-track{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.carousel-card{ display:block; min-width:0; }
.carousel-card h3{
  font-size:18px; font-weight:700; margin:14px 0 0;
  transition:color .2s ease;
}
.carousel-image{ position:relative; overflow:hidden; aspect-ratio:4/3; background:#171717; }
.carousel-image img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s ease, filter .3s ease;
}
.carousel-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.48);
  color:#fff; font-size:16px; font-weight:600;
  opacity:0;
  transition:opacity .25s ease;
}
.carousel-card:hover .carousel-overlay,
.carousel-card:focus-visible .carousel-overlay{ opacity:1; }
.carousel-card:hover img{ transform:scale(1.04); filter:brightness(.8); }
.carousel-card:hover h3{ color:var(--accent); }

@media (max-width:820px){
  .wrap{ padding:0 24px; }
  nav.main-nav{
    padding:20px 24px;
    margin-bottom:50px;
    flex-wrap:nowrap;
    gap:6px;
  }
  nav.main-nav a{
    padding:8px 13px;
    font-size:12px;
  }
  .projects{ grid-template-columns:1fr; gap:50px; }
  .project.tall a.thumb{ max-width:100%; }
  .hero p, .about p, .about-deliverables, .contact p, .contact .row{
    width:100%; margin-left:0; max-width:100%;
  }
  .contact .row{ justify-content:flex-start; }
  .about-carousel figure{ flex-basis:100%; }
  .about-carousel-thumbnails{ display:grid; }
  .about-carousel-arrow{ width:44px; height:44px; }
  .site-footer-inner{ padding:42px 24px 24px; }
  .site-footer-top{ grid-template-columns:1fr; gap:46px; padding-bottom:52px; }
  .site-footer-heading{ grid-template-columns:140px minmax(0,1fr); column-gap:24px; }
  .site-footer-logo{ width:140px; transform:translateY(-16px); }
  .site-footer-links{ justify-self:start; transform:none; }
  .site-footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; }
  .page-title{ font-size:36px; }
  .case-hero-image{ aspect-ratio:4/3; margin-bottom:34px; }
  .case-hero-image h1{ font-size:28px; left:20px; right:20px; bottom:18px; }
  .case-info .content-row{ flex-direction:column; gap:24px; }
  .case-info .info-widget-col{ width:100%; }
  .case-info .info-widget{ width:100%; max-width:340px; }
  .case-info .right-col{ margin-left:0; width:100%; }
  .case-info .info-row{
    grid-template-columns:1fr;
    gap:14px;
  }
  .case-info .desc{ font-size:16px; }
  .deliverables .d-grid{ margin-left:0; width:100%; grid-template-columns:1fr; gap:8px; }
  .case-gallery{
    display:grid !important;
    grid-template-columns:1fr;
    gap:16px !important;
    padding-bottom:48px;
  }
  .case-gallery figure,
  .case-gallery figure.hh{
    width:100% !important;
    height:auto !important;
    flex:none !important;
  }
  .case-gallery figure.instagram-shot{
    width:72% !important;
    justify-self:center;
    aspect-ratio:502 / 1000;
    background:transparent;
  }
  .case-gallery .instagram-shot img{
    height:100%;
    object-fit:contain;
  }
  .case-embed{
    height:min(78vh, 680px);
    min-height:520px;
    aspect-ratio:auto;
  }
  .yodel-gallery{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .yodel-gallery figure:nth-child(n+5){ grid-column:1 / -1; }
  .phone-mockup{ width:260px; }
  .project-carousel{ padding-bottom:70px; }
  .carousel-track{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:700px){
  .carousel-header{ align-items:center; }
  .carousel-header h2{ font-size:26px; }
  .carousel-track{ grid-template-columns:1fr; }
  .carousel-arrow{ width:44px; height:44px; }
}

@media (max-width:360px){
  .site-footer-heading{
    grid-template-columns:104px minmax(0,1fr);
    column-gap:18px;
  }
  .site-footer-label{
    grid-column:2;
    grid-row:1;
  }
  .site-footer-heading p{
    grid-column:2;
    grid-row:2;
    min-width:0;
    font-size:26px;
  }
  .site-footer-logo{
    grid-column:1;
    grid-row:2;
    width:104px;
    margin-top:0;
  }
}