/* =========================================================
   Cecelia Dongarra — Portfolio
   Black & white · Swiss grotesque + mono (Anna Gibson direction)
   ========================================================= */

:root{
  --bg:#FBFBFB; --ink:#0A0A0A; --grey:#8C8C8C; --grey-2:#B7B7B7;
  --line:rgba(10,10,10,.08); --line-2:rgba(10,10,10,.06);
  --grot:"Helvetica Neue",Helvetica,Arial,"Archivo",sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --pad:clamp(20px,4vw,46px);
  --maxw:1500px;
  --read:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);
  font-size:14.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--ink);color:var(--bg)}
.pad{padding:0 var(--pad)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono)}
.up{text-transform:uppercase}
.grey{color:var(--grey)}

/* ---------- Top bar ---------- */
.bar{position:sticky;top:0;z-index:40;background:var(--bg)}
.bar-in{display:flex;justify-content:space-between;align-items:center;height:52px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.bar-in .brand b{font-weight:500}
.bar-in .brand{transition:opacity .2s ease}
.bar-in a.brand:hover{opacity:.55}
.bar-in nav{display:flex;gap:clamp(14px,3vw,34px)}
.bar-in nav a{color:var(--grey)}
.bar-in nav a:hover,.bar-in nav a.here{color:var(--ink)}
.bar-clock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--grey);font-variant-numeric:tabular-nums;letter-spacing:.08em;pointer-events:none;white-space:nowrap}
@media(max-width:620px){.bar-clock{display:none}}
.burger{display:none;border:0;background:none;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;cursor:pointer;color:var(--ink)}
@media(max-width:620px){
  .bar-in nav{position:fixed;inset:52px 0 auto 0;flex-direction:column;background:var(--bg);
    border-bottom:1px solid var(--line);padding:18px var(--pad) 26px;gap:16px;font-size:.9rem;
    transform:translateY(-130%);transition:transform .4s cubic-bezier(.2,.6,.3,1)}
  .bar-in nav.open{transform:translateY(0)}
  .burger{display:block}
}

/* ---------- Split header: centered wordmark, nav left/right ---------- */
.bar-in.bar-split{display:grid;grid-template-columns:1fr auto 1fr}
.bar-split .brand{grid-column:2;justify-self:center;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.bar-split .nav-l{grid-column:1;justify-self:start}
.bar-split .nav-r{grid-column:3;justify-self:end}
.bar-menu{display:contents}
.bar-split .burger{grid-column:3;justify-self:end}
@media(max-width:620px){
  .bar-in.bar-split{grid-template-columns:1fr auto}
  .bar-split .brand{grid-column:1;justify-self:start}
  .bar-split .burger{grid-column:2}
  .bar-menu{display:block;position:fixed;inset:52px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);padding:16px var(--pad) 24px;transform:translateY(-130%);transition:transform .4s cubic-bezier(.2,.6,.3,1)}
  .bar-split.open .bar-menu{transform:translateY(0)}
  .bar-split .nav-l,.bar-split .nav-r{position:static;transform:none;background:none;border:0;padding:0;flex-direction:column;gap:14px;font-size:.9rem}
  .bar-split .nav-r{margin-top:14px}
}

/* ---------- Hero (home) ---------- */
.hero{position:relative;display:flex;flex-direction:column;min-height:calc(100svh - 52px);padding:clamp(30px,5vw,54px) 0 clamp(40px,6vw,72px)}
.hero-water{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.hero-water canvas{display:block}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero .hero-bottom{position:relative;z-index:1;margin-top:auto;display:flex;justify-content:flex-end;align-items:flex-end;gap:clamp(28px,5vw,70px);flex-wrap:wrap}
.hero .hero-desc{flex:0 1 34ch;max-width:34ch;display:flex;flex-direction:column;gap:16px;padding-bottom:8px}
.hero .hero-desc p{font-size:.95rem;line-height:1.6;margin:0;color:var(--grey);font-weight:300}
.hero .hero-desc .scroll{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);white-space:nowrap}
.hero .ey{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:clamp(26px,5vw,48px)}
.hero .ey .av{color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.hero .ey .av i{width:7px;height:7px;background:var(--ink);border-radius:50%;display:inline-block;animation:bl 2.4s ease-in-out infinite}
@keyframes bl{50%{opacity:.25}}
.hero h1{font-family:var(--grot);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.6rem,9.5vw,8.2rem);line-height:.9;letter-spacing:-.025em;margin:0}
.hero .sub{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-end;
  margin-top:clamp(26px,4vw,46px);border-top:1px solid var(--line);padding-top:24px}
.hero .sub p{max-width:50ch;font-size:.95rem;line-height:1.6;margin:0}
.hero .sub .scroll{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);white-space:nowrap}

/* hero name — per-letter blueprint hover */
.hero-name .ln{display:block}
.hero-name .ltr{position:relative;display:inline-block;cursor:default;
  transition:color .26s ease,-webkit-text-stroke .26s ease}
.hero-name .ltr:hover{color:transparent;-webkit-text-stroke:1.6px var(--ink)}
.hero-name .gmarks{position:absolute;inset:-15% -12%;opacity:0;color:var(--grey);
  transition:opacity .26s ease,color .26s ease;pointer-events:none}
.hero-name .ltr:hover .gmarks{opacity:1;color:var(--ink)}
.hero-name .gmarks svg{display:block;width:100%;height:100%;overflow:visible}
@media(hover:none){.hero-name .ltr:hover{color:inherit;-webkit-text-stroke:0}.hero-name .gmarks{display:none}}

/* ---------- Work index ---------- */
.work{padding:clamp(34px,5vw,58px) 0 0}
.lab{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);
  display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px}
.item{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  padding:clamp(20px,3vw,34px) 0;border-bottom:1px solid var(--line);position:relative}
.item .t{font-family:var(--grot);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.7rem,6.5vw,4.6rem);line-height:.94;margin:0;transition:transform .4s cubic-bezier(.2,.6,.3,1)}
.item .r{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.item .cat{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grey)}
.item .vp{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  border-bottom:1px solid var(--ink);padding-bottom:2px;white-space:nowrap}
.item:hover .t{transform:translateX(18px)}
.item:hover .vp{color:var(--grey)}
.item .num{font-family:var(--mono);font-size:.72rem;color:var(--grey);position:absolute;left:0;top:calc(50% - .5em);
  opacity:0;transition:opacity .3s}
.item:hover .num{opacity:1}
@media(max-width:680px){
  .item{grid-template-columns:1fr}
  .item .r{align-items:flex-start;flex-direction:row;justify-content:space-between;width:100%;margin-top:10px}
  .item:hover .t{transform:none}
}

/* ---------- Hover preview (follows cursor) ---------- */
.preview{position:fixed;z-index:50;width:320px;height:230px;pointer-events:none;
  overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.94);
  transition:opacity .25s,transform .25s;background:#ECECEC;display:flex;align-items:flex-end;padding:14px}
.preview.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.preview img,.preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.preview .pl{display:none}
.preview.dark{background:#141414}.preview.dark .pl{color:#bdbdbd}
@media(max-width:680px){.preview{display:none}}

/* ---------- About (home) ---------- */
.about{padding:clamp(66px,10vw,140px) 0}
.about-g{display:grid;grid-template-columns:.7fr 1fr;gap:clamp(24px,5vw,70px)}
@media(max-width:760px){.about-g{grid-template-columns:1fr;gap:18px}}
.about .k{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey)}
.about h2{font-family:var(--mono);font-weight:300;font-size:clamp(1.1rem,2.4vw,1.7rem);line-height:1.5;letter-spacing:-.02em;margin:0}
.about h2 .g{color:var(--grey)}
.about .det{margin-top:30px;font-family:var(--mono);font-size:.78rem}
.about .det .d{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.04em}
.about .det .d span{color:var(--grey)}

/* ---------- Contact ---------- */
.contact{padding:clamp(50px,8vw,110px) 0;border-top:1px solid var(--ink)}
.contact h2{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.5rem,5vw,3.2rem);line-height:1.12;margin:0}
.contact .mail{display:inline-block;margin-top:26px;font-family:var(--mono);font-size:clamp(.95rem,2.4vw,1.4rem);
  text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--ink);padding-bottom:4px}
.contact .mail:hover{color:var(--grey)}

/* ---------- Footer ---------- */
.foot{padding:26px 0 44px;border-top:1px solid var(--line)}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grey)}
.foot-in a:hover{color:var(--ink)}

/* ---------- Custom cursor — inverting dot ---------- */
.cursor{position:fixed;top:0;left:0;width:10px;height:10px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:9999;opacity:0;mix-blend-mode:difference;transition:width .28s ease,height .28s ease,opacity .3s ease}
.cursor.hover{width:30px;height:30px}
.cursor-on,.cursor-on a,.cursor-on button,.cursor-on .otc-view,.cursor-on .burger,.cursor-on input,.cursor-on label{cursor:none}
@media(hover:none){.cursor{display:none}}
.cursor-on .phone,.cursor-on .phone *{cursor:auto}

/* ---------- Cursor-follow glow (dark project pages) ---------- */
.glow{position:fixed;top:0;left:0;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle, rgba(120,170,255,0.12) 0%, rgba(120,170,255,0.05) 32%, rgba(255,255,255,0) 70%);
  transform:translate(-50%,-50%);pointer-events:none;z-index:-1;filter:blur(8px);opacity:0;transition:opacity .5s ease}
@media(hover:none){.glow{display:none}}
@media(prefers-reduced-motion:reduce){.glow{display:none}}

/* ---------- Connect / marquee footer ---------- */
.connect{overflow:hidden;border-top:1px solid var(--line);margin-top:clamp(40px,6vw,90px);padding-top:clamp(40px,6vw,80px)}
.connect .marq{display:flex;white-space:nowrap;overflow:hidden;width:100%}
.connect .marq span{display:inline-flex;align-items:center;font-family:var(--grot);font-weight:500;text-transform:uppercase;font-size:clamp(1.8rem,5vw,3.4rem);animation:connectScroll 48s linear infinite}
.connect .marq .solid{color:var(--ink)}
.connect .marq .outline{-webkit-text-stroke:1.2px var(--ink);color:transparent}
.connect .marq .sp{margin:0 clamp(16px,2.4vw,34px);color:var(--grey-2);-webkit-text-stroke:0}
@keyframes connectScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.connect-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:clamp(30px,4.5vw,56px);padding-bottom:clamp(28px,4vw,48px);font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grey)}
.connect-base a:hover{color:var(--ink)}
.connect-base .links{display:flex;gap:24px}
@media(prefers-reduced-motion:reduce){.connect .marq span{animation:none}}

/* =========================================================
   Case study pages
   ========================================================= */
.cs-top{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  padding:clamp(26px,4vw,42px) 0 0}
.cs-top .close{color:var(--grey)}
.cs-top .close:hover{color:var(--ink)}

.cs-title{font-family:var(--grot);font-weight:700;text-transform:uppercase;letter-spacing:-.025em;
  font-size:clamp(2.4rem,10vw,8rem);line-height:.9;margin:clamp(20px,4vw,46px) 0 0}

/* meta grid like Skye Newman */
.cs-meta{display:grid;grid-template-columns:1.1fr 1.4fr;gap:clamp(24px,5vw,60px);
  margin-top:clamp(30px,5vw,56px);padding:clamp(22px,3vw,30px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:760px){.cs-meta{grid-template-columns:1fr;gap:24px}}
.cs-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-content:start}
.cs-facts .k{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);margin-bottom:8px}
.cs-facts .v{font-family:var(--mono);font-size:.82rem;text-transform:uppercase;letter-spacing:.02em;line-height:1.5}
.cs-info .k{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);margin-bottom:14px}
.cs-info p{font-family:var(--mono);font-size:.9rem;line-height:1.6;margin:0}
.cs-info em{font-style:italic}

/* full-bleed media */
.bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}
.cs-figure{margin:clamp(24px,3.5vw,50px) 0}
.cs-figure .shot{aspect-ratio:16/9;min-height:260px}
.cs-figure figcaption{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--grey);margin-top:12px;padding:0 var(--pad)}

/* narrative */
.cs-body{max-width:var(--read);margin:0 auto;padding:0 var(--pad)}
.cs-sec{margin:clamp(30px,4.5vw,58px) 0}
.cs-sec .k{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--grey);
  display:block;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cs-sec h2{font-family:var(--grot);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.4rem,3.4vw,2.2rem);line-height:1.02;margin:0 0 18px}
.cs-sec p{font-family:var(--mono);font-size:.92rem;line-height:1.65;color:var(--ink);margin:0 0 16px}
.cs-sec h3{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:.82rem;margin:26px 0 10px;color:var(--ink)}
.cs-sec h3 ~ p,.cs-sec h3 ~ ul li{color:var(--grey)}
.cs-sec p,.cs-sec li{font-weight:300;color:var(--grey)}
.cs-sec ul{list-style:none;padding:0;margin:0 0 16px}
.cs-sec li{font-family:var(--mono);font-size:.9rem;line-height:1.55;color:var(--grey);padding-left:22px;position:relative;margin-bottom:9px}
.cs-sec li::before{content:"—";position:absolute;left:0;color:var(--grey)}

.cs-decis{border-top:1px solid var(--line-2);margin:22px 0}
.cs-decis .d{padding:16px 0;border-bottom:1px solid var(--line-2)}
.cs-decis .d b{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:.82rem;display:block;margin-bottom:6px}
.cs-decis .d span{font-family:var(--mono);font-size:.88rem;color:var(--grey);line-height:1.55}

.cs-quote{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:26px 0;margin:30px 0}
.cs-quote p{font-family:var(--grot);font-weight:500;font-size:clamp(1.1rem,2.6vw,1.6rem);line-height:1.25;margin:0;letter-spacing:-.01em}
.cs-quote .src{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);margin-top:12px}

/* gallery row */
.cs-gallery{display:grid;gap:14px;margin:clamp(30px,4vw,50px) 0;grid-template-columns:repeat(3,1fr)}
@media(max-width:680px){.cs-gallery{grid-template-columns:1fr 1fr}}
.cs-gallery.tall .shot{aspect-ratio:9/18}
.cs-gallery .shot{aspect-ratio:4/3}

/* prototype embed */
.proto{margin:clamp(36px,6vw,80px) 0}
.proto-frame{border:1px solid var(--ink);overflow:hidden;background:#0c0c0e}
.proto-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#141414;border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#bdbdbd}
.proto-bar .dotz{display:flex;gap:6px}
.proto-bar .dotz i{width:10px;height:10px;border-radius:50%;background:#3a3a40;display:block}
.proto-frame iframe{width:100%;height:620px;border:0;display:block;background:#0c0c0e}
.proto-cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grey)}
.proto-cap a{border-bottom:1px solid var(--ink);color:var(--ink);padding-bottom:2px}
.proto-cap a:hover{color:var(--grey)}

/* reviews */
.reviews{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
@media(max-width:640px){.reviews{grid-template-columns:1fr}}
.review{border:1px solid var(--line);padding:20px 22px}
.review .stars{font-family:var(--mono);letter-spacing:2px;font-size:.78rem;margin-bottom:10px}
.review p{font-family:var(--mono);font-size:.86rem;line-height:1.55;margin:0 0 10px}
.review .by{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grey)}

/* next */
.next{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--ink);padding:clamp(30px,5vw,56px) 0}
.next .k{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey)}
.next a.big{font-family:var(--grot);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.6rem,5vw,3.2rem);line-height:1}
.next a.big:hover{color:var(--grey)}

/* ---------- Smart image slot ---------- */
.shot{position:relative;width:100%;height:100%;overflow:hidden;background:#E9E9E9;display:flex;align-items:flex-end;padding:16px}
.shot.dark{background:#141414}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.shot .pl{position:relative;z-index:0;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#6a6a6a}
.shot.dark .pl{color:#bdbdbd}
.shot.has-img .pl{display:none}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.2,.6,.3,1),transform .8s cubic-bezier(.2,.6,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.hero .ey .av i{animation:none}}

/* =========================================================
   Work gallery page (Mostly Sunny–style diagonal bracket)
   ========================================================= */
.page-hero{padding:clamp(50px,9vw,110px) 0 0}
.page-hero .ey{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:clamp(20px,4vw,40px)}
.page-hero h1{font-family:var(--grot);font-weight:700;text-transform:uppercase;letter-spacing:-.025em;font-size:clamp(2.4rem,9vw,7rem);line-height:.9;margin:0}
.page-hero p{font-family:var(--mono);font-size:.95rem;line-height:1.6;max-width:56ch;margin:22px 0 0}

.gal-lab{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);
  display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:clamp(38px,6vw,72px) 0 14px}

.proj{display:grid;grid-template-columns:1fr minmax(0,420px) 1fr;column-gap:clamp(20px,3vw,48px);
  align-items:stretch;padding:clamp(46px,8vw,116px) 0}
.proj .media{grid-column:2;position:relative;min-height:clamp(320px,34vw,470px)}
.proj .media .big{width:80%;margin-left:auto;overflow:hidden}
.proj.flip .media .big{margin-left:0;margin-right:auto}
.proj .media .small{position:absolute;top:-6%;left:0;width:46%;overflow:hidden;z-index:2}
.proj.flip .media .small{left:auto;right:0}
.proj .shot{transition:transform .5s cubic-bezier(.2,.6,.3,1)}
.proj:hover .big .shot{transform:scale(1.03)}
.proj:hover .small .shot{transform:translateY(-9px)}

.proj .ttl-wrap{grid-column:3;align-self:start;margin-top:6%;justify-self:start}
.proj.flip .ttl-wrap{grid-column:1;justify-self:end;text-align:right}
.proj .ttl{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.proj.flip .ttl{flex-direction:row-reverse}
.proj .ttl .arw{font-family:var(--mono);font-size:1rem;color:var(--grey);transition:transform .4s}
.proj:hover .ttl .arw{transform:translateX(5px)}
.proj.flip:hover .ttl .arw{transform:translateX(-5px)}
.proj .ttl h2{font-family:var(--grot);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.4rem,3vw,2.2rem);line-height:1;margin:0}
.proj:hover .ttl h2{color:var(--grey)}
.proj .cat{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink)}
.proj .vp{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--ink);padding-bottom:3px}
.proj .svc-wrap{grid-column:1;align-self:end;margin-bottom:5%;justify-self:start}
.proj.flip .svc-wrap{grid-column:3;justify-self:end;text-align:right}
.proj .svc{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grey);line-height:1.7;max-width:22ch}
@media(max-width:780px){
  .proj,.proj.flip{grid-template-columns:1fr;row-gap:22px;padding:clamp(40px,9vw,70px) 0}
  .proj .media{grid-column:1;order:1;min-height:0}
  .proj .media .big{width:84%}.proj .media .small{width:44%}
  .proj .ttl-wrap,.proj.flip .ttl-wrap{grid-column:1;order:2;margin-top:0;justify-self:start;text-align:left}
  .proj.flip .ttl{flex-direction:row}
  .proj .svc-wrap,.proj.flip .svc-wrap{grid-column:1;order:3;margin-bottom:0;justify-self:start;text-align:left}
}

/* ---------- Hero carousel (auto-scroll app screens) ---------- */
.hero-carousel{background:#0B0B0D;padding:clamp(24px,4vw,44px) 0 clamp(16px,2vw,24px);overflow:hidden;position:relative}
.hero-carousel .hc-track{display:flex;gap:16px;width:max-content;padding:0 8px;animation:hcScroll 46s linear infinite}
.hero-carousel:hover .hc-track{animation-play-state:paused}
.hero-carousel .hc-item{flex:0 0 auto;width:clamp(165px,20vw,270px)}
.hero-carousel .hc-item .shot{aspect-ratio:1080/2340;background:#141414}
.hero-carousel .hc-cap{padding:18px var(--pad) 0;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#8f8f8f}
@keyframes hcScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.hero-carousel .hc-track{animation:none;overflow-x:auto;width:auto}}

/* ---------- Smart video slot ---------- */
.vid{position:relative;width:100%;overflow:hidden;background:#141414;display:flex;align-items:flex-end;padding:14px;min-height:120px}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.vid img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.vid .pl{position:relative;z-index:1;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#bdbdbd}
.vid.has-media .pl{display:none}
.vid-hero{height:clamp(260px,50vw,72vh)}
.vid-hero .vid{height:100%;min-height:0}
.hero-carousel .hc-item .vid{aspect-ratio:1080/2340;min-height:0}
.cs-figure .vid{aspect-ratio:16/9;min-height:260px}
.cs-vidrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:30px 0}
.cs-vidrow .vid{aspect-ratio:9/16;min-height:0}
@media(max-width:560px){.cs-vidrow{grid-template-columns:1fr}}

/* ---------- Dark case-study theme (per page, body.dark) ---------- */
body.dark{--bg:#0A0A0B;--ink:#F2F1EE;--grey:#8C8C90;--line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.06)}
body.dark .shot{background:#171719}
body.dark .shot.dark{background:#0E0E10}
body.dark .shot .pl{color:#8c8c90}
body.dark .vid{background:#0E0E10}
.shot.bare,body.dark .shot.bare{background:transparent}

/* ---------- Multi-up media rows ---------- */
.cs-vid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0}
.cs-vid3 .vid,.cs-vid3 .shot{aspect-ratio:9/19;min-height:0}
@media(max-width:680px){.cs-vid3{grid-template-columns:1fr 1fr}}
.cs-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0}
.cs-two .shot{aspect-ratio:16/11}
@media(max-width:680px){.cs-two{grid-template-columns:1fr}}
.cs-three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0}
.cs-three .shot{aspect-ratio:4/5}
@media(max-width:680px){.cs-three{grid-template-columns:1fr}}

/* ---------- 3-up header montage ---------- */
.cs-header3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(26px,4vw,44px)}
.cs-header3 .shot,.cs-header3 .vid{aspect-ratio:4/3;min-height:0}
@media(max-width:680px){.cs-header3{grid-template-columns:1fr}}

/* ---------- Summary block ---------- */
.summary{padding:clamp(44px,7vw,86px) 0 0}
.summary > .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:22px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sum-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,6vw,72px)}
@media(max-width:760px){.sum-grid{grid-template-columns:1fr;gap:30px}}
.sum-h{font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1rem,1.9vw,1.18rem);margin:0 0 12px;color:var(--ink)}
.sum-block{margin-bottom:34px}
.sum-block p{font-family:var(--mono);font-size:.9rem;line-height:1.65;margin:0}
.sum-block p{color:var(--grey);font-weight:300}
.sum-list{list-style:none;padding:0;margin:0}
.sum-list li{font-family:var(--mono);font-size:.88rem;padding:8px 0;border-bottom:1px solid var(--line);color:var(--grey);font-weight:300}
.sum-meta{font-family:var(--mono);font-size:.9rem;color:var(--ink);line-height:1.7}
.sum-meta a{border-bottom:1px solid var(--ink);padding-bottom:1px}
.sum-meta a:hover{color:var(--grey)}

/* ---------- Impact / highlights stat grid ---------- */
.impact{padding:clamp(40px,6vw,72px) 0 0}
.impact .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:8px}
.impact > p{font-family:var(--mono);font-size:.9rem;color:var(--ink);margin:0}
.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,48px) clamp(20px,3vw,40px);margin-top:34px}
@media(max-width:680px){.impact-grid{grid-template-columns:1fr 1fr}}
.stat .num{font-family:var(--grot);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:-.02em;line-height:1}
.stat p{font-family:var(--mono);font-size:.82rem;line-height:1.5;color:var(--grey);margin:10px 0 0;max-width:24ch}

/* ---------- Contain media width (adds side padding so images aren't full-width) ---------- */
.cs-figure:not(.bleed),.cs-header3,.cs-vid3,.cs-vidrow,.cs-two,.cs-three,.cs-gallery,.proto{max-width:1120px;margin-inline:auto}
.cs-figure.feature{max-width:1300px}

/* ---------- Showcase carousel (auto-scroll, mixed aspect) ---------- */
.showcase{overflow:hidden;padding:clamp(16px,2.5vw,32px) 0}
.showcase .sc-track{display:flex;gap:16px;width:max-content;align-items:center;animation:scScroll 70s linear infinite}
.showcase .sc-item{flex:0 0 auto;height:clamp(280px,42vw,540px)}
.showcase .sc-item img,.showcase .sc-item video{height:100%;width:auto;display:block;border-radius:4px}
@keyframes scScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* JAUNT — vertical Instagram feed, continuous up-scroll */
.ig-scroll{position:relative;width:100%;max-width:430px;margin:0 auto;height:clamp(560px,80vh,780px);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent)}
.ig-track{display:flex;flex-direction:column;gap:16px;animation:igScroll 95s linear infinite;will-change:transform}
.ig-track img{width:100%;display:block;border-radius:8px}
@keyframes igScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){.ig-track{animation:none}}
/* Web-page scroll preview — long screenshot scrolls up inside a window */
.webscroll{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:#171719;border:1px solid rgba(255,255,255,.16)}
.ws-track{display:flex;flex-direction:column;animation:wsScroll 34s linear infinite;will-change:transform}
.ws-track img{width:100%;display:block}
@keyframes wsScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){.ws-track{animation:none}}
/* Framed media (PlayoffBlitz Website page) — subtle stroke on every image feature */
body.framed .shot:not(.bare),
body.framed .slideshow,
body.framed .vid{border:1px solid rgba(255,255,255,.16)}
@media(prefers-reduced-motion:reduce){.showcase .sc-track{animation:none;overflow-x:auto;width:auto}}
.logo-anim{max-width:340px;margin:clamp(28px,5vw,60px) auto;text-align:center}
.logo-anim video{width:100%;height:auto;display:block;border-radius:6px}
.logo-anim .k{display:block;margin-bottom:16px;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}

/* ---------- Full-screen video hero (project page) ---------- */
.hero-full{position:relative;height:calc(100svh - 52px);min-height:480px;overflow:hidden;background:#0A0A0B}
.hero-full>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(10,10,11,.28) 0%,rgba(10,10,11,0) 30%,rgba(10,10,11,0) 60%,rgba(10,10,11,.8) 100%)}
.hero-tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(8,8,10,.6)}
.hero-top{position:absolute;top:0;left:0;right:0;z-index:2}
.hero-top .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:18px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.hero-top .close{color:var(--grey)}
.hero-top .close:hover{color:var(--ink)}
.hero-ttl{position:absolute;left:0;bottom:0;z-index:2;padding:0 var(--pad) clamp(40px,9vh,100px)}
.hero-ttl h1{font-family:var(--grot);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(2.3rem,8vw,7rem);line-height:.9;margin:0;color:#fff}
.hero-ttl .scroll{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero-ttl .scroll::before{content:"";width:30px;height:1px;background:rgba(255,255,255,.5)}
/* Light hero variant (e.g. ByEverline) — white bg, black text */
.hero-full.light{background:#FBFBFB}
.hero-full.light .hero-scrim{background:linear-gradient(to bottom,rgba(251,251,251,.15) 0%,rgba(251,251,251,0) 30%,rgba(251,251,251,0) 62%,rgba(251,251,251,.9) 100%)}
.hero-full.light .hero-ttl h1{color:var(--ink)}
.hero-full.light .hero-ttl .scroll{color:rgba(10,10,10,.55)}
.hero-full.light .hero-ttl .scroll::before{background:rgba(10,10,10,.42)}
.hero-full .hero-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);width:min(42vh,380px);height:auto;z-index:0}
/* JAUNT hero — white overlay text on the teal wordmark image */
.jaunt-hero .hero-top .wrap,.jaunt-hero .hero-top .close{color:#fff}
.jaunt-hero .hero-top .close:hover{color:rgba(255,255,255,.7)}
.jaunt-hero .hero-ttl .scroll{color:#fff}
.jaunt-hero .hero-ttl .scroll::before{background:rgba(255,255,255,.75)}
.hero-white .hero-top .wrap,.hero-white .hero-top .close{color:#fff}
.hero-white .hero-top .close:hover{color:rgba(255,255,255,.7)}
.hero-full.light.hero-white .hero-ttl .scroll{color:#fff}
.hero-full.light.hero-white .hero-ttl .scroll::before{background:rgba(255,255,255,.7)}

/* ---------- Bolt divider ---------- */
.bolt-divider{display:flex;justify-content:center;padding:clamp(28px,4.5vw,56px) 0}
.bolt-divider img{height:clamp(42px,6vw,66px);width:auto;display:block}

/* ---------- Interactive prototypes — phones side by side ---------- */
.proto3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);max-width:1040px;margin:clamp(30px,4vw,52px) auto 0}
.proto3 .ph-item{text-align:center}
.proto3 .ph-label{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin-bottom:14px}
.phone{display:block;position:relative;width:100%;max-width:300px;margin:0 auto;aspect-ratio:9/19.5;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:#0c0c0e}
.phone iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block;background:#0c0c0e;transform-origin:top left}
.phone img,.phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:1;display:block}
.phone .pl{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:14px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#8c8c90;line-height:1.5}
.phone.phone-empty{display:flex;align-items:center;justify-content:center}
.phone-empty .pl{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#8c8c90;padding:14px;text-align:center;line-height:1.5}
.ph-open{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--ink);padding-bottom:2px;color:var(--ink)}
.ph-open:hover{color:var(--grey)}
@media(max-width:680px){.proto3{grid-template-columns:1fr;gap:34px}}

/* ---------- Off the Clock — personal masonry gallery ---------- */
.play-intro{max-width:var(--read);margin:clamp(20px,3vw,32px) 0 0;
  font-family:var(--mono);font-size:clamp(.92rem,1.5vw,1.02rem);line-height:1.75;color:var(--ink)}
.play-intro a{border-bottom:1px solid var(--line);padding-bottom:1px}
.play-intro a:hover{color:var(--grey)}
.play-wrap{padding-top:clamp(34px,5vw,60px);padding-bottom:clamp(20px,4vw,48px)}
.play-grid{column-count:3;column-gap:clamp(12px,1.3vw,18px)}
@media(max-width:900px){.play-grid{column-count:2}}
@media(max-width:540px){.play-grid{column-count:1}}
.play-item{position:relative;break-inside:avoid;margin:0 0 clamp(12px,1.3vw,18px);
  overflow:hidden;border-radius:8px;background:#ECECEC;display:flex;align-items:flex-end;padding:14px}
.play-item img,.play-item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.play-item .pl{position:relative;z-index:0;font-family:var(--mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.05em;color:#7a7a7a}
.play-item.has-img .pl{display:none}
.play-item::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,10,.34),rgba(10,10,10,0) 42%);opacity:0;transition:opacity .35s ease}
.play-item figcaption{position:absolute;left:0;bottom:0;z-index:3;padding:13px 15px;
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:#fff;
  transform:translateY(8px);opacity:0;transition:transform .35s ease,opacity .35s ease;pointer-events:none}
.play-item:has(figcaption):hover::after{opacity:1}
.play-item:hover figcaption{transform:translateY(0);opacity:1}

/* ---------- Off the Clock — captioned editorial masonry ---------- */
.otc-wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(18px,3vw,30px) var(--pad) 0}
.otc-bar{display:flex;align-items:center;justify-content:flex-end;gap:14px;font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 clamp(16px,2vw,24px)}
.otc-bar button{font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--grey);background:none;border:1px solid var(--line);padding:7px 15px;border-radius:999px;cursor:pointer;transition:color .2s,border-color .2s}
.otc-bar button:hover{color:var(--ink);border-color:var(--ink)}
.otc-bar .otc-arrange.on{color:var(--ink);border-color:var(--ink)}
.otc-bar .otc-hint{color:var(--grey-2)}
.otc-grid.arranging .otc-item{cursor:grab}
.otc-grid.arranging .otc-item:active{cursor:grabbing}
.otc-grid.arranging .otc-item *{pointer-events:none}
.otc-grid.arranging .otc-media{outline:1px dashed var(--line);outline-offset:3px}
.otc-item.dragging{opacity:.35}
.otc-grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:clamp(14px,1.8vw,26px);row-gap:clamp(30px,3.4vw,50px);align-items:start}
@media(max-width:1100px){.otc-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.otc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.otc-grid{grid-template-columns:1fr}}
.otc-item{position:relative;margin:0;width:100%}
.otc-media{position:relative;width:100%;overflow:hidden;background:#ECECEC;display:flex;align-items:flex-end;padding:14px}
.otc-media img,.otc-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.otc-media .pl{position:relative;z-index:0;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#7a7a7a}
.otc-media.has-img .pl{display:none}
/* "View" link + lightbox panel for multi-image pieces */
.otc-view{display:inline-flex;align-items:center;gap:8px;margin:0 0 0 auto;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:none;border:0;cursor:pointer;padding:0;pointer-events:auto}
.otc-view::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;display:inline-block;transition:transform .2s}
.otc-view:hover::before{transform:scale(1.6)}
.lb{position:fixed;inset:0;z-index:80;background:var(--bg);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s}
.lb.open{opacity:1;visibility:visible}
.lb-top{position:sticky;top:0;background:var(--bg);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px var(--pad);border-bottom:1px solid var(--line)}
.lb-title{font-family:var(--mono);font-weight:500;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin:0;color:var(--ink)}
.lb-close{background:none;border:0;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;color:var(--grey)}
.lb-close:hover{color:var(--ink)}
.lb-note{max-width:60ch;margin:clamp(22px,3vw,34px) auto 0;padding:0 var(--pad);font-family:var(--mono);font-size:.85rem;line-height:1.7;color:var(--grey);text-align:center}
.lb-images{max-width:720px;margin:0 auto;padding:clamp(22px,4vw,44px) var(--pad) clamp(40px,7vw,90px);display:flex;flex-direction:column;gap:clamp(14px,2vw,22px)}
.lb-images img{width:100%;display:block;border-radius:6px}
.otc-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;padding:56px 16px 16px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 12px;background:linear-gradient(to top,rgba(10,10,10,.74),rgba(10,10,10,.18) 55%,rgba(10,10,10,0));opacity:0;transition:opacity .35s ease;pointer-events:none}
.otc-item:hover .otc-cap,.otc-item:focus-within .otc-cap{opacity:1}
.otc-grid.arranging .otc-cap{display:none}
.otc-t{font-family:var(--mono);font-weight:300;text-transform:uppercase;letter-spacing:-.01em;font-size:.82rem;line-height:1.15;color:#fff;margin:0}
.otc-cat{display:block;font-family:var(--mono);font-weight:300;font-size:.72rem;line-height:1.15;color:rgba(255,255,255,.72);margin-top:0}
.otc-link{display:inline-flex;align-items:center;gap:8px;margin-top:11px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);cursor:pointer}
.otc-link::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);display:inline-block;transition:.2s}
.otc-link:hover::before{transform:scale(1.5)}
.otc-link.soon{color:var(--grey);cursor:default}.otc-link.soon::before{background:var(--grey-2)}
.otc-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(30px,5vw,64px);padding:18px var(--pad);border-top:1px solid var(--line);font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grey)}
.otc-foot a:hover{color:var(--ink)}
.otc-foot .clock{color:var(--ink)}

/* ---------- Work — sticky title, projects scroll on the right ---------- */
.wkx{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(60px,10vw,150px);
  display:grid;grid-template-columns:0.82fr 1.25fr;gap:clamp(40px,6vw,110px);align-items:start}
@media(max-width:860px){.wkx{grid-template-columns:1fr;gap:clamp(34px,7vw,54px)}}
.wkx-intro{position:sticky;top:52px;align-self:start;padding-top:clamp(34px,5vw,64px)}
@media(max-width:860px){.wkx-intro{position:static;padding-top:clamp(30px,6vw,48px)}}
.wkx-intro .ey{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.wkx-intro h1{font-family:var(--grot);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(3rem,8vw,6.5rem);line-height:.9;margin:18px 0 22px}
.wkx-intro p{font-family:var(--mono);font-size:.9rem;line-height:1.7;max-width:38ch;margin:0;color:var(--grey);font-weight:300}
.wkx-lab{display:flex;justify-content:space-between;border-top:1px solid var(--line);
  margin-top:clamp(26px,4vw,44px);padding-top:12px;font-family:var(--mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--grey)}
.wkx-list{display:flex;flex-direction:column;gap:clamp(100px,15vw,210px);padding-top:clamp(34px,5vw,64px)}
.wkx-proj{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,3vw,46px);align-items:center;color:inherit}
.wkx-proj.flip .wkx-cluster{order:2}
@media(max-width:560px){.wkx-proj,.wkx-proj.flip{grid-template-columns:1fr;gap:20px}.wkx-proj.flip .wkx-cluster{order:0}}
.wkx-cluster{position:relative;width:100%}
.wkx-cluster .big{width:72%;margin-left:auto}
.wkx-proj.flip .wkx-cluster .big{margin-left:0;margin-right:auto}
.wkx-cluster .small{position:absolute;top:-7%;left:0;width:44%;z-index:2}
.wkx-proj.flip .wkx-cluster .small{left:auto;right:0}
.wkx-cluster .big,.wkx-cluster .small{overflow:hidden;background:#171719}
.wkx-cluster img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.3,1)}
.wkx-proj:hover .wkx-cluster .big img{transform:scale(1.04)}
.wkx-proj:hover .wkx-cluster .small{transform:translateY(-8px);transition:transform .5s cubic-bezier(.2,.6,.3,1)}
.wkx-meta .num{font-family:var(--mono);font-size:.72rem;color:var(--grey);letter-spacing:.1em}
.wkx-meta h2{font-family:var(--grot);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1;margin:8px 0 10px;transition:color .25s}
.wkx-proj:hover .wkx-meta h2{color:var(--grey)}
.wkx-meta .cat{display:block;font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grey)}
.wkx-meta .vp{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--ink);padding-bottom:3px}

/* ---------- About — sticky intro, content scrolls on the right ---------- */
.abx{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(60px,10vw,140px);
  display:grid;grid-template-columns:0.85fr 1.2fr;gap:clamp(40px,6vw,100px);align-items:start}
@media(max-width:860px){.abx{grid-template-columns:1fr;gap:30px}}
.abx-intro{position:sticky;top:52px;align-self:start;padding-top:clamp(34px,5vw,64px)}
@media(max-width:860px){.abx-intro{position:static}}
.abx-intro .ey{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.abx-intro h1{font-family:var(--grot);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(3rem,8vw,6rem);line-height:.9;margin:16px 0 20px}
.abx-intro .bio{font-family:var(--mono);font-size:.88rem;line-height:1.7;max-width:42ch;margin:0 0 26px;color:var(--ink)}
.ab-facts{display:grid;gap:13px;border-top:1px solid var(--line);padding-top:18px}
.ab-facts .row{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:.78rem}
.ab-facts .row .fk{color:var(--grey);text-transform:uppercase;letter-spacing:.06em}
.ab-facts .row .fv{color:var(--ink);text-transform:uppercase;letter-spacing:.02em;text-align:right}
.abx-intro .resume{display:inline-block;margin-top:24px;font-family:var(--mono);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--ink);padding-bottom:3px}
.abx-list{padding-top:clamp(34px,5vw,64px)}
.abx-list .cs-sec:first-child{margin-top:0}

/* ---------- Centered caption under a figure / grid ---------- */
.cs-figcap-c{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--grey);text-align:center;margin:14px auto 0;max-width:60ch}

/* ---------- Narrow-media pages (e.g. ByEverline) — bring all media in a bit ---------- */
body.narrow-media .cs-figure:not(.bleed),
body.narrow-media .cs-two,
body.narrow-media .cs-three,
body.narrow-media .cs-gallery,
body.narrow-media .cs-vid3,
body.narrow-media .proto3,
body.narrow-media .palette{max-width:920px;margin-inline:auto}

/* ---------- Live-site links (under the three-template video) ---------- */
.site-links{display:flex;gap:clamp(30px,6vw,72px);justify-content:center;flex-wrap:wrap;margin-top:18px}
.site-links a{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--grey);border-bottom:1px solid var(--line);padding-bottom:3px;transition:.2s}
.site-links a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- Palette toggle (one template, many looks) ---------- */
.palette{max-width:1120px;margin:30px auto}
.pal-stage{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:8px;
  background:#E9E9E9;display:flex;align-items:flex-end;padding:16px}
.pal-stage .pal-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease;z-index:1}
.pal-stage .pal-img.on{opacity:1}
.pal-stage .pl{position:relative;z-index:0;font-family:var(--mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.05em;color:#6a6a6a}
.pal-swatches{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.pal-sw{display:inline-flex;align-items:center;gap:9px;cursor:pointer;background:none;
  border:1px solid var(--line);border-radius:100px;padding:8px 15px 8px 11px;
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);transition:.2s}
.pal-sw::before{content:"";width:15px;height:15px;border-radius:50%;background:var(--sw);
  box-shadow:0 0 0 1px rgba(10,10,10,.14) inset}
.pal-sw:hover{color:var(--ink);border-color:var(--ink)}
.pal-sw.on{color:var(--ink);border-color:var(--ink)}

/* ---------- Before / after comparison slider ---------- */
.ba-slider{position:relative;width:100%;aspect-ratio:16/10;background:transparent;
  user-select:none;-webkit-user-select:none;touch-action:none;cursor:ew-resize;--pos:50%;--gap:18px;--r:14px}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-slider .ba-top{clip-path:inset(0 calc(100% - var(--pos) + var(--gap)/2) 0 0 round var(--r))}
.ba-slider .ba-bottom{clip-path:inset(0 0 0 calc(var(--pos) + var(--gap)/2) round var(--r))}
.ba-divline{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:#fff;color:#0A0A0B;display:flex;align-items:center;justify-content:center;font-size:1.1rem;pointer-events:none;box-shadow:0 2px 14px rgba(0,0,0,.45)}
.ba-label{position:absolute;top:14px;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:rgba(0,0,0,.42);backdrop-filter:blur(4px);padding:6px 13px;border-radius:100px;pointer-events:none}
.ba-l-before{left:14px}.ba-l-after{right:14px}

/* ---------- Auto slideshow (vertical slide, one screen at a time) ---------- */
.slideshow{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#171719;border:1px solid var(--line)}
.ss-track{display:flex;flex-direction:column;height:100%;will-change:transform}
.ss-slide{flex:0 0 100%;position:relative}
.ss-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ss-titles{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.ss-titles .ss-kicker{flex:0 0 auto;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.ss-titles-window{overflow:hidden;position:relative}
.ss-titles-track{display:flex;flex-direction:column;transition:transform .6s cubic-bezier(.5,0,.2,1);will-change:transform}
.ss-t{font-family:var(--grot);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.4rem,3.2vw,2.4rem);line-height:1.2;color:var(--ink);white-space:nowrap}
.ss-t .scr{color:var(--grey)}
.ss-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:8px}
.ss-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .3s,width .3s;cursor:pointer}
.ss-dot:hover{background:rgba(255,255,255,.7)}
.ss-dot.on{background:#fff;width:20px;border-radius:4px}
.ss-arrow{position:absolute;right:14px;z-index:4;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.4);color:#fff;font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.ss-arrow:hover{background:rgba(0,0,0,.72);border-color:#fff}
.ss-prev{top:14px}.ss-next{top:60px}

/* rounded media (scoped to pages with body.rounded) */
.rounded .shot,.rounded .slideshow,.rounded .ba-slider,.rounded .vid,.rounded .sc-item .shot{border-radius:8px}