/* Magdalena Mrowiec — portfolio
   Tokens from Figma (Portfolio-New): Ocean #335765, Light Blue #74a8a4, Coral #ff856d, page #dbe2dc.
   Type: Instrument Serif (Big Headlines 150/1, Headline 60/1.2), Geist (Body 24/1.45), Geist Mono SemiBold (Mono Highlight 16/1.45, 15% tracking). */

:root{
  --bg:#dbe2dc;
  --ocean:#335765;
  --teal:#74a8a4;
  --teal-ink:#74a8a4;           /* teal darkened for small text on the page colour (AA) */
  --coral:#ff856d;
  --coral-ink:#ff856d;          /* coral for small text that must pass AA */
  --white:#ffffff;
  --card:rgba(255,255,255,.2);
  --line:rgba(51,87,101,.18);

  --display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --body:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-big:clamp(56px, 10.42vw, 150px);
  --fs-h:clamp(34px, 4.17vw, 60px);
  --fs-body:clamp(18px, 1.67vw, 24px);
  --fs-mono:clamp(12px, 1.11vw, 16px);

  --wrap:1040px;
  --gutter:clamp(16px, 4vw, 48px);
  --section:clamp(96px, 13.9vw, 200px);
  --title-gap:clamp(64px, 6.7vw, 96px); /* space below every big section title */
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ocean);font:400 var(--fs-body)/1.45 var(--body);overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
em{font-style:italic}
:focus-visible{outline:2px solid var(--ocean);outline-offset:4px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--white);padding:10px 16px;border-radius:999px;font:600 14px var(--mono);text-decoration:none}
.skip:focus{top:12px}

/* Type */
.big{font:400 var(--fs-big)/1 var(--display);letter-spacing:-.02em}
.h{font:400 var(--fs-h)/1.2 var(--display);letter-spacing:-.02em}
.big em,.h em{color:var(--teal);letter-spacing:-.01em}
.mono{font:600 var(--fs-mono)/1.45 var(--mono);letter-spacing:.15em;text-transform:uppercase}
.eyebrow{color:var(--coral)}
.eyebrow.ink{color:var(--coral-ink)}
.lead{font-size:var(--fs-body);max-width:52ch}

/* Layout */
.wrap{width:min(var(--wrap), 100% - 2 * var(--gutter));margin-inline:auto}
.section{padding-block:var(--section) 0}
.stack>*+*{margin-top:26px}

/* Header */
.site-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:30px var(--gutter) 0;max-width:1424px;margin:0 auto}
.brand{text-decoration:none;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(16px,2.8vw,40px)}
.nav a{text-decoration:none}
.nav a.link{position:relative;padding:8px 0}
.nav a.link::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav a.link:hover::after,.nav a.link[aria-current="page"]::after{transform:scaleX(1)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:clamp(14px,1.67vw,24px) clamp(20px,2.2vw,32px);
  border:2px solid var(--teal);border-radius:43px;background:transparent;color:var(--ocean);text-decoration:none;cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .25s ease}
.btn:hover{background:var(--teal);border-color:var(--teal);color:var(--white)}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--white)}
.btn.solid:hover{background:var(--teal)}
.btn svg{width:1.2em;height:1.2em;flex:none}
.tags{display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:0;list-style:none}
.tag{border:2px solid var(--teal);border-radius:43px;padding:clamp(8px,.83vw,12px) clamp(16px,1.67vw,24px)}

/* Hero */
.hero{position:relative;padding-top:clamp(56px,5.3vw,77px)}
.hero h1{max-width:1037px}
.hero .sub{margin-top:40px}
.hero .cta{margin-top:clamp(40px,5.6vw,80px);position:relative;z-index:2}
.hero-art{position:relative;margin-top:clamp(32px,5vw,72px);width:100%;pointer-events:none}
.hero-art img{width:min(100%,1438px);height:auto;aspect-ratio:1438/618;margin:0 auto}
.hero:has(.hero-art){padding-bottom:clamp(24px,4vw,64px)}

/* Ticker */
.ticker{position:relative;z-index:3;margin-top:calc(-1 * clamp(80px, 21.7vw, 313px));background:var(--white);overflow:hidden;height:51px;display:flex;align-items:center}
.ticker-track{display:flex;flex:none;white-space:nowrap;animation:tick 60s linear infinite}
.ticker span{padding-inline:18px;display:inline-flex;align-items:center;gap:36px}
.ticker span::before{content:"✳";color:var(--coral);font-size:14px;letter-spacing:0}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
.hero-after{height:clamp(40px,6vw,96px)}

/* Section intro */
.intro .big+p{margin-top:26px}

/* Project blocks (home + work) */
.project{display:grid;gap:32px}
.project .eyebrow+*{margin-top:-14px}
.project .h{margin-top:0}
.project-link{text-decoration:none;display:block;border-radius:40px}
.project-link:hover .h{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-color:var(--coral)}
.facts{display:flex;flex-wrap:wrap;gap:28px 56px;margin:24px 0 0;padding:0}
.facts div{display:grid;gap:16px}
.facts dt{color:var(--coral-ink)}
.facts dd{margin:0}
.arrow-link{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ocean);border-bottom:2px solid var(--coral);padding-bottom:4px;width:max-content}
.arrow-link svg{width:18px;height:18px;transition:transform .25s ease}
.arrow-link:hover svg{transform:translateX(4px)}

/* Order tracking art on the home page */
.ot-art{display:block;position:relative;margin-top:clamp(48px,7vw,100px);aspect-ratio:1042/767;width:min(1042px,100%);margin-left:auto;margin-right:calc(-1 * max(0px, min(135px, (100vw - var(--wrap))/2 - var(--gutter))))}
.ot-art .phone-hand{position:absolute;inset:0;width:100%;height:100%}
.ot-art .courier{position:absolute;left:4.1%;top:0;width:40.5%;border-radius:50%;animation:float 6s ease-in-out infinite}
.ot-art .glow{position:absolute;left:30%;top:15%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side, rgba(255,133,109,.55), rgba(255,133,109,0));filter:blur(10px)}
@keyframes float{50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.ot-art .courier{animation:none}}

/* Store card showcase */
.showcase-visual{border-radius:40px;background:var(--card);padding:clamp(24px,4vw,56px);display:grid;place-items:center;min-height:clamp(380px,40vw,560px);position:relative;overflow:hidden}
.showcase-visual::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side, rgba(116,168,164,.45), rgba(116,168,164,0));top:-20%;right:-15%}

/* Beliefs */
.beliefs{display:grid;grid-template-columns:minmax(0,507px) minmax(0,419px);justify-content:space-between;gap:40px}
.beliefs .big{position:sticky;top:60px;align-self:start}
.beliefs ol{list-style:none;margin:clamp(0px,61vw - 520px,876px) 0 0;padding:0;display:grid;gap:88px}
.beliefs li{display:grid;gap:26px}
.beliefs li p+p{margin-top:0}
@media (max-width:900px){
  .beliefs{grid-template-columns:1fr}
  .beliefs .big{position:static}
  .beliefs ol{margin-top:24px;gap:56px}
}

/* Quotes */
.quotes-head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.quote-ctrl{display:flex;gap:12px}
.quote-ctrl button{width:56px;height:56px;border-radius:50%;border:2px solid var(--teal);background:transparent;color:var(--ocean);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s}
.quote-ctrl button:hover{background:var(--ocean);color:var(--white);border-color:var(--ocean)}
.quote-ctrl button:disabled{opacity:.35;cursor:default;background:transparent;color:var(--ocean);border-color:var(--teal)}
.quote-ctrl svg{width:22px;height:22px}
.quotes{margin-top:var(--title-gap);display:flex;gap:25px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:max(var(--gutter), calc((100vw - var(--wrap))/2));scroll-padding-inline:max(var(--gutter), calc((100vw - var(--wrap))/2));
  margin-inline:calc(-1 * max(var(--gutter), calc((100vw - var(--wrap))/2)));padding-bottom:8px}
.quotes::-webkit-scrollbar{display:none}
.quote{flex:none;width:min(504px, 82vw);scroll-snap-align:start;background:var(--card);border-radius:40px;padding:clamp(28px,2.8vw,40px);display:flex;flex-direction:column;gap:21px;margin:0}
.quote blockquote{margin:0;font:400 clamp(30px,3.5vw,50px)/1.2 var(--display);letter-spacing:-.02em;flex:1}
.quote blockquote em{color:var(--teal-ink);letter-spacing:-.01em}
.quote .rule{width:100px;height:2px;background:var(--coral);border:0;margin:0}
.quote figcaption{display:flex;align-items:center;gap:21px;color:var(--coral-ink)}
.quote figcaption img,.quote .initials{width:60px;height:60px;border-radius:50%;flex:none;object-fit:cover}
.quote .initials{display:grid;place-items:center;background:var(--ocean);color:var(--bg);font:400 26px/1 var(--display);letter-spacing:0}
.after-quotes{margin-top:clamp(48px,7vw,100px)}

/* Contact */
.contact{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-block:var(--section) clamp(72px,8vw,120px)}
.site-footer{border-top:1px solid var(--line);padding:24px var(--gutter) 40px;max-width:1424px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:16px}
.site-footer .mono{font-size:12px}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Background glows (About) */
.glow-blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.glow-teal{background:radial-gradient(closest-side, rgba(116,168,164,1), rgba(116,168,164,0))}
.glow-coral{background:radial-gradient(closest-side, rgba(255,133,109,1), rgba(255,133,109,0) 95%)}
main{position:relative;overflow-x:clip}
main>*{position:relative;z-index:1}
main>.glow-blob{position:absolute;z-index:0}

@media (max-width:640px){
  .site-header{padding-top:20px}
  .brand{font-size:11px;letter-spacing:.1em}
  .nav{gap:14px}
  .nav .btn{padding:10px 14px;min-height:40px;font-size:11px}
  .nav a.link{font-size:11px}
  .facts{gap:20px 28px}
}
@media (max-width:420px){
  .brand .last{display:none}
}

/* Store card showcase (recreated in code) */
.sc{display:grid;gap:28px;justify-items:center;width:100%;position:relative;z-index:1}
.sc-stage{width:min(420px,100%);perspective:1200px}
.sc-card{--r:22px;background:#fff;border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(51,87,101,.45),0 2px 6px rgba(51,87,101,.08);overflow:hidden;color:#161617;font-family:var(--body);
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.sc-img{position:relative;aspect-ratio:16/8.4;overflow:hidden;background:linear-gradient(135deg,#f6c58f,#ef8a62 55%,#c75b44)}
.sc-img svg{position:absolute;inset:0;width:100%;height:100%}
.sc-badge{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font:600 13px/1 var(--body);
  opacity:0;transform:translateX(-14px) scale(.96);transition:opacity .35s ease, transform .5s cubic-bezier(.2,.9,.25,1.2)}
.sc-badge svg{position:static;width:14px;height:14px}
.sc-badge.promo{background:#ffde99;color:#161617}
.sc-badge.prime{background:#335765;color:#fff}
.sc-badge.trust{background:#fff;color:#017963;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.sc-fav{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.sc-fav svg{position:static;width:16px;height:16px}
.sc-body{padding:14px 16px 16px;display:grid;gap:6px}
.sc-row{display:flex;align-items:center;gap:8px;min-width:0}
.sc-logo{width:30px;height:30px;border-radius:9px;background:#335765;color:#fff;display:grid;place-items:center;font:600 12px var(--body);flex:none}
.sc-name{font:600 17px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-rating{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font:500 14px var(--body);white-space:nowrap}
.sc-rating svg{width:14px;height:14px;color:#f2a93b}
.sc-ext{display:inline-flex;align-items:center;gap:4px;font:500 13px var(--body);color:#5b5d63;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .5s ease, opacity .4s ease}
.sc-meta{font:400 14px/1.3 var(--body);color:#5b5d63;display:flex;gap:6px;align-items:center}
.sc-slot{height:0;overflow:hidden;transition:height .45s cubic-bezier(.2,.8,.2,1)}
.sc-slot p{font:500 14px/1.3 var(--body);padding-top:6px;display:flex;gap:6px;align-items:center;opacity:0;transform:translateY(6px);transition:opacity .35s ease .1s, transform .4s ease .1s}
.sc-slot .promo-line{color:#c4381f}
.sc-slot .prime-line{color:#335765}
.sc-slot .prime-line b{background:#ffde99;border-radius:5px;padding:1px 5px;font-weight:600;color:#161617}
.sc-card[data-state="promo"] .sc-badge.promo,
.sc-card[data-state="prime"] .sc-badge.promo,
.sc-card[data-state="trust"] .sc-badge.trust{opacity:1;transform:none}
.sc-card[data-state="prime"] .sc-badge.promo{opacity:0}
.sc-card[data-state="prime"] .sc-badge.prime{opacity:1;transform:none}
.sc-card[data-state="rating"] .sc-ext{max-width:90px;opacity:1}
.sc-card[data-state="promo"] .sc-slot,.sc-card[data-state="prime"] .sc-slot{height:30px}
.sc-card[data-state="promo"] .promo-line,.sc-card[data-state="prime"] .prime-line{opacity:1;transform:none}
.sc-slot p{position:absolute}
.sc-slot{position:relative}
.sc-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sc-tabs button{font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ocean);background:transparent;border:2px solid var(--teal);border-radius:999px;padding:10px 14px;cursor:pointer;min-height:40px;transition:background .25s,color .25s,border-color .25s}
.sc-tabs button[aria-selected="true"]{background:var(--ocean);border-color:var(--ocean);color:#fff}
.sc-live{font-size:16px;text-align:center;max-width:44ch;min-height:2.9em}
@media (prefers-reduced-motion:reduce){.sc-card *,.sc-card{transition:none!important}}

/* Hero headline: words surface from a soft blur, one after another */
.split .w{display:inline-block;opacity:.12;filter:blur(10px);transform:translateY(.12em);
  animation:wordIn 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 90ms);animation-play-state:paused}
.split.go .w{animation-play-state:running}
[data-reveal].split .w{animation-delay:calc(120ms + var(--i) * 90ms)}
.reveal .split.go,.split.reveal{opacity:1}
@keyframes wordIn{to{opacity:1;filter:blur(0);transform:none}}
.hero .cta{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) 4.5s both}
.hero.typed .cta{animation:fadeUp2 .8s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes fadeUp2{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Subline types itself out after the headline; hidden letters keep their space so nothing shifts */
[data-type] .c{visibility:hidden}
[data-type] .c.on{visibility:visible}
[data-type] .caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--coral);animation:caret 1s steps(1) infinite}
[data-type].done .caret{animation:caret 1s steps(1) 2 forwards}
@keyframes caret{50%{opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.split .w,.hero .cta{animation:none;opacity:1;filter:none;transform:none}}

/* Extra room between the hero hands and Selected work */
#work.section{padding-top:calc(var(--section) + clamp(32px,4.5vw,72px))}

/* "Read case study" label: a small glass pill that trails the pointer (mouse only); the normal cursor stays */
[data-cursor]{cursor:pointer}
.cursor-pill{position:fixed;left:0;top:0;z-index:50;pointer-events:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:clamp(14px,1.67vw,24px) clamp(20px,2.2vw,32px);border-radius:43px;color:var(--ocean);font:600 var(--fs-mono)/1.45 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.6);background:linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.42) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.3), inset 0 0 14px rgba(255,255,255,.22), 0 10px 26px -14px rgba(51,87,101,.45), 0 1px 2px rgba(51,87,101,.08);
  translate:-50% -50%;transform:translate3d(var(--x,0),var(--y,0),0) scale(.5);opacity:0;
  transition:opacity .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background .15s ease, color .15s ease, box-shadow .15s ease}
.cursor-pill.on{opacity:1;transform:translate3d(var(--x,0),var(--y,0),0) scale(1)}
.cursor-pill.on.down{transform:translate3d(var(--x,0),var(--y,0),0) scale(.88);background:rgba(51,87,101,.92);color:var(--white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px -8px rgba(51,87,101,.6);transition-duration:.12s}
.cursor-pill svg{width:1.2em;height:1.2em}
@media (hover:hover) and (pointer:fine){.has-cursor [data-cursor]{cursor:none}.has-cursor [data-cursor].cursor-off{cursor:auto}.has-cursor [data-cursor] :is(button,.dots){cursor:pointer}}
@media (prefers-reduced-motion:reduce){.cursor-pill{transition:opacity .2s ease}}

/* iOS-style glass for every button (same material as the controls under the phone) */
.btn,.quote-ctrl button{position:relative;isolation:isolate;border:1px solid rgba(255,255,255,.6);
  background:linear-gradient(180deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.16) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.3), inset 0 0 14px rgba(255,255,255,.22),
             0 10px 26px -14px rgba(51,87,101,.45), 0 1px 2px rgba(51,87,101,.08);
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1)}
.btn::before,.quote-ctrl button::before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 70% at 30% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%)}
.btn:hover,.quote-ctrl button:hover{color:var(--ocean);border-color:rgba(255,255,255,.9);
  background:linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.38) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 18px rgba(255,255,255,.35),
             0 16px 32px -14px rgba(51,87,101,.5), 0 2px 4px rgba(51,87,101,.08);
  transform:scale(1.03)}
.btn:active,.quote-ctrl button:active{transform:scale(.96);transition-duration:.15s}
.quote-ctrl button:disabled{opacity:.4;background:linear-gradient(180deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.16) 100%);color:var(--ocean);transform:none}

/* Quotes: on desktop the section pins while vertical scrolling moves the cards sideways */
[data-quotes].pinned .qs-pin{position:sticky;top:var(--pin-top,0px)}
[data-quotes].pinned .quotes{scroll-snap-type:none;margin-top:var(--title-gap)}
[data-quotes].pinned .after-quotes{margin-top:clamp(28px,3vw,44px)}

/* Buttons: compact pill (the size the tags used to be) */
.btn{min-height:44px;padding:clamp(10px,.83vw,12px) clamp(16px,1.67vw,24px)}
.cursor-pill{padding:clamp(10px,.83vw,12px) clamp(16px,1.67vw,24px)}
@media (max-width:640px){.nav .btn{padding:8px 12px;min-height:36px}}

/* Tags are labels, not buttons: flat tinted chips, small square corners, no outline, no shadow */
.tags{gap:8px}
.tag,.tags.small .tag{border:0;border-radius:6px;padding:6px 10px;background:rgba(116,168,164,.2);color:var(--ocean);
  font-size:12px;font-weight:400;letter-spacing:.12em;line-height:1.3;cursor:default;user-select:none}

/* Ticker band as a strip of glass over the hands */
.ticker{background:linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.4) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  border-block:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.35), 0 10px 26px -16px rgba(51,87,101,.4)}

/* Case study entry: one light container so it's clear where it starts and ends */
.cs-card{--cpad:clamp(24px,5vw,72px);position:relative;overflow:hidden;border-radius:40px;padding:var(--cpad) var(--cpad) 0;
  margin-inline:calc(-1 * min(var(--cpad), max(0px, (100vw - var(--wrap)) / 2 - var(--gutter))));
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.32) 100%);
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -40px rgba(51,87,101,.35)}
.cs-card .ot-slider.loop{width:auto;margin-left:calc(-1 * var(--cpad));margin-right:calc(-1 * var(--cpad))}
.cs-card .ot-art{margin-bottom:var(--cpad)}
@media (max-width:640px){.cs-card{border-radius:28px}}
.cs-card .showcase-visual{overflow:visible;background:none;border-radius:0;margin-inline:calc(-1 * var(--cpad));padding:clamp(32px,4vw,56px) var(--cpad) var(--cpad)}

/* Buttons back to flat: transparent fill, Light Blue stroke; hover fills Light Blue with white text */
.btn,.quote-ctrl button{background:transparent;border:2px solid var(--teal);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease}
.btn::before,.quote-ctrl button::before{content:none}
.btn:hover,.quote-ctrl button:hover{background:var(--teal);border-color:var(--teal);color:var(--white);box-shadow:none;transform:none}
.btn:active,.quote-ctrl button:active{transform:scale(.97)}
.quote-ctrl button:disabled{opacity:.35;background:transparent;color:var(--ocean);border-color:var(--teal)}
/* Tags use the Figma "Mono" style (Geist Mono Regular 16, 15% tracking) */
.tag,.tags.small .tag{font:400 var(--fs-mono)/1.45 var(--mono);letter-spacing:.15em;padding:6px 12px}
/* Match Figma rendering: grayscale antialiasing makes text render lighter (weights unchanged) */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* All Ocean mono text (nav, buttons, tags, labels) uses "Mono Highlight": Geist Mono SemiBold, 15% tracking */
.tag,.tags.small .tag{font-weight:600}
/* More vertical breathing room inside project entries */
.project{--pgap:clamp(36px,3.4vw,48px);gap:var(--pgap)}
.project .eyebrow+*{margin-top:calc(20px - var(--pgap))}
.facts{margin-top:clamp(8px,1vw,16px);row-gap:40px}
.facts div{gap:18px}
.sc{gap:40px}
.cs-card .showcase-visual{padding-top:clamp(48px,5vw,80px)}
.project .h+.lead,.project .lead+.tags{margin-top:calc(24px - var(--pgap))}
.facts div{gap:8px}
/* iPhone 16 mockup for showcases (same frame as the order tracking animation) */
.device{--w:min(300px,62vw);--u:calc(var(--w) / 377);width:var(--w);aspect-ratio:377/785;position:relative;z-index:1;
  border-radius:calc(var(--u) * 62);padding:calc(var(--u) * 4);
  background:linear-gradient(160deg,#efeccb 0%,#e7e3bf 30%,#d9d4ae 70%,#ebe8c8 100%);
  box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(82,75,64,.55), inset 0 0 calc(var(--u) * 3) rgba(82,75,64,.35),
             0 calc(var(--u) * 40) calc(var(--u) * 70) calc(var(--u) * -30) rgba(51,87,101,.45)}
.device .pbtn{position:absolute;width:calc(var(--u) * 3.5);border-radius:calc(var(--u) * 2);background:linear-gradient(90deg,#cfc9a3,#ece8c9);box-shadow:inset 0 0 0 calc(var(--u) * .6) rgba(82,75,64,.35)}
.device .pbtn.l{left:calc(var(--u) * -3)}
.device .pbtn.r{right:calc(var(--u) * -3)}
.device .bezel{position:relative;width:100%;height:100%;background:#000;border-radius:calc(var(--u) * 58);padding:calc(var(--u) * 8);
  box-shadow:inset 0 0 0 calc(var(--u) * .4) rgba(255,255,255,.6), inset 0 0 calc(var(--u) * 6) rgba(135,145,148,.35)}
.device .screen{position:relative;width:100%;height:100%;border-radius:calc(var(--u) * 52);overflow:hidden;background:#f3f3f1}
.device .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.device .island{position:absolute;z-index:2;top:calc(var(--u) * 11);left:50%;transform:translateX(-50%);width:calc(var(--u) * 120);height:calc(var(--u) * 35);border-radius:999px;background:#000}
/* 1px Light Blue divider between sections; sits halfway into the section gap so overall spacing stays the same */
.divider{display:block;border:0;height:1px;background:var(--teal);width:min(var(--wrap), 100% - 2 * var(--gutter));
  margin:calc(var(--section) * .5) auto calc(var(--section) * -.5)}
/* Separators: full width, 2px Light Blue */
.divider{width:100%;height:2px;margin-inline:0}
.site-footer{position:relative;border-top:0}
.site-footer::before{content:"";position:absolute;top:0;left:50%;width:100vw;height:2px;transform:translateX(-50%);background:var(--teal)}
/* Hero stop-motion handover: scroll steps through frames (no tweening between them) */
.stop-stage{position:relative;width:min(100%,1438px);aspect-ratio:1438/618;margin:0 auto}
.hero-art .stop-stage img{position:absolute;inset:0;width:100%;height:100%;margin:0}
.stop-stage .lay{display:none}
.stop-stage.moving .full{visibility:hidden}
.stop-stage.moving .lay{display:block}
.stop-stage .l{transform:translate(var(--lx,0),var(--ly,0)) rotate(var(--lr,0deg))}
.stop-stage .r{transform:translate(var(--rx,0),var(--ry,0)) rotate(var(--rr,0deg))}
/* Phase 2 (letting go): giving hand (a) pulls back, box (b) stays with the receiving hands (r) */
.stop-stage:not(.release) .a,.stop-stage:not(.release) .b{display:none}
.stop-stage.release .l{display:none}
.stop-stage.release .a,.stop-stage.release .b{display:block}
.stop-stage .a{transform:translate(var(--ax,0),var(--ay,0)) rotate(var(--ar,0deg))}
.stop-stage .b{transform:translate(var(--rx,0),var(--ry,0)) rotate(var(--rr,0deg))}
/* Same breathing room below the phone in both work cards */
.cs-card .ot-slider.loop{margin-bottom:clamp(24px,3.4vw,48px)}
.cs-card .showcase-visual{padding-bottom:max(88px, calc(var(--cpad) + clamp(40px,4.4vw,62px)))}
/* Quick nav pill (appears on scroll up) */
.mini-nav{position:fixed;z-index:60;top:16px;left:50%;display:flex;align-items:center;gap:clamp(16px,2vw,28px);
  padding:6px 6px 6px clamp(18px,2vw,26px);background:var(--bg);border:2px solid var(--teal);border-radius:999px;
  box-shadow:0 10px 30px -12px rgba(51,87,101,.35);
  transform:translate(-50%,calc(-100% - 24px));transition:transform .35s cubic-bezier(.2,.7,.2,1);white-space:nowrap}
.mini-nav.show{transform:translate(-50%,0)}
.mini-nav a{text-decoration:none}
.mini-nav a.link{position:relative;padding:6px 0}
.mini-nav a.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.mini-nav a.link:hover::after,.mini-nav a.link[aria-current="page"]::after{transform:scaleX(1)}
.mini-nav .btn{padding:8px 16px;min-height:0}
@media (max-width:640px){.mini-nav{font-size:11px;gap:14px;top:10px}.mini-nav .btn{padding:7px 12px}}
@media (prefers-reduced-motion:reduce){.mini-nav{transition:none}}
/* Ticker sits below the hands, as a band between the hero and Selected work */
.ticker{margin-top:clamp(40px,5vw,72px)}
/* Quick nav pill: same glass as the "What I do" ticker; all three items are plain links */
.mini-nav{padding:10px clamp(20px,2.2vw,30px);
  background:linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.4) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.35), 0 10px 26px -16px rgba(51,87,101,.4)}
/* Coral ✳ mark before the name (also the favicon) */
.brand{display:inline-flex;align-items:center;gap:.7em}
.brand .mark{width:1.05em;height:1.05em;flex:none;stroke:var(--coral);stroke-width:3.6;stroke-linecap:round;fill:none;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.brand:hover .mark{transform:rotate(60deg)}
/* Button hover: an Ocean fill wipes in from the left, stroke turns Ocean, text white (crisper than the pale Light Blue fill) */
.btn,.quote-ctrl button{background-image:linear-gradient(var(--ocean),var(--ocean));background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size .4s cubic-bezier(.7,0,.2,1), color .25s ease .05s, border-color .3s ease, transform .2s ease}
.btn:hover,.quote-ctrl button:hover{background-color:transparent;background-image:linear-gradient(var(--ocean),var(--ocean));background-size:100% 100%;border-color:var(--ocean);color:var(--white)}
.quote-ctrl button:disabled:hover{background-size:0% 100%;border-color:var(--teal);color:var(--ocean)}
/* Hero handover frames (from Magdalena's hand-drawn sequence): one visible at a time, no crossfade */
.hero-art .stop-stage{aspect-ratio:1440/598;filter:none}
.hero-art .stop-stage .fr{position:absolute;inset:0;width:100%;height:100%;margin:0;visibility:hidden}
.hero-art .stop-stage .fr.on{visibility:visible}
.hero-art .stop-stage .fr{visibility:visible;opacity:0}
.hero-art .stop-stage .fr.on{opacity:1}
/* Home: no card boxes; the next case study arrives on a full-width Ocean panel with rounded corners */
#work .cs-card,.dark-panel .cs-card{--cpad:0px;background:none;border:0;box-shadow:none;border-radius:0;padding:0;margin-inline:0;overflow:visible}
#work .cs-card .ot-slider.loop{width:100vw;margin-left:calc(50% - 50vw);margin-right:0}
.dark-panel{background:var(--ocean);color:var(--white);border-radius:clamp(28px,4vw,56px);margin-top:var(--section);
  padding-block:calc(var(--section) * .75) calc(var(--section) * .75)}
.dark-panel .h,.dark-panel p,.dark-panel dd{color:var(--white)}
.dark-panel .eyebrow,.dark-panel dt{color:var(--coral)}
.dark-panel .tag{background:rgba(255,255,255,.12);color:var(--white)}
.dark-panel .btn{color:var(--white);border-color:var(--teal);background-image:linear-gradient(var(--white),var(--white))}
.dark-panel .btn:hover{color:var(--ocean);border-color:var(--white)}
.dark-panel .showcase-visual::before{background:radial-gradient(closest-side, rgba(116,168,164,.35), rgba(116,168,164,0))}
.dark-panel + .section{padding-top:var(--section)}
/* Quote arrows hidden: the pinned scroll (desktop) and swipe (mobile) move the cards */
.quote-ctrl{display:none}
/* More air around section separators: ~150px above and below on desktop (was ~100) */
.divider{margin:calc(var(--section) * .75) 0 calc(var(--section) * -.25)}
/* Case study transition (à la Loschinin): the section above has rounded bottom corners and lifts off
   the next one, which is revealed underneath with a slight parallax. Dark panel uses a deeper teal. */
:root{--ocean-deep:#1f3943;--panel-r:clamp(64px,9vw,128px)}
#work{position:relative;z-index:2;background:var(--bg);border-radius:0 0 var(--panel-r) var(--panel-r);
  padding-bottom:calc(var(--section) * .75);width:auto;max-width:none;padding-inline:max(var(--gutter), calc((100% - var(--wrap)) / 2))}
.dark-panel{position:relative;z-index:1;background:var(--ocean-deep);margin-top:calc(-1 * var(--panel-r));
  border-radius:0 0 var(--panel-r) var(--panel-r);padding-top:calc(var(--section) * .75 + var(--panel-r));overflow:hidden}
.dark-panel > .wrap{will-change:transform}
.dark-panel + .section{position:relative;z-index:0;margin-top:calc(-1 * var(--panel-r));padding-top:calc(var(--section) + var(--panel-r))}
.inline-link{color:inherit;text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:4px;transition:color .2s ease}
.inline-link:hover{color:var(--teal)}
/* Store card motion study (embedded animation, keeps its own rounded frame) */
.sc-motion{position:relative;z-index:1;width:100%;max-width:1100px;margin:0 auto;aspect-ratio:1600/1000;border-radius:clamp(16px,2.2vw,32px);overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.45);background:#ECEAE6}
.sc-motion iframe{display:block;width:100%;height:100%;border:0;pointer-events:none}
/* Selected work slides up over the end of the hero (hands); rounded on all four corners */
.ticker{display:none}
.hero{position:relative;z-index:1}
#work{border-radius:var(--panel-r);margin-top:calc(-1 * clamp(160px,22vw,320px));
  box-shadow:0 -40px 80px -40px rgba(51,87,101,.35)}
/* Selected work starts below the hands and catches up faster than the scroll, covering them as the handover ends */
#work{--ov:clamp(160px,22vw,320px);transform:translateY(calc((1 - var(--hp,1)) * var(--ov) * 1.6));will-change:transform}
#work.section{padding-top:clamp(96px,8vw,140px)}
@media (prefers-reduced-motion:reduce){#work{transform:none}}
:root{--ocean-deep:#14272f}
/* Full-width photo at the top of the dark panel: the section above lifts off a picture, not text */
.dark-panel{padding-top:0}
.dp-image{position:relative;height:clamp(320px,62vh,720px);overflow:hidden;margin-bottom:calc(var(--section) * .6)}
.dp-image img{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;will-change:transform}
.dp-image::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,var(--ocean-deep))}
/* Work page: same unboxed layout as the home page */
.work-cs .cs-card{--cpad:0px;background:none;border:0;box-shadow:none;border-radius:0;padding:0;margin-inline:0;overflow:visible}
.work-cs .cs-card .ot-slider.loop{width:100vw;margin-left:calc(50% - 50vw);margin-right:0}
/* About: no white box behind the quotes; more air before "Product areas" */
.others{background:none;border-radius:0}
.xp-body .xp-areas{margin-top:40px!important}
.xp-body ul+.xp-areas{margin-top:40px}
/* Kitchen photo: teal overlay, hard bottom edge, newsprint grain */
.dp-image::after{content:none}
.dp-image::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(20,39,47,.55),rgba(20,39,47,.55)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:auto,220px 220px;mix-blend-mode:normal}
.dp-image img{filter:grayscale(.35) contrast(1.12)}
/* Buttons: fill fades in on hover and fades out gently (no wipe) */
.btn,.quote-ctrl button{background-image:none;background-color:transparent;transition:background-color .35s ease, color .35s ease, border-color .35s ease, transform .2s ease}
.btn:hover,.quote-ctrl button:hover{background-image:none;background-color:var(--coral);border-color:var(--coral);color:var(--white)}
.dark-panel .btn{background-image:none}
.dark-panel .btn:hover{background-color:var(--coral);border-color:var(--coral);color:var(--white)}
.others{background:none!important;border-radius:0!important}
/* Buttons: fill slides in from the left on hover, and carries on out to the right when you leave */
.btn,.quote-ctrl button{background-color:transparent;background-image:linear-gradient(var(--coral),var(--coral));background-repeat:no-repeat;
  background-size:0% 100%;background-position:right center;
  transition:background-size .45s cubic-bezier(.65,0,.35,1), color .3s ease, border-color .3s ease, transform .2s ease}
.btn:hover,.quote-ctrl button:hover,.dark-panel .btn:hover{background-color:transparent;background-image:linear-gradient(var(--coral),var(--coral));background-size:100% 100%;background-position:left center;border-color:var(--coral);color:var(--white)}
.dark-panel .btn{background-image:linear-gradient(var(--coral),var(--coral))}
/* Buttons (per Dribbble ref): on hover the fill loads in from the left; on leave it fades out all at once */
.btn,.quote-ctrl button,.dark-panel .btn,.btn:hover,.quote-ctrl button:hover,.dark-panel .btn:hover{background-image:none;background-color:transparent}
.btn,.quote-ctrl button{position:relative;isolation:isolate;overflow:hidden}
.btn::after,.quote-ctrl button::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--coral);border-radius:inherit;
  transform:scaleX(0);transform-origin:left center;opacity:0;
  transition:opacity .35s ease, transform 0s linear .35s}
.btn:hover::after,.quote-ctrl button:hover::after{transform:scaleX(1);opacity:1;
  transition:transform .5s cubic-bezier(.65,0,.35,1), opacity 0s}
@media (prefers-reduced-motion:reduce){.btn:hover::after{transition:none}}
/* Button fill: white, text keeps its colour (on the dark panel the text turns deep teal so it stays readable) */
.btn::after,.quote-ctrl button::after{background:var(--white)}
.btn:hover,.quote-ctrl button:hover{color:var(--ocean);border-color:var(--teal)}
.dark-panel .btn:hover{color:var(--ocean-deep);border-color:var(--white)}
/* Selected work panel: white */
#work{background:var(--white)}
#work .btn::after{background:var(--bg)}
/* Photo removed: restore the panel's top padding */
.dark-panel{padding-top:calc(var(--section) * .75 + var(--panel-r))}

/* New store card panel: light coral (page stays sage) */
:root{--coral-light:#fbe6df}
.dark-panel{background:var(--coral-light);color:var(--ocean)}
.dark-panel .h,.dark-panel p,.dark-panel dd{color:var(--ocean)}
.dark-panel .tag{background:rgba(255,133,109,.18);color:var(--ocean)}
.dark-panel .btn{color:var(--ocean);border-color:var(--coral)}
.dark-panel .btn:hover{color:var(--ocean);border-color:var(--coral)}
.dark-panel .btn::after{background:var(--white)}
.dark-panel .showcase-visual::before{background:radial-gradient(closest-side, rgba(255,133,109,.35), rgba(255,133,109,0))}
.sc-motion{box-shadow:0 30px 60px -30px rgba(51,87,101,.35)}
#work{background:#f7f5f0} /* off-white Selected work panel */
/* New store card hero: pencil exploration sketches, multiplied onto the light coral panel */
.dark-panel{padding-top:var(--panel-r)}
.dp-sketch{position:relative;width:min(1440px,100%);margin:0 auto calc(var(--section) * .45);aspect-ratio:1672/941}
.dp-sketch img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;filter:contrast(1.08);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.dp-sketch::after{content:"";position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(transparent,var(--coral-light));pointer-events:none}
.dp-sketch::before{content:"";position:absolute;inset:0 0 auto;height:10%;background:linear-gradient(var(--coral-light),transparent);pointer-events:none;z-index:1}
/* New store card panel: light teal instead of light coral (sketches still multiply onto it) */
:root{--coral-light:#c9ddd9}
.dark-panel .tag{background:rgba(51,87,101,.10)}
.dark-panel .btn,.dark-panel .btn:hover{border-color:var(--ocean)}
.dark-panel .showcase-visual::before{background:radial-gradient(closest-side, rgba(116,168,164,.45), rgba(116,168,164,0))}
/* About › My story: editorial layout */
.story{display:block;margin-top:var(--title-gap)}
.story-lede{font:400 var(--fs-h)/1.15 var(--display);letter-spacing:-.02em;max-width:22ch}
.story-lede em,.story-quote em{color:var(--teal)}
.story-a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:start;margin-top:clamp(64px,8vw,120px)}
.story-a .text{padding-top:clamp(40px,6vw,110px)}
.story-fig{margin:0;position:relative}
.story-fig img{display:block;width:100%;max-width:460px;height:auto;border-radius:50%}
.story-fig figcaption{margin-top:16px;color:var(--teal)}
.story-quote{margin:clamp(80px,10vw,160px) 0 0;padding-left:clamp(24px,8vw,140px);border:0}
.story-quote p{font:400 italic clamp(30px,3.4vw,48px)/1.2 var(--display);max-width:24ch;position:relative}
.story-quote p::before{content:"\201C";position:absolute;left:-.55em;top:-.15em;font-size:2.2em;color:var(--coral);font-style:normal;line-height:1}
.story-b{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,7vw,120px);align-items:end;margin-top:clamp(80px,10vw,160px)}
.story-b .text>p+p,.story-a .text>p+p{margin-top:1.45em}
.story-fig.small img{max-width:300px;margin-left:auto}
@media (max-width:860px){.story-a,.story-b{grid-template-columns:1fr}.story-a .text{padding-top:0}.story-fig img,.story-fig.small img{max-width:280px;margin:0}}
.story-lede{max-width:26ch}.story-quote p{font-size:clamp(34px,4.2vw,60px)}
.story-b{align-items:center}
/* My story: one grid (2 equal columns, 25px gutter, as elsewhere), Headline style only */
.story-quote{padding-left:0;margin-left:0}
.story-quote p,.story-lede{font:400 var(--fs-h)/1.2 var(--display);letter-spacing:-.02em;font-style:normal;max-width:none}
.story-quote p::before{content:none}
.story-lede,.story-quote p{max-width:calc(75% + 6px)}
.story-a,.story-b{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;align-items:center}
.story-a .text{padding-top:0}
.story-fig img{max-width:460px}
.story-fig.small img{max-width:460px;margin-left:0}
@media (max-width:860px){.story-a,.story-b{grid-template-columns:1fr;gap:32px}.story-lede,.story-quote p{max-width:none}}
.site-footer::before{content:none}
/* New store card: muffled spec sketch behind the intro text */
.dp-wrap{position:relative}
.dp-wrap>*:not(.dp-bg){position:relative;z-index:1}
.dp-bg{position:absolute;z-index:0;top:0;right:var(--gutter);width:min(50%,700px);height:auto;opacity:.14;pointer-events:none}
@media (max-width:860px){.dp-bg{width:90%;opacity:.1}}
/* Hero hands: arms dissolve into the page like stipple dots thinning out under a dry brush (dithered noise mask) */
.hero-art .stop-stage{-webkit-mask-image:url(assets/hero-mask4.png);mask-image:url(assets/hero-mask4.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* New store card hero: component spec sketch, muffled and multiplied onto the panel */
.dp-sketch{width:min(1000px,100%);aspect-ratio:1102/679}
.dp-sketch img{opacity:.35;filter:none;-webkit-mask-image:none;mask-image:none}
.dp-sketch::before,.dp-sketch::after{content:none}
.sc-motion{box-shadow:none}
/* Navigation buttons: the fill loads in from the left and an arrow slides in, on hover only */
a.btn{transition:padding-right .45s cubic-bezier(.3,.7,.2,1), color .35s ease, border-color .35s ease}
a.btn:not(.btn-dl)::before{content:"";position:absolute;z-index:1;inset:auto;border-radius:0;pointer-events:none;right:clamp(16px,1.67vw,24px);top:50%;width:14px;height:14px;margin-top:-7px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h11M7.5 2.5 12 7l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h11M7.5 2.5 12 7l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0;transform:translateX(-8px);transition:opacity .25s ease, transform .45s cubic-bezier(.3,.7,.2,1)}
a.btn:not(.btn-dl):hover{padding-right:calc(clamp(16px,1.67vw,24px) + 24px)}
a.btn:hover::before{opacity:1;transform:none;transition-delay:.1s,.1s}
.mini-nav a.btn::before{content:none}
.mini-nav a.btn:hover{padding-right:12px}
@media (prefers-reduced-motion:reduce){a.btn::before{transition:none}}
.div-anim .divider{transform:scaleX(var(--d,0));transform-origin:left center;will-change:transform}
/* Arrow direction: down for in-page jumps and downloads, forward for other pages, email and LinkedIn */
a.btn:is([href^="#"],[download])::before{transform:rotate(90deg) translateX(-8px)}
a.btn:is([href^="#"],[download]):hover::before{transform:rotate(90deg)}
.divider.divider-in{width:100vw;margin:calc(var(--section) * -.3) 0 calc(var(--section) * .5) calc(50% - 50vw)}
/* New store card hero: exploded view of the card's optional layers; layers spread apart when it scrolls into view */
.dp-exploded{width:min(1020px,100%);aspect-ratio:1020/760;margin:0 auto calc(var(--section) * .35)}
.dp-exploded svg{display:block;width:100%;height:100%;overflow:visible;font-family:var(--body)}
.sc-exploded .lay{--gap:0px;transform:translateY(calc(var(--i) * var(--gap) * -1));transition:transform 1.1s cubic-bezier(.3,.7,.2,1);transition-delay:calc(var(--i) * 70ms)}
.sc-exploded.open .lay{--gap:118px}
.sc-exploded .lay line,.sc-exploded .lbl{opacity:0;transition:opacity .5s ease calc(.5s + var(--i) * 80ms)}
.sc-exploded.open .lay line,.sc-exploded.open .lbl{opacity:1}
.sc-exploded .lbl{font:600 14px var(--mono);letter-spacing:.08em;text-transform:uppercase;fill:var(--coral)}
@media (prefers-reduced-motion:reduce){.sc-exploded .lay{--gap:118px;transition:none}.sc-exploded .lay line,.sc-exploded .lbl{opacity:1;transition:none}}
.dark-panel .btn::after{background:#f7f5f0}
[data-quotes] .quotes,[data-quotes].pinned .quotes{margin-top:calc(var(--title-gap) * 1.3)}
[data-quotes] .after-quotes,[data-quotes].pinned .after-quotes{margin-top:calc(var(--title-gap) * 1.3)}
/* Experience: details on the left (2/3), product areas on the right (1/3) */
.xp-body.has-areas{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:25px clamp(32px,4vw,64px);max-width:none;align-items:start}
.xp-body .xp-side .xp-areas{margin-top:0!important}
.xp-body .xp-side .tags{margin-top:12px}
@media (max-width:760px){.xp-body.has-areas{grid-template-columns:1fr}.xp-body .xp-side .xp-areas{margin-top:32px!important}}
.sc-exploded.scrub .lay{--gap:calc(var(--p,0) * 118px);transition:none}
.sc-exploded.scrub .lay line,.sc-exploded.scrub .lbl{opacity:clamp(0, calc((var(--p,0) - .55 - var(--i) * .08) * 4), 1);transition:none}
.btn-dl{gap:8px}
.btn-dl svg{width:1.25em;height:1.25em}
/* Work · Highlights: phone mockup placeholders (future flow animations) + result line */
.show-visual{display:block!important;padding:0!important;aspect-ratio:5/4}
.show-visual .mini-phone{position:absolute;left:50%;top:11%;width:min(40%,230px);aspect-ratio:377/785;transform:translateX(-50%);
  border-radius:clamp(26px,3.2vw,40px);padding:clamp(5px,.6vw,7px);background:#111;
  box-shadow:inset 0 0 0 1.5px #d9d4ae,0 30px 60px -30px rgba(51,87,101,.45);transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.show:hover .mini-phone{transform:translateX(-50%) translateY(-10px)}
.mp-screen{position:relative;width:100%;height:100%;border-radius:clamp(21px,2.7vw,34px);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;gap:7%;padding:22% 9% 0;--sk:#e7eeec;--sk2:#d5e2df}
.mp-screen i{display:block;flex:none;font-style:normal}
.mp-screen .sk-status{position:absolute;top:4.5%;left:50%;transform:translateX(-50%);width:32%;height:3.6%;border-radius:99px;background:#111}
.sk-title{height:4%;width:62%;border-radius:4px;background:var(--sk2)}
.sk-row{display:flex!important;gap:8%;align-items:center}
.sk-row b{width:24%;aspect-ratio:1;border-radius:18%;background:var(--sk)}
.sk-row span{flex:1;display:grid;gap:6px}
.sk-row em{display:block;height:7px;border-radius:4px;background:var(--sk2)}
.sk-row em.s{width:60%;background:var(--sk)}
.sk-bar{height:6px;border-radius:99px;background:var(--sk);overflow:hidden}
.sk-bar u{display:block;height:100%;width:55%;background:var(--coral);border-radius:99px}
.sk-btn{height:7%;border-radius:99px;background:var(--ocean);margin-top:6%}

.sk-alert{height:11%;border-radius:12px;background:rgba(255,133,109,.18);box-shadow:inset 3px 0 0 var(--coral)}
.sk-plan{height:17%;border-radius:12px;background:var(--sk)}
.sk-plan.on{background:#fff;box-shadow:inset 0 0 0 2px var(--teal)}
.sk-tl{display:grid!important;gap:14%;padding-left:6%;height:34%;position:relative}
.sk-tl::before{content:"";position:absolute;left:calc(6% + 4px);top:6px;bottom:6px;width:2px;background:var(--sk2)}
.sk-tl b{width:10px;height:10px;border-radius:50%;background:var(--sk2);position:relative;box-shadow:16px 0 0 -2px transparent}
.sk-tl b::after{content:"";position:absolute;left:22px;top:2px;width:300%;height:6px;border-radius:4px;background:var(--sk)}
.sk-tl b.on{background:var(--teal)}
.sk-card{height:14%;border-radius:12px;background:var(--sk)}
.sk-tiles{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
.sk-tiles b{aspect-ratio:1;border-radius:12px;background:var(--sk)}
.sk-tiles b:first-child{background:rgba(116,168,164,.35)}
.sk-tabs{height:7%;margin:4% -9% 0;border-top:1px solid var(--sk);background:#fff}
.sk-msg{height:7%;width:70%;border-radius:14px 14px 14px 4px;background:var(--sk)}
.sk-msg.me{align-self:flex-end;width:55%;border-radius:14px 14px 4px 14px;background:rgba(116,168,164,.35)}
.sk-msg.s{width:35%}
.sk-input{height:7%;border-radius:99px;margin-top:4%;box-shadow:inset 0 0 0 1.5px var(--sk2)}
.show-visual::after{content:none}
/* Result: the number to remember, right under the title */
.show-result{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:-4px 0 2px}
.show-result .num{font:400 clamp(36px,3.4vw,52px)/1 var(--display);letter-spacing:-.02em;color:var(--teal)}
.show-result .mono{color:var(--coral);max-width:30ch}
/* Beliefs: a short lead sentence (the tension) above the longer "what I do" paragraph */
.beliefs li{gap:20px}

.beliefs li p em{font-style:normal;color:inherit}
.beliefs li p em .hl,.beliefs li p em:not(.split){position:relative;padding-bottom:.08em}
.beliefs li p em .hl::after,.beliefs li p em:not(.split)::after{content:"";position:absolute;left:0;bottom:-.12em;height:.34em;width:calc(var(--b,1) * 100%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q10 1 20 4 T40 4 T60 4 T80 4 T100 4 T120 4 T140 4 T160 4 T180 4 T200 4 T220 4 T240 4 T260 4 T280 4 T300 4 T320 4 T340 4 T360 4 T380 4 T400 4 T420 4 T440 4 T460 4 T480 4 T500 4 T520 4 T540 4 T560 4 T580 4 T600 4 T620 4 T640 4 T660 4 T680 4 T700 4 T720 4 T740 4 T760 4 T780 4 T800 4 T820 4 T840 4 T860 4 T880 4 T900 4 T920 4 T940 4 T960 4 T980 4 T1000 4 T1020 4 T1040 4 T1060 4 T1080 4 T1100 4 T1120 4 T1140 4 T1160 4 T1180 4 T1200 4 T1220 4 T1240 4 T1260 4 T1280 4 T1300 4 T1320 4 T1340 4 T1360 4 T1380 4 T1400 4 T1420 4 T1440 4 T1460 4 T1480 4 T1500 4 T1520 4 T1540 4 T1560 4 T1580 4 T1600 4 T1620 4 T1640 4 T1660 4 T1680 4 T1700 4 T1720 4 T1740 4 T1760 4 T1780 4 T1800 4 T1820 4 T1840 4 T1860 4 T1880 4 T1900 4 T1920 4 T1940 4 T1960 4 T1980 4 T2000 4' fill='none' stroke='%23ff856d' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") left center/85em .34em no-repeat;pointer-events:none}
.quote figcaption{color:var(--ocean)}
.quote figcaption .at{color:var(--coral-ink)}
/* @Company in testimonials: a deeper, still bright coral so it reads on the light card (~3.3:1 vs ~1.9:1) */
.quote figcaption .at{color:inherit}
.quote figcaption .q-name,.quote figcaption .q-role{display:block}
.quote figcaption .mono{font-weight:400}
.quote figcaption .q-name{font-weight:600}
.quote figcaption .q-role,.quote figcaption .at{font-weight:400}
/* How I work: each value unfolds in reading order (number, title, text), the right column a beat later */
.values .value.reveal{opacity:1;transform:none}
.values .value.reveal>.eyebrow,.values .value.reveal .h,.values .value.reveal p{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.values .value.reveal.in>.eyebrow,.values .value.reveal.in .h,.values .value.reveal.in p{opacity:1;transform:none}
.values .value.reveal .h{transition-delay:.12s}
.values .value.reveal p{transition-delay:.26s}
.values .value.reveal:nth-child(even)>.eyebrow{transition-delay:.15s}
.values .value.reveal:nth-child(even) .h{transition-delay:.27s}
.values .value.reveal:nth-child(even) p{transition-delay:.41s}
@media (prefers-reduced-motion:reduce){.values .value.reveal>.eyebrow,.values .value.reveal .h,.values .value.reveal p{opacity:1;transform:none;transition:none}}
/* No header image in the store card panel for now: give the text the same breathing room as other sections */
.dark-panel{padding-top:calc(var(--panel-r) + var(--section))}
.contact-links{display:flex;gap:12px;flex-wrap:wrap}
.btn.copied{justify-content:center}
/* Experience dividers run left until they meet the vertical timeline line */
.xp-list .xp{border-bottom:0}
.xp-list .xp::after{content:"";position:absolute;left:-30px;right:0;bottom:0;height:2px;background:var(--teal)}
.xp-list .xp:last-child::after{content:none}
@media (max-width:900px){.xp-list .xp::after{left:-21px}}
[data-accordion]{overflow-anchor:none}
/* No scroll anchoring: opening an Experience entry must grow downwards, not push the page */
html{overflow-anchor:none}
.xp-body .xp-side .tags{margin-top:0}
/* New store card panel: a touch lighter teal */
:root{--coral-light:#c9ddd9}
/* New store card panel: mono labels in Ocean, regular weight (better contrast on the teal) */
.dark-panel .eyebrow,.dark-panel .facts dt{color:color-mix(in srgb,var(--coral) 72%,var(--ocean));font-weight:600}
/* My story: the landscape-architecture paragraph uses the same Headline style as the opening line */
.story-a .text p{font:400 var(--fs-h)/1.2 var(--display);letter-spacing:-.02em}
/* My story: one continuous block of text (Headline style, paragraphs, highlights), pictures alongside */
.story-block{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:25px clamp(40px,6vw,96px);align-items:start}
.story-text > p{font:400 var(--fs-h)/1.2 var(--display);letter-spacing:-.02em;margin:0}
.story-text > p+p{margin-top:.8em}
.story-text em{color:var(--teal)}
.story-pics{display:grid;gap:clamp(40px,6vw,96px);position:sticky;top:120px}
.story-pics .story-fig img{max-width:100%;margin:0}
@media (max-width:860px){.story-block{grid-template-columns:1fr}.story-pics{position:static;grid-template-columns:1fr 1fr;gap:25px}}
/* About intro: short text + one portrait */
.intro-block{grid-template-columns:minmax(0,1fr) minmax(180px,280px);align-items:start;margin-top:var(--title-gap)}
.intro-block .story-fig img{max-width:100%;margin:0}
@media (max-width:860px){.intro-block{grid-template-columns:1fr}.intro-block .story-fig{order:-1}.intro-block .story-fig img{max-width:200px}}
.side-note{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:center;margin-top:clamp(40px,5vw,64px);max-width:600px}
.side-note img{width:100%;height:auto;border-radius:50%}
.side-note .eyebrow{margin:0 0 8px}
.story-text .side-note p.note{font:400 var(--fs-body)/1.45 var(--body);letter-spacing:0;margin:0}
@media (max-width:560px){.side-note{grid-template-columns:88px minmax(0,1fr);gap:16px}}
.hero .intro-block{margin-top:0}
.intro-block{grid-template-columns:minmax(0,1fr)}
.intro-block .story-text{max-width:900px}
/* About: full-width paths illustration under the header */
.paths-hero{margin:clamp(24px,3vw,40px) 0 0;width:100%}
.paths-hero img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:50% 50%}
.paths-story .story-text{max-width:900px}
@media (max-width:760px){.paths-hero img{aspect-ratio:4/3}}
.paths-story.section{padding-top:clamp(56px,6vw,96px)}
/* About hero: parallax image, text sheet slides over it */
.paths-hero{position:relative;overflow:hidden;z-index:0}
.paths-hero img{will-change:transform;transform:translate3d(0,var(--py,0px),0) scale(1.04);transform-origin:50% 0}
.paths-hero::after{content:"";position:absolute;inset:0 0 auto;height:55%;pointer-events:none;-webkit-backdrop-filter:blur(var(--pb,0px));backdrop-filter:blur(var(--pb,0px));-webkit-mask-image:linear-gradient(#000 0%,transparent 100%);mask-image:linear-gradient(#000 0%,transparent 100%)}
.paths-story{position:relative;z-index:1;background:var(--bg);margin-top:-48px;border-radius:var(--pr,0px) var(--pr,0px) 0 0}
.paths-story{background:linear-gradient(var(--bg) 0,var(--bg) 120px,rgba(219,226,220,0) 420px)}
/* About: image runs up behind the navbar, with a blur layer under the nav so it stays readable */
.paths-hero{margin-top:calc(-1 * var(--hh,106px))}
.paths-hero::before{content:"";position:absolute;inset:0 0 auto;height:calc(var(--hh,106px) + 40px);z-index:1;pointer-events:none;background:rgba(219,226,220,.35);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.paths-story{margin-top:calc(-1 * var(--panel-r));border-radius:var(--panel-r) var(--panel-r) 0 0}
/* show the whole illustration; soft sage scrim under the nav instead of a blur band */
.paths-hero img{aspect-ratio:3/2;max-height:100svh}
.paths-hero::before{-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none;height:calc(var(--hh,106px) + 60px);background:linear-gradient(rgba(219,226,220,.92) 0%,rgba(219,226,220,.6) 45%,rgba(219,226,220,0) 100%)}
@media (max-width:760px){.paths-hero img{aspect-ratio:3/2}}
/* sponge-like dissolve at the top of the About image (same texture as the home hero) */
.paths-hero::before{content:none}
.paths-hero img{-webkit-mask-image:url(assets/about-mask.png);mask-image:url(assets/about-mask.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
h2 .tag.soon{display:inline-block;vertical-align:middle;margin-left:16px;font-size:13px;line-height:1;letter-spacing:.08em;position:relative;top:-.4em}

/* Mobile: hover cursor is unavailable, so show a visible case study button */
.cs-mobile{display:none}
@media (max-width:760px),(hover:none){.cs-mobile{display:block;margin-top:24px;text-align:center}}