:root {
  --paper:#fcfcfa;
  --ink:#232426;
  --muted:#70716f;
  --text-lead:#45484e;
  --text-body:#5c6066;
  --blue:#2855e8;
  --ice:#edf2ff;
  --lime:#ddf38b;
  --line:#e5e7e7;
  --display:'Bricolage Grotesque',sans-serif;
  --body:'DM Sans',sans-serif;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:auto;
  scroll-padding-top:28px;
  overflow-x:clip;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}
button:disabled {
  cursor:wait;
  opacity:.55;
}
button,a {
  -webkit-touch-callout:none;
}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:6px;
}
::selection {
  background:var(--lime);
  color:var(--ink);
}
img {
  max-width:100%;
  display:block;
  height:auto;
}
button {
  border:0;
}
.wrap {
  width:min(1240px,calc(100% - 112px));
  margin-inline:auto;
}
.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  z-index:99;
  background:var(--ink);
  color:white;
  padding:15px;
  border-radius:8px;
}
.skip-link:focus {
  top:20px;
}
.site-header {
  height:118px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
/* Three columns so the nav sits on the page centre, whatever the logo and button widths. */
@media(min-width:761px) {
  .site-header {
    display:grid;
    grid-template-columns:1fr auto 1fr;
  }
  .identity {
    justify-self:start;
  }
  .contact-link {
    justify-self:end;
  }
}
.identity {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.5;
}
.monogram {
  font-family:var(--display);
  font-size:39px;
  line-height:1;
  font-weight:800;
  letter-spacing:-4px;
  color:var(--blue);
  position:relative;
  padding-right:13px;
}
.monogram>span {
  position:absolute;
  font-size:21px;
  letter-spacing:0;
  right:-1px;
  top:-5px;
}
.site-header nav {
  display:flex;
  gap:36px;
  font-size:16px;
  font-weight:500;
}
.site-header nav a {
  position:relative;
}
.site-header nav a:after {
  content:'';
  position:absolute;
  bottom:-7px;
  left:0;
  width:0;
  height:2px;
  background:var(--blue);
  transition:width .2s;
}
.site-header nav a:hover:after {
  width:100%;
}
.contact-link {
  font-size:15px;
  border:1px solid #d8d9d8;
  border-radius:99px;
  padding:12px 19px;
  display:flex;
  gap:24px;
  align-items:center;
}
.contact-link:hover {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}
.hero {
  position:relative;
  min-height:690px;
  text-align:center;
  padding-top:53px;
}
.hero-intro {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:16px;
  font-weight:500;
}
.mini-portrait {
  width:36px;
  height:36px;
  border-radius:50%;
  overflow:hidden;
  background:#dce4e9;
}
.mini-portrait img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.wave {
  font-size:23px;
  color:var(--blue);
  padding-left:3px;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3 {
  font-family:var(--display);
  font-weight:600;
}
h1 {
  font-size:clamp(70px,8.6vw,119px);
  line-height:.99;
  letter-spacing:-4.8px;
  color:var(--blue);
  margin:28px auto 26px;
  position:relative;
  z-index:2;
  max-width:920px;
}
.hero-description {
  font-size:16px;
  line-height:1.8;
  color:#686c74;
  position:relative;
  z-index:2;
}
.hero-actions {
  display:flex;
  gap:28px;
  justify-content:center;
  align-items:center;
  margin-top:27px;
  position:relative;
  z-index:2;
}
.button {
  padding:16px 24px;
  border-radius:99px;
  font-size:14px;
  font-weight:550;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:27px;
  transition:transform .2s,background .2s;
}
.button:hover {
  transform:translateY(-3px);
}
.button-blue {
  background:var(--blue);
  color:white;
  box-shadow:0 5px 0 #2147c4;
}
.button-blue:hover {
  background:#1d46cf;
}
.text-link {
  font-size:14px;
  display:inline-flex;
  gap:18px;
  align-items:center;
}
.text-link:hover {
  color:var(--blue);
}
.object-piece {
  position:absolute;
  z-index:3;
}
.object-canvas {
  width:100%;
  height:100%;
  display:block;
  background:none;
  padding:0;
  touch-action:pan-y;
}
.object-canvas canvas {
  display:block;
  width:100%;
  height:100%;
}
.hero-cube {
  width:255px;
  height:255px;
  left:-37px;
  top:260px;
  transform:rotate(-9deg);
}
.hero-cube .object-canvas {
  cursor:grab;
}
.hero-cube .object-canvas:active {
  cursor:grabbing;
}
.hero-record {
  width:244px;
  height:244px;
  right:-22px;
  top:172px;
  transform:rotate(13deg);
}
.hand-note {
  font-family:var(--display);
  font-style:italic;
  font-size:14px;
  display:block;
  color:#797e87;
  transform:rotate(-7deg);
  margin-top:-8px;
}
.hero-record .hand-note {
  margin-top:-6px;
  transform:rotate(-4deg);
}
.hero-sticker {
  position:absolute;
  right:63px;
  bottom:102px;
  background:var(--lime);
  width:125px;
  height:125px;
  padding:22px 10px;
  display:grid;
  align-content:center;
  gap:7px;
  line-height:1.2;
  font-size:13px;
  font-weight:500;
  border-radius:50%;
  transform:rotate(13deg);
  box-shadow:0 3px 0 #bed66c;
}
.hero-sticker>span {
  font-size:32px;
  line-height:1;
}
.hero-bottom {
  position:absolute;
  bottom:20px;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#777b82;
}
.location-mark {
  font-size:19px;
  vertical-align:-1px;
  margin-right:5px;
}
.scroll-cue {
  display:flex;
  align-items:center;
  gap:13px;
}
.scroll-cue span {
  font-size:20px;
  color:var(--blue);
}
.hero-intro,h1,.hero-description,.hero-actions {
  animation:hero-in .8s both;
}
.hero-intro {
  animation-delay:.05s;
}
h1 {
  animation-delay:.12s;
}
.hero-description {
  animation-delay:.22s;
}
.hero-actions {
  animation-delay:.3s;
}
.object-piece {
  animation:objects-in 1.2s .2s both;
}
.hero-sticker {
  animation:sticker-in .9s .5s both;
}
@keyframes hero-in {
  from {
    opacity:0;
    translate:0 20px;
  }
  to {
    opacity:1;
    translate:0 0;
  }
}
@keyframes objects-in {
  from {
    opacity:0;
    scale:.75;
  }
  to {
    opacity:1;
    scale:1;
  }
}
@keyframes sticker-in {
  from {
    opacity:0;
    rotate:-25deg;
    scale:.7;
  }
  to {
    opacity:1;
    rotate:0deg;
    scale:1;
  }
}
@media(min-width:1600px) {
  .hero {
    min-height:760px;
    padding-top:72px;
  }
  .hero-cube {
    top:300px;
  }
  .hero-record {
    top:210px;
  }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px);
  }
  h1 {
    font-size:96px;
    letter-spacing:-3.7px;
  }
  .hero-cube {
    width:210px;
    height:210px;
    left:-40px;
    top:310px;
  }
  .hero-record {
    width:190px;
    height:190px;
    right:-30px;
    top:210px;
  }
  .hero-sticker {
    right:25px;
    width:110px;
    height:110px;
  }
  .hero-description {
    max-width:550px;
    margin:auto;
  }
}
@media(max-width:760px) {
  .wrap {
    width:calc(100% - 40px);
  }
  .site-header {
    height:88px;
  }
  .identity {
    gap:9px;
    font-size:16px;
  }
  .monogram {
    font-size:34px;
  }
  .site-header nav {
    gap:20px;
    font-size:15px;
  }
  .contact-link {
    display:none;
  }
  .hero {
    padding-top:44px;
    min-height:760px;
  }
  h1 {
    font-size:clamp(52px,10.5vw,80px);
    letter-spacing:-3px;
    margin-top:23px;
    line-height:1.04;
  }
  .hero-intro {
    font-size:14px;
  }
  .hero-description {
    font-size:15px;
    max-width:360px;
    padding-inline:10px;
    line-height:1.7;
  }
  .hero-description br {
    display:none;
  }
  .hero-actions {
    gap:20px;
    flex-wrap:wrap;
    margin-top:24px;
  }
  .button {
    font-size:13px;
    padding:15px 21px;
    gap:16px;
  }
  .text-link {
    font-size:13px;
    gap:8px;
  }
  .hero-cube {
    width:185px;
    height:185px;
    left:calc(50% - 178px);
    top:412px;
  }
  .hero-record {
    width:180px;
    height:180px;
    right:calc(50% - 174px);
    top:437px;
  }
  .hand-note {
    font-size:12px;
  }
  .hero-sticker {
    display:none;
  }
  .hero-bottom {
    bottom:23px;
    font-size:11px;
  }
  .hero-bottom>span:last-child {
    display:none;
  }
  .hero-bottom .scroll-cue {
    gap:8px;
  }
}
@media(max-width:380px) {
  .hero-actions {
    gap:18px;
  }
  .hero {
    min-height:780px;
  }
  .hero-cube {
    top:445px;
    width:165px;
    height:165px;
    left:calc(50% - 157px);
  }
  .hero-record {
    top:463px;
    width:160px;
    height:160px;
    right:calc(50% - 151px);
  }
  .hero-bottom {
    font-size:10px;
  }
  .site-header nav {
    gap:14px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
}
:root { color-scheme: light; }
.section-space { padding-block: 98px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 44px; }
.section-label { display: block; margin-bottom: 19px; color: #737780; font-size: 13px; }
h2 { font-size: clamp(38px, 4.2vw, 57px); line-height: 1.04; letter-spacing: -2.5px; }
.section-heading > p { font-size: 15px; line-height: 1.75; color: var(--muted); padding-bottom: 5px; }
.project { display: block; }
.project-visual { border-radius: 22px; overflow: hidden; position: relative; isolation: isolate; }
.bubbles-visual { height: 494px; background: #e8e5f5; display: grid; grid-template-columns: 35% 65%; align-items: center; }
.project-cover-copy { padding-left: 48px; position: relative; z-index: 1; }
.bubbles-wordmark { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 26px; letter-spacing: -.7px; }
.bubbles-wordmark svg { color: #746396; }
.project-cover-copy h3 { font-size: clamp(35px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -2px; margin: 32px 0; color: #4c4265; }
.cover-pill { display: inline-block; border: 1px solid #c4bdd6; border-radius: 30px; padding: 9px 13px; font-size: 11px; color: #6a627b; }
.bubbles-screen { width: 110%; margin: 55px 0 -40px 10px; border: 7px solid #27272b; border-radius: 15px; transform: perspective(1200px) rotateY(-9deg) rotateZ(-4deg); box-shadow: 15px 25px 45px #35264f30; transition: transform .55s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
.bubbles-screen img { width: 100%; height: auto; }
.browser-chrome { display: flex; align-items: center; gap: 5px; background: #27272b; height: 23px; padding: 0 8px; }
.browser-chrome i { display: block; height: 5px; width: 5px; border-radius: 50%; background: #67666c; }
.browser-chrome span { text-align: center; flex: 1; color: #b5b4bf; font-size: 8px; }
.project-open { position: absolute; right: 22px; bottom: 22px; height: 43px; width: 43px; background: white; color: var(--ink); border-radius: 50%; display: grid; place-items: center; font-size: 22px; box-shadow: 0 4px 12px #0000000a; transition: transform .3s, background .3s; z-index: 3; }
.project:hover .project-open { transform: rotate(45deg); background: var(--lime); }
.project:hover .bubbles-screen { transform: perspective(1200px) rotateY(-4deg) rotateZ(-1deg) translateY(-7px); }
.project-caption { padding: 22px 2px 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.project-caption h3 { font-size: 25px; letter-spacing: -.5px; margin-bottom: 7px; }
.project-caption p { font-size: 14px; color: var(--muted); line-height: 1.5; }
.project-tags { display: flex; gap: 8px; }
.project-tags span, .single-tag { font-size: 11px; border: 1px solid var(--line); border-radius: 20px; padding: 8px 12px; white-space: nowrap; color: #6d7379; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 46px; }
.project-grid .project-visual { height: 375px; }
.nexstem-visual { background: #f3e6e2; }
.karman-visual { background: #e3eae4; }
.mini-cover-title { display: flex; justify-content: space-between; align-items: center; padding: 30px 32px; }
.mini-cover-title > span:first-child { font-size: 26px; font-weight: 700; letter-spacing: -1px; }
.mini-cover-title > span:last-child { font-size: 11px; color: #7b7979; }
.karman-x { color: #178887; }
.nexstem-screen { width: 81%; margin: 3px auto 0; border: 5px solid #27272b; border-radius: 11px; transform: rotate(-5deg); box-shadow: 5px 15px 30px #59312c26; overflow: hidden; transition: transform .5s; }
.nexstem-screen img { width: 100%; }
.karman-screen { width: 83%; margin: 3px auto 0; border: 5px solid white; border-radius: 10px; overflow: hidden; transform: rotate(4deg); box-shadow: 3px 12px 30px #263f2926; transition: transform .5s; }
.karman-screen .browser-chrome { background: white; }
.karman-screen .browser-chrome i { background: #d5d5d5; }
.karman-screen .browser-chrome span { color: #969c99; }
.karman-crop { position: relative; aspect-ratio: 1.55; overflow: hidden; background: white; }
.karman-crop img { max-width: none; position: absolute; width: 200%; height: auto; left: -41.8%; top: -34.5%; }
.project:hover .nexstem-screen, .project:hover .karman-screen { transform: rotate(0deg) translateY(-5px); }
.work-more { margin-top: 43px; display: flex; align-items: center; justify-content: flex-end; border-bottom: 1px solid var(--line); padding-bottom: 23px; }
.work-more > span { font-size: 13px; color: var(--muted); }
.work-more .text-link { font-weight: 500; }
.toolkit-section { padding-top: 36px; padding-bottom: 105px; }
.toolkit-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: 'intro brew' 'services brew'; column-gap: 95px; align-items: start; }
.toolkit-intro { grid-area: intro; }
.services { grid-area: services; }
.toolkit-layout .brew { grid-area: brew; align-self: center; }
.toolkit-intro > p { font-size: 15px; color: var(--muted); line-height: 1.75; margin-top: 24px; max-width: 540px; text-wrap: pretty; }
.services { padding-top: 32px; }
.services details { border-bottom: 1px solid var(--line); }
.services summary { display: flex; align-items: center; gap: 15px; padding: 24px 0; cursor: pointer; list-style: none; }
.services summary::-webkit-details-marker { display: none; }
/* Open: the text sits close under its heading. */
.services details[open] summary { padding-bottom: 8px; }
.services summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.services summary h3 { font-size: 23px; letter-spacing: -.6px; font-weight: 500; }
.service-icon { font-size: 25px; width: 26px; text-align: center; color: var(--blue); }
.details-plus { margin-left: auto; font-size: 24px; font-weight: 400; color: #91969d; transition: transform .3s; }
details[open] .details-plus { transform: rotate(45deg); }
.service-body { padding: 0 25px 28px 41px; }
.service-body > p { font-size: 14px; line-height: 1.8; color: var(--muted); }
.service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: 12px; color: #595f69; }
/* Tags as pills, tinted per service: product design blue, websites lime, systems lavender. */
.service-tags span { --tag-bg: var(--ice); --tag-ink: #284790; padding: 6px 12px; border-radius: 99px; background: var(--tag-bg); color: var(--tag-ink); font-size: 12px; font-weight: 500; line-height: 1.3; }
.services details:nth-of-type(2) .service-tags span { --tag-bg: #eef6d2; --tag-ink: #4a5c16; }
.services details:nth-of-type(3) .service-tags span { --tag-bg: #eeeaf8; --tag-ink: #51446b; }
.play-section { padding-top: 25px; padding-bottom: 60px; }
.play-card { background: var(--ice); border-radius: 27px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; position: relative; }
.play-copy { padding: 66px 30px 62px 58px; }
.play-copy h2 { font-size: clamp(39px, 4.35vw, 61px); color: #284790; line-height: 1.03; }
.play-copy .section-label { color: #617391; }
.play-copy > p { max-width: 370px; color: #6b7891; font-size: 15px; line-height: 1.8; margin-top: 26px; }
.collection-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; max-width: 340px; }
.collection-list span { padding: 7px 11px; border: 1px solid #c9d5eb; border-radius: 20px; font-size: 11px; color: #5f7291; }
.play-note { display: block; margin-top: 31px; color: #3f5c94; font-family: var(--display); font-size: 24px; font-style: italic; line-height: 1.3; letter-spacing: -.02em; }
.cube-playground { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 42px 25px 31px; }
.cube-picker { display: flex; gap: 3px; background: #dfe7f8; padding: 5px; border-radius: 30px; z-index: 2; }
.cube-picker button { background: transparent; border-radius: 30px; padding: 8px 13px; font-size: 12px; color: #60729a; transition: background .2s; }
.cube-picker button[aria-pressed=true] { background: white; color: #284790; box-shadow: 0 2px 5px #273d5c0a; }
.play-cube { width: 100%; max-width: 430px; height: 360px; cursor: grab; touch-action: pan-y; }
.play-cube:active { cursor: grabbing; }
.play-cube canvas { width: 100%; height: 100%; display: block; }
.cube-instruction { font-size: 11px; color: #647596; margin-top: -10px; }
.cube-actions { display: flex; gap: 10px; margin-top: 22px; }
.cube-actions .button { padding: 12px 19px; gap: 9px; font-size: 12px; }
.button-dark { background: #26334d; color: white; }
.button-outline { background: transparent; border: 1px solid #b6c6e3; color: #425b83; }
.cube-status { font-size: 11px; margin-top: 18px; color: #637699; min-height: 30px; text-align: center; line-height: 1.5; }
.canvas-fallback { text-align: center; color: var(--blue); padding-top: 30%; line-height: 1.8; font-size: 16px; }
.about-section { padding-top: 74px; }
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 95px; align-items: center; margin-top: 60px; }
.portrait-composition { position: relative; padding: 3px 60px 15px 35px; }
.portrait-card { background: white; padding: 13px 13px 20px; margin: 0; transform: rotate(-6deg); box-shadow: 0 5px 10px #18203406, 0 12px 35px #1820340b; }
.portrait-card img { width: 100%; aspect-ratio: 1.04; object-fit: cover; object-position: center; }
.portrait-card figcaption { text-align: center; font-family: var(--display); font-size: 13px; font-style: italic; padding-top: 19px; color: #6e7479; }
.portrait-sticker { position: absolute; bottom: 62px; right: 12px; background: var(--lime); width: 138px; height: 138px; border-radius: 50%; transform: rotate(12deg); display: grid; place-items: center; box-shadow: 0 8px 18px #4d5e1a1f, inset 0 0 0 1px #ffffff66; }
/* Round badge: the words run around the rim and turn slowly; the asterisk spins when the photo is hovered. */
.sticker-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: sticker-spin 24s linear infinite; }
.sticker-ring text { font-family: var(--body); font-size: 10.2px; font-weight: 700; letter-spacing: .06em; fill: var(--ink); }
.sticker-star { width: 34%; height: 34%; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.portrait-composition:hover .sticker-star { transform: rotate(180deg); }
@keyframes sticker-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .sticker-ring { animation: none; } .sticker-star { transition: none; } }
.about-story h3 { font-size: 33px; letter-spacing: -.9px; line-height: 1.14; margin-bottom: 25px; }
.about-story p { font-size: 15px; color: var(--muted); line-height: 1.9; margin: 17px 0; }
.about-story .text-link { margin-top: 11px; color: var(--blue); }
.personality-strip { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 83px; padding: 26px 0; border-block: 1px solid var(--line); }
.interest-item { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 13px; background: transparent; text-align: left; position: relative; }
.interest-item + .interest-item { border-left: 1px solid var(--line); }
.interest-symbol { font-size: 43px; color: var(--blue); width: 45px; text-align: center; line-height: 1; }
.interest-item h3 { font-size: 18px; letter-spacing: -.4px; margin-bottom: 6px; }
.interest-item p { font-size: 11px; color: var(--muted); line-height: 1.5; }
.controller-symbol svg { display: block; width: 44px; height: 44px; fill: currentColor; }
.magic-symbol { font-family: var(--display); font-size: 40px; }
.wallpaper-symbol svg { display: block; width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
a.interest-item { color: inherit; text-decoration: none; }
a.interest-item, button.interest-item { transition: background .2s; }
a.interest-item:hover, button.interest-item:hover { background: #f4f5f2; }
.tiny-arrow { font-size: 18px; color: #8c939c; position: absolute; top: 5px; right: 17px; }
/* Four interests: one row on wide screens, two by two on tablets and small laptops. */
@media (min-width: 761px) and (max-width: 1150px) {
  .personality-strip { grid-template-columns: repeat(2, 1fr); padding-block: 0; }
  .personality-strip .interest-item { justify-content: flex-start; padding: 26px 13px 26px 26px; }
  .interest-item:nth-child(3) { border-left: 0; }
  /* A rule between the two rows, meeting the one between the columns. */
  .interest-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .personality-strip .tiny-arrow { top: 24px; }
}
.artwork-note { margin-top: 38px; display: flex; align-items: center; justify-content: center; gap: 22px; }
.artwork-thumbs { display: flex; padding: 6px; }
.artwork-thumbs img { width: 59px; height: 64px; object-fit: cover; padding: 4px; background: white; box-shadow: 0 2px 8px #00000012; transform: rotate(-12deg); }
.artwork-thumbs img + img { margin-left: -9px; transform: rotate(9deg); }
.artwork-note p { font-size: 12px; color: var(--muted); line-height: 1.8; }
.artwork-note a { color: #454c58; text-decoration: underline; text-underline-offset: 3px; }
.footer { background: var(--paper); padding-top: 36px; }
.footer-main { display: flex; justify-content: center; padding-bottom: 34px; }
/* Keyboard-only contact links: the dogs need a pointer, so these stay hidden until someone tabs to them. */
.footer-keys { display: flex; justify-content: center; gap: 10px; height: 0; translate: 0 -30px; }
.footer-keys a { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.footer-keys a:focus-visible { position: static; width: auto; height: auto; clip-path: none; align-self: flex-start; padding: 8px 14px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 13px; outline: 3px solid var(--blue); outline-offset: 3px; }
/* The origami dogs (footer-dogs.js): a 3D stage beside the contact copy. Each dog is a contact button. */
.footer-dogs-wrap { position: relative; flex: 1 1 0; min-width: 0; max-width: 820px; }
.footer-dogs { height: 380px; }
.footer-dogs canvas { display: block; width: 100%; height: 100%; }
/* The paw cursor shows anywhere inside the footer, not only over a dog. */
.footer, .footer canvas { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23533c2e' stroke='white' stroke-width='1.4'%3E%3Cellipse cx='7' cy='12' rx='3.6' ry='4.7' transform='rotate(-25 7 12)'/%3E%3Cellipse cx='13' cy='7' rx='3.5' ry='4.7'/%3E%3Cellipse cx='21' cy='8' rx='3.5' ry='4.7' transform='rotate(15 21 8)'/%3E%3Cellipse cx='27' cy='14' rx='3.3' ry='4.4' transform='rotate(30 27 14)'/%3E%3Cpath d='M8 23c0-4 5-9 8-9s8 5 8 9c0 6-5 4-8 4s-8 2-8-4Z'/%3E%3C/g%3E%3C/svg%3E") 16 16, auto; }
.footer-dogs.dog-hovered, .footer-dogs.dog-hovered canvas { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23533c2e' stroke='white' stroke-width='1.4'%3E%3Cellipse cx='7' cy='12' rx='3.6' ry='4.7' transform='rotate(-25 7 12)'/%3E%3Cellipse cx='13' cy='7' rx='3.5' ry='4.7'/%3E%3Cellipse cx='21' cy='8' rx='3.5' ry='4.7' transform='rotate(15 21 8)'/%3E%3Cellipse cx='27' cy='14' rx='3.3' ry='4.4' transform='rotate(30 27 14)'/%3E%3Cpath d='M8 23c0-4 5-9 8-9s8 5 8 9c0 6-5 4-8 4s-8 2-8-4Z'/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer; }
/* "Email copied": a badge under the middle dog, shown for a moment after it's clicked. */
.footer-dogs-toast { position: absolute; left: 50%; bottom: 10px; translate: -50% -6px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 550; white-space: nowrap; box-shadow: 0 8px 18px #23242622; opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s; }
.footer-dogs-toast::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23232426' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 8.3 2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.footer-dogs-toast:empty { display: none; }
.footer-dogs-toast.is-shown { opacity: 1; translate: -50% 0; }
.contact-more { display: flex; gap: 28px; margin-top: 22px; font-size: 14px; color: #4c4f55; }
.contact-more a { display: inline-flex; gap: 10px; }
.contact-more a span { color: var(--blue); }
.contact-more a:hover { color: var(--blue); }
.footer-main h2 { font-size: clamp(45px, 5.5vw, 76px); letter-spacing: -3.5px; }
.email-link { display: inline-flex; align-items: center; gap: 50px; margin-top: 28px; font-size: 16px; border-bottom: 1px solid #b5bbc6; padding-bottom: 9px; }
.email-link span { color: var(--blue); font-size: 22px; }
.footer-hello { width: 160px; height: 160px; background: var(--blue); color: white; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transform: rotate(10deg); transition: transform .3s; font-size: 15px; margin-right: 70px; }
.footer-hello span { font-size: 65px; line-height: 1; }
.footer-hello:hover { transform: rotate(-10deg) scale(1.04); }
.footer-bottom { border-top: 1px solid #dce0dc; display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 26px 0; font-size: 12px; color: #747975; }
.footer-bottom > div { display: flex; gap: 25px; }
.footer-bottom a:hover { color: var(--blue); }
@media (min-width: 1001px) and (max-width: 1200px) {
  .hero h1 { font-size: 94px; }
  .hero-record { top: 140px; right: -33px; width: 165px; height: 165px; }
  .hero-cube { top: 338px; width: 190px; height: 190px; }
}
@media (max-width: 1000px) {
  .hero { min-height: 810px; }
  .hero-cube { top: 475px; left: calc(50% - 230px); width: 210px; height: 210px; }
  .hero-record { top: 478px; right: calc(50% - 210px); width: 205px; height: 205px; }
  .hero-sticker { display: none; }
  .section-space { padding-block: 70px; }
  .section-heading > p { max-width: 230px; font-size: 13px; }
  .bubbles-visual { height: 390px; }
  .project-cover-copy { padding-left: 27px; }
  .project-cover-copy h3 { font-size: 43px; }
  .project-grid .project-visual { height: 300px; }
  .project-grid { gap: 22px; }
  .mini-cover-title { padding: 24px; }
  .mini-cover-title > span:last-child { display: none; }
  .project-caption { align-items: flex-start; }
  .project-grid .single-tag { display: none; }
  .toolkit-layout { column-gap: 42px; }
  .services summary h3 { font-size: 19px; }
  .play-copy { padding: 42px 12px 44px 32px; }
  .play-copy h2 { font-size: 43px; }
  .play-copy > p { font-size: 14px; }
  .play-copy .section-label { font-size: 11px; }
  .cube-playground { padding-inline: 15px; }
  .play-cube { height: 330px; }
  .cube-picker button { padding-inline: 10px; }
  .cube-actions .button { padding-inline: 13px; }
  .about-layout { gap: 38px; }
  .portrait-composition { padding-left: 18px; padding-right: 24px; }
  .portrait-sticker { width: 110px; height: 110px; right: -3px; bottom: 70px; }
  .about-story h3 { font-size: 28px; }
  .interest-item { gap: 9px; padding: 8px; }
  .interest-item h3 { font-size: 15px; }
  .interest-item p { font-size: 10px; }
  .interest-symbol { width: 37px; }
  .footer-hello { margin-right: 20px; }
}
@media (max-width: 760px) {
  .hero { min-height: 730px; }
  .hero-cube { width: 185px; height: 185px; left: calc(50% - 178px); top: 395px; }
  .hero-record { width: 180px; height: 180px; right: calc(50% - 174px); top: 420px; }
  .hero-bottom { bottom: 22px; }
  .section-space { padding-block: 56px; }
  .section-heading { display: block; margin-bottom: 29px; }
  .section-heading > p { max-width: none; margin-top: 19px; font-size: 14px; }
  .section-heading > p br { display: none; }
  .section-label { font-size: 12px; margin-bottom: 14px; }
  h2 { font-size: 42px; letter-spacing: -1.8px; }
  .bubbles-visual { height: 420px; display: block; }
  .project-cover-copy { padding: 27px; }
  .bubbles-wordmark { font-size: 23px; }
  .bubbles-wordmark svg { width: 22px; }
  .project-cover-copy h3 { font-size: 32px; line-height: 1.1; margin: 15px 0 0; max-width: 220px; letter-spacing: -1px; }
  .project-cover-copy h3 br:nth-child(2) { display: none; }
  .cover-pill { display: none; }
  .bubbles-screen { width: 86%; margin: -2px -15px 0 auto; transform: rotate(-5deg); border-width: 4px; }
  .project-visual { border-radius: 17px; }
  .project-caption { padding-top: 18px; display: block; }
  .project-caption h3 { font-size: 23px; }
  .project-caption p { font-size: 13px; }
  .project-tags { margin-top: 13px; }
  .project-tags span { font-size: 10px; padding: 6px 10px; }
  .project-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
  .project-grid .project-visual { height: 335px; }
  .mini-cover-title { padding: 25px; }
  .mini-cover-title > span:last-child { display: inline; }
  .nexstem-screen, .karman-screen { width: 79%; max-width: 410px; }
  .work-more { gap: 15px; margin-top: 30px; }
  .work-more > span { font-size: 11px; }
  .work-more .text-link { font-size: 12px; white-space: nowrap; }
  .toolkit-section { padding-top: 20px; }
  .toolkit-layout { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: 'intro' 'brew' 'services'; row-gap: 28px; }
  .toolkit-layout .brew { max-width: 420px; }
  .toolkit-intro > p { font-size: 14px; margin-top: 20px; }
  .services { padding-top: 0; }
  .services summary h3 { font-size: 21px; }
  .services summary { padding-block: 23px; }
  .play-section { padding-top: 15px; padding-bottom: 30px; }
  .play-card { grid-template-columns: 1fr; border-radius: 20px; }
  .play-copy { padding: 34px 27px 5px; }
  .play-copy h2 { font-size: 43px; }
  .play-copy h2 br { display: none; }
  .play-copy > p { font-size: 14px; margin-top: 21px; }
  .collection-list { margin-top: 20px; gap: 7px; }
  .collection-list span { font-size: 10px; }
  .play-note { margin-top: 22px; font-size: 20px; }
  .cube-playground { padding-top: 32px; padding-bottom: 16px; }
  .play-cube { height: 320px; }
  .cube-picker button { padding: 9px 14px; }
  .cube-actions { margin-top: 20px; }
  .cube-actions .button { font-size: 12px; padding: 13px 17px; }
  .cube-status { font-size: 10px; margin-top: 16px; }
  .about-layout { grid-template-columns: 1fr; gap: 42px; margin-top: 35px; }
  .portrait-composition { width: 100%; max-width: 375px; margin: auto; padding: 0 40px 5px 20px; }
  .portrait-sticker { right: 0; bottom: 64px; width: 100px; height: 100px; }
  .about-story h3 { font-size: 28px; }
  .about-story p { font-size: 14px; line-height: 1.85; }
  .personality-strip { grid-template-columns: 1fr; margin-top: 36px; padding-block: 6px; }
  .interest-item { padding: 20px 8px; justify-content: flex-start; gap: 20px; }
  .interest-item + .interest-item { border-left: none; border-top: 1px solid var(--line); }
  .interest-item h3 { font-size: 19px; }
  .interest-item p { font-size: 12px; }
  .tiny-arrow { top: 25px; }
  .artwork-note { gap: 12px; margin-top: 30px; justify-content: flex-start; }
  .artwork-note p { font-size: 11px; }
  .artwork-thumbs img { width: 50px; height: 58px; }
  .footer { padding-top: 45px; }
  .footer-main { padding-bottom: 44px; }
  .footer-dogs { height: 215px; }
  .footer-dogs-toast { bottom: -22px; }
  .contact-more { gap: 22px; }
  .footer-main h2 { font-size: 43px; letter-spacing: -2px; }
  .footer-main .section-label { font-size: 11px; }
  .email-link { font-size: 13px; gap: 16px; margin-top: 22px; }
  .footer-hello { display: none; }
  .footer-bottom { font-size: 10px; flex-wrap: wrap; gap: 22px 10px; padding-block: 24px; }
  .footer-bottom > div { gap: 17px; }
  .footer-bottom > a { width: 100%; }
}
@media (max-width: 380px) {
  .hero { min-height: 730px; }
  .hero-cube { top: 420px; width: 160px; height: 160px; left: calc(50% - 151px); }
  .hero-record { top: 435px; width: 158px; height: 158px; right: calc(50% - 146px); }
  h2 { font-size: 38px; }
  .play-copy { padding-inline: 23px; }
  .play-copy h2 { font-size: 38px; }
  .cube-picker button { padding-inline: 11px; }
  .cube-actions .button { padding-inline: 14px; }
  .cube-instruction { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .bubbles-screen, .nexstem-screen, .karman-screen { transition: none; }
  .button:hover { transform: none; }
}

/* Smaller type is reserved for secondary labels; the body scale is at the end of this file. */
.section-label,
.project-tags span,
.single-tag,
.cover-pill,
.mini-cover-title > span:last-child,
.service-tags,
.collection-list span,
.cube-instruction,
.cube-status,
.interest-item p,
.footer-bottom,
.hero-bottom,
.work-more > span,
.artwork-note p { font-size: 12px; }
@media (max-width: 1000px) and (min-width: 761px) {
  .interest-item p { max-width: 150px; }
}
@media (max-width: 760px) {
  .hero-cube { top: 425px; }
  .hero-record { top: 444px; }
  .hero-bottom { font-size: 11px; }
  .footer-bottom { font-size: 11px; }
  .play-copy .section-label { font-size: 12px; }
  .interest-item p { font-size: 13px; }
  .mini-cover-title > span:last-child { font-size: 11px; }
}
@media (max-width: 380px) {
  .hero-cube { top: 445px; }
  .hero-record { top: 459px; }
  .hero-bottom { font-size: 11px; }
}

/* The cube is a small performance, with an explicit way to pause or replay. */
.hero-solve-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px auto 0;
  padding: 7px 11px;
  border: 1px solid #dfe3ed;
  border-radius: 30px;
  background: #ffffffd9;
  color: #536684;
  font-size: 12px;
  transform: rotate(9deg);
}
.hero-solve-control:hover { color: var(--blue); border-color: #b7c8f2; }
.hero-solve-control[hidden] { display: none; }
.cube-progress {
  width: 195px;
  height: 3px;
  margin-top: 19px;
  border-radius: 9px;
  background: #cfdbef;
  overflow: hidden;
}
.cube-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
  border-radius: inherit;
  transition: width .25s ease;
}
.cube-status { margin-top: 12px; }

/* A personal record sleeve opens the real Apple Music player. */
.hero-record { transform: none; }
.music-mini {
  width: 220px;
  margin: -7px auto 0;
  display: grid;
  grid-template-columns: 1fr 34px;
  align-items: center;
  column-gap: 12px;
  padding: 14px 15px 12px;
  background: #fff;
  border: 1px solid #e7e7e5;
  border-radius: 15px;
  box-shadow: 0 4px 0 #ededea;
  text-align: left;
  transform: rotate(5deg);
}
.music-mini-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.music-eyebrow { font-size: 10px; color: #98989c; }
.music-mini strong { font-size: 14px; letter-spacing: -.2px; font-weight: 600; }
.music-caption { color: #ad5662; font-size: 11px; }
.music-toggle {
  display: grid;
  place-items: center;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background: #ed5160;
  color: white;
  font-size: 13px;
  transition: transform .2s, background .2s;
}
.music-toggle:hover { transform: scale(1.1); background: #d9364d; }
.play-icon { margin-left: 2px; }
.music-bars { grid-column: 1 / -1; height: 13px; display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 11px; }
.music-bars i { flex: 1; height: 4px; border-radius: 4px; background: #eadcde; transform-origin: center; }
.music-bars i:nth-child(3n) { height: 11px; background: #dc9ba3; }
.music-bars i:nth-child(4n) { height: 7px; background: #e3b8be; }
.hero-record:hover .music-bars i { animation: little-rhythm .65s ease-in-out infinite alternate; }
.music-bars i:nth-child(2n) { animation-delay: -.3s !important; }
.music-bars i:nth-child(3n) { animation-delay: -.5s !important; }
@keyframes little-rhythm { from { scale: 1 .6; } to { scale: 1 1.2; } }
.music-open { overflow: hidden; }
.music-dialog {
  width: min(580px, calc(100% - 32px));
  max-height: calc(100svh - 40px);
  border: 1px solid #e0e3e8;
  border-radius: 23px;
  padding: 26px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 100px #101d3433;
  overflow-y: auto;
}
.music-dialog[open] { animation: player-in .25s ease-out; }
.music-dialog::backdrop { background: #20293c55; backdrop-filter: blur(8px); }
.music-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 23px; }
.music-dialog-heading .section-label { font-size: 12px; margin-bottom: 11px; }
.music-dialog-heading h2 { font-size: 41px; letter-spacing: -1.5px; }
.dialog-close { background: #eff0ee; color: #5b6370; border-radius: 50%; width: 38px; height: 38px; flex: 0 0 38px; font-size: 26px; line-height: 1; }
.dialog-close:hover { background: #e3e5e1; color: var(--ink); }
#apple-music-embed { border-radius: 14px; overflow: hidden; min-height: 200px; background: #f2f2f2; }
#apple-music-embed iframe { display: block; width: 100%; height: min(450px, 56svh); border: 0; }
#apple-music-link { margin-top: 19px; color: #b94052; font-size: 13px; }
@keyframes player-in { from { opacity: 0; translate: 0 12px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
@media (max-width: 1100px) and (min-width: 1001px) {
  .music-mini { width: 195px; margin-left: -15px; padding: 11px 12px; gap: 8px; }
  .music-mini strong { font-size: 13px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .hero { min-height: 870px; }
  .music-mini { width: 200px; }
}
@media (max-width: 760px) {
  .hero { min-height: 790px; }
  .hero-record { top: 423px; }
  .hero-cube { top: 443px; }
  .music-mini { width: 174px; padding: 11px 10px 9px; grid-template-columns: 1fr 29px; gap: 7px; margin-top: -3px; border-radius: 12px; }
  .music-eyebrow { font-size: 9px; }
  .music-mini strong { font-size: 12px; }
  .music-caption { font-size: 10px; }
  .music-toggle { height: 29px; width: 29px; font-size: 11px; }
  .music-bars { margin-top: 7px; height: 10px; gap: 3px; }
  .hero-solve-control { font-size: 11px; padding: 7px 10px; margin-top: 12px; }
  .music-dialog { padding: 20px; }
  .music-dialog-heading h2 { font-size: 34px; }
  .music-dialog-heading .section-label { font-size: 11px; }
}
@media (max-width: 380px) {
  .hero { min-height: 805px; }
  .hero-record { top: 454px; }
  .hero-cube { top: 474px; }
  .music-mini { width: 160px; padding: 10px 9px; gap: 4px; }
  .music-mini strong { font-size: 11px; }
  .music-caption { font-size: 9px; }
}

/* A little record shop in the corner of the homepage. */
.hero-record { width: 270px; height: 340px; right: -20px; top: 125px; }
.hero-record #record-button { width: 244px; height: 244px; display: grid; place-items: center; margin: 0 auto; overflow: visible; }
.vinyl-disc { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px solid #303033; background: repeating-radial-gradient(circle, transparent 0 2px, #ffffff09 2.4px 3px, #0005 3.5px 4px), conic-gradient(#09090b, #39393d 40deg, #111114 80deg, #070709 145deg, #38383c 205deg, #121215 260deg, #09090b); box-shadow: 0 10px 22px #21182320, inset 0 0 0 5px #0006; animation: vinyl-turn 5s linear infinite; animation-play-state: paused; }
.vinyl-label { width: 40%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 20%, #f47a86, #eb4d62); color: #fff5ef; position: relative; box-shadow: 0 0 0 7px #111; }
.vinyl-label:after { content: ''; position: absolute; width: 7px; height: 7px; background: #d3ccbd; border-radius: 50%; top: 53%; }
.vinyl-label > span { font-size: 8px; letter-spacing: 1px; }
.vinyl-label b { font-family: var(--display); font-size: 29px; font-style: italic; }
.vinyl-label small { font-size: 6px; letter-spacing: .7px; }
@keyframes vinyl-turn { to { transform: rotate(360deg); } }
.hero-record .music-mini { position: relative; width: 292px; margin: -65px 0 0 -11px; padding: 17px 17px 10px; display: flex; flex-wrap: wrap; gap: 10px; border-radius: 20px; background: linear-gradient(135deg,#fffefdf5,#fff8f7fa); box-shadow: 0 17px 30px #462c2820, inset 0 1px 0 white; border: 1px solid #eee8e4; transform: rotate(8deg); }
.track-heading { display: flex; align-items: center; gap: 11px; width: 100%; }
#music-artwork { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; background: #efe3e5; }
.hero-record .music-eyebrow { color: #dc455c; font-size: 10px; letter-spacing: .4px; }
.hero-record .music-mini strong { font-size: 19px; letter-spacing: -.5px; line-height: 1.1; }
.hero-record .music-caption { font-size: 10px; color: #777176; }
.show-playlist { margin-left: auto; background: #f9e9eb; color: #be4054; border-radius: 20px; font-size: 10px; padding: 6px 10px; }
.music-timeline { width: 100%; position: relative; }
.hero-record .music-bars { margin: 0; height: 16px; gap: 3px; background: linear-gradient(90deg,#ed6376 var(--progress,0%),#eedbdd var(--progress,0%)); mask-image: none; }
.hero-record .music-bars i { background: #fff9f8; height: 16px; border-radius: 0; flex: 0 0 2px; animation: none; }
#music-seek { position: absolute; width: 100%; height: 24px; top: -5px; left: 0; opacity: 0; cursor: pointer; margin: 0; }
.music-timeline:focus-within { outline: 2px solid #e64f68; outline-offset: 4px; border-radius: 4px; }
.music-times { display: flex; justify-content: space-between; font-size: 10px; color: #92878a; margin-top: 5px; }
.music-controls { display: flex; justify-content: center; align-items: center; gap: 31px; width: 100%; }
.music-controls > button { background: none; font-size: 23px; color: #29282f; }
.music-controls .music-toggle { background: #ec5269; color: white; height: 45px; width: 45px; font-size: 19px; box-shadow: 0 6px 14px #ed516032; }
.music-status { width: 100%; text-align: center; font-size: 9px; color: #9a767d; margin: 0; line-height: 1.3; }
@media(max-width: 1100px) and (min-width: 1001px) { .hero-record { right: -20px; transform: scale(.85); transform-origin: right center; } }
@media(max-width: 1000px) { .hero-record { top: 450px; right: calc(50% - 280px); transform: scale(.85); transform-origin: top center; } .hero { min-height: 880px; } }
@media(max-width: 760px) { .hero-record { top: 435px; right: calc(50% - 220px); transform: scale(.65); transform-origin: top center; } .hero { min-height: 810px; } .hero-cube { left: calc(50% - 178px); width: 155px; top: 468px; } }
@media(max-width: 380px) { .hero-record { top: 465px; right: calc(50% - 209px); transform: scale(.60); } .hero-cube { top: 488px; left: calc(50% - 164px); width: 140px; } .hero { min-height: 840px; } }
@media(prefers-reduced-motion: reduce) { .vinyl-disc { animation-duration: 15s; } }
@media(max-width:1000px) and (min-width:761px) { .hero-record { top:480px; } .hero { min-height:910px; } }
@media(max-width:760px) { .hero-record { right:calc(50% - 216px); } }

/* Four projects move as one gallery while the section is in view. */
.work-section { overflow: visible; padding-block: 78px 66px; }
.work-sticky { min-width: 0; }
.work-section .section-heading { margin-bottom: 30px; }
.work-section .section-heading > p { max-width: 330px; }
.work-rail { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; outline-offset: 5px; }
.work-rail::-webkit-scrollbar { display: none; }
.work-track { display: flex; align-items: stretch; gap: 24px; width: max-content; }
.work-card { display: block; flex: 0 0 min(70vw, 790px); width: min(70vw, 790px); color: var(--ink); }
.work-art { position: relative; height: clamp(320px, 30vw, 405px); border-radius: 24px; overflow: hidden; isolation: isolate; container-type: inline-size; transition: box-shadow .35s ease; }
.work-card:hover .work-art { box-shadow: 0 18px 36px #29314615; }
.work-art-bubbles { background: #e9e5f5; color: #51446b; }
.work-art-nexstem { background: #f3e7e2; color: #543c3f; }
.work-art-tattva { background: #e1ece5; color: #1d4a38; }
.work-art-vcms { background: #e5eafb; color: #253c76; }
.work-art-tippa { background: #ece6d8; color: #5a2330; }
.work-art-index { position: absolute; top: 28px; left: 34px; z-index: 2; font-size: 11px; letter-spacing: .14em; font-weight: 700; opacity: .68; }
.work-art-copy { position: absolute; z-index: 2; top: 91px; left: 34px; width: calc(44% - 34px); }
.work-art-brand { font-size: 22px; font-weight: 800; letter-spacing: -.06em; }
.work-art-copy h3 { font-family: var(--display); font-size: clamp(24px, 5.4cqw, 44px); line-height: 1.03; letter-spacing: -.065em; margin-top: 23px; text-wrap: balance; }
.work-art-screen { position: absolute; z-index: 1; left: 47%; top: 76px; width: 74%; height: 93%; border: 7px solid #25262b; border-radius: 16px; box-shadow: 10px 22px 35px #24202c25; overflow: hidden; transform: rotate(-6deg); transition: transform .55s cubic-bezier(.2,.8,.2,1); background: #fff; }
.work-card:hover .work-art-screen { transform: rotate(-3deg) translateY(-8px); }
.work-art-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.work-art-screen-nexstem { left: 49%; top: 71px; width: 69%; transform: rotate(6deg); border-color: #282b35; }
.work-card:hover .work-art-screen-nexstem { transform: rotate(3deg) translateY(-8px); }
.work-art-screen-tattva { left: 47%; top: 78px; width: 76%; border-color: #fff; transform: rotate(5deg); }
.work-card:hover .work-art-screen-tattva { transform: rotate(2deg) translateY(-8px); }
.work-art-screen-vcms { left: 47%; top: 81px; width: 83%; border-color: #293148; transform: rotate(-5deg); }
.work-art-screen-tippa { left: 47%; top: 78px; width: 80%; border-color: #25262b; transform: rotate(-5deg); }
.work-card:hover .work-art-screen-tippa { transform: rotate(-2deg) translateY(-8px); }
.work-art-screen-vcms img { max-width: none; width: 190%; height: auto; transform: translate(-27%, -14%); }
.work-art-arrow { position: absolute; z-index: 3; right: 22px; bottom: 22px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #26272b; font-size: 22px; transition: background .25s, transform .25s; }
.work-card:hover .work-art-arrow { background: var(--lime); transform: rotate(45deg); }
.work-card-caption { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 3px 0; }
.work-card-caption h3 { font-size: 24px; letter-spacing: -.04em; }
.work-card-caption p { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 5px; }
.work-card-caption > span { color: #6d7379; border: 1px solid var(--line); padding: 8px 12px; border-radius: 20px; white-space: nowrap; font-size: 12px; }
.work-navigation { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 24px; }
.work-progress { flex: 1; height: 3px; border-radius: 4px; background: #e7e9ef; overflow: hidden; }
.work-progress span { display: block; width: 25%; height: 100%; border-radius: 4px; background: var(--blue); transition: width .15s linear; }
.work-navigation-actions { display: flex; align-items: center; gap: 9px; }
.work-count { font-size: 12px; font-weight: 700; color: #7f8794; letter-spacing: .08em; margin-right: 15px; white-space: nowrap; }
.work-count span { color: var(--blue); }
.work-navigation button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #d9dce3; border-radius: 50%; background: #fff; color: #222a3b; font-size: 21px; transition: background .2s, transform .2s; }
.work-navigation button:hover:not(:disabled) { background: var(--lime); transform: translateY(-2px); }
.work-navigation button:disabled { opacity: .35; cursor: default; }
.work-section .work-more { margin-top: 20px; }
.work-section.is-pinned { padding: 0; }
.work-section.is-pinned .work-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 28px; }
.work-section.is-pinned .work-rail { overflow: hidden; }
.work-section.is-pinned .work-track { will-change: transform; }
.work-section.is-pinned .work-art { height: clamp(295px, 38vh, 405px); }
@media (min-width: 761px) and (max-height: 759px) {
  .work-section.is-pinned .work-sticky { padding-block: 16px; }
  .work-section.is-pinned .section-heading { margin-bottom: 16px; }
  .work-section.is-pinned .work-art { height: 260px; }
  .work-section.is-pinned .work-art-copy { top: 58px; }
  .work-section.is-pinned .work-art-copy h3 { font-size: clamp(24px, 4.6cqw, 36px); margin-top: 14px; }
  .work-section.is-pinned .work-more { margin-top: 10px; }
}
@media (max-width: 760px) {
  .work-section { padding-block: 64px 54px; }
  .work-section .section-heading { margin-bottom: 26px; }
  .work-card { flex-basis: min(82vw, 420px); width: min(82vw, 420px); }
  .work-track { gap: 14px; }
  .work-rail { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .work-card { scroll-snap-align: start; }
  .work-art { height: 330px; border-radius: 18px; }
  .work-art-index { top: 20px; left: 22px; font-size: 9px; }
  .work-art-copy { top: 55px; left: 22px; width: 75%; }
  .work-art-brand { font-size: 19px; }
  .work-art-copy h3 { font-size: clamp(22px, 8.4cqw, 30px); margin-top: 13px; }
  .work-art-screen, .work-art-screen-nexstem, .work-art-screen-tattva, .work-art-screen-tippa, .work-art-screen-vcms { left: 23%; top: 60%; width: 90%; height: 70%; border-width: 5px; }
  .work-art-screen-vcms img { width: 190%; }
  .work-art-arrow { width: 35px; height: 35px; right: 15px; bottom: 15px; font-size: 19px; }
  .work-card-caption { display: block; padding-top: 14px; min-height: 76px; }
  .work-card-caption h3 { font-size: 21px; }
  .work-card-caption p { font-size: 12px; }
  .work-card-caption > span { display: none; }
  .work-navigation { margin-top: 16px; gap: 15px; }
  .work-count { margin-right: 3px; }
  .work-navigation button { width: 36px; height: 36px; font-size: 18px; }
  .work-section .work-more { margin-top: 25px; }
}
@media (prefers-reduced-motion: reduce) { .work-art-screen, .work-art-arrow, .work-progress span { transition: none; } }

/* The puzzle shelf turns the personal collection into a quick visual timeline. */
.cube-shelf { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.cube-shelf li { min-width: 0; padding: 12px 7px 14px; border-radius: 18px; border: 1px solid #e5e9ef; background: #fff; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 7px 16px #243b5b07; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.cube-shelf li:hover { transform: translateY(-7px) rotate(-1.5deg); box-shadow: 0 17px 28px #243b5b17; }
.cube-shelf img { display: block; width: min(100%, 108px); height: 108px; object-fit: contain; margin: 0 auto 10px; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.cube-shelf li:hover img { transform: rotate(-9deg) scale(1.08); }
.cube-shelf strong { display: flex; align-items: center; justify-content: center; min-height: 34px; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.12; letter-spacing: -.025em; }
.cube-shelf li > span { display: inline-block; margin-top: 6px; color: #3151ae; background: #edf2ff; padding: 5px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
@media (max-width: 1000px) and (min-width: 761px) { .cube-shelf { gap: 6px; } .cube-shelf li { padding-inline: 4px; } .cube-shelf img { height: 88px; } .cube-shelf strong { font-size: 12px; } .cube-shelf li > span { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .cube-shelf li, .cube-shelf img { transition: none; } }

/* Balance the two hero objects; the sleeve and record share one centre line. */
.hero-record { width: 236px; height: 310px; top: 232px; right: -4px; transform: rotate(6deg); transform-origin: center; }
.hero-record #record-button { width: 204px; height: 204px; margin: 0 auto; }
.hero-record .music-mini { width: 236px; margin: -57px auto 0; transform: none; padding: 14px 14px 10px; gap: 12px; border-radius: 17px; }
.hero-cube { width: 295px; height: 295px; top: 245px; left: -20px; }
.hero-cube .hand-note { font-size: 17px; margin-top: -3px; }
@media(min-width:1500px) { .hero-cube { width: 340px; height: 340px; top: 238px; left: -62px; } .hero-cube .hand-note { font-size:19px; } }
.track-heading { gap: 9px; min-width: 0; }
#music-artwork { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; }
.music-mini-text { flex: 1; min-width: 0; }
.music-title-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.hero-record .music-mini strong { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.hero-record .music-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.show-playlist { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; padding: 0; margin: 0; border-radius: 7px; }
.show-playlist:hover { background: #f3ced6; }
.music-controls .music-toggle { height: 38px; width: 38px; font-size: 16px; }
.music-controls { gap: 28px; }
.music-controls > button { font-size: 20px; }
@media(max-width:1100px) and (min-width:1001px) { .hero-record { right:-8px; transform:rotate(6deg) scale(.85); } .hero-cube { width:260px; height:260px; top:282px; left:-36px; } .hero-cube .hand-note { font-size:16px; } }
@media(max-width:1000px) { .hero-record { top:495px; right:calc(50% - 257px); transform:rotate(6deg); } .hero-cube { width:285px; height:285px; top:500px; left:calc(50% - 300px); } .hero-cube .hand-note { font-size:17px; } }
@media(max-width:760px) { .hero-record { top:440px; right:calc(50% - 178px); width:164px; height:265px; transform:rotate(5deg); } .hero-record #record-button { width:150px; height:150px; } .hero-record .music-mini { width:164px; margin-top:-40px; padding:10px 9px 8px; gap:9px; border-radius:13px; } .hero-cube { top:455px; left:calc(50% - 178px); width:180px; height:180px; } #music-artwork { width:29px; height:29px; flex-basis:29px; } .track-heading { gap:6px; } .hero-record .music-mini strong { font-size:12px; } .hero-record .music-eyebrow { font-size:8px; } .hero-record .music-caption { font-size:8px; } .show-playlist { width:22px; height:24px; flex-basis:22px; } .show-playlist svg { width:14px; } .music-controls { gap:23px; } .music-controls .music-toggle { width:34px; height:34px; } .music-status { font-size:8px; } .hero-cube .hand-note { font-size:11px; } }
@media(max-width:380px) { .hero-record { top:475px; right:calc(50% - 165px); } .hero-cube { top:495px; left:calc(50% - 166px); width:160px; height:160px; } }

@media (max-width: 760px) { .cube-shelf { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 14px; } .cube-shelf::-webkit-scrollbar { display: none; } .cube-shelf li { flex: 0 0 132px; scroll-snap-align: start; } .cube-shelf img { height: 97px; } .cube-shelf strong { font-size: 13px; } }
/* The collection now lives inside the puzzle story. Its cubes are still 3D renders. */
.play-card { display: block; }
/* Play card copy: a statement on the left (heading, then its tagline), the supporting paragraph on the right,
   sitting on the tagline's baseline. Three clear levels: heading > tagline > body. */
.play-copy { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .8fr); column-gap: clamp(40px, 6vw, 90px); align-items: end; padding: 64px 58px 0; }
.play-copy h2 { grid-column: 1; grid-row: 1; margin: 0; text-wrap: balance; }
.play-note { grid-column: 1; grid-row: 2; margin-top: 22px; }
.play-copy > p { grid-column: 2; grid-row: 1 / 3; max-width: 380px; margin: 0; padding-bottom: 4px; }
.play-card .cube-shelf { margin: 48px 58px 57px; }
.play-card .cube-shelf li { background: #fffffff0; border-color: #dce5f3; box-shadow: 0 8px 18px #2f4a7410; }
.play-card .cube-shelf img { width: min(100%, 112px); height: 112px; }
.play-card .cube-shelf img.puzzle-photo { width: min(100%, 96px); }
.play-card .cube-shelf li > span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.play-card .cube-shelf li > span::before { content: ''; display: block; width: 12px; height: 12px; flex: 0 0 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%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 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 1000px) {
  .play-copy { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); column-gap: 35px; padding: 48px 38px 0; }
  .play-card .cube-shelf { margin-inline: 38px; }
  .play-card .cube-shelf img { height: 94px; }
}
@media (max-width: 760px) {
  .play-copy { display: block; padding: 36px 27px 0; }
  .play-note { display: block; margin-top: 16px; }
  .play-copy > p { margin-top: 20px; padding-bottom: 0; }
  .play-card .cube-shelf { margin: 32px 0 0 27px; padding: 0 27px 32px 0; }
  .play-card .cube-shelf img { height: 100px; }
}

/* Inline SVG icons that stand in for ↗ ↘ ✳, which iOS draws as emoji. */
.glyph { width:1em; height:1em; vertical-align:-.125em; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.monogram .glyph { stroke-width:3.2; }

/* Body type scale (DM Sans; headings and the music deck are excluded).
   Lead 18 > Body 16 > Supporting 15 > Small 13 > Labels 12, and each step is also a shade lighter,
   so a section's intro, its reading text and its side notes never read the same. */
.about-story p { font-size: 16px; line-height: 1.8; color: var(--text-body); }
.toolkit-intro > p,
.about-story p:first-of-type { font-size: 18px; line-height: 1.65; color: var(--text-lead); }
.play-copy > p { font-size: 17px; line-height: 1.7; color: #4f5f7d; }
.section-heading > p { font-size: 15px; line-height: 1.7; color: var(--muted); }
.service-body > p { font-size: 15px; line-height: 1.75; color: var(--muted); }
.interest-item p,
.artwork-note p { font-size: 13px; }
@media (max-width: 760px) {
  .about-story p { font-size: 15.5px; }
  .toolkit-intro > p,
  .about-story p:first-of-type { font-size: 17px; }
  .play-copy > p { font-size: 16px; }
  .section-heading > p,
  .service-body > p { font-size: 14.5px; }
}

/* Phone menu (site-nav.js): on phones the header's links sit behind a menu button, in a panel that slides
   in from the right with the links and the "Let's talk" call to action. */
.site-menu, .site-drawer, .site-scrim { display: none; }
@media (max-width: 760px) {
  .has-site-menu .site-header nav { display: none; }
  .site-menu { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border: 1px solid #d8d9d8; border-radius: 50%; background: #fffc; color: var(--ink); transition: background .2s, color .2s, border-color .2s; }
  .site-menu svg, .site-drawer-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .site-menu[aria-expanded=true] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  html.site-menu-open { overflow: hidden; }
  .site-scrim { display: block; position: fixed; inset: 0; z-index: 90; background: #1b224033; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  .site-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }
  .site-drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(86vw, 360px); padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); background: var(--paper); border-left: 1px solid var(--line); box-shadow: -24px 0 60px #1b24401f; transform: translateX(100%); visibility: hidden; transition: transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s .38s; }
  .site-drawer.is-open { transform: none; visibility: visible; transition: transform .38s cubic-bezier(.2,.8,.2,1); }
  .site-drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: #737780; }
  .site-drawer-close { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #d8d9d8; border-radius: 50%; color: var(--ink); transition: background .2s, border-color .2s; }
  .site-drawer-close:hover { background: var(--lime); border-color: var(--lime); }
  .site-drawer-links { flex: 1; display: flex; flex-direction: column; gap: 4px; padding-top: 18px; }
  .site-drawer-links a { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 16px; font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -.045em; line-height: 1.1; transition: background .2s, color .2s; }
  .site-drawer-links a::after { content: '→'; font-family: var(--body); font-size: 18px; font-weight: 400; letter-spacing: 0; color: #a3a8b3; }
  .site-drawer-links a:hover, .site-drawer-links a:active { background: #f2f3f0; }
  .site-drawer-links a[aria-current] { background: var(--ice); color: #284790; }
  .site-drawer-links a[aria-current]::after { content: 'You’re here'; font-size: 12px; font-weight: 500; color: var(--blue); }
  .site-drawer-cta { padding-top: 16px; border-top: 1px solid var(--line); }
  .site-drawer-cta .button { display: flex; justify-content: space-between; padding: 19px 24px 15px; font-size: 15px; margin-bottom: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-drawer, .site-scrim { transition: none !important; }
}

/* ---------- Sticky header ----------
   The header stays at the top of every page. Once the page has scrolled (html.is-scrolled, set in site-nav.js)
   it gains a paper backdrop and tucks up into a shorter bar. The header's box keeps its height and only its
   top slides off screen, so nothing below it moves. The Art Room keeps its own floating header (art.css). */
:root { --header-h: 118px; --header-bar: 84px; }
header.site-header { position: sticky; top: calc(var(--header-bar) - var(--header-h)); z-index: 60; transition: padding-top .3s cubic-bezier(.2,.8,.2,1); }
header.site-header::before { content: ''; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: #fcfcfaf0; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .25s; pointer-events: none; }
html.is-scrolled header.site-header { padding-top: calc(var(--header-h) - var(--header-bar)); }
html.is-scrolled header.site-header::before { opacity: 1; }
.art-header header.site-header, html.is-scrolled .art-header header.site-header { position: relative; top: auto; padding-top: 0; }
.art-header header.site-header::before { content: none; }
/* Jumps to a section land below the bar. The pinned Work stage fills the screen, so it pads itself instead. */
html { scroll-padding-top: calc(var(--header-bar) + 16px); }
.work-section.is-pinned { scroll-margin-top: calc(-1 * (var(--header-bar) + 16px)); }
.work-section.is-pinned .work-sticky { padding-top: calc(var(--header-bar) + 12px); }
@media (max-width: 760px) {
  :root { --header-h: 88px; --header-bar: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  header.site-header, header.site-header::before { transition: none; }
}

/* ---------- Mini projects (homepage) ----------
   Three small things outside client work, as cards: an icon tile and an arrow on top, the title and one line
   at the bottom. Replaces the four-across interests strip on the homepage; About keeps the strip. */
.mini-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 83px; }
.mini-card { --mini-bg: var(--ice); --mini-hover: #e1e9ff; --mini-tile: #c9d6fb; position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: 212px; padding: 26px 24px 24px; border-radius: 24px; overflow: hidden; background: var(--mini-bg); color: var(--ink); transition: background .25s; }
.mini-play { --mini-bg: #eef6d2; --mini-hover: #e4efbd; --mini-tile: #d5e6a3; }
.mini-wall { --mini-bg: #eeeaf8; --mini-hover: #e3ddf3; --mini-tile: #d6cdee; }
/* Hover: the card deepens a shade and the arrow fills in. No lift. */
.mini-card:hover { background: var(--mini-hover); }
.mini-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
/* The gallery teaser sits right under the cards with the same gap and corners, so the four read as one block. */
.mini-projects + .art-wall { margin-top: 20px; border-radius: 24px; }
/* The icon is a large, soft shape in the corner of the card, a shade deeper than the card itself. */
.mini-icon { position: absolute; right: 18px; bottom: -22px; color: var(--mini-tile); font-size: 150px; line-height: 1; rotate: -8deg; transition: rotate .4s cubic-bezier(.2,.8,.2,1), translate .4s cubic-bezier(.2,.8,.2,1); }
.mini-card:hover .mini-icon { rotate: -2deg; translate: 0 -6px; }
.mini-icon svg { display: block; width: 140px; height: 140px; fill: currentColor; }
.mini-wall .mini-icon svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mini-arrow { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #23242622; color: var(--ink); font-size: 17px; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.mini-card:hover .mini-arrow { background: var(--ink); border-color: var(--ink); color: #fff; transform: translate(2px, -2px); }
.mini-text { position: relative; z-index: 1; max-width: calc(100% - 52px); }
.mini-text h3 { font-size: 24px; letter-spacing: -.6px; line-height: 1.1; }
.mini-text p { margin-top: 8px; max-width: 230px; font-size: 15px; line-height: 1.55; color: var(--text-body); }
@media (max-width: 1000px) {
  .mini-projects { grid-template-columns: 1fr 1fr; }
  .mini-card:first-child { grid-column: 1 / -1; min-height: 180px; }
}
@media (max-width: 760px) {
  .mini-projects { grid-template-columns: 1fr; gap: 14px; margin-top: 44px; }
  .mini-projects + .art-wall { margin-top: 14px; border-radius: 20px; }
  .mini-card, .mini-card:first-child { grid-column: auto; min-height: 150px; padding: 20px; border-radius: 20px; }
  .mini-icon { right: 14px; bottom: -18px; font-size: 112px; }
  .mini-icon svg { width: 104px; height: 104px; }
  .mini-arrow { top: 16px; right: 16px; }
  .mini-text h3 { font-size: 20px; }
  .mini-text p { margin-top: 4px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mini-card, .mini-arrow, .mini-icon { transition: none; }
  .mini-card:hover .mini-icon { rotate: -8deg; translate: none; }
  .mini-card:hover .mini-arrow { transform: none; }
}

/* Work rail: a last, narrower card that leads to the full Work page. */
.work-all { display: block; flex: 0 0 min(52vw, 340px); width: min(52vw, 340px); color: var(--ink); }
.work-all[hidden] { display: none; }
.work-all-art { display: flex; flex-direction: column; padding: 26px 28px; background: var(--ice); }
.work-all-art .work-art-index { position: static; color: #5573a6; }
.work-all-art h3 { margin-top: auto; padding-right: 56px; font-family: var(--display); font-size: clamp(28px, 2.6vw, 38px); font-weight: 600; line-height: 1.04; letter-spacing: -.045em; color: #284790; }
.work-all:hover .work-art { box-shadow: 0 18px 36px #29314615; }
.work-all:hover .work-art-arrow { background: var(--lime); transform: rotate(45deg); }
@media (max-width: 760px) {
  .work-all { flex-basis: min(60vw, 260px); width: min(60vw, 260px); scroll-snap-align: start; }
  .work-all-art { padding: 20px 22px; }
  .work-all-art h3 { padding-right: 0; margin-bottom: 46px; }
}

/* Homepage about story: both paragraphs share one size and colour, as one voice. */
.about-section .about-story p, .about-section .about-story p:first-of-type { font-size: 17px; line-height: 1.7; color: var(--text-lead); }
@media (max-width: 760px) {
  .about-section .about-story p, .about-section .about-story p:first-of-type { font-size: 16px; }
}