/* Merrah portfolio. Light first, dark by toggle. Tokens from docs/01-design-reference.md. */
:root{
  --bg:#FFFDF3; --card:#FFFFFF; --fg:#202020; --muted:#5E5757; --line:#E9E4E4;
  --accent:#A30000; --btn:#A30000; --btn-fg:#FFFFFF; --soft:#F7E3E1; --chip:#F6F4F0; --ok:#1F6F43;
  --glow:rgba(163,0,0,.16); --shadow:0 10px 30px rgba(32,32,32,.08);
  --font-display:'Archivo','Arial Black',sans-serif;
  --font-body:'Montserrat',system-ui,sans-serif;
  --font-accent:'Instrument Serif','Playfair Display',Georgia,serif;
  --radius-card:28px; --radius-pill:999px;
  --mq:36s;
}
:root[data-theme="dark"]{
  --bg:#131111; --card:#1D1A1A; --fg:#FFFDF3; --muted:#B8B0B0; --line:#352E2E;
  --accent:#E8484E; --btn:#C62828; --btn-fg:#FFFFFF; --soft:#3A2626; --chip:#2A2525; --ok:#5FC48A;
  --glow:rgba(198,40,40,.30); --shadow:0 12px 34px rgba(0,0,0,.45); color-scheme:dark;
}

*{box-sizing:border-box}
html{font-size:calc(100% * var(--fs,1));scroll-behavior:smooth;scroll-padding-top:6rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1rem/1.65 var(--font-body);overflow-wrap:break-word}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.band.accent :focus-visible{outline-color:#FFFDF3}
.brief :focus-visible{outline-color:var(--accent)}

h1{font:800 clamp(2.6rem,7vw,6rem)/1.12 var(--font-display);letter-spacing:-.04em;text-wrap:balance}
h2{font:800 clamp(2rem,4.4vw,3.4rem)/1.14 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
h3{font:800 1.25rem/1.2 var(--font-display);letter-spacing:-.01em}
.accent-word{display:inline-block;font:inherit;font-style:normal;letter-spacing:inherit;line-height:1.04;color:#FFFDF3;background:linear-gradient(var(--btn),var(--btn)) no-repeat left center/100% 100%;border-radius:999px;padding:.02em .34em .07em;margin:0 .03em;transition:background-size .45s cubic-bezier(.2,.8,.2,1)}
.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.eyebrow{display:block;font:700 .78rem/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.lead,.big{color:var(--muted);font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:44rem}
mark{background:linear-gradient(transparent 62%,var(--soft) 62%);color:inherit;font-weight:600;border-bottom:2px solid var(--accent);padding:0 .1em}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--fg);color:var(--bg);padding:.6rem 1rem;border-radius:var(--radius-pill)}
.skip:focus{left:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3rem;padding:.75rem 1.4rem;border-radius:var(--radius-pill);border:1.5px solid transparent;font:600 .95rem/1.2 var(--font-body);text-decoration:none;transition:transform .2s,background-color .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--btn);color:var(--btn-fg)}
.btn.outline{border-color:var(--fg);color:var(--fg);background:transparent}
.btn.outline:hover{border-color:var(--accent);color:var(--accent)}
.btn.light{background:#FFFDF3;color:#A30000}
.btn.outline-light{border-color:#FFFDF3;color:#FFFDF3}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem}
.round{width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;flex:none;border:1px solid transparent;text-decoration:none}
.round.cta{background:var(--btn);color:var(--btn-fg)}
.round.ghost{background:transparent;border-color:var(--line);color:var(--fg)}
.round.ghost:hover{border-color:var(--accent);color:var(--accent)}
.round:disabled{opacity:.4;cursor:default}
.chip{display:inline-flex;align-items:center;gap:.4rem;min-height:2.25rem;padding:.35rem .9rem;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--card);color:var(--fg);font:600 .82rem/1 var(--font-body)}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.chip.icon{padding:.35rem .6rem}
.chip:disabled{opacity:.45;cursor:default}
.link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:.15rem;white-space:nowrap}
.link:hover{color:var(--accent)}
.pill{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line);background:var(--card);border-radius:var(--radius-pill);padding:.45rem 1rem;font:600 .82rem/1 var(--font-body)}
.pill .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent)}

/* 0. nav */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:.5rem;width:max-content;max-width:calc(100% - 24px);padding:.5rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-pill);transition:padding .25s,box-shadow .25s}
.nav.scrolled{padding:.3rem;box-shadow:var(--shadow)}
.logo{display:inline-flex;align-items:center;gap:.6rem;min-width:0;text-decoration:none;padding-right:.5rem}
.mark{width:2.75rem;height:2.75rem;flex:none}
/* The wordmark is a plain image so it also shows when the page is opened straight from a folder. Dark theme brightens the red. */
.wordmark{display:block;flex:0 1 8.6rem;width:8.6rem;min-width:0;height:auto}
:root[data-theme="dark"] .wordmark{filter:brightness(1.7) saturate(1.15)}
.nav-links{display:flex;gap:.15rem;margin-inline:.6rem}
.nav-links a{padding:.6rem .95rem;border-radius:var(--radius-pill);text-decoration:none;font-weight:600;font-size:.92rem}
.nav-links a:hover{background:var(--chip);color:var(--accent)}
.menu-btn{display:none}
@media (max-width:760px){
  .nav{width:calc(100% - 24px);justify-content:space-between}
  .nav .logo{margin-right:auto;flex:0 1 auto}
  .nav-links,.nav .round.cta{display:none}
  .menu-btn{display:grid}
}
.menu{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;padding:14px clamp(16px,4vw,40px) 28px;overflow:auto}
.menu-top{display:flex;justify-content:space-between;align-items:center;padding:.5rem;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--card)}
.menu-links{display:grid;margin-block:auto;padding-block:2rem}
.menu-links a{display:flex;align-items:baseline;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);text-decoration:none;font:800 clamp(2.2rem,11vw,3.6rem)/1 var(--font-display);letter-spacing:-.03em}
.menu-links a span{font:600 .85rem/1 var(--font-body);letter-spacing:.1em;color:var(--accent)}
.menu-foot{display:grid;gap:1rem;justify-items:start}
.menu-mail{font-weight:600}
body.locked{overflow:hidden}

/* 1. hero */
.hero{position:relative;overflow:hidden;overflow:clip;padding:clamp(8.5rem,17vw,12rem) 0 clamp(3rem,7vw,5.5rem);text-align:center}
.hero-in{position:relative;display:grid;justify-items:center;gap:1.6rem}
.hero h1{max-width:none;font-size:clamp(2.3rem,4.6vw,4rem)}
.nowrap{white-space:nowrap}
@media (max-width:700px){.br-wide{display:none}}
.hero .lead{max-width:40rem}
.hero .cta-row{justify-content:center}
.glow{position:absolute;left:50%;bottom:-38%;width:min(1100px,130%);aspect-ratio:2/1;transform:translateX(-50%);background:radial-gradient(closest-side,var(--glow),transparent 72%);animation:drift 20s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{from{transform:translateX(-58%) translateY(0)}to{transform:translateX(-42%) translateY(-6%)}}

/* hero stickers */
.pill-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stickers{position:relative;z-index:2;width:min(100% - 32px,26rem);height:27.5em;margin:2.2rem auto 0;font-size:.8rem}
.stk{position:absolute;left:var(--mx);top:var(--my);display:grid;place-items:center;text-align:center;padding:.8em 1.3em;border:.26em solid #fff;background:var(--sb);color:var(--sf);font:800 1em/1.05 var(--font-display);letter-spacing:-.01em;box-shadow:0 .3em .7em rgba(32,32,32,.22);transform:translate(var(--dx,0px),var(--dy,0px)) rotate(calc(var(--r,0deg) + var(--t,0deg)));transition:transform .28s cubic-bezier(.2,1.3,.4,1),scale .18s,box-shadow .18s;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;animation:slap .45s cubic-bezier(.2,1.4,.4,1) backwards}
.stk:nth-child(2){animation-delay:.06s}.stk:nth-child(3){animation-delay:.12s}.stk:nth-child(4){animation-delay:.18s}.stk:nth-child(5){animation-delay:.24s}.stk:nth-child(6){animation-delay:.3s}.stk:nth-child(7){animation-delay:.36s}.stk:nth-child(8){animation-delay:.42s}.stk:nth-child(9){animation-delay:.48s}.stk:nth-child(10){animation-delay:.54s}.stk:nth-child(11){animation-delay:.6s}.stk:nth-child(12){animation-delay:.66s}
@keyframes slap{from{opacity:0;scale:1.6}to{opacity:1;scale:1}}
@keyframes boop{0%{rotate:0deg;scale:1}25%{rotate:-10deg;scale:1.14}50%{rotate:8deg;scale:1.08}75%{rotate:-4deg}100%{rotate:0deg;scale:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.stk.boop{animation:boop .55s ease}
.stk .caps{text-transform:uppercase;letter-spacing:.02em}
.stk .caps.xl{font-size:1.3em;line-height:.98;letter-spacing:-.01em}
.stk .serif{font:400 1.75em/1 var(--font-accent);font-style:italic;letter-spacing:0}
.stk i{font:400 1.25em/1 var(--font-accent);font-style:italic}
.stk.pill{border-radius:999px}
.stk.oval{border-radius:50%;padding:1.2em 1.8em}
.stk.sq{border-radius:1.2em;padding:1.1em 1.2em}
.stk.arch{border-radius:6em 6em 1em 1em;padding:2em 1.3em 1.1em}
.stk.ticket{border-radius:.9em;padding:.8em 1.3em .8em 2.5em}
.stk.ticket::before{content:"";position:absolute;left:.85em;top:50%;width:.8em;height:.8em;margin-top:-.4em;border-radius:50%;background:#fff}
.stk.circle{width:var(--w);height:var(--w);padding:0;border-radius:50%;font-size:1.12em}
.stk.shape,.stk.ring,.stk.logo{width:var(--w);height:var(--w);padding:0;border:0;background:none;box-shadow:none;filter:drop-shadow(0 .3em .4em rgba(32,32,32,.22))}
.stk.shape svg,.stk.ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stk.shape span{position:relative}
.stk.shape .caps{font-size:1.12em}
.stk.ring text{font:800 7.6px var(--font-display);fill:var(--sf);letter-spacing:.04em}
.ring-t{transform-origin:50px 50px;animation:spin 22s linear infinite}
.stk.logo{background:#fff;border-radius:50%}
.stk.logo img{width:82%;height:82%;pointer-events:none}
.stk.red{--sb:#A30000;--sf:#FFFDF3}.stk.pink{--sb:#F7E3E1;--sf:#A30000}.stk.cream{--sb:#FFFDF3;--sf:#A30000}.stk.ink{--sb:#202020;--sf:#FFFDF3}.stk.rose{--sb:#E9B4AE;--sf:#202020}.stk.mustard{--sb:#E2A72E;--sf:#202020}.stk.sky{--sb:#C5D8F2;--sf:#202020}.stk.green{--sb:#2E6B4A;--sf:#FFFDF3}
.stk.drag{cursor:grabbing;scale:1.1;box-shadow:0 1em 1.8em rgba(32,32,32,.3);transition:scale .18s,box-shadow .18s}
.stk.shape.drag,.stk.ring.drag,.stk.logo.drag{box-shadow:none;filter:drop-shadow(0 1em 1em rgba(32,32,32,.3))}
@media (hover:hover) and (pointer:fine){.stk{cursor:grab}.stk:hover{scale:1.06}.stk.drag{scale:1.1}}
@media (max-width:1239px){.stk.deco.pink{display:none}}
@media (min-width:1240px){
  .stickers{position:absolute;inset:0;width:auto;height:auto;margin:0;font-size:clamp(.9rem,1.15vw,1.12rem);pointer-events:none}
  .stk{left:var(--x);top:var(--y);pointer-events:auto;touch-action:none}
}

/* hero typing effect. JS splits the headline into letters and reveals them one by one; without JS or with reduced motion the text is simply there. */
.typing .tch{position:relative;visibility:hidden}
.typing .tch.on{visibility:visible}
.typing .accent-word:not(.lit){background-size:0% 100%}
.typing .tch.caret::after{content:"";position:absolute;right:-.07em;top:.1em;bottom:.06em;width:.07em;border-radius:2px;background:var(--accent);animation:blink .75s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* 2. strip */
.strip-sec{padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.strip{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.belt{display:flex;width:max-content;animation:belt var(--mq) linear infinite}
.belt.paused,.strip:hover .belt,.strip:focus-within .belt{animation-play-state:paused}
@keyframes belt{to{transform:translateX(-50%)}}
.set{display:flex;gap:16px;padding-right:16px}
.st{position:relative;flex:none;width:clamp(210px,24vw,320px);aspect-ratio:4/3;padding:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--chip);touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.st img{width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .4s}
.st:hover img{transform:scale(1.04)}
.st span{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);background:var(--card);color:var(--fg);border-radius:var(--radius-pill);padding:.35rem .8rem;font:600 .78rem/1.2 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip-hint{margin-top:.9rem;text-align:center;color:var(--muted);font-size:.82rem}
.peek{position:fixed;inset:0;z-index:70;display:grid;place-content:center;justify-items:center;gap:.8rem;padding:24px;background:rgba(19,17,17,.72);pointer-events:none}
.peek img{max-width:min(92vw,1000px);max-height:76vh;border-radius:18px;background:#fff}
.peek span{background:#FFFDF3;color:#202020;border-radius:var(--radius-pill);padding:.45rem 1rem;font-weight:600;font-size:.9rem}

/* bands */
.band{padding-block:clamp(4rem,9vw,7.5rem)}
.band.white{background:var(--card)}
.band.tight{padding-block:clamp(2rem,4vw,3rem);border-block:1px solid var(--line)}
.band.accent{background:#A30000;color:#FFFDF3}
.band.accent .accent-word{color:#A30000;background-image:linear-gradient(#FFFDF3,#FFFDF3)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head h2{max-width:18ch}

/* 4. tools and clients */
.rows{display:grid;gap:1.6rem}
.row-strip{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:1rem 2rem;align-items:center}
.row-l{font:700 .72rem/1.3 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tools,.clients{display:flex;flex-wrap:wrap;gap:.5rem .6rem}
.tools li{display:flex;align-items:center;gap:.55rem;border:1px solid var(--line);background:var(--bg);border-radius:var(--radius-pill);padding:.3rem .95rem .3rem .35rem;font-weight:600;font-size:.88rem}
.tools i{width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;background:var(--fg);color:var(--bg);font:800 .66rem/1 var(--font-display);font-style:normal}
.skills{display:flex;flex-wrap:wrap;gap:.45rem .5rem}
.skills li{border:1px solid var(--line);border-radius:var(--radius-pill);padding:.32rem .9rem;font-weight:600;font-size:.88rem}
.clients{gap:.4rem 1.8rem}
.clients li{font:800 clamp(1rem,1.6vw,1.25rem)/1.3 var(--font-display);letter-spacing:-.02em;color:var(--muted)}
.clients li.more-clients{font:600 .95rem/1.6 var(--font-body);letter-spacing:0;color:var(--accent)}
@media (max-width:760px){.row-strip{grid-template-columns:1fr}}

/* 5. about */
.about{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.about-copy{display:grid;gap:1.6rem;justify-items:start}
.about-copy h2{max-width:15ch}
.facts{display:grid;gap:1.1rem;width:100%;padding-top:1.4rem;border-top:1px solid var(--line)}
.facts dt,.meta dt{font:700 .7rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.facts dd{display:flex;flex-wrap:wrap;gap:.4rem}
.facts dd span{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-pill);padding:.3rem .85rem;font-size:.85rem;font-weight:600}
.about-side{display:grid;gap:1rem}
.portrait{aspect-ratio:1;border-radius:var(--radius-card);overflow:hidden;display:grid;place-items:center;background:var(--card);border:1px solid var(--line)}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait img.portrait-mark{width:56%;height:auto;object-fit:contain}
.xp{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:0 1.2rem}
.xp summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;font-weight:700;cursor:pointer;list-style:none}
.xp summary::-webkit-details-marker{display:none}
.xp[open] summary .i{transform:rotate(45deg)}
.xp li{display:grid;gap:.1rem;padding:.75rem 0;border-top:1px solid var(--line);font-size:.88rem}
.xp li span,.xp li time{color:var(--muted)}
.xp li time{font-size:.8rem}
@media (max-width:860px){.about{grid-template-columns:1fr}.about-side{max-width:26rem}}

/* 6. services index */
.svc{border-top:1px solid var(--line)}
.svc a{position:relative;display:grid;grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1fr) 2.5rem;gap:1.5rem;align-items:center;padding:1.7rem .25rem;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .25s}
.svc .n,.cards3 .n{font:600 .85rem/1 var(--font-body);letter-spacing:.1em;color:var(--accent)}
.svc-main{display:grid;gap:.4rem}
.svc-name{font:800 clamp(1.5rem,3.2vw,2.5rem)/1.05 var(--font-display);letter-spacing:-.03em}
.svc-line{color:var(--muted)}
.svc-list{color:var(--muted);font-size:.92rem}
.svc .go{width:1.5rem;height:1.5rem;justify-self:end;transition:transform .25s}
.svc-thumb{position:absolute;right:5rem;top:50%;width:230px;height:160px;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);opacity:0;transform:translateY(-50%) rotate(-3deg) scale(.94);transition:opacity .25s,transform .25s;pointer-events:none;z-index:2}
@media (hover:hover) and (min-width:900px){
  .svc a:hover,.svc a:focus-visible{padding-left:1rem}
  .svc a:hover .svc-name,.svc a:focus-visible .svc-name{color:var(--accent)}
  .svc a:hover .svc-thumb,.svc a:focus-visible .svc-thumb{opacity:1;transform:translateY(-50%) rotate(-3deg) scale(1)}
  .svc a:hover .go{transform:translate(3px,-3px)}
}
@media (max-width:899px){
  .svc a{grid-template-columns:2.4rem minmax(0,1fr) 1.5rem;gap:.9rem;align-items:start;padding-block:1.4rem}
  .svc-list{grid-column:2}
  .svc .go{grid-column:3;grid-row:1}
  .svc-thumb{display:none}
}

/* 7. work */
.featured{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.fcard{display:flex;flex-direction:column;text-align:left;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.fcard:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.fcard .art{aspect-ratio:4/3;background:var(--chip);overflow:hidden}
.fcard img,.tile img{width:100%;height:100%;object-fit:cover}
.fcard .body{display:grid;gap:.5rem;padding:1.3rem 1.4rem 1.5rem}
.fcard p{color:var(--muted);font-size:.92rem}
.tag{font:700 .7rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.more{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:.9rem;margin-top:.3rem}
.all{margin-top:clamp(3rem,6vw,5rem);scroll-margin-top:6rem}
.all-h{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:1.1rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.tile{display:block;text-align:left;padding:0;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;min-width:0}
.tile:hover{border-color:var(--accent)}
.tile[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.tile .art{aspect-ratio:4/3;background:var(--chip);overflow:hidden}
.tile .body{display:grid;gap:.35rem;padding:.95rem 1.1rem 1.1rem}
.tile h4{margin:0;font:800 1.05rem/1.2 var(--font-display)}
.tile small{color:var(--muted);font-size:.8rem}
.detail{margin-top:1.2rem;background:var(--card);border:1.5px solid var(--accent);border-radius:var(--radius-card);padding:clamp(1.1rem,3vw,2rem);scroll-margin-top:6rem}
.detail:focus{outline:none}
.detail-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.detail-top h3{font-size:clamp(1.5rem,3vw,2.2rem);margin-top:.5rem}
.detail-top small{color:var(--muted)}
.detail-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.4rem;margin-block:1.4rem}
.detail-cols b{display:block;font:700 .7rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.5rem}
.detail-cols p{color:var(--muted);font-size:.94rem}
.detail-imgs{display:grid;gap:1rem}
.detail-vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem;max-width:56rem;margin-inline:auto}
.detail-vids video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:18px;border:1px solid var(--line);background:#202020}
@media (max-width:620px){.detail-vids{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.4rem}.detail-vids video{scroll-snap-align:center}}
.detail-imgs img{width:100%;border-radius:18px;border:1px solid var(--line);background:#FFFDF3}
@media (max-width:900px){.featured{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.fcard{flex-direction:row}.fcard .art{flex:0 0 40%;aspect-ratio:auto}}
@media (max-width:560px){.grid{grid-template-columns:1fr}.fcard{flex-direction:column}.fcard .art{flex:none;aspect-ratio:4/3}}

/* 8. case study */
.case-head{display:grid;gap:1.3rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.case-head h2{font-size:clamp(2.1rem,4.8vw,3.6rem);margin-top:-.2rem}
.meta{display:flex;flex-wrap:wrap;gap:1.2rem 3rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.meta dd{font-weight:600}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:center;padding-block:clamp(1.8rem,4vw,3rem);border-top:1px solid var(--line)}
.feature:nth-of-type(even) .feature-art{order:-1}
.feature-copy{display:grid;gap:1.1rem}
.feature-copy h3{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.02em}
.feature-copy p{color:var(--muted)}
.feature-art{border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--line);background:var(--bg)}
.feature-art img{width:100%}
.portrait-art{max-width:26rem;justify-self:center;width:100%}
.bigs{display:grid;gap:1.1rem}
.bigs li{display:grid;gap:.25rem;padding-left:1rem;border-left:3px solid var(--accent)}
.bigs b{font:800 clamp(1.3rem,2.4vw,1.8rem)/1.1 var(--font-display);letter-spacing:-.02em}
.bigs span{color:var(--muted)}
.steps-mini{display:grid;gap:.9rem;counter-reset:s}
.steps-mini li{counter-increment:s;display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.1rem .6rem}
.steps-mini li::before{content:"0" counter(s);grid-row:span 2;font:600 .85rem/1.9 var(--font-body);letter-spacing:.08em;color:var(--accent)}
.steps-mini b{font:800 1.1rem/1.4 var(--font-display)}
.steps-mini span{color:var(--muted);grid-column:2}
@media (max-width:860px){.feature{grid-template-columns:1fr}.feature:nth-of-type(even) .feature-art{order:0}}

.soon{display:flex;align-items:center;gap:.6rem;margin-top:clamp(1.5rem,3vw,2.5rem);padding-top:1.4rem;border-top:1px solid var(--line);font-weight:600;color:var(--muted)}
.soon .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);flex:none}

/* draft placeholders */
[data-confirm]{display:none!important}
[data-draft] [data-confirm]{display:revert!important}
[data-draft] .steps-mini li[data-confirm]{display:grid!important}
[data-draft] [data-confirm] dd,[data-draft] li[data-confirm] span{justify-self:start}
[data-draft] li[data-confirm] span,[data-draft] .qa[data-confirm] .a p,[data-draft] .detail-cols [data-confirm] p{display:inline-block;border:1.5px dashed var(--accent);border-radius:8px;padding:.05rem .55rem;color:var(--accent);font-weight:600;font-size:.88rem}

/* packaging case study: concept label and before/after slider */
.concept-tag{display:inline-block;justify-self:start;border:1.5px dashed var(--accent);color:var(--accent);border-radius:999px;padding:.3rem .9rem;font-weight:700;font-size:.85rem}
#about{border-top:1px solid var(--line)}
.ba-wrap{border:0;background:none;overflow:visible}
.ba{position:relative;aspect-ratio:1;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--line);background:#fff;-webkit-user-select:none;user-select:none}
.ba img,.ba-before{position:absolute;inset:0;width:100%;height:100%}
.ba img{object-fit:cover}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-before img{transform:scale(1.05)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(32,32,32,.15);pointer-events:none}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A30000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");background-size:1.4rem;background-repeat:no-repeat;background-position:center}
.ba-tag{position:absolute;top:.8rem;background:rgba(32,32,32,.78);color:#FFFDF3;border-radius:999px;padding:.25rem .75rem;font-weight:700;font-size:.78rem;pointer-events:none}
.ba-l{left:.8rem}.ba-r{right:.8rem}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ba:has(.ba-range:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.ba-wrap figcaption{margin-top:.7rem;color:var(--muted);font-size:.88rem;text-align:center}
.nojs-brief{color:var(--muted);font-size:.85rem;margin-top:.3rem}

/* how I got here: scroll-lit statement with drawn-on doodles and draggable notes */
.story{background:#1E1C1C;color:#FFFDF3}
.story-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.story-label{font:600 .95rem/1.2 var(--font-body);letter-spacing:0;color:#CFC8C8;margin-bottom:1.4rem}
.story-text{font:800 clamp(1.9rem,4.2vw,3.6rem)/1.3 var(--font-display);letter-spacing:-.03em;max-width:19ch}
.story-anim .story-text .w{color:rgba(255,253,243,.22);transition:color .35s ease}
.story-anim .story-text .w.on{color:#FFFDF3}
.mk{position:relative}
.mk-circle,.mk-wave,.mk-double{white-space:nowrap}
.mk svg{position:absolute;overflow:visible;pointer-events:none;fill:none;stroke:#E8484E;stroke-linecap:round;stroke-linejoin:round}
.mk svg path{stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.story-anim .mk svg path{stroke-dashoffset:1;transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)}
.story-anim .mk.on svg path{stroke-dashoffset:0}
.mk-circle svg{left:-9%;top:-22%;width:118%;height:146%}
.mk-wave svg{left:0;bottom:-.24em;width:100%;height:.28em}
.mk-double svg{left:-2%;bottom:-.34em;width:104%;height:.34em}
.mk-pill{color:#FFFDF3;background:linear-gradient(#A30000,#A30000) no-repeat left center/100% 100%;border-radius:999px;padding:.02em .3em .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .6s cubic-bezier(.2,.8,.2,1)}
.story-anim .mk-pill{background-size:0% 100%}
.story-anim .mk-pill.on{background-size:100% 100%}
.spark{display:inline-block;width:.42em;height:.42em;margin-left:.08em;vertical-align:.9em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2A72E' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 2v20M2 12h20M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .5s cubic-bezier(.2,1.6,.4,1)}
.story-anim .spark{transform:scale(0) rotate(-90deg)}
.story-anim .spark.on{transform:none}
.notes{position:relative;min-height:30rem}
.notes-hint{position:absolute;left:0;top:30%;z-index:3;display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(255,253,243,.25);border-radius:999px;padding:.45rem .9rem;font-size:.85rem;color:#CFC8C8;transform:rotate(-4deg)}
.notes-hint svg{width:1.6rem;height:.8rem;fill:none;stroke:#E8484E;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.note{position:absolute;left:var(--x);top:var(--y);width:min(17rem,80%);padding:1.4rem 1.3rem 1.1rem;border-radius:4px 4px 16px 4px;color:#202020;box-shadow:0 14px 30px rgba(0,0,0,.35);transform:translate(var(--dx,0px),var(--dy,0px)) rotate(calc(var(--r,0deg) + var(--t,0deg)));transition:transform .3s cubic-bezier(.2,1.3,.4,1),opacity .6s ease;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.note::before{content:"";position:absolute;left:50%;top:-.7rem;width:5.5rem;height:1.4rem;margin-left:-2.75rem;background:rgba(255,255,255,.55);transform:rotate(-3deg)}
.note p{font:600 1.15rem/1.35 var(--font-body)}
.note small{display:block;margin-top:.7rem;font:700 .7rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:rgba(32,32,32,.6)}
.note ul{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.note li{background:#fff;border-radius:999px;padding:.2rem .65rem;font:700 .78rem/1.4 var(--font-display)}
.n-mustard{background:#F3D27A}.n-pink{background:#F7D2CC}.n-sky{background:#CFE0F5}
.story-anim .note{opacity:0;transform:translate(var(--dx,0px),calc(var(--dy,0px) + 24px)) rotate(var(--r,0deg))}
.story-anim .note.in{opacity:1;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(calc(var(--r,0deg) + var(--t,0deg)))}
.note.drag{transition:none;z-index:5;box-shadow:0 24px 44px rgba(0,0,0,.45)}
@media (hover:hover) and (pointer:fine){.note{cursor:grab}.note.drag{cursor:grabbing}}
@media (max-width:860px){
  .story-in{grid-template-columns:1fr}
  .notes{min-height:0;display:flex;flex-wrap:wrap;gap:1.2rem;padding-top:.6rem}
  .notes-hint{display:none}
  .note{position:relative;left:auto;top:auto;width:min(15rem,100%)}
}

/* philosophy and process */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.card{display:grid;gap:.8rem;align-content:start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:clamp(1.4rem,2.6vw,2rem)}
.card h3{font-size:1.6rem}
.card p{color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.steps li{display:grid;gap:.6rem;align-content:start;padding-top:1.2rem;border-top:3px solid var(--accent)}
.steps .n{font:900 clamp(2.6rem,5vw,3.8rem)/1 var(--font-display);color:var(--accent)}
.steps h3{font-size:1.4rem}
.steps p,.gets span{color:var(--muted)}
.gets-h{margin:clamp(2.5rem,5vw,3.5rem) 0 1.1rem;font-size:clamp(1.4rem,2.4vw,1.8rem)}
.gets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.gets li{display:grid;gap:.3rem;background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:1.3rem 1.5rem}
.gets b{font:800 1.1rem/1.3 var(--font-display)}
@media (max-width:900px){.cards3{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps,.gets{grid-template-columns:1fr}}

/* 10. testimonial */
.carousel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:clamp(1.5rem,4vw,3.5rem)}
.slide{display:grid;gap:1.6rem}
.slide blockquote{font:500 clamp(1.15rem,2.3vw,1.7rem)/1.5 var(--font-body);letter-spacing:-.01em;max-width:58rem}
.slide blockquote::before{content:"\201C";display:block;font:400 5rem/.7 var(--font-accent);font-style:italic;color:var(--accent);margin-bottom:.6rem}
.slide figcaption{display:grid;gap:.1rem}
.slide figcaption b{font:800 1.1rem/1.3 var(--font-display)}
.slide figcaption span{color:var(--accent);font-weight:600}
.stars{color:var(--accent);letter-spacing:.2em;font-size:1.1rem}
.car-nav{display:flex;align-items:center;gap:.5rem;margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.counter{margin-right:auto;font:600 .9rem/1 var(--font-body);letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--muted)}

/* 11. faq */
.faq-wrap{max-width:60rem}
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa h3{font:inherit;letter-spacing:0}
.qa button{display:grid;grid-template-columns:2.6rem minmax(0,1fr) 1.5rem;gap:.6rem;align-items:center;width:100%;padding:1.35rem .25rem;background:none;border:0;text-align:left}
.qa .n{font:600 .85rem/1 var(--font-body);letter-spacing:.1em;color:var(--accent)}
.qa .q{font:700 clamp(1.05rem,1.8vw,1.3rem)/1.3 var(--font-display)}
.qa .i{width:1.4rem;height:1.4rem;transition:transform .25s}
.qa button[aria-expanded="true"] .i{transform:rotate(45deg);color:var(--accent)}
.qa button:hover .q{color:var(--accent)}
.qa .a{padding:0 2rem 1.5rem 3.45rem;color:var(--muted);max-width:50rem}

/* 12. closing CTA and brief builder */
.cta-head{display:grid;gap:1.6rem;justify-items:start;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.cta-head h2{font-size:clamp(3rem,13vw,10.5rem);line-height:1.08;letter-spacing:-.05em}
.cta-head .big{color:#FFFDF3;opacity:.92}
.brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);background:var(--card);color:var(--fg);border-radius:var(--radius-card);padding:clamp(1.2rem,3.5vw,2.6rem);scroll-margin-top:6rem}
.form,.out{display:grid;gap:1.1rem;align-content:start;min-width:0}
.brief-note{color:var(--muted);font-size:.92rem}
.field{display:grid;gap:.45rem}
.field>label:not(.check),.field>legend,.out>label,.send-l{font:700 .7rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field>legend{margin-bottom:.55rem}
.brief input[type=text],.brief input[type=date],.brief select,.brief textarea{width:100%;min-height:3rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--fg);font:500 .95rem/1.5 var(--font-body)}
.brief textarea{resize:vertical}
.brief ::placeholder{color:var(--muted);opacity:1}
#bNeeds{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
#bNeeds legend{float:left;width:100%}
.check{display:inline-flex;align-items:center;gap:.5rem;font-weight:500;font-size:.95rem;min-height:2rem}
.check input{width:1.15rem;height:1.15rem;accent-color:var(--btn)}
.out-row{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
.out-row.send{padding-top:1.1rem;border-top:1px solid var(--line)}
.addr{font-weight:700;overflow-wrap:anywhere}
.status{min-height:1.4em;color:var(--ok);font-weight:600;font-size:.9rem}
@media (max-width:860px){.brief{grid-template-columns:1fr}}

/* 13. footer */
.foot{padding:clamp(3rem,6vw,5rem) 0 2rem;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:2rem}
.foot-brand{display:grid;gap:1rem;align-content:start;justify-items:start}
.foot-brand p{color:var(--muted);font-size:.92rem;max-width:22rem}
.foot h2{font:700 .72rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.foot ul{display:grid;gap:.15rem}
.foot li a{display:inline-block;padding:.3rem 0;text-decoration:none;font-weight:500}
.foot li a:hover,.foot-base a:hover{color:var(--accent);text-decoration:underline}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* motion */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .strip{overflow-x:auto;-webkit-mask-image:none;mask-image:none;padding-inline:16px}
  .set[aria-hidden="true"]{display:none}
  .ring-t{animation:none!important}
  .story-anim .story-text .w{color:#FFFDF3}
}