/* ====== DOPE DEPT. — Brand font ====== */
@font-face{
  font-family:"DopeSans";
  src:url("../assets/fonts/DopeSans.ttf") format("truetype");
  font-weight:400;
  font-display:swap;
}

/* ====== DOPE DEPT. — Brand tokens ====== */
:root{
  --green:#145E28;
  --green-hi:#1B7A35;
  --green-br:#3EC866;
  --ink:#1A1A1A;
  --ink-soft:#5d5f5b;
  --base:#FFFFFF;
  --dark:#0E0E0E;
  --dark-soft:#171717;
  --line:#E6E8E4;
  --line-dark:rgba(255,255,255,.12);
  --r-sm:8px; --r-md:16px; --r-pill:999px;
  --maxw:1280px;
  --pad:clamp(20px,5vw,72px);
  --font:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --font-dope:"DopeSans","Comic Sans MS","Comic Neue","Chalkboard SE","Comic Sans",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--base);line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-.015em;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ====== Buttons ====== */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;border-radius:var(--r-pill);padding:14px 30px;cursor:pointer;border:1.5px solid transparent;transition:transform .18s ease,background .18s,color .18s,box-shadow .18s}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-hi);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--green)}
.btn-light:hover{background:#eafaef;transform:translateY(-2px)}
.btn-lg{padding:18px 44px;font-size:1.125rem}

/* ====== Header ====== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s,box-shadow .3s;border-bottom:1px solid transparent}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand-logo{height:24px;width:auto}
.brand-logo--dark{display:none}
.nav{display:flex;align-items:center;gap:34px}
.nav>a{font-weight:600;font-size:.98rem;color:#fff;transition:opacity .2s}
.nav>a:hover{opacity:.6}
.nav-cta{background:#fff;color:var(--green)!important;padding:9px 22px;border-radius:var(--r-pill);font-weight:700}
.nav-cta:hover{opacity:1!important;background:#eafaef}
/* scrolled state */
.site-header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-color:var(--line)}
.site-header.scrolled .brand-logo--light{display:none}
.site-header.scrolled .brand-logo--dark{display:block}
.site-header.scrolled .nav>a{color:var(--ink)}
.site-header.scrolled .nav-cta{background:var(--green);color:#fff!important}
.site-header.scrolled .nav-cta:hover{background:var(--green-hi)}
.site-header.scrolled .menu-toggle span{background:var(--ink)}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.menu-toggle span{width:26px;height:2.5px;background:#fff;border-radius:2px;transition:.25s}
.menu-toggle.open span{background:var(--ink)}
.menu-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;background:var(--green);z-index:45;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);gap:8px;transform:translateY(-100%);transition:transform .35s ease;visibility:hidden}
.mobile-menu.open{transform:translateY(0);visibility:visible}
.mobile-menu a{font-size:2.6rem;font-weight:800;color:#fff;padding:10px 0}

/* ====== Hero : DOPE DEPT. typo play ====== */
.hero{position:relative;min-height:100svh;background:#0A0A0A;color:#FFF9DB;display:flex;align-items:center;justify-content:center;overflow:hidden}
.typo-marquee{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-evenly;pointer-events:none}
.typo-row{white-space:nowrap;flex:0 0 auto;font-family:var(--font-dope);font-weight:700;font-size:clamp(58px,12vh,124px);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(140,172,146,.28);will-change:transform}
.typo-row span{display:inline-block;padding-right:.55em}
.typo-row.dir-l{animation:slideL var(--dur,90s) linear infinite}
.typo-row.dir-r{animation:slideR var(--dur,90s) linear infinite}
@keyframes slideL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes slideR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.hero-center{position:relative;z-index:2;text-align:center;padding:0 var(--pad)}
.hero-logo{width:min(58vw,440px);margin:0 auto;height:auto;filter:drop-shadow(0 0 60px rgba(0,0,0,.9));animation:heroIn 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}

/* ====== Intro 2 : windows light up one by one → copy fades in ====== */
.intro2{position:relative;background:#01040a;color:#fff;overflow:hidden;min-height:100svh}
.intro2 .b-dark{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.16) saturate(.3)}
.intro2 .b-lights{position:absolute;inset:0;width:100%;height:100%}
.win-r{fill:#000;transition:fill .5s ease}
.win-r.on{fill:#fff}
.intro2-center{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:left;padding:0 var(--pad);opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease;pointer-events:none;background:radial-gradient(60% 55% at 50% 50%,rgba(0,3,8,.72) 0%,rgba(0,3,8,.45) 55%,rgba(0,3,8,0) 100%)}
.intro2-copy{width:fit-content}
.intro2.lit-done .intro2-center{opacity:1;transform:none}
.intro2-copy{font-size:clamp(1.1rem,2.3vw,1.65rem);font-weight:400;line-height:1.95;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 14px rgba(0,0,0,.9),0 4px 34px rgba(0,0,0,.85),0 0 70px rgba(0,0,0,.7)}
.intro2-copy--em{margin-top:clamp(34px,4.5vw,56px);color:#fff}
.intro2 .hl-green{color:var(--green-br)}
.scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);opacity:.85;animation:bob 1.8s ease-in-out infinite}
.scroll-cue .chev{display:block;width:16px;height:16px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(45deg);border-radius:1px}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* ====== Sections ====== */
.section{padding:clamp(72px,11vw,150px) 0}
.sec-light{background:var(--base);color:var(--ink)}
.sec-dark{background:var(--dark);color:#fff}
.kicker{font-weight:700;color:var(--green);text-transform:lowercase;letter-spacing:.14em;font-size:.82rem;margin-bottom:18px}
.kicker.light{color:var(--green-br)}
.section-title{font-family:var(--font-dope);font-size:clamp(1.8rem,4.4vw,3rem);font-weight:700;line-height:1.15;letter-spacing:-.01em}
.section-title.light{color:#fff}
.section-desc{margin-top:18px;color:var(--ink-soft);font-size:1.05rem;max-width:620px}

/* About */
.statement{font-family:var(--font-dope);font-size:clamp(1.8rem,5.4vw,4rem);font-weight:700;line-height:1.15;letter-spacing:-.015em;margin-bottom:clamp(40px,7vw,72px)}
.statement .hl{color:var(--green)}
.kv-rows{list-style:none;display:flex;flex-direction:column;gap:clamp(20px,3vw,40px)}
.kv-rows li{display:grid;grid-template-columns:minmax(230px,330px) 1fr;align-items:baseline;gap:clamp(36px,7vw,110px)}
.kv-rows b{font-family:var(--font-dope);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;letter-spacing:-.01em;line-height:1.1}
.kv-rows span{font-size:clamp(1rem,1.8vw,1.2rem);line-height:1.6}

/* About page — statement subcopy */
.statement-sub{margin-top:clamp(20px,3vw,34px);font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:700;line-height:1.7;color:var(--ink)}

/* About page — half-and-half green/white keyword split with sequential parallax */
.kv-split{position:relative}
.kv-half{padding:clamp(60px,9vw,110px) 0}
.kv-half--white{background:var(--base);color:var(--ink)}
.kv-half--green{background:var(--green);color:#fff}
.kv-half--green .kv-rows span{color:rgba(255,255,255,.86)}
.kv-inner{will-change:transform}
.kv-reveal{opacity:0;transform:translateY(38px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * .12s)}
.kv-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.kv-reveal{opacity:1;transform:none}}

/* Services — scroll-drawn line journey */
.process{position:relative;margin-top:clamp(30px,5vw,60px);aspect-ratio:1000/2600}
.process-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.proc-base{fill:none;stroke:rgba(205,244,97,.18);stroke-width:1.5}
.proc-line{fill:none;stroke:#CDF461;stroke-width:3.5;stroke-linecap:round}
.proc-marks circle{fill:var(--dark);stroke:#CDF461;stroke-width:2;transition:fill .3s}
.proc-marks circle.passed{fill:#CDF461}
.proc-marks text{fill:#CDF461;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:34px}
.proc-item{position:absolute;left:var(--x);top:var(--y);max-width:min(43%,490px)}
.proc-item.pr{left:auto;right:0;max-width:min(43%,490px)}
.proc-item h3{font-family:var(--font-dope);font-size:clamp(1.2rem,2.4vw,1.9rem);font-weight:700;color:#fff;display:flex;align-items:center;gap:12px;letter-spacing:-.01em}
.proc-item h3 .pdot{width:12px;height:12px;border-radius:50%;border:2.5px solid #CDF461;flex:0 0 auto}
.proc-item p{color:#b9bdb6;margin-top:10px;font-size:clamp(.85rem,1.25vw,.95rem);line-height:1.7}

/* Journey mini thumbnails (+more) */
.mini-thumbs{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px;max-width:480px}
.mini{display:block;width:clamp(104px,10.5vw,148px);flex:0 0 auto;border-radius:10px;overflow:hidden;background:#1a1d1b;opacity:0;transform:scale(.55);transition:transform .65s cubic-bezier(.34,1.6,.64,1) var(--d,0s),opacity .45s ease var(--d,0s)}
.proc-item.passed .mini{opacity:1;transform:scale(1)}
.proc-item.passed .mini:hover{transform:scale(1.06)}
.mini{position:relative}
.mini img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.mini-name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;background:rgba(3,7,5,.7);color:#fff;font-size:.78rem;font-weight:700;line-height:1.45;letter-spacing:-.01em;opacity:0;transition:opacity .3s ease}
.mini:hover .mini-name{opacity:1}
.more{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:clamp(.95rem,1.4vw,1.08rem);border:1.5px solid rgba(255,255,255,.4);border-radius:999px;padding:10px 20px;opacity:0;transform:scale(.75);transition:opacity .45s ease var(--d,0s),transform .55s cubic-bezier(.34,1.6,.64,1) var(--d,0s),background .25s,color .25s,border-color .25s,box-shadow .25s}
.proc-item.passed .more{opacity:1;transform:scale(1)}
.proc-item.passed .more:hover{transform:translateY(-3px);transition-delay:0s}
.more span{width:22px;height:22px;border:1.5px solid currentColor;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;line-height:1;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.more:hover{background:#CDF461;border-color:#CDF461;color:#0A0A0A;transform:translateY(-3px);box-shadow:0 10px 28px rgba(205,244,97,.25)}
.more:hover span{transform:rotate(90deg)}

/* Sub pages (about / work / project) */
.page-main{padding-top:74px}
.section-desc.dark-desc{color:#b9bdb6}
.page-cta{padding-top:0}

/* About — team grid */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(36px,5vw,56px)}
.team-cell{background:var(--dark-soft);border:1px solid var(--line-dark);border-radius:var(--r-md);padding:clamp(24px,2.6vw,36px);transition:.25s}
.team-cell:hover{border-color:var(--green-br);transform:translateY(-4px)}
.team-cell h3{font-size:1.25rem;font-weight:800;color:#fff;margin-bottom:10px}
.team-cell p{color:#b9bdb6;font-size:.95rem;line-height:1.7}

/* Work page — portfolio grid */
.pf-section{margin-top:clamp(64px,9vw,110px)}
.pf-cat{font-family:var(--font-dope);font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:700;letter-spacing:-.01em}
.pf-cat span{color:var(--green)}
.pf-tags{color:var(--ink-soft);font-size:.95rem;margin-top:6px}

/* august-style mosaic tiles */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);margin-top:clamp(24px,3.5vw,40px);border:1px solid #0A0A0A}
.tile{position:relative;display:block;overflow:hidden;min-height:clamp(300px,36vw,460px);padding:clamp(22px,3vw,40px)}
.tiles .tile:nth-child(4n+1),.tiles .tile:nth-child(4n+4){background:#fff;color:var(--ink)}
.tiles .tile:nth-child(4n+2),.tiles .tile:nth-child(4n+3){background:#0A0A0A;color:#fff}
.tile-img{position:absolute;inset:0;background-image:var(--img);background-size:cover;background-position:center;opacity:0;transition:opacity .45s ease;z-index:1}
.tile-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,.72) 100%)}
.tile:hover .tile-img{opacity:1}
.tile:hover{color:#fff}
.tile-title{position:relative;z-index:2;font-size:clamp(1.15rem,2vw,1.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.25;max-width:94%;transition:color .3s}
.tile-plus{position:absolute;z-index:2;left:50%;top:55%;width:56px;height:56px;transform:translate(-50%,-50%);transition:transform .4s cubic-bezier(.2,.7,.2,1),color .3s}
.tile-plus::before,.tile-plus::after{content:"";position:absolute;background:currentColor}
.tile-plus::before{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%)}
.tile-plus::after{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%)}
.tile:hover .tile-plus{transform:translate(-50%,-50%) rotate(90deg);color:#CDF461}
.tile-meta{position:absolute;z-index:2;left:clamp(22px,3vw,40px);bottom:clamp(20px,2.6vw,34px);font-size:.85rem;font-weight:600;opacity:.6;transition:opacity .3s}
.tile-desc{position:absolute;z-index:2;left:clamp(22px,3vw,40px);right:clamp(22px,3vw,40px);bottom:clamp(20px,2.6vw,34px);font-size:.92rem;line-height:1.65;color:rgba(255,255,255,.92);opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tile:hover .tile-desc{opacity:1;transform:none}
.tile:hover .tile-meta{opacity:0}

/* Project detail */
.crumb{color:var(--green);border-bottom:1px solid rgba(20,94,40,.35)}
.pj-title{font-size:clamp(1.8rem,4.4vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;max-width:900px}
.pj-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);margin:clamp(28px,4vw,48px) 0 0}
.pj-gallery[data-count="2"]{grid-template-columns:repeat(2,1fr)}
.pj-gallery[data-count="1"]{grid-template-columns:minmax(0,68%)}
.pj-shot{margin:0;border-radius:var(--r-md);overflow:hidden;background:#eceee9}
.pj-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pj-shot:hover img{transform:scale(1.04)}
.pj-body{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,6vw,90px);margin-top:clamp(32px,5vw,56px);align-items:start}
.pj-desc{font-size:clamp(1rem,1.8vw,1.15rem);line-height:1.9}
.pj-meta{display:flex;flex-direction:column;gap:14px}
.pj-meta div{display:grid;grid-template-columns:90px 1fr;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.pj-meta dt{font-weight:800;color:var(--green);text-transform:uppercase;font-size:.8rem;letter-spacing:.08em}
.pj-meta dd{font-size:.95rem}
.pj-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(48px,7vw,80px);flex-wrap:wrap}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}

/* Work (light) : category index + thumbnails integrated flow */
.work-flow{margin-top:clamp(40px,6vw,72px)}
.wf-cat{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin-top:clamp(80px,11vw,140px)}
.work-flow .wf-cat:first-child{margin-top:0}
.wf-cat span{color:var(--green)}
.wf-thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(24px,3.5vw,44px)}
.wf-thumbs.three{grid-template-columns:repeat(3,1fr)}
.wf-thumbs .thumb img{aspect-ratio:16/10}
.wf-thumbs.three .thumb img{aspect-ratio:3/4}
.thumb{margin:0;position:relative;overflow:hidden;border-radius:var(--r-md);background:#e9ebe7}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.thumb:hover img{transform:scale(1.05)}
.thumb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));pointer-events:none}
.thumb figcaption{position:absolute;left:20px;bottom:16px;right:20px;z-index:2;color:#fff;font-weight:800;font-size:clamp(1rem,1.6vw,1.3rem);line-height:1.3}

.work-note{margin-top:36px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--green);color:#fff;padding:clamp(16px,2vw,24px) clamp(20px,2.6vw,32px);border-radius:var(--r-md)}
.work-note p{font-size:clamp(.98rem,1.6vw,1.15rem);font-weight:700}
.work-note .btn-primary{background:#fff;color:var(--green)}
.work-note .btn-primary:hover{background:#eafaef}

/* Contact */
.contact{background:var(--dark);color:#fff;text-align:center;position:relative;overflow:hidden}
.contact .container{position:relative}
.contact-title{font-family:var(--font-dope);font-size:clamp(2.6rem,9vw,6.4rem);font-weight:700;line-height:1;letter-spacing:-.01em}
.contact-title .hl-green{color:var(--green-br)}
.contact-sub{margin:22px auto 38px;color:#c9ccc6;max-width:520px;font-size:1.1rem}
.contact-email{margin-top:24px;color:#9a9d97}
.contact-email a{color:var(--green-br);font-weight:700;border-bottom:1px solid rgba(62,200,102,.4)}

/* Footer */
.site-footer{background:var(--dark);color:#fff;border-top:1px solid var(--line-dark);padding:56px 0 44px}
.footer-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.footer-logo{height:30px;width:auto}
.footer-tag{color:#c9ccc6;font-weight:600}
.footer-mail{color:var(--green-br);font-weight:700}
.footer-copy{color:#7e817b;font-size:.85rem;margin-top:6px}

/* Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* Responsive */
@media(max-width:900px){
  .kv-rows li{grid-template-columns:1fr;gap:8px}
  .intro2-grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:860px){
  .nav{display:none}
  .menu-toggle{display:flex}
}
@media(max-width:760px){
  .process{aspect-ratio:auto;height:auto;padding-left:46px;position:relative;counter-reset:proc}
  .process-svg{display:none}
  /* vertical line: dim base + bright progress drawn by scroll */
  .process::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;background:rgba(205,244,97,.18)}
  .process::after{content:"";position:absolute;left:14px;top:0;width:4px;height:var(--prog,0%);background:#CDF461;border-radius:2px}
  .proc-item,.proc-item.pr{position:relative;left:auto;right:auto;max-width:100%;margin-top:44px;padding-left:0;border-left:0}
  .proc-item:first-of-type{margin-top:6px}
  .proc-item::before{content:"";position:absolute;left:-38px;top:5px;width:14px;height:14px;border-radius:50%;border:2px solid #CDF461;background:var(--dark);z-index:1}
  .proc-item.passed::before{background:#CDF461}
  .proc-item h3 .pdot{display:none}
  .proc-item h3::before{counter-increment:proc;content:"0" counter(proc) ".";font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-size:.75em;color:#CDF461;margin-right:10px}
  .proc-item p br{display:none}
}
@media(max-width:900px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .pj-body{grid-template-columns:1fr}
}
@media(max-width:640px){
  .pj-gallery{grid-template-columns:1fr}
  .pj-shot img{aspect-ratio:16/10}
}
@media(max-width:700px){
  .tiles{grid-template-columns:1fr}
  .tiles .tile:nth-child(4n+1),.tiles .tile:nth-child(4n+4){background:#fff;color:var(--ink)}
  .tiles .tile:nth-child(even){background:#0A0A0A;color:#fff}
  .tiles .tile:nth-child(odd){background:#fff;color:var(--ink)}
  .tile{min-height:240px}
  .tile-plus{width:40px;height:40px}
}
@media(max-width:640px){
  .team-grid,.pf-grid{grid-template-columns:1fr}
  .mini-thumbs{flex-wrap:wrap}
  .mini{width:calc(33.33% - 7px)}
  .work-note{flex-direction:column;align-items:flex-start}
  .typo-row{font-size:clamp(44px,9vh,80px)}
  .hero-logo{width:min(70vw,320px)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}