:root{
  --font-display:'Onest', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --font-body:'Inter', sans-serif;
  --font-script:'Allura', cursive;
  --font-numeral:'Bowlby One SC', system-ui, sans-serif;

  --red:#C2262F;
  --taupe:#8C6F62;
  --ink:#1B1411;
  --paper:#FAF7F2;
  --copy-ink:#3A352F;
  --line-on-paper:rgba(27,20,17,.14);
  --line-on-ink:rgba(250,247,242,.16);
  --muted-on-red:rgba(255,255,255,.82);
  --muted-on-ink:rgba(250,247,242,.55);
  --muted-on-paper:#726B64;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}
body{background:var(--paper); color:var(--ink); font-family:var(--font-body); overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
ul{list-style:none;}
button{font:inherit; background:none; border:none; cursor:pointer; color:inherit;}

.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;}

/* ---------- generic scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; transition-delay:calc(var(--d,0) * 110ms);}
.reveal-stagger.is-in > *{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(.92); transition:opacity .8s ease, transform .8s ease;}
.reveal-scale.is-in{opacity:1; transform:scale(1);}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center;
  padding:20px clamp(20px,5vw,56px); background:var(--red); color:#fff;
  transition:background .35s ease;
}
.nav.is-scrolled{background:var(--ink);}
.nav-mark{font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.02em;}
.nav-links{display:flex; gap:clamp(20px,4vw,48px);}
.nav-links a{font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding-bottom:2px; border-bottom:1px solid transparent; transition:border-color .2s ease;}
.nav-links a:hover{border-color:currentColor;}
@media (max-width:560px){.nav-links{gap:14px;} .nav-links a{font-size:10px;}}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--red); color:#fff; padding:64px clamp(20px,5vw,56px) 65px; min-height:29.6vw; overflow:hidden;}
.hero-numeral{
  position:absolute; bottom:-110px; left:-11.7%; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--font-numeral); font-weight:400; color:var(--ink);
  font-size:clamp(11rem, 32vw, 460px); line-height:.92; letter-spacing:-.025em;
}
.hero-top{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-bottom:64px;}
.hero-tagline{font-family:var(--font-mono); font-size:13px; line-height:1.9; color:var(--muted-on-red);}
.hero-cats{display:flex; flex-direction:column; gap:4px; margin-top:108px; transform:translateX(50px);}
.hero-cats strong{font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.06em;}
.hero-cats span{display:block; font-family:var(--font-mono); font-size:12.5px; line-height:1.8; color:var(--muted-on-red);}
@media (max-width:820px){
  .hero-top{grid-template-columns:1fr; gap:28px;}
  .hero-numeral{bottom:-30px;}
  .hero-cats{transform:none; align-items:flex-end; text-align:right; margin-left:auto;}
}

.hero-word{
  position:absolute; bottom:0; left:clamp(20px,5vw,56px); right:clamp(20px,5vw,56px); z-index:1;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.6rem, 9.5vw, 7.2rem); line-height:.92; letter-spacing:-.025em;
  animation:heroIn 1s ease .1s both;
}
@keyframes heroIn{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){.hero-word{animation:none;}}

/* ---------- marquee ---------- */
.marquee{background:var(--ink); color:var(--paper); overflow:hidden; padding:18px 0; white-space:nowrap;}
.marquee-track{display:inline-flex;}
.marquee-track span{display:inline-flex; align-items:center; animation:marquee 26s linear infinite;}
.marquee-item{font-family:var(--font-display); font-weight:700; font-size:clamp(16px,2.6vw,26px); letter-spacing:-.01em; padding:0 26px;}
.marquee-item em{font-style:normal; color:var(--red);}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){
  .marquee-track span{animation:none;}
  .marquee-track span:nth-child(2){display:none;}
}

/* ---------- about intro (dark) ---------- */
.about-intro{position:relative; background:var(--ink); color:var(--paper); padding:110px clamp(20px,5vw,56px) 70px; overflow:hidden; display:flex; justify-content:center;}
.about-flourish{
  position:absolute; top:14%; left:50%; transform:translateX(-50%); width:min(150%,1400px);
  display:flex; justify-content:center;
  font-family:var(--font-script); font-size:clamp(6rem,23vw,330px); color:var(--red); opacity:.5;
  white-space:nowrap; z-index:0; pointer-events:none;
}
.about-intro-inner{position:relative; z-index:1; width:100%; max-width:760px; margin:0 auto; transform:translateY(-30px);}
.about-statement{
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem,4.4vw,46px);
  line-height:1.18; letter-spacing:-.01em; margin-top:18px;
}

.bleed-headline{position:relative; z-index:2; margin-top:0; padding:0 clamp(16px,4vw,40px);}
.bleed-headline span{
  display:block; font-family:var(--font-display); font-weight:800; color:var(--ink);
  font-size:clamp(2.3rem,6.3vw,91px); line-height:.9; letter-spacing:-.03em; white-space:nowrap;
}

/* ---------- about paragraph ---------- */
.about-copy{padding:60px clamp(20px,5vw,56px) 100px; display:flex; justify-content:flex-end;}
.about-copy-inner{max-width:620px; text-align:right; transform:translateY(-30px);}
.about-copy .eyebrow{color:var(--red); display:block; margin-bottom:22px;}
.about-copy p{font-family:var(--font-mono); font-style:italic; font-size:15px; line-height:1.85; color:var(--copy-ink);}
.about-copy p + p{margin-top:20px;}
@media (max-width:640px){.about-copy{justify-content:flex-start;} .about-copy-inner{text-align:left;}}

/* ---------- photo strip (colour on scroll) ---------- */
.photo-strip{display:flex; justify-content:center; align-items:center; padding:5.14% 0; background:var(--paper);}
.photo-strip img{width:min(729px,50.6vw); height:auto; filter:grayscale(100%);}

/* ---------- section heads ---------- */
.section-head{padding:100px clamp(20px,5vw,56px) 50px;}
.section-head .eyebrow{color:var(--red); display:block; margin-bottom:16px;}
.section-head h2{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,5.5vw,58px); letter-spacing:-.02em; max-width:16ch;}
.section-head p{font-family:var(--font-body); font-size:15px; color:var(--muted-on-paper); max-width:52ch; margin-top:16px;}

#work.section-head{padding-top:70px; padding-bottom:34px;}

/* ---------- showcase (fixed slideshow + clickable scaling list) ---------- */
.showcase-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:0 clamp(20px,5vw,56px) 70px; align-items:start;}
.showcase-sticky{position:sticky; top:80px;}
.showcase-stack{position:relative; width:100%; aspect-ratio:4/5; max-height:min(65vh,620px); overflow:hidden; background:var(--ink); margin:0 auto;}
.showcase-img{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .7s ease;}
.showcase-img.is-active{opacity:1;}
.showcase-img img{width:100%; height:100%; object-fit:cover;}
.showcase-img .bg-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.showcase-video-placeholder{position:relative; z-index:1; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:opacity .3s ease;}
.showcase-img.is-playing .showcase-video-placeholder{opacity:0; pointer-events:none;}
.showcase-video-placeholder .play-btn{
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.showcase-video-placeholder .play-btn span{font-family:var(--font-body); font-size:16px; color:var(--ink); margin-left:2px;}
.showcase-video-placeholder .placeholder-label{display:block; text-align:center; font-family:var(--font-mono); font-size:13px; letter-spacing:.04em;}
.showcase-dots{display:flex; gap:8px; margin-top:16px;}
.dot{width:8px; height:8px; border-radius:50%; background:var(--line-on-paper); transition:width .3s ease, background .3s ease;}
.dot.is-active{background:var(--red); width:24px; border-radius:5px;}

.showcase-list{display:flex; flex-direction:column;}
.showcase-item{
  padding:26px 4px; border-bottom:1px solid var(--line-on-paper); cursor:pointer;
  display:flex; align-items:center; gap:16px;
  opacity:.42; transform:scale(.95); transform-origin:left center;
  transition:opacity .4s ease, transform .4s ease;
}
.showcase-item.is-active{opacity:1; transform:scale(1.05);}
.showcase-item-num{font-family:var(--font-mono); font-size:12px; color:var(--red); flex-shrink:0;}
.showcase-item-title{font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2.4vw,27px); letter-spacing:-.01em;}
.showcase-item-arrow{margin-left:auto; font-family:var(--font-mono); font-size:15px; color:var(--red); opacity:0; transition:opacity .3s ease, transform .3s ease;}
.showcase-item.has-screen .showcase-item-arrow,
.showcase-item.has-link .showcase-item-arrow{opacity:1;}
.showcase-item.has-screen:hover .showcase-item-arrow,
.showcase-item.has-link:hover .showcase-item-arrow{transform:translate(2px,-2px);}
.showcase-item-link{display:flex; align-items:center; gap:16px; width:100%; color:inherit; text-decoration:none;}
@media (max-width:820px){
  .showcase-grid{grid-template-columns:1fr;}
  .showcase-sticky{position:static;}
}

/* ---------- footer ---------- */
.footer{background:var(--red); color:#fff; padding:70px clamp(20px,5vw,56px) 40px;}
.footer-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.25);}
.footer-grid strong{font-family:var(--font-mono); font-size:13px;}
.footer-grid span{display:block; font-family:var(--font-mono); font-size:12.5px; line-height:1.9; color:var(--muted-on-red);}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; font-family:var(--font-mono); font-size:12px; color:var(--muted-on-red);}
.footer-bottom a{color:#fff; border-bottom:1px solid rgba(255,255,255,.4);}

/* ---------- full-screen project views ---------- */
.screen{
  position:fixed; inset:0; z-index:100; background:var(--paper); overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.screen.is-open{opacity:1; visibility:visible; transform:translateY(0); transition:opacity .35s ease, transform .35s ease, visibility 0s linear 0s;}
.screen-close{
  position:fixed; top:20px; right:20px; z-index:110; width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.screen-close:hover{background:var(--red);}
.screen-back{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; padding:28px clamp(20px,5vw,56px) 0; color:var(--muted-on-paper);
}
.screen-back:hover{color:var(--red);}
.screen-head{padding:14px clamp(20px,5vw,56px) 50px;}
.screen-head .eyebrow{color:var(--red); display:block; margin-bottom:14px;}
.screen-head h2{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,6vw,3.6rem); letter-spacing:-.02em;}
.screen-head p{font-family:var(--font-mono); font-style:italic; font-size:14.5px; line-height:1.85; color:var(--copy-ink); max-width:62ch; margin-top:18px;}

/* ---------- illustration screen: hero personal statement ---------- */
.illus-hero-quote{
  font-family:var(--font-display); font-weight:500; font-style:normal; font-size:clamp(1.2rem,2.4vw,1.7rem);
  line-height:1.5; letter-spacing:-.01em; color:var(--ink); max-width:56ch;
  padding:0 clamp(20px,5vw,56px) 50px; quotes:'\201C' '\201D';
}
.illus-hero-quote::before{content:open-quote; color:var(--red);}
.illus-hero-quote::after{content:close-quote; color:var(--red);}

/* ---------- illustration screen: vertical-scroll-driven horizontal gallery ---------- */
.art-h-wrap{position:relative;}
.art-h-sticky{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center;}
.art-scroll{display:flex; gap:22px; padding:0 clamp(20px,5vw,56px); will-change:transform;}
.art-scroll figure{flex:0 0 auto;}
.art-scroll img, .art-scroll video{
  height:56vh; max-height:520px; width:auto; object-fit:cover;
  transition:transform .35s ease;
}
.art-scroll img:hover, .art-scroll video:hover{transform:translateY(-4px);}
.art-scroll figcaption{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-on-paper); margin-top:10px;}

.art-hint{position:absolute; top:28px; left:clamp(20px,5vw,56px); font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-on-paper); transition:opacity .4s ease;}
.art-hint.is-hidden{opacity:0;}
.art-progress{position:absolute; left:clamp(20px,5vw,56px); right:clamp(20px,5vw,56px); bottom:28px; height:2px; background:var(--line-on-paper);}
.art-progress-fill{display:block; height:100%; width:0%; background:var(--red);}
.art-nav{position:absolute; bottom:24px; right:clamp(20px,5vw,56px); display:flex; gap:10px;}
.art-nav button{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-on-paper); background:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  transition:background .2s ease, color .2s ease;
}
.art-nav button:hover{background:var(--ink); color:var(--paper);}

.art-h-wrap.no-motion{height:auto !important;}
.art-h-wrap.no-motion .art-h-sticky{position:static; height:auto; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.art-h-wrap.no-motion .art-scroll{transform:none !important;}
.art-h-wrap.no-motion .art-hint,
.art-h-wrap.no-motion .art-progress{display:none;}
.art-h-wrap.no-motion .art-nav{position:static; margin-top:16px; padding:0 clamp(20px,5vw,56px);}

/* ---------- illustration screen: creative growth intro (sits above the gallery) ---------- */
.growth-intro{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:0 clamp(20px,5vw,56px) 44px;}
.growth-intro-text{max-width:64ch;}
.growth-heading{font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,2.6vw,1.9rem); letter-spacing:-.01em; margin-bottom:14px; color:var(--ink);}
.growth-copy{font-family:var(--font-body); font-size:15px; line-height:1.75; color:var(--muted-on-paper);}
.growth-copy strong{color:var(--ink); font-weight:700;}
.growth-video-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.growth-video-grid video{width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:var(--ink);}
@media (max-width:820px){
  .growth-intro{grid-template-columns:1fr; gap:24px;}
  .growth-video-grid{max-width:420px; margin:0 auto;}
}

/* ---------- illustration screen: connect & social cta ---------- */
.social-cta{
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
  padding:50px clamp(20px,5vw,56px) 100px;
}
.social-cta-emoji{font-size:32px; line-height:1;}
.social-cta-text{font-family:var(--font-body); font-size:15px; color:var(--muted-on-paper); max-width:44ch;}
.social-cta-link{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:13px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--ink);
  padding:16px 30px; border-radius:40px; transition:background .25s ease;
}
.social-cta-link:hover{background:var(--red);}
.screen-dark .social-cta-text{color:var(--muted-on-ink);}
.screen-dark .social-cta-link{background:var(--paper); color:var(--ink);}
.screen-dark .social-cta-link:hover{background:var(--red); color:#fff;}

/* ---------- tools screen: dark, expanding list -> detail slideshow ---------- */
.screen-dark{background:var(--ink); color:var(--paper);}
.screen-dark .screen-close{background:var(--paper); color:var(--ink);}
.screen-dark .screen-close:hover{background:var(--red); color:#fff;}
.screen-dark .screen-back{color:var(--muted-on-ink);}
.screen-dark .screen-back:hover{color:var(--red);}
.screen-dark .screen-head p{color:var(--muted-on-ink);}

.tools-stage{position:relative; padding:0 clamp(20px,5vw,56px) 100px; min-height:60vh;}

.tools-panels{display:flex; gap:3px; height:min(74vh,620px);}
.tools-panel{
  position:relative; flex:1 1 0; overflow:hidden; cursor:pointer;
  padding:30px 22px; display:flex; flex-direction:column;
  transition:flex-grow .55s cubic-bezier(.65,0,.35,1), flex-basis .55s cubic-bezier(.65,0,.35,1), padding .4s ease;
}
.tools-panel.panel-ink{background:var(--ink); color:var(--paper);}
.tools-panel.panel-paper{background:var(--paper); color:var(--ink);}
.tools-panel.panel-red{background:var(--red); color:#fff;}
.tools-panel.is-focused{flex:6 1 0; padding:36px 34px; cursor:default;}
.tools-panel.is-collapsed{flex:0 0 76px; padding:20px 12px;}

.panel-num{font-family:var(--font-mono); font-size:12px; opacity:.75;}
.panel-title{
  display:block; margin-top:14px; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.3rem,2.6vw,2.2rem); line-height:1.05; letter-spacing:-.02em;
}
.tools-panel.is-collapsed .panel-title{font-size:14px; line-height:1.3;}
.panel-tag{
  display:block; margin-top:14px; font-family:var(--font-mono); font-style:italic; font-size:13.5px;
  line-height:1.6; max-width:34ch; opacity:.85;
}
.panel-prompt{
  margin-top:auto; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
.tools-panel:not(.is-collapsed):not(.is-focused):hover .panel-title{color:var(--red);}
.tools-panel.panel-red:not(.is-collapsed):not(.is-focused):hover .panel-title{color:var(--ink);}
.tools-panel:focus-visible{outline:2px solid var(--red); outline-offset:-2px;}

.panel-summary{display:flex; flex-direction:column; height:100%;}
.tools-panel.is-focused .panel-summary,
.tools-panel.is-collapsed .panel-tag,
.tools-panel.is-collapsed .panel-prompt{display:none;}

.panel-full{display:none; flex-direction:column; height:100%; overflow-y:auto;}
.tools-panel.is-focused .panel-full{display:flex; animation:panelFullIn .45s ease both;}
@keyframes panelFullIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){.tools-panel.is-focused .panel-full{animation:none;}}

.panel-full-title{font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,3vw,2.3rem); letter-spacing:-.02em; margin:10px 0 16px;}
.panel-full-desc{font-family:var(--font-body); font-size:14.5px; line-height:1.7; max-width:46ch; margin-bottom:26px; opacity:.92;}

.panel-slideshow{width:100%; max-width:720px; margin:0 auto 30px;}
.panel-slide-stack{position:relative; width:100%; aspect-ratio:621/338; max-width:100%; overflow:hidden; background:rgba(0,0,0,.25);}
.panel-slide-stack img{width:100%; height:100%; object-fit:cover; display:block;}

.panel-section{margin-top:30px; padding-top:24px; border-top:1px solid currentColor; border-color:rgba(128,128,128,.25);}
.panel-section:first-of-type{margin-top:0;}
.panel-section-title{
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; opacity:.55; margin-bottom:14px;
}
.panel-fields dt{
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; opacity:.6; margin-bottom:4px;
}
.panel-fields dd{font-family:var(--font-body); font-size:14.5px; line-height:1.65; opacity:.92; max-width:52ch; margin-bottom:16px;}
.panel-fields dd:last-child{margin-bottom:0;}
.panel-key-features{margin-top:18px; display:flex; flex-direction:column; gap:12px;}
.panel-key-features li{font-family:var(--font-body); font-size:14.5px; line-height:1.6; opacity:.92; max-width:54ch;}
.panel-key-features li strong{font-weight:700;}
.panel-key-features a{
  display:inline-block; margin-left:4px; font-family:var(--font-mono); font-size:12px;
  text-decoration:underline; text-underline-offset:3px; opacity:1; white-space:nowrap;
}
.panel-key-features a:hover{color:var(--red);}
.panel-red .panel-key-features a:hover{color:var(--ink);}

@media (max-width:700px){
  .tools-panels{flex-direction:column; height:auto;}
  .tools-panel{flex:1 1 auto; min-height:150px;}
  .tools-panel.is-focused{flex:0 0 auto; min-height:460px; max-height:74vh;}
  .tools-panel.is-collapsed{flex:0 0 60px; min-height:60px; flex-direction:row; align-items:center; gap:12px;}
  .tools-panel.is-collapsed .panel-title{margin-top:0;}
}

/* ---------- content & digital marketing: sticky copy + two-speed video gallery ---------- */
.content-layout{display:grid; grid-template-columns:.9fr 1.6fr; gap:50px; padding:0 clamp(20px,5vw,56px) 60px; align-items:start;}
.content-sticky{position:sticky; top:100px;}
.content-sticky p{font-family:var(--font-body); font-size:15px; line-height:1.75; max-width:38ch; opacity:.82;}
.content-tags{display:flex; flex-direction:column; gap:8px; margin-top:28px;}
.content-tags span{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:var(--red);}
.content-certs{margin-top:28px; padding-top:24px; border-top:1px solid var(--line-on-ink);}
.content-certs-label{display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:var(--muted-on-ink); margin-bottom:12px;}
.content-certs-list{display:flex; flex-direction:column; gap:14px;}
.content-certs-list li{display:flex; flex-direction:column; gap:2px; padding-left:16px; position:relative;}
.content-certs-list li::before{content:''; position:absolute; left:0; top:6px; width:5px; height:5px; border-radius:50%; background:var(--red);}
.content-certs-list li strong{font-family:var(--font-body); font-weight:700; font-size:13.5px; line-height:1.4; color:var(--paper);}
.content-certs-list li span{font-family:var(--font-mono); font-size:11px; color:var(--muted-on-ink);}

.content-gallery{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.content-col{display:flex; flex-direction:column; gap:18px;}

.video-card{position:relative; overflow:hidden; cursor:pointer; width:100%;}
.video-card video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.video-card-overlay{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.5), transparent 45%); display:flex; align-items:center; justify-content:center; transition:opacity .3s ease;}
.video-card.is-playing .video-card-overlay{opacity:0;}
.video-card.is-playing:hover .video-card-overlay{opacity:1;}
.video-play-btn{width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; transition:transform .3s ease;}
.video-card:hover .video-play-btn{transform:scale(1.12);}
.video-play-btn svg{width:16px; height:16px; margin-left:3px; fill:var(--ink);}
.video-caption{position:absolute; left:14px; bottom:12px; font-family:var(--font-mono); font-size:11px; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.5);}

@media (max-width:820px){
  .content-layout{grid-template-columns:1fr;}
  .content-sticky{position:static; margin-bottom:40px;}
}
@media (max-width:700px){
  .content-gallery{grid-template-columns:1fr;}
  .content-col{margin-top:0 !important;}
  .video-card{height:auto !important; aspect-ratio:4/3;}
}

/* ---------- graphic design series: images peek from the bottom, expand on click ---------- */
.gfx-hint{text-align:center; color:var(--muted-on-paper); margin:10px 0 34px;}
.gfx-peek-row{display:flex; gap:3px; align-items:flex-end; padding:0 clamp(20px,5vw,56px) 100px;}
.gfx-peek{
  position:relative; flex:0.6 1 0; min-width:0; height:323px; overflow:hidden; cursor:pointer;
  background:var(--ink); transition:height .5s cubic-bezier(.2,.8,.2,1), flex-grow .5s cubic-bezier(.2,.8,.2,1);
}
.gfx-peek img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:filter .4s ease;
}
.gfx-peek.is-open{flex-grow:0; flex-basis:auto; width:auto; height:min(560px, 58vh); aspect-ratio:var(--ar, 4/5);}
.gfx-peek.is-open img{object-fit:contain;}
.gfx-peek:focus-visible{outline:2px solid var(--red); outline-offset:-2px;}
@media (max-width:700px){
  .gfx-peek-row{gap:10px;}
  .gfx-peek{height:200px;}
  .gfx-peek.is-open{height:min(360px, 50vh);}
}

/* ---------- architecture screen: scrollytelling case study ---------- */
.case-scroller{display:flex; align-items:flex-start; gap:56px; padding:0 clamp(20px,5vw,56px) 60px;}
.case-sticky{flex:1 1 0; min-width:0; position:sticky; top:40px;}
.case-imgstack{position:relative; width:100%; height:560px; background:var(--paper); border:1px solid var(--line-on-paper); overflow:hidden;}
.case-slide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none;}
.case-slide.is-active{opacity:1; pointer-events:auto;}
.case-slide-track{position:absolute; inset:0;}
.case-slide-track img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:32px;
  opacity:0; transition:opacity .4s ease;
}
.case-slide-track img.is-active{opacity:1;}
.case-slide-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%;
  background:rgba(27,20,17,.55); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; z-index:2; transition:background .2s ease;
}
.case-slide-nav:hover{background:var(--red);}
.case-slide-nav.prev{left:14px;}
.case-slide-nav.next{right:14px;}
.case-slide-dots{position:absolute; left:0; right:0; bottom:16px; display:flex; justify-content:center; gap:6px; z-index:2;}
.case-slide-dots span{width:6px; height:6px; border-radius:50%; background:var(--line-on-paper);}
.case-slide-dots span.is-active{background:var(--red);}
.case-slide-caption{
  position:absolute; left:22px; bottom:16px; color:var(--muted-on-paper);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
.case-steps{flex:1 1 0; min-width:0; display:flex; flex-direction:column;}
.case-kicker{
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); opacity:.5; margin-top:10px;
}
.case-kicker-featured{
  display:inline-flex; align-items:center; align-self:flex-start; gap:10px; margin-top:14px;
  padding:9px 16px; border:1.5px solid var(--red); border-radius:8px; background:rgba(194,38,47,.06);
}
.case-kicker-featured .case-kicker{margin-top:0; opacity:1; color:var(--red);}
.case-featured-badge{
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; background:var(--red); padding:4px 9px; border-radius:20px; white-space:nowrap;
}
.case-problem{
  display:flex; flex-direction:column; gap:14px; margin:16px 0 4px;
  padding:18px 20px; background:rgba(194,38,47,.05); border-left:2px solid var(--red);
}
.case-problem-item{display:flex; flex-direction:column; gap:4px;}
.case-problem-label{
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red);
}
.case-problem-item p{font-family:var(--font-body); font-size:14px; line-height:1.6; color:var(--muted-on-paper); max-width:48ch;}
.case-cta{padding:20px clamp(20px,5vw,56px) 80px; text-align:center;}
.case-cta-link{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:13px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--ink);
  padding:16px 30px; border-radius:40px; transition:background .25s ease;
}
.case-cta-link:hover{background:var(--red);}
.case-step{
  display:flex; flex-direction:column; justify-content:center; min-height:680px;
  padding-block:30px; opacity:.32; transition:opacity .4s ease;
}
.case-step.is-active{opacity:1;}
.case-step-num{font-family:var(--font-mono); font-size:12px; color:var(--red); margin-bottom:14px;}
.case-step h3{
  font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:-.01em;
  line-height:1.24; margin-bottom:14px; color:var(--ink);
}
.case-step p{font-family:var(--font-body); font-size:15px; line-height:1.7; color:var(--muted-on-paper); max-width:44ch;}
@media (max-width:900px){
  .case-scroller{flex-direction:column; gap:24px; align-items:stretch;}
  .case-sticky{position:static;}
  .case-imgstack{height:320px;}
  .case-step{min-height:0; padding-block:40px;}
}

/* ---------- brand identity / logo process screen ---------- */
.id-section{position:relative; padding:90px clamp(20px,5vw,56px); overflow:hidden;}
.id-section.id-dark{background:var(--ink); color:var(--paper);}
.id-section.id-red{background:var(--red); color:var(--paper);}
.id-heading{
  font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,8.5vw,106px);
  line-height:.88; letter-spacing:-.03em; margin-bottom:50px; text-align:right;
}
.id-heading.id-muted{color:var(--taupe);}
.id-heading.id-ghost{color:#8A2620;}

.id-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:48px; align-items:start;}
.id-grid-final{margin-top:100px;}
.id-grid.id-reverse{grid-template-columns:1.3fr 1fr;}
.id-grid.id-reverse .id-copy{order:2;}
.id-grid.id-reverse .id-media{order:1;}
@media (max-width:800px){
  .id-grid, .id-grid.id-reverse{grid-template-columns:1fr;}
  .id-grid.id-reverse .id-copy, .id-grid.id-reverse .id-media{order:initial;}
}

.id-copy h4{font-family:var(--font-display); font-weight:800; font-size:clamp(1.15rem,2.2vw,1.5rem); letter-spacing:-.01em; margin-bottom:16px;}
.id-copy p{font-family:var(--font-mono); font-size:14px; line-height:1.85; max-width:44ch; opacity:.88;}

.id-media{display:flex; align-items:flex-start; gap:16px;}
.id-media .id-float{flex:1; min-width:0;}
.id-media .id-float img{width:100%; height:auto; display:block;}
.id-media-collage{position:relative; flex:1.3; min-height:28.96vw; overflow:visible;}
.id-float-sketch{position:absolute; left:0; top:7.5vw; width:16.32vw; height:21.46vw; overflow:hidden; z-index:2;}
.id-float-icon{position:absolute; left:11.6vw; top:-4.44vw; width:45.14vw; height:38.19vw; overflow:hidden; z-index:1;}
.id-float-sketch img, .id-float-icon img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:800px){
  .id-media-collage{min-height:60vw;}
  .id-float-sketch{width:34vw; height:44vw; top:14vw;}
  .id-float-icon{width:70vw; height:60vw; left:22vw; top:-8vw;}
}
@media (max-width:560px){.id-media{flex-direction:column;}}

.bleed-headline.bleed-red span{color:var(--red);}

.final-logo-card{
  position:relative; aspect-ratio:4/5; overflow:hidden; background-color:var(--red);
}
.final-logo-card video{width:100%; height:100%; object-fit:cover; display:block;}

/* gentle idle bob, layered under the JS scroll-parallax on the wrapper —
   independent durations/delays per element so nothing floats in sync */
@keyframes idBob{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-18px) rotate(-0.6deg);}
}
.id-bob{animation:idBob 5s ease-in-out infinite; will-change:transform;}
[data-parallax]{will-change:transform;}
@media (prefers-reduced-motion: reduce){
  .id-bob{animation:none;}
}