/* ==========================================================================
   Geri Crroj — design system
   Ported 1:1 from the Claude Design project "Home v3 / About / Portfolio /
   Project / Contact". Values below are the design's own values.
   ========================================================================== */

:root{
  --ink:#1d1d1d;
  --paper:#fff;
  --lavender:#e3e3ff;
  --blue:#e3f2ff;
  --yellow:#ffe7a9;
  --yellow-dark:#fbdf98;
  --pink:#ffe3fb;
  --lime:#e2fec5;
  --mint:#dbf5f0;
  --peach:#ffede3;
  --navy-tint:#cfe3ff;
  --navy-tint-hover:#b9d6ff;
  --dot:#7ea9ff;
}

/* ---------------------------------------------------------------- fonts --
   Bricolage Grotesque, self-hosted (variable, wght 300-500).
   Self-hosting removes a render-blocking third-party request and the
   font-swap layout shift. The fallback below is metric-matched so the
   pre-swap frame occupies the same space (CLS ~ 0).
   ------------------------------------------------------------------------ */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:300 500;
  font-stretch:100%;
  font-display:swap;
  src:url(../fonts/bricolage-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:300 500;
  font-stretch:100%;
  font-display:swap;
  src:url(../fonts/bricolage-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Bricolage Fallback';
  src:local('Segoe UI'),local('Helvetica Neue'),local('Arial');
  ascent-override:96%;
  descent-override:24%;
  line-gap-override:0%;
  size-adjust:103%;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Bricolage Grotesque','Bricolage Fallback',sans-serif;
  font-size:18px;
  font-weight:300;
  line-height:30px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink)}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-weight:500;margin:0}
img{max-width:100%}
p{margin:0}

/* `overflow-x:hidden` here would compute overflow-y to `auto`, making .page a
   scroll container — which silently kills every position:sticky on the site
   (the work cards, the process steps, the case-study aside). `clip` does the
   same horizontal clipping without creating one. */
.page{overflow-x:clip}
@supports not (overflow-x:clip){
  html{overflow-x:hidden}
}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}

/* --------------------------------------------------------------- motion -- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes grow{from{width:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes float1{
  0%{transform:translate(0,0) rotate(var(--r))}
  25%{transform:translate(14px,-22px) rotate(calc(var(--r) + 6deg))}
  50%{transform:translate(-8px,-34px) rotate(calc(var(--r) - 5deg))}
  75%{transform:translate(-18px,-14px) rotate(calc(var(--r) + 3deg))}
  100%{transform:translate(0,0) rotate(var(--r))}
}
@keyframes wipeIntro{from{transform:translateY(0)}to{transform:translateY(103%)}}
@keyframes rvin{to{opacity:1;transform:translateY(0)}}

#wipe{
  position:fixed;inset:-2% 0;background:var(--lavender);
  z-index:9999;pointer-events:none;transform:translateY(103%);
  animation:wipeIntro .6s .15s cubic-bezier(.77,0,.18,1) backwards;
}
body[data-wipe="blue"] #wipe{background:var(--blue)}
body[data-wipe="yellow"] #wipe{background:var(--yellow)}
body[data-wipe="lime"] #wipe{background:var(--lime)}
body[data-wipe="peach"] #wipe{background:var(--peach)}

.rv{opacity:0;transform:translateY(50px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:translateY(0);animation:none}
/* No-JS safety net only. site.js stamps .js on <html>, so with scripts running
   this never fires — otherwise it revealed every element on the page 2.2s after
   load and the scroll reveal below the fold never animated at all. */
html:not(.js) .rv:not(.in){animation:rvin .9s ease 2.2s forwards}

/* ------------------------------------------------------------ nav bar --- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1001;padding:18px 20px 0;pointer-events:none}
.nav-bar{
  max-width:1000px;margin:0 auto;
  border:1px solid var(--ink);border-radius:50px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  box-shadow:inset 0 -3px 0 0 #dedede;
  padding:10px 10px 10px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  pointer-events:auto;
}
.nav-logo{font-size:20px;font-weight:500;letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
.nav-logo span{color:var(--dot)}
.nav-menu{display:flex;align-items:center;gap:26px}
.nav-menu a{font-size:16px;font-weight:500;letter-spacing:-.02em;text-decoration:none;transition:opacity .2s}
.nav-menu a:hover{opacity:.55}
.nav-right{display:flex;gap:10px;align-items:center}
.nav-craft{
  border:1px solid var(--ink);border-radius:50px;background:var(--navy-tint);
  padding:11px 22px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;letter-spacing:.02em;font-weight:500;text-decoration:none;
  white-space:nowrap;transition:background .2s;
}
.nav-craft:hover{background:var(--navy-tint-hover)}
.nav-cta{
  border:1px solid var(--ink);border-radius:50px;background:var(--ink);color:#fff;
  padding:12px 26px;font-size:15px;font-weight:500;letter-spacing:-.02em;
  text-decoration:none;white-space:nowrap;transition:opacity .2s;
}
.nav-cta:hover{opacity:.85;color:#fff}
.burger-btn{
  display:none;width:38px;height:38px;border:1px solid var(--ink);border-radius:50px;
  background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:0;
}
.burger-btn span{width:16px;height:2px;background:var(--ink);border-radius:3px;display:block}
.nav-drawer{
  max-width:1000px;margin:10px auto 0;border:1px solid var(--ink);border-radius:20px;
  background:#fff;padding:15px 28px;display:none;flex-direction:column;pointer-events:auto;
}
.nav-drawer.open{display:flex}
.nav-drawer a{font-size:17px;font-weight:500;text-decoration:none;padding:10px 0}

/* ------------------------------------------------------------ buttons --- */
.btn{
  border:1px solid var(--ink);border-radius:10px;background:#fff;
  box-shadow:inset 0 -4px 0 0 rgba(29,29,29,.17);
  padding:16px 25px 18px;font-size:16px;font-weight:500;line-height:19px;
  letter-spacing:-.02em;text-decoration:none;display:inline-block;
  transition:background .2s;font-family:inherit;cursor:pointer;
}
.btn:hover{background:whitesmoke}
.btn--yellow{background:var(--yellow)}
.btn--yellow:hover{background:var(--yellow-dark)}
.btn--onDark{color:var(--ink)}

.tag{
  border:1px solid var(--ink);border-radius:50px;padding:10px 20px;
  font-size:15px;font-weight:500;line-height:18px;letter-spacing:-.02em;
  display:inline-flex;align-items:center;
}
.tag--lg{padding:14px 25px}
/* The About intro pills are 50px in the design; the base .tag line-height:18px
   (correct for the work/portfolio tags) shrinks them to 38px. */
.tag--tall{line-height:30px}

/* ------------------------------------------------------------- torn edge - */
.tear{height:118px;position:relative}
.tear--bottom{
  margin-top:-1px;
  -webkit-mask:url(../divide-1.svg) center/100% 100% no-repeat;
  mask:url(../divide-1.svg) center/100% 100% no-repeat;
}
.tear--top{
  margin-bottom:-10px;
  -webkit-mask:url(../divide-2.svg) center/100% 100% no-repeat;
  mask:url(../divide-2.svg) center/100% 100% no-repeat;
}

/* --------------------------------------------------------------- lede ---- */
.lede{font-size:clamp(20px,2.4vw,26px);line-height:1.46;margin:0}
.lede strong,.hero-copy strong{font-weight:500}
.h-display{font-size:clamp(44px,7vw,86px);line-height:1.12;letter-spacing:-.04em}
.h-section{font-size:clamp(36px,4.2vw,50px);line-height:1.2;letter-spacing:-.03em}
.eyebrow{letter-spacing:.02em;text-transform:uppercase;font-size:15px;line-height:25px}
.highlight{background:url(../highlight.svg) 50% 100% no-repeat;padding-bottom:22px;display:inline-block}
.highlight--sm{padding-bottom:20px}

/* --------------------------------------------------------------- hero ---- */
.hero{overflow:hidden}
.hero-pad{background:var(--lavender);padding:190px 0 250px}
.hero-inner{text-align:center;max-width:840px;margin:0 auto;position:relative}
.doodle{position:absolute}
.orb{
  position:absolute;border:1px solid var(--ink);border-radius:50px;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font-weight:500;line-height:1;letter-spacing:-.02em;padding:14px 26px;
  box-shadow:inset 0 -3px 0 0 rgba(29,29,29,.1);
  will-change:transform;transition:transform .3s;
}
.orb:hover{animation-play-state:paused}
.badge{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--ink);
  border-radius:50px;background:#fff;box-shadow:inset 0 -3px 0 0 #dedede;
  padding:12px 24px;font-size:15px;font-weight:500;letter-spacing:-.02em;
  margin-bottom:34px;transform:rotate(-1.5deg);
}
.badge i{
  width:9px;height:9px;border-radius:50%;background:#7fd6a4;border:1px solid var(--ink);
  box-shadow:0 0 0 4px rgba(127,214,164,.35);display:block;
}
.hero-row{display:flex;justify-content:center;align-items:center;gap:30px;flex-wrap:wrap}
.hero-row--2{margin-bottom:34px;gap:22px}
.hero-portrait{
  width:112px;height:112px;flex:none;border:1px solid var(--ink);border-radius:50%;
  overflow:hidden;margin-top:-10px;transform:rotate(3deg);
  box-shadow:6px 6px 0 0 rgba(29,29,29,.12);
}
.hero-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.hero-copy{font-size:clamp(20px,2.4vw,26px);line-height:1.46;margin:0 auto 34px;max-width:700px}
.hero-actions{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}

.hero-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;margin-top:-200px;position:relative;z-index:2}
.hcard{border:1px solid var(--ink);border-radius:20px;background:#fff;overflow:hidden}
.hcard-body{text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:50px 40px}
.hcard-icon{width:64px;height:64px;margin-bottom:25px;background-position:center;background-size:contain;background-repeat:no-repeat}
.hcard h2{font-size:24px;line-height:34px;margin-bottom:5px}
.hcard p{margin-bottom:25px}
.hcard-link{
  border:1px solid var(--ink);border-radius:50px;padding:12px 14px;
  display:inline-flex;justify-content:center;align-items:center;transition:background .2s;
  background:var(--tint,#fff);
}
.hcard-link:hover{background:var(--tint-hover,whitesmoke)}

/* ------------------------------------------------------------- works ----- */
.works{display:flex;flex-direction:column;gap:40px}
.work{
  border:1px solid var(--ink);border-radius:30px;position:sticky;
  display:flex;justify-content:space-between;gap:80px;padding:60px;overflow:hidden;
}
.work-copy{text-align:left;flex:1;align-self:center}
.work-tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:25px}
.work-copy h2{font-size:clamp(30px,3.6vw,50px);line-height:1.2;letter-spacing:-.03em;margin-bottom:20px}
.work-copy p{margin:0 0 30px}
.work-image-wrapper{
  border:1px solid var(--ink);border-radius:20px;flex:1;min-width:580px;overflow:hidden;
  background:#fff;display:flex;align-items:center;justify-content:center;
}
.work-image{
  width:100%;height:100%;min-height:380px;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.work:hover .work-image{transform:scale(1.05)}

/* --------------------------------------------------------- about strip --- */
.strip{background:var(--lavender)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.photo-frame{position:relative}
.photo-frame .tape{position:absolute;top:-43px;left:52%;transform:translate(-50%);z-index:2}
.photo-box{width:100%;border:1px solid var(--ink);border-radius:20px;overflow:hidden}
.photo-box img{width:100%;height:100%;object-fit:cover;display:block}
.about-bullets{display:grid;grid-template-columns:1fr 1fr;gap:10px 80px;font-weight:500;margin-bottom:35px}
.about-bullets div{display:flex;align-items:center;gap:10px}
.about-bullets img{margin-top:-2px}

/* -------------------------------------------------------------- notes ---- */
.notes3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:37px;text-align:left}
.note{
  border:1px solid var(--ink);border-radius:20px;background:#fff;overflow:hidden;
  text-decoration:none;display:flex;flex-direction:column;transition:opacity .2s;
}
.note:hover{opacity:.85}
.note-glyph{
  border-bottom:1px solid var(--ink);height:180px;display:flex;align-items:center;
  justify-content:center;font-size:64px;font-weight:500;letter-spacing:-.04em;
}
.note-body{padding:30px;display:flex;flex-direction:column;flex:1}
.note-body h3{font-size:24px;line-height:34px;margin-bottom:15px}
.note-meta{border-top:1px solid var(--ink);margin-top:25px;padding-top:25px;display:flex;align-items:center;gap:15px}
.note-meta i{width:3px;height:3px;border-radius:100%;background:var(--ink);display:block}

/* ------------------------------------------------------------- footer ---- */
.footer{background:var(--ink);color:#fff}
.footer-inner{padding-top:50px;position:relative}
.cta{text-align:center;max-width:650px;margin:0 auto 180px;position:relative}
.cta img.quote{margin:60px 0 45px}
.cta h2{margin-bottom:35px}
.cta p{margin:0 0 35px;color:#fff}
.footer-bar{
  border-top:1px solid #fff;padding:40px 0;display:flex;justify-content:space-between;
  align-items:center;gap:20px;flex-wrap:wrap;
}
.footer-bar ul{display:flex;gap:20px;align-items:center;margin:0;padding:0;list-style:none}
.footer-bar a{color:#fff;font-size:17px;font-weight:500;letter-spacing:-.02em;text-decoration:none;transition:opacity .2s}
.footer-bar a:hover{opacity:.6;color:#fff}
.footer-bar li.sep{width:3px;height:3px;border-radius:100%;background:#fff}

/* ------------------------------------------------------------ portfolio -- */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.pcard{
  border:1px solid var(--ink);border-radius:20px;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;
}
.pcard-media{border-bottom:1px solid var(--ink);overflow:hidden}
.pimg{
  width:100%;height:320px;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.pcard:hover .pimg{transform:scale(1.05)}
.pcard-body{padding:30px;display:flex;flex-direction:column;gap:15px;flex:1}
.pcard-body h2{font-size:26px;line-height:36px}
.pcard-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.pcard-more{margin-top:20px;font-weight:500;display:flex;align-items:center;gap:10px}
.pcard-more span{
  width:34px;height:34px;border:1px solid var(--ink);border-radius:50px;
  display:inline-flex;align-items:center;justify-content:center;
}
.pcard-dark{
  border:1px solid var(--ink);border-radius:20px;background:var(--ink);color:#fff;padding:40px;
  display:flex;flex-direction:column;justify-content:center;gap:20px;
}
.pcard-dark h2{font-size:26px;line-height:36px}
.pcard-dark .btn{width:max-content}

/* --------------------------------------------------------------- about --- */
.facts{display:flex;justify-content:center;gap:60px;text-align:left}
.fact{display:flex;align-items:flex-start;gap:5px}
.fact-num{font-size:50px;line-height:60px;letter-spacing:-.03em;-webkit-text-stroke:1px var(--ink);font-weight:500}
.fact-label{max-width:140px;font-size:18px;line-height:22px}
.caps{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;max-width:1100px;margin:0 auto 140px}
.skill-head{display:flex;justify-content:space-between;margin-bottom:8px}
.skill-head span:first-child{font-weight:500}
.skill-track{border:1px solid var(--ink);border-radius:20px;height:10px;position:relative;overflow:hidden}
/* Fires when the row is revealed, not at page load — the skills sit ~4 screens
   down, so a load-time animation was always finished before anyone saw it. */
.skill-fill{border-right:1px solid var(--ink);height:100%;position:absolute}
.rv.in .skill-fill{animation:grow 1.2s ease-out both}
html:not(.js) .skill-fill{animation:grow 1.2s ease-out both}
.timeline{max-width:700px;margin:0 auto 60px;display:flex;flex-direction:column;align-items:center}
.tl-line{width:1px;background:var(--ink)}
.tl-line--60{height:60px}
.tl-line--34{height:34px}
.tl-item{width:100%;display:flex;flex-direction:column;align-items:center}
.tl-period{
  border:1px solid var(--ink);border-radius:50px;padding:10px 26px;font-size:15px;
  font-weight:500;letter-spacing:-.02em;white-space:nowrap;
}
.tl-card{
  width:100%;border:1px solid var(--ink);border-radius:30px;background:#fff;padding:40px;
  text-align:center;transition:background .3s;
}
.tl-card h3{font-size:24px;line-height:34px}
.tl-card .eyebrow{margin-bottom:20px}
.tl-points{display:flex;flex-direction:column;gap:14px;text-align:left}
.tl-points div{display:flex;gap:12px;align-items:flex-start}
.tl-points span.arrow{flex:none;line-height:30px}
.tl-end{width:11px;height:11px;border:1px solid var(--ink);border-radius:50%;background:var(--ink);margin-top:-6px}
.process-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:start}
.process-sticky{position:sticky;top:140px}
.process-list{display:flex;flex-direction:column;gap:40px}
.pstep{border:1px solid var(--ink);border-radius:30px;position:sticky}
.pstep-body{padding:50px 40px;display:flex;flex-direction:column}
.pstep-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;font-size:22px;line-height:1}
.pstep-icon{
  width:48px;height:48px;border:1px solid var(--ink);border-radius:50px;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:20px;
}
.pstep h3{font-size:26px;line-height:36px;margin-bottom:12px}

/* ---------------------------------------------------------------- faq ---- */
.faq-list{max-width:870px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.faq{border:1px solid var(--ink);border-radius:20px;background:#fff;box-shadow:inset 0 -4px 0 0 #dedede;overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 30px;cursor:pointer;
  background:none;border:0;width:100%;font-family:inherit;text-align:left;color:inherit;
  font-size:20px;line-height:30px;font-weight:500}
/* .faq{overflow:hidden} clips the global outline-offset:3px focus ring away
   entirely, so draw this one inside the button instead. */
.faq-q:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.faq-chev{
  width:44px;height:44px;flex:none;border:1px solid var(--ink);border-radius:50px;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;transition:transform .3s,background .3s;
}
/* visibility (delayed until the collapse finishes) takes the closed answer out
   of the accessibility tree — max-height:0 alone still reads it aloud, which
   made the aria-expanded state meaningless. */
.faq-a{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .4s ease,visibility 0s .4s}
.faq.open .faq-a{visibility:visible;transition:max-height .4s ease,visibility 0s}
.faq-a > div{padding:0 30px 30px}
/* Without scripts nothing ever adds .open, so show every answer. */
html:not(.js) .faq-a{max-height:none;visibility:visible}
html:not(.js) .faq-chev{transform:rotate(180deg)}
/* 400px (the design's value) leaves only ~20% headroom on a 320px viewport —
   one longer answer and it clips with no scrollbar to hint at it. */
.faq.open .faq-a{max-height:600px}
.faq.open .faq-chev{transform:rotate(180deg)}

/* -------------------------------------------------------------- contact -- */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:36px;align-items:start}
.panel{border:1px solid var(--ink);border-radius:20px;background:#fff;padding:40px}
.panel h2{font-size:26px;line-height:36px}
.panel--stack{display:flex;flex-direction:column;gap:25px}
.panel a.plain{font-weight:500;text-decoration:none;transition:opacity .2s}
.panel a.plain:hover{opacity:.6}
.socials{display:flex;gap:10px}
.socials a{
  width:38px;height:38px;border:1px solid var(--ink);border-radius:10px;background:#fff;
  box-shadow:inset 0 -3px 0 0 #dedede;display:flex;align-items:center;justify-content:center;
  padding-bottom:2px;text-decoration:none;font-size:13px;font-weight:500;transition:background .2s;
}
.socials a:hover{background:whitesmoke}
.form{display:flex;flex-direction:column;gap:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
input,textarea{
  font-family:'Bricolage Grotesque','Bricolage Fallback',sans-serif;font-size:17px;color:var(--ink);
  border:1px solid var(--ink);border-radius:8px;padding:8px 15px;width:100%;
  box-sizing:border-box;background:#fff;
}
input{height:55px}
input:focus,textarea:focus{outline:2px solid var(--ink)}
input::placeholder,textarea::placeholder{color:var(--ink);opacity:.7}

/* -------------------------------------------------------------- project -- */
.proj-hero{text-align:center;max-width:900px;margin:0 auto 60px}
.proj-hero h1{font-size:clamp(40px,6vw,72px);line-height:1.14;letter-spacing:-.04em;margin-bottom:20px}
.proj-hero .lede{font-size:clamp(19px,2.2vw,26px)}
.proj-shot{border:1px solid var(--ink);border-radius:30px;overflow:hidden;padding:40px;display:flex;align-items:center;justify-content:center}
.proj-shot img{width:100%;height:min(60vh,560px);object-fit:contain;display:block}
.metagrid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:30px;margin:60px 0 90px}
.metagrid > div{border-top:1px solid var(--ink);padding-top:15px}
.metagrid .eyebrow{font-size:14px;line-height:22px}
.metagrid strong{font-weight:500}
.proj-body{display:grid;grid-template-columns:1.6fr 1fr;gap:80px;align-items:start;padding-bottom:120px}
.proj-sections{display:flex;flex-direction:column;gap:50px}
.proj-sections h2{font-size:clamp(28px,3.2vw,36px);line-height:1.24;letter-spacing:-.03em;margin-bottom:18px}
.proj-aside{border:1px solid var(--ink);border-radius:20px;padding:36px;position:sticky;top:120px}
.proj-aside h3{font-size:22px;line-height:32px;margin-bottom:20px}
.proj-outcomes{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.proj-outcomes div{display:flex;align-items:center;gap:10px;font-weight:500}
.proj-outcomes img{margin-top:-2px}
.related-wrap{border-top:1px solid var(--ink);padding:80px 0 140px}
.related-wrap h2{font-size:clamp(30px,3.6vw,50px);line-height:1.2;letter-spacing:-.03em;text-align:center;margin-bottom:50px}
.related{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.rcard{
  border:1px solid var(--ink);border-radius:20px;background:#fff;overflow:hidden;
  text-decoration:none;display:flex;flex-direction:column;transition:opacity .2s;
}
.rcard:hover{opacity:.85}
.rcard-media{border-bottom:1px solid var(--ink)}
.rcard-media img{width:100%;height:260px;object-fit:cover;display:block}
.rcard-body{padding:30px}
.rcard-body h3{font-size:26px;line-height:36px}
.rcard-body .eyebrow{font-size:14px;line-height:22px}

/* --------------------------------------------------------------- breaks -- */
@media(max-width:1240px){.orb{display:none}}
@media(max-width:991px){
  .nav-menu{display:none!important}
  .burger-btn{display:flex!important}
  .hero-cards{grid-template-columns:1fr!important;margin-top:-140px!important}
  .work{flex-direction:column!important;padding:30px!important;gap:30px!important;position:static!important}
  .work-image-wrapper{min-width:0!important;width:100%!important}
  .grid2{grid-template-columns:1fr!important;gap:40px!important}
  .notes3{grid-template-columns:1fr!important}
  .pgrid{grid-template-columns:1fr!important}
  .contact-grid{grid-template-columns:1fr!important}
  .process-grid{grid-template-columns:1fr!important}
  .process-sticky{position:static!important}
  .pstep{position:static!important}
  .facts{flex-wrap:wrap;gap:30px 60px}
  .metagrid{grid-template-columns:1fr 1fr!important}
  .proj-body{grid-template-columns:1fr!important;gap:50px!important}
  .proj-aside{position:static!important}
  .related{grid-template-columns:1fr!important}
  .about-bullets{gap:10px 30px}
  .doodle{display:none}
}
@media(max-width:640px){
  .form-row{grid-template-columns:1fr}
  .hero-pad{padding:150px 0 200px}
  .facts{flex-direction:column;align-items:flex-start;padding-left:10px}
  .metagrid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;animation:none}
  /* iteration-count is the line that actually stops things: the orbs and
     doodles are `infinite`, so capping duration alone just span them at 100kHz
     forever instead of halting them. */
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  #wipe{display:none}
}

.tl-card:hover{background:var(--hov,#fff)}

/* ---------------------------------------------------------------- a11y -- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:2000;background:var(--ink);color:#fff;
  padding:14px 22px;border-radius:0 0 12px 0;font-weight:500;text-decoration:none;
}
.skip:focus{left:0;color:#fff}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
:focus-visible{outline:3px solid #1d1d1d;outline-offset:3px}