/* ============================================================
   DKCD - Donna KaDell Creative Design
   Theme: black / white / #F04C23
   Type: Neue Haas Grotesk Text Pro (Helvetica Neue fallback)
   ============================================================ */

:root{
  --bg:#000000;
  --panel:#101010;
  --text:#FFFFFF;
  --mute:#9A9A98;
  --line:rgba(255,255,255,.16);
  --accent:#F04C23;
  --navbg:#000000;
  --navink:#FFFFFF;
  --gutter:clamp(20px,4vw,64px);
  --maxw:1440px;
  --font:'neue-haas-grotesk-text','Neue Haas Grotesk Text Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:rgba(240,76,35,.25);}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--accent);color:#fff;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
ul{list-style:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- utility type ---------- */
.mono{
  font-family:var(--font);
  font-size:12px;
  letter-spacing:.05em;
  color:var(--mute);
}
.mono--ink{color:var(--text);}
.accent{color:var(--accent);}

/* ---------- layout ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
section{position:relative;}
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid var(--text);
  padding-top:16px;
  margin-bottom:clamp(40px,6vw,80px);
}
.section-head h2{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(26px,3.4vw,44px);
  line-height:1;
  letter-spacing:-.01em;
}

/* ---------- header (light strip, per template) ---------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:16px var(--gutter);
  background:var(--navbg);
  color:var(--navink);
}
.nav-left{display:flex;gap:28px;}
.nav-right{display:flex;justify-content:flex-end;}
.site-header a{
  font-size:14px;
  font-weight:500;
  position:relative;
}
.site-header a:not(.logo-link)::after{
  content:"";position:absolute;left:0;bottom:-4px;
  width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.site-header a:not(.logo-link):hover::after{
  transform:scaleX(1);transform-origin:left;
}
.logo-link img{height:17px;width:auto;}

/* hamburger navigation, all viewports */
.nav-left,.nav-right{display:none;}
.site-header{grid-template-columns:auto 1fr auto;}
.logo-link{justify-self:start;}
.nav-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  grid-column:3;
  z-index:101;
  background:none;border:0;cursor:pointer;
  width:40px;height:40px;
  padding:8px;
  border-radius:999px;
}
.nav-toggle span{
  display:block;
  width:22px;height:2px;
  background:var(--navink);
  transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{display:none;}
.mobile-nav.open{
  display:flex;
  position:fixed;
  inset:0;
  background:var(--bg);
  color:var(--text);
  flex-direction:column;
  justify-content:center;
  padding:var(--gutter);
  gap:26px;
  z-index:99;
}
.mobile-nav.open a{font-size:clamp(22px,3.4vw,34px);font-weight:500;}

/* ---------- hero media block ---------- */
.hero-media{
  margin-top:57px; /* header height */
  background:#000;
  position:relative;
  display:flex;
  flex-direction:column;
}
.hero-stage{
  min-height:calc(88svh - 57px);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:0;
  overflow:hidden;
}
.hero-stage video,
.hero-stage img,
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* services line at the base of the hero (per template) */
.marquee{
  border-top:1px solid var(--line);
  overflow:hidden;
  padding:18px 0;
  white-space:nowrap;
}
.marquee-track{
  display:inline-flex;
  animation:marquee 48s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(15px,1.9vw,26px);
  letter-spacing:-.01em;
  display:inline-flex;
  align-items:center;
  color:var(--text);
  white-space:nowrap;
}
/* asterisk sits centered between each pair of names */
.marquee-track span::after{
  content:"✳";
  color:var(--accent);
  font-size:.7em;
  line-height:1;
  display:inline-block;
  margin:0 clamp(16px,2.4vw,34px);
  transform:translateY(-1px);
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- buttons (all rounded) ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--text);
  color:var(--bg);
  font-family:var(--font);
  font-weight:600;
  font-size:15px;
  line-height:1;
  padding:16px 30px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .2s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--accent);color:#fff;transform:translateY(-1px);}
.nav-toggle,.faq-q{border-radius:999px;}

/* ---------- services block ---------- */
.services-block{
  border-top:1px solid var(--line);
  padding:clamp(90px,12vw,160px) 0;
}
.services-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,100px);
  align-items:start;
}
.services-media{
  aspect-ratio:1/1;
  border-radius:14px;
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
}
.services-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.services-grid h2{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(32px,4.6vw,64px);
  line-height:1;
  letter-spacing:-.025em;
  margin-top:16px;
}
.services-copy{
  font-size:clamp(16px,1.4vw,19px);
  line-height:1.65;
  color:#CFCFCC;
  max-width:60ch;
  margin-bottom:20px;
}
.services-grid .btn{margin-top:10px;}
@media (max-width:860px){.services-grid{grid-template-columns:1fr;}}

/* ---------- statement ---------- */
.statement{
  padding:clamp(90px,12vw,170px) 0;
}
.statement-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(32px,6vw,110px);
  align-items:start;
}
.statement h1{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(42px,5.6vw,84px);
  line-height:1.02;
  letter-spacing:-.025em;
}
.statement .subhead{
  margin-top:clamp(16px,2vw,26px);
  font-size:clamp(18px,2vw,28px);
  font-weight:400;
  color:var(--text);
  letter-spacing:-.01em;
}
.statement .lede{
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.55;
  color:var(--text);
  max-width:52ch;
  padding-top:clamp(4px,1vw,14px);
}
.statement .lede strong{font-weight:700;}
@media (max-width:860px){
  .statement-grid{grid-template-columns:1fr;}
}

/* ---------- work ---------- */
.work{padding-bottom:clamp(80px,10vw,150px);}
.work-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);
}
.work-card{position:relative;display:block;}
.work-card.span-2{grid-column:span 2;}
@media (max-width:760px){
  .work-grid{grid-template-columns:1fr;}
  .work-card.span-2{grid-column:span 1;}
}
.work-media{
  position:relative;
  aspect-ratio:4/3;
  background:var(--panel);
  border:1px solid var(--line);
  overflow:hidden;
}
.work-card.span-2 .work-media{aspect-ratio:16/8;}
@media (max-width:760px){
  .work-card.span-2 .work-media{aspect-ratio:4/3;}
}
.work-media svg,.work-media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.work-card:hover .work-media svg,
.work-card:hover .work-media img{transform:scale(1.035);}
.ph-label{
  position:absolute;
  bottom:12px;right:12px;
  font-family:var(--font);
  font-size:11px;letter-spacing:.05em;
  color:var(--mute);
  background:rgba(0,0,0,.7);
  padding:4px 8px;
}
.work-info{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding-top:14px;
}
.work-info h3{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(17px,1.8vw,24px);
  line-height:1.1;
  letter-spacing:-.01em;
}
.work-spec{
  font-size:12.5px;
  letter-spacing:.03em;
  color:var(--mute);
  margin-top:6px;
}
.work-idx{
  font-size:12px;
  letter-spacing:.05em;
  color:var(--mute);
  white-space:nowrap;
}
.work-card .view-cue{
  position:absolute;
  top:14px;left:14px;
  font-size:11px;letter-spacing:.05em;
  background:var(--accent);
  color:#fff;
  padding:6px 14px;
  border-radius:999px;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .3s ease, transform .3s ease;
}
.work-card:hover .view-cue{opacity:1;transform:translateY(0);}

/* ---------- capabilities ---------- */
.caps{
  border-top:1px solid var(--line);
  padding:clamp(90px,12vw,160px) 0;
}
.cap-row{
  display:grid;
  grid-template-columns:90px minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(16px,3vw,48px);
  align-items:baseline;
  padding:26px 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .35s cubic-bezier(.65,0,.35,1);
}
.cap-row:first-of-type{border-top:1px solid var(--line);}
.cap-row:hover{padding-left:14px;}
.cap-row:hover .cap-name{color:var(--accent);}
.cap-code{
  font-size:12px;letter-spacing:.05em;
  color:var(--mute);
}
.cap-name{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(20px,2.6vw,34px);
  line-height:1;
  letter-spacing:-.015em;
  transition:color .3s ease;
}
.cap-desc{
  font-size:15px;
  line-height:1.6;
  color:var(--mute);
  max-width:52ch;
}
@media (max-width:760px){
  .cap-row{grid-template-columns:60px 1fr;}
  .cap-desc{grid-column:2;}
}

/* ---------- about ---------- */
.about{padding:clamp(90px,12vw,170px) 0;border-top:1px solid var(--line);}
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,34rem) minmax(0,322px);
  gap:clamp(36px,5vw,80px);
  justify-content:start;
  align-items:start;
}
@media (max-width:860px){.about-grid{grid-template-columns:1fr;}}
.about h2{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(30px,4.4vw,58px);
  line-height:1.02;
  letter-spacing:-.02em;
  margin-bottom:28px;
}
.about p{
  max-width:56ch;
  margin-bottom:18px;
  color:#CFCFCC;
}
.about-portrait{
  position:relative;
  aspect-ratio:1/1;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  max-width:322px;
  width:100%;
  margin-left:0;
}
.about-stats{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  border-top:1px solid var(--text);
  padding-top:18px;
}
.about-stats .stat b{
  display:block;
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(18px,2vw,26px);
  line-height:1.1;
  letter-spacing:-.01em;
  margin-bottom:6px;
}

/* ---------- FAQ ---------- */
.faq{
  border-top:1px solid var(--line);
  padding:clamp(80px,10vw,150px) 0;
}
.faq-head{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(24px,4vw,80px);
  align-items:start;
  margin-bottom:clamp(36px,5vw,64px);
}
.faq-head h2{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(34px,5vw,72px);
  line-height:1;
  letter-spacing:-.025em;
}
.faq-head p{
  color:var(--mute);
  font-size:16px;
  max-width:38ch;
  padding-top:10px;
}
@media (max-width:760px){.faq-head{grid-template-columns:1fr;}}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  background:none;border:0;cursor:pointer;
  color:var(--text);
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(16px,1.5vw,19px);
  text-align:left;
  padding:24px 0;
  transition:color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.faq-q:hover{color:var(--accent);}
.faq-q:hover .faq-icon::before,
.faq-q:hover .faq-icon::after{background:var(--accent);}
.faq-icon{
  position:relative;
  width:16px;height:16px;
  flex:0 0 16px;
}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;background:var(--text);
  transition:transform .3s ease, opacity .3s ease;
}
.faq-icon::before{width:100%;height:2px;top:7px;}
.faq-icon::after{height:100%;width:2px;left:7px;}
.faq-item.open .faq-icon::after{transform:scaleY(0);}
.faq-a{
  overflow:hidden;
  max-height:0;
  transition:max-height .45s cubic-bezier(.65,0,.35,1);
}
.faq-a p{
  color:var(--mute);
  max-width:62ch;
  padding:0 0 26px;
  line-height:1.65;
}
.faq-a a{color:var(--accent);}

/* ---------- experience (about) ---------- */
.xp{
  border-top:1px solid var(--line);
  padding:clamp(80px,10vw,140px) 0;
}
.xp-row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) minmax(0,1.3fr);
  gap:clamp(16px,3vw,48px);
  align-items:baseline;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.xp-row:first-of-type{border-top:1px solid var(--line);}
.xp-year{font-size:13px;color:var(--mute);letter-spacing:.03em;}
.xp-co{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(17px,1.8vw,22px);
  letter-spacing:-.01em;
}
.xp-role{font-size:14px;color:var(--mute);}
@media (max-width:760px){
  .xp-row{grid-template-columns:110px 1fr;}
  .xp-role{grid-column:2;}
}

/* ---------- contact ---------- */
.contact{
  padding:clamp(100px,14vw,190px) 0 clamp(60px,8vw,110px);
  border-top:1px solid var(--line);
}
.contact .mono{margin-bottom:22px;display:block;}
.contact-headline{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(40px,8vw,124px);
  line-height:1;
  letter-spacing:-.03em;
}
.contact-headline a{
  color:var(--accent);
  transition:opacity .25s ease;
}
.contact-headline a:hover{opacity:.75;}
.contact-meta{
  margin-top:clamp(36px,5vw,64px);
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.contact-meta a{
  border-bottom:1px solid var(--accent);
  padding-bottom:2px;
  font-size:15px;
}

/* ---------- footer ---------- */
.site-footer{
  background:var(--navbg);
  color:var(--navink);
  padding:clamp(60px,9vw,120px) var(--gutter) 40px;
}
.footer-connect{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(40px,7vw,120px);
  align-items:start;
  padding-bottom:clamp(50px,7vw,90px);
}
@media (max-width:860px){.footer-connect{grid-template-columns:1fr;gap:48px;}}

.connect-label{
  display:block;
  font-family:var(--font);
  font-weight:700;
  font-size:18px;
  margin-bottom:18px;
}
.signup-row{
  display:flex;
  gap:14px;
  align-items:stretch;
  max-width:560px;
  margin-bottom:clamp(36px,5vw,56px);
}
.signup-input{
  flex:1 1 auto;
  background:#1A1A1A;
  border:1px solid var(--line);
  border-radius:999px;
  padding:0 24px;
  height:54px;
  font-family:var(--font);
  font-size:15px;
  color:var(--navink);
}
.signup-input::placeholder{color:#8A8A85;}
.signup-input:focus-visible{outline:2px solid var(--navink);outline-offset:2px;}
.signup-btn{
  flex:0 0 auto;
  height:54px;
  padding:0 38px;
}
.footer-bigmark{
  height:17px;
  width:auto;
}

.footer-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,56px);
}
.footer-col{display:flex;flex-direction:column;gap:10px;}
.footer-col a{
  font-family:var(--font);
  font-weight:500;
  font-size:clamp(18px,1.7vw,22px);
  color:var(--navink);
  transition:color .25s ease;
  width:fit-content;
}
.footer-col a:hover{color:var(--accent);}
.footer-social{margin-top:10px;color:var(--navink);}
.footer-social svg{display:block;}

.footer-base{
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:26px;
}
.footer-legal{
  color:#6E6E68;
  font-size:12px;
  line-height:1.7;
  max-width:130ch;
}
.footer-copy{margin-top:16px;font-weight:500;color:var(--navink);}


/* ---------- case study page ---------- */
.case-hero{padding:150px 0 clamp(40px,6vw,70px);}
.case-hero .back{
  font-size:13px;letter-spacing:.03em;
  display:inline-block;
  margin-bottom:36px;
  border-bottom:1px solid var(--accent);
  padding-bottom:2px;
}
.case-hero h1{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(36px,7vw,104px);
  line-height:1;letter-spacing:-.025em;
  margin-bottom:clamp(28px,4vw,48px);
}
.spec-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:18px;
  border-top:1px solid var(--text);
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
.spec-strip .spec b{
  display:block;
  font-weight:500;
  font-size:12px;letter-spacing:.05em;
  color:var(--mute);
  margin-bottom:6px;
}
.spec-strip .spec span{font-size:15px;font-weight:500;}

.case-body{padding:clamp(50px,7vw,100px) 0 clamp(80px,10vw,140px);}
.case-section{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(24px,4vw,72px);
  padding:clamp(36px,5vw,60px) 0;
  border-top:1px solid var(--line);
}
@media (max-width:760px){.case-section{grid-template-columns:1fr;}}
.case-section h2{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(20px,2.4vw,30px);
  line-height:1;letter-spacing:-.01em;
}
.case-section p{margin-bottom:16px;color:#CFCFCC;max-width:62ch;}
.case-figure{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  aspect-ratio:16/9;
  margin:clamp(20px,3vw,36px) 0;
  overflow:hidden;
}
.case-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* product shot floating on black - no frame, contained, not cropped */
.case-figure.product{
  background:#000;
  border:0;
  aspect-ratio:auto;
}
.case-figure.product img{
  width:100%;
  height:auto;
  object-fit:contain;
}
/* ideation shot on white - design-board treatment */
.case-figure.white{
  background:#FFFFFF;
  border:0;
  aspect-ratio:auto;
}
.case-figure.white img{
  width:100%;
  height:auto;
  object-fit:contain;
}

/* ideation gallery */
.ideation{
  padding:clamp(40px,6vw,80px) 0 0;
}
.ideation-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);
}
.ideation-grid .ide{
  background:#FFFFFF;
  overflow:hidden;
}
.ideation-grid .ide.span-2{grid-column:span 2;}
.ideation-grid .ide img{
  width:100%;height:auto;display:block;
}
@media (max-width:680px){
  .ideation-grid{grid-template-columns:1fr;}
  .ideation-grid .ide.span-2{grid-column:span 1;}
}
.case-next{
  border-top:1px solid var(--line);
  padding:clamp(50px,7vw,80px) 0;
}
.case-next a{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(26px,4.6vw,58px);
  line-height:1;letter-spacing:-.02em;
}
.case-next a .accent{transition:opacity .25s ease;}
.case-next a:hover .accent{opacity:.75;}

.head-link{transition:color .25s ease;}
.head-link:hover{color:var(--accent);}

/* ---------- page transition overlay ---------- */
.page-transition{
  position:fixed;
  inset:0;
  z-index:300;
  background:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(101%);
  pointer-events:none;
  will-change:transform;
}
.page-transition img{height:22px;width:auto;}
/* with JS + motion, the overlay covers on load and GSAP wipes it away */
html:not(.no-js):not(.motion-off) .page-transition{transform:translateY(0);}
.motion-off .page-transition{display:none;}

/* ---------- about page ---------- */
.about-hero{
  margin-top:57px;
  padding:clamp(90px,12vw,170px) 0 clamp(40px,6vw,80px);
}
.about-hero h1{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(40px,7vw,104px);
  line-height:1;
  letter-spacing:-.025em;
  margin:18px 0 clamp(22px,3vw,34px);
}
.about-lede{
  font-size:clamp(17px,1.6vw,22px);
  line-height:1.55;
  max-width:58ch;
  color:#CFCFCC;
}
.values{
  border-top:1px solid var(--line);
  padding:clamp(80px,10vw,140px) 0;
}

/* ---------- reveal helper ---------- */
.reveal{opacity:0;transform:translateY(34px);}
.no-js .reveal,.motion-off .reveal{opacity:1;transform:none;}

/* ============================================================
   PAGE THEME: LIGHT (e.g. K&N case study)
   White page so packaging pops. Scoped to body.theme-light.
   ============================================================ */
body.theme-light{
  background:#FFFFFF;
  color:#111111;
}
body.theme-light ::selection{background:var(--accent);color:#fff;}

/* header stays light (already is), keep logo black */
body.theme-light .site-header{
  background:#FFFFFF;
  color:#111111;
  border-bottom:1px solid rgba(17,17,17,.1);
}

/* mono labels, mutes, lines -> dark-on-light equivalents */
body.theme-light .mono{color:#6E6E68;}
body.theme-light .mono--ink{color:#111111;}

/* case hero */
body.theme-light .case-hero h1{color:#111111;}
body.theme-light .case-hero .back{
  color:#111111;
  border-bottom-color:var(--accent);
}
body.theme-light .spec-strip{
  border-top-color:#111111;
  border-bottom-color:rgba(17,17,17,.16);
}
body.theme-light .spec-strip .spec b{color:#6E6E68;}
body.theme-light .spec-strip .spec span{color:#111111;}

/* body sections */
body.theme-light .case-body{color:#111111;}
body.theme-light .case-section{border-top-color:rgba(17,17,17,.14);}
body.theme-light .case-section h2{color:#111111;}
body.theme-light .case-section p{color:#3A3A36;}

/* figures: frames disappear into white, just the product */
body.theme-light .case-figure{
  background:#FFFFFF;
  border:0;
}
body.theme-light .ideation-grid .ide{background:#FFFFFF;}

/* next-project block */
body.theme-light .case-next{border-top-color:#111111;}
body.theme-light .case-next a{color:#111111;}

/* footer stays black across all pages */
body.theme-light .site-footer{
  background:#000000;
  color:#FFFFFF;
}

/* ---------- folio grid (thumbnail portfolio) ---------- */
.folio-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(6px,.75vw,12px) clamp(4px,.55vw,8px);
}
@media (max-width:1100px){
  .folio-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px){
  .folio-grid{grid-template-columns:1fr;}
}
.folio-card{
  display:block;
  text-align:left;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  color:inherit;
  font-family:inherit;
}
.folio-media{
  position:relative;
  aspect-ratio:1/1;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.folio-media img,
.folio-media svg{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.folio-card:hover .folio-media img,
.folio-card:hover .folio-media svg{transform:scale(1.04);}
.folio-name{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.15;
  letter-spacing:-.01em;
  margin-top:16px;
}
.folio-desc{
  font-size:14px;
  line-height:1.5;
  color:var(--mute);
  margin-top:8px;
  max-width:34ch;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vw,56px);
  opacity:0;
  transition:opacity .3s ease;
}
.lightbox.open{opacity:1;}
.lightbox[hidden]{display:none;}
.lightbox-frame{
  max-width:min(1600px,100%);
  max-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin:0;
}
.lightbox-img{
  max-width:100%;
  max-height:calc(100vh - 140px);
  width:auto;height:auto;
  display:block;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lightbox-caption{
  font-size:12.5px;
  letter-spacing:.03em;
  color:#c9c9c7;
}
.lightbox-close{
  position:absolute;
  top:20px;right:24px;
  font-family:var(--font);
  font-size:12px;letter-spacing:.05em;
  background:var(--accent);
  color:#fff;
  border:0;
  padding:8px 18px;
  border-radius:999px;
  cursor:pointer;
}


/* ---------- design tools nav accent ---------- */
.nav-tools{color:var(--accent) !important;font-weight:700;}
.site-header .nav-left .nav-tools::after{background:var(--accent);}
.mobile-nav .nav-tools{color:var(--accent);}


/* ---------- design tools: typeset numbered tiles ---------- */
.tool-type{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(18px,1.8vw,26px);
  overflow:hidden;
}
.tool-cat{color:var(--mute);}
.tool-num{
  font-weight:700;
  font-size:clamp(110px,11vw,190px);
  line-height:.78;
  letter-spacing:-.05em;
  color:var(--text);
  align-self:flex-end;
  transform:translate(6%,10%);
  transition:color .5s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  font-variant-numeric:tabular-nums;
}
.tool-num em{font-style:normal;color:#3a3a3a;}
.folio-card:hover .tool-num{color:var(--accent);transform:translate(6%,10%) scale(1.04);}
.folio-card:hover .tool-num em{color:#3a3a3a;}

/* thumbnail behind the tool number */
.tool-thumb{position:absolute;inset:0;z-index:0;}
.has-thumb .tool-cat,
.has-thumb .tool-num{position:relative;z-index:1;}
.has-thumb .tool-num{
  font-size:clamp(26px,2.9vw,42px);
  letter-spacing:.06em;
  transform:none;
  text-shadow:0 2px 20px rgba(0,0,0,.65);
}
.folio-card:hover .has-thumb .tool-num{transform:scale(1.03);}
.has-thumb .tool-cat{text-shadow:0 1px 12px rgba(0,0,0,.7);}


/* ---------- work grid: grayscale to color on hover ---------- */
.folio-media img{
  filter:grayscale(1);
  transition:filter .6s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.folio-card:hover .folio-media img,
.folio-card:focus-visible .folio-media img{
  filter:grayscale(0);
}


/* ---------- brands ---------- */
.brands{
  padding:clamp(56px,8vw,120px) 0;
  border-top:1px solid var(--line);
  overflow:hidden;
}
.logo-marquee{
  display:flex;
  flex-direction:column;
  gap:clamp(14px,2vw,28px);
}
.logo-row{overflow:hidden;}
.logo-track{
  display:flex;
  gap:clamp(14px,2vw,28px);
  width:max-content;
  animation:logo-scroll-left 60s linear infinite;
  will-change:transform;
}
.logo-track--rev{
  animation:logo-scroll-right 60s linear infinite;
}
.logo-row:hover .logo-track{animation-play-state:paused;}
@keyframes logo-scroll-left{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@keyframes logo-scroll-right{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}
.logo-cell{
  flex:0 0 auto;
  width:clamp(180px,17vw,236px);
  display:grid;
  place-items:center;
  aspect-ratio:8/5;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:clamp(16px,2vw,28px);
}
.logo-cell img{
  width:100%;
  max-width:150px;
  max-height:52px;
  height:auto;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.5;
  transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.logo-cell:hover img{
  opacity:1;
  transform:scale(1.05);
}


/* ---------- tools: category group labels ---------- */
.group-label{
  grid-column:1/-1;
  margin:clamp(20px,3vw,40px) 0 0;
  color:var(--mute);
  font-weight:500;
}
.group-label:first-child{margin-top:0;}


/* ---------- work grid alignment hardening ---------- */
.folio-grid{align-items:start;}
.folio-card{width:100%;margin:0;}
.folio-media{width:100%;aspect-ratio:1/1;}


/* ---------- services alignment ---------- */
.services-grid h2{margin-top:0;}
.services-grid .services-copy:first-child{margin-top:0;}
.services-grid > div > p:first-child{margin-top:0;}


/* ---------- process steps (card grid) ---------- */
.step-card{cursor:default;}
.step-card .folio-media{
  background:none;
  border:0;
  border-radius:0;
  aspect-ratio:auto;
  padding:0;
  display:block;
  overflow:visible;
  margin-bottom:clamp(10px,1.4vw,16px);
}
.step-card .tool-cat{
  display:block;
  margin-bottom:clamp(6px,.8vw,10px);
}
.step-card .tool-num{
  display:block;
  align-self:auto;
  transform:none;
  font-size:clamp(36px,4vw,58px);
}
.step-card:hover .tool-num{color:var(--accent); transform:none;}
.step-card:hover .tool-num em{color:#3a3a3a;}
.step-card .folio-name{transition:color .3s ease;}
.step-card:hover .folio-name{color:var(--accent);}
/* remove dividers above the Process section and tighten the gap */
#process{border-top:0; padding-top:0;}
#process .section-head{border-top:0; padding-top:0;}
.step-next{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:clamp(12px,1.4vw,18px);
  color:var(--mute);
  letter-spacing:.06em;
  font-size:12px;
}
.step-next .arrow{
  font-size:15px;
  line-height:1;
  transition:transform .3s ease;
}
.step-card:hover .step-next{color:var(--accent);}
.step-card:hover .step-next .arrow{transform:translateX(4px);}




/* ---------- hero: three long image columns, staggered ---------- */
.hero-media{background:#000000;}
.hero-cols{
  min-height:calc(94svh - 57px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,28px);
  padding:clamp(14px,1.8vw,32px) clamp(14px,1.8vw,32px);
  align-items:stretch;
}
.hero-col{
  background:#101010;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.hero-col .ph-note{
  font-size:12px;
  color:var(--mute);
}
/* drop an <img> in each column later; behavior is pre-wired */
.hero-col img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(1);
  transition:filter .6s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.hero-col:hover img{
  filter:grayscale(0);
  transform:scale(1.03);
}
@media (max-width:700px){
  .hero-cols{grid-template-columns:1fr;min-height:auto;padding-top:14px;}
  .hero-col{min-height:46svh;}
}


/* ---------- marquee: back on black ---------- */
.marquee{background:#000;}
.marquee-track span{color:var(--text);}


/* ---------- unified headline size (all pages) ---------- */
h1, h2, h3 { font-size:clamp(32px,4.6vw,64px) !important; }

/* ---------- restore item/card titles to original size ---------- */
.cap-name       { font-size:clamp(20px,2.6vw,34px) !important; }
.folio-name     { font-size:clamp(17px,1.5vw,21px) !important; }
.group-label    { font-size:12px !important; }
.case-section h2{ font-size:clamp(20px,2.4vw,30px) !important; }

/* company names in experience list roll over to orange */
.xp-co{transition:color .25s ease;}
.xp-row:hover .xp-co{color:var(--accent);}

/* ---------- remove all solid white divider lines site-wide ---------- */
.section-head { border-top:0 !important; }
.about-stats  { border-top:0 !important; }
.spec-strip   { border-top:0 !important; }

/* grey divider between page content and the footer */
.site-footer{ border-top:1px solid var(--line); }

/* footer mailing address under the wordmark */
.footer-address{
  margin-top:clamp(16px,1.8vw,24px);
  font-style:normal;
  color:var(--mute);
  font-size:13px;
  line-height:1.7;
  letter-spacing:.01em;
}

/* studio lead statement */
.studio-lead{
  font-size:clamp(18px,1.9vw,24px);
  font-weight:600;
  color:var(--text);
  line-height:1.35;
  letter-spacing:-.01em;
  margin-bottom:clamp(18px,2vw,26px);
}

/* Work page: five-column thumbnail grid */
.work-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
@media (max-width:1200px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:760px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:460px){.work-grid{grid-template-columns:1fr;}}

/* Work thumbnails: orange title on hover (matches site rollover) */
.work-grid .folio-name{transition:color .3s ease;}
.work-grid .folio-card:hover .folio-name{color:var(--accent);}

/* process track sub-headings sit below the section header, not competing with it */
.process-track-title{
  font-size:clamp(22px,2.4vw,32px) !important;
  letter-spacing:-.01em;
  color:var(--text);
}

/* more breathing room under the services headline */
.services-grid h2{margin-bottom:clamp(24px,3vw,40px);}

/* full-bleed hero slideshow (cross-fade loop) */
.hero-slides{
  position:relative;
  width:100%;
  height:calc(92svh - 57px);
  min-height:440px;
  overflow:hidden;
  background:#000;
}
.hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 2s ease-in-out;
  will-change:opacity;
}
.hero-slide.is-active{opacity:1;}

/* slightly smaller work thumbnail titles */
.work-grid .folio-name{font-size:clamp(14px,1.2vw,17px) !important;}

/* footer nav: single column matching the hamburger menu */
.footer-links{grid-template-columns:1fr;}

/* LinkedIn icon inside the hamburger menu */
.mobile-nav.open .mobile-social{margin-top:8px;color:var(--text);}
.mobile-nav.open .mobile-social svg{display:block;}

/* studio: stat labels */
.about-stats .stat{
  font-size:13px;
  line-height:1.4;
  color:var(--mute);
  letter-spacing:.02em;
}

/* studio: selected clients strip */
.clients{
  border-top:1px solid var(--line);
  padding:clamp(70px,10vw,140px) 0;
}
.client-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px);
}
@media (max-width:900px){ .client-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:520px){ .client-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.client-grid .logo-cell{ width:auto; }

/* tone down the oversized numbers on the Design Tools library cards */
#tools .tool-num{ font-size:clamp(22px,2vw,34px) !important; letter-spacing:.06em !important; transform:none !important; }

/* keep the Design Tools library denser on medium screens (smaller cards) */
@media (max-width:1100px){ #tools .folio-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:680px){ #tools .folio-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:440px){ #tools .folio-grid{grid-template-columns:1fr;} }

/* Work page NDA note */
.work-nda{
  max-width:60ch;
  margin-top:clamp(18px,2vw,26px);
  padding-left:16px;
  border-left:2px solid var(--accent);
  color:var(--mute);
  font-size:14px;
  line-height:1.6;
}
.work-nda a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent);}
.work-nda a:hover{color:var(--accent);}

/* homepage reel scaled 25% smaller, kept in its column */
.services-media--sm{
  width:75%;
  max-width:75%;
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:860px){
  .services-media--sm{width:75%;margin:0 auto;}
}