:root{
  --bg: #d8d7ce;
  --surface: #eeede8;
  --ink: #0b1418;
  --muted: #3f4b50;
  --meta: #1a3c4d;
  --line: rgba(11,20,24,.14);
  --egg: #f3efd4;
  --shade: rgba(0,0,0,.16);
  --accent: #d9533f;
  --c-slate: #445b7f;
  --c-steel: #2a6f97;
  --c-red: #d9533f;
  --c-green: #4f7f3a;
  --c-mustard: #c29d1f;
  --c-plum: #8e3a78;
  --c-teal: #2f8a82;
  --c-navy: #22405a;
  --c-rust: #b5523b;
  --c-indigo: #4a4e9c;
  --c-eu: #22439e;
  --sans: 'IBM Plex Sans', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --r: 14px;
  --gap: 20px;
  --max: 1240px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing: border-box; margin: 0; padding: 0}
html{-webkit-text-size-adjust: 100%; scroll-padding-top: 88px; background: var(--bg)}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{color: inherit}
:focus-visible{outline: 2px solid var(--accent); outline-offset: 3px}
.wrap{max-width: var(--max); margin: 0 auto; padding: 0 28px}
.meta{font-family: var(--mono); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--meta)}

/* Header */
.site-header{
  position: sticky; top: 0; z-index: 30;
  background: rgba(216,215,206,.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.scrolled{border-bottom-color: var(--line)}
.site-header .wrap{display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px}
.logo{display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; font-size: 16px}
.logo svg{width: 40px; height: 40px}
.logo svg .ring{fill: none; stroke: var(--ink); stroke-width: 5}
.logo svg .bot{fill: var(--ink)}
.logo svg .eye{fill: var(--accent)}
.logo:hover svg .bot{animation: nudge .9s var(--ease)}
@keyframes nudge{40%{transform: translateX(6px)} 100%{transform: none}}
.site-nav{display: flex; gap: 4px}
.site-nav a{display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; color: var(--ink); transition: background .2s ease, color .2s ease}
.site-nav a:hover{background: rgba(11,20,24,.08)}
.site-nav a.active{background: var(--ink); color: var(--egg)}
.header-right{justify-self: end}
.header-right a{display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); transition: background .2s ease, color .2s ease}
.header-right a:hover{background: var(--ink); color: var(--egg)}

/* Case studies: sticky "All work" bar under the header */
.subbar{border-top: 1px solid var(--line)}
.subbar .wrap{display: flex; align-items: center; gap: 16px; height: 58px}
.back-pill{display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 42px; padding: 0 18px; border-radius: 10px; background: var(--ink); color: var(--egg); font-size: 15px; font-weight: 700; text-decoration: none; transition: background .2s ease}
.back-pill:hover{background: var(--accent)}
.back-pill span{transition: transform .2s var(--ease)}
.back-pill:hover span{transform: translateX(-3px)}
.subbar-title{min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--mono); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--meta)}
.arrow{width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform .2s var(--ease)}
a:hover > .arrow{transform: translate(2px,-2px)}

/* Decorative background shapes */
.bg-shapes{position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1}
.bg-shapes svg{position: absolute; opacity: .07}
.bg-shapes .s1{width: 380px; left: -60px; top: 10px; animation: drift 26s ease-in-out infinite}
.bg-shapes .s2{width: 150px; left: 42%; top: 330px; animation: drift 20s ease-in-out -6s infinite}
.bg-shapes .s3{width: 220px; right: 4%; bottom: -40px; animation: drift 30s ease-in-out -12s infinite}
@keyframes drift{0%, 100%{transform: translate(0,0) rotate(0)} 50%{transform: translate(18px,-14px) rotate(6deg)}}

/* Hero */
.hero{position: relative; padding: 64px 0 40px; isolation: isolate}
.hero-grid{display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); align-items: stretch}
.hero-text{grid-column: 1 / span 7; display: flex; flex-direction: column; justify-content: center}
.hero-text > *{animation: rise .8s var(--ease) both}
.hero-text > :nth-child(2){animation-delay: .08s}
.hero-text > :nth-child(3){animation-delay: .16s}
.hero-text > :nth-child(4){animation-delay: .24s}
.hero h1{font-size: clamp(56px, 7.4vw, 108px); font-weight: 700; line-height: .95; letter-spacing: -.04em}
.hero .role{margin-top: 18px; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; letter-spacing: -.01em}
.hero .role span{color: var(--muted)}
@keyframes rise{from{opacity: 0; transform: translateY(18px)} to{opacity: 1; transform: none}}

.notice{margin-top: 32px; max-width: 700px; background: var(--surface); border-radius: var(--r); border-left: 4px solid var(--ink)}
.notice p{padding: 20px 24px; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--ink)}

.hero-links{display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px}
.button{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 10px;
  font-family: var(--mono); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  background: var(--ink); color: var(--egg);
  transition: transform .2s var(--ease), background .2s ease;
}
.button:hover{transform: translateY(-2px); background: var(--accent)}
.button.ghost{background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink)}
.button.ghost:hover{background: var(--ink); color: var(--egg)}
.button svg{width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none}

.floor{
  grid-column: 8 / span 5;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r);
  background: var(--c-navy);
  overflow: hidden;
  animation: rise .9s .15s var(--ease) both;
}
.floor{display: flex; flex-direction: column}
.floor-canvas{position: relative; flex: 1 1 0; min-height: 0}
.floor canvas{position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y}
.floor-head{padding: 12px 16px; background: #172f43; color: var(--egg); font-size: 14px; line-height: 1.4}
.floor-head b{font-weight: 700; color: #ff8a73}
.floor-head b.amber{color: #f0a020}
.floor .floor-bar{position: static}
.floor-bar{position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #172f43; color: var(--egg); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; pointer-events: none}
.floor-bar b{color: #ff8a73; font-weight: 400}
.floor-bar b.amber{color: #f0a020}

/* Stats */
.stats{display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); margin-top: var(--gap)}
.stat{background: var(--surface); border-radius: var(--r); padding: 22px 24px}
.stat dt{font-size: clamp(32px, 3.6vw, 48px); font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums}
.stat dd{margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.45}

/* Sections */
.section{padding: 88px 0 24px}
.section-head{padding-top: 18px; margin-bottom: 32px; border-top: 1.5px solid var(--ink)}
.section-head .meta{margin-bottom: 12px}
.section-head h2{max-width: 760px; font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; letter-spacing: -.015em; line-height: 1.15}
.section-head p{margin-top: 10px; color: var(--muted)}

/* Cards */
.grid{display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap)}
.card{
  display: flex; flex-direction: column;
  border-radius: var(--r); overflow: hidden;
  background: var(--surface);
  text-decoration: none; color: inherit;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
a.card:hover, .card:hover{transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(11,20,24,.5)}
.card__graphic{aspect-ratio: 16 / 10; background: var(--c, var(--c-slate)); display: grid; place-items: center; overflow: hidden}
.card__graphic svg{width: 100%; height: 100%; display: block}
.card__body{padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1}
.card__title{font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2}
.card__desc{margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.55}
.card__meta{margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px}
.card__body .card__meta{border-top: 1px solid var(--line); margin-top: auto}
.card__desc{margin-bottom: 20px}
.card__stat{display: flex; flex-direction: column; gap: 6px}
.card__stat b{font-size: clamp(28px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--c, var(--ink))}
.card__stat span{font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--meta)}
.card__meta .read{display: inline-flex; align-items: center; gap: 6px; color: var(--ink)}
.subhead{margin: 48px 0 16px}
.card--wide{grid-column: span 2}
.card--wide .card__graphic{aspect-ratio: 16 / 5}

/* Graphic shapes */
.g-egg{fill: var(--egg)}
.g-shade{fill: var(--shade)}
.g-shade2{fill: rgba(0,0,0,.26)}
.pop{transform-box: fill-box; transform-origin: center}
.js .card .pop, .js .cs-graphic .pop{opacity: 0; transform: scale(.4)}
.js .in .pop{opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--o, 0) * 60ms + .1s)}

/* Looping motion inside graphics */
.g-text{font-family: var(--mono); font-size: 11px; letter-spacing: .08em; fill: var(--egg)}
.g-num{font-family: var(--sans); font-weight: 700; font-size: 38px; fill: var(--egg)}
.loop-ring{transform-box: fill-box; transform-origin: center; animation: ring 3s ease-out infinite; animation-delay: calc(var(--o, 0) * 1s)}
@keyframes ring{0%{transform: scale(.6); opacity: .9} 100%{transform: scale(1.6); opacity: 0}}
@keyframes spin{to{transform: rotate(360deg)}}

.trace{fill: none; stroke: var(--egg); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 400; animation: travel 1.8s linear infinite; animation-delay: calc(var(--o, 0) * .3s)}
@keyframes travel{from{stroke-dashoffset: 10} to{stroke-dashoffset: -60}}
.trace.long{animation-name: travelLong; animation-duration: 2.4s}
@keyframes travelLong{from{stroke-dashoffset: 10} to{stroke-dashoffset: -120}}
/* Platform: nine blocks glide together into one, then apart */
.merge-sq{transform-box: fill-box; transform-origin: center; animation: chipMerge 6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes chipMerge{0%, 18%{transform: none} 46%, 74%{transform: translate(var(--mx), var(--my)) scale(2.36)} 100%{transform: none}}
.merge-dot{opacity: 0; animation: mergeDot 6s ease infinite}
@keyframes mergeDot{0%, 44%{opacity: 0} 52%, 70%{opacity: 1} 78%, 100%{opacity: 0}}

/* Self-healing fleet: one device at a time faults, recovers (ring draws), then reads OK */
.dev-led{animation: devLed 9s ease infinite; animation-delay: var(--d, 0s)}
@keyframes devLed{0%{fill: #e0442f} 5%{fill: #e0442f} 9%{fill: #f0a020} 13%, 100%{fill: #5fc27a}}
.dev-ring{fill: none; stroke: #f3efd4; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); animation: devRing 9s ease infinite; animation-delay: var(--d, 0s)}
@keyframes devRing{0%, 4%{stroke-dashoffset: 100; opacity: 1} 13%{stroke-dashoffset: 0; opacity: 1} 18%, 100%{stroke-dashoffset: 0; opacity: 0}}

/* Retrofit: sites light up as crews finish, progress fills */
.site-dot{fill: var(--shade); animation: siteOn 7s var(--ease) infinite; animation-delay: var(--d, 0s)}
@keyframes siteOn{0%, 6%{fill: var(--shade)} 12%, 80%{fill: var(--egg)} 100%{fill: var(--shade)}}
.progress{transform-box: fill-box; transform-origin: left; animation: progress 7s var(--ease) infinite}
@keyframes progress{0%, 6%{transform: scaleX(0)} 60%, 80%{transform: scaleX(1)} 100%{transform: scaleX(0)}}

/* Europe: top-down gate. Person approaches, gate opens, robots stop, person goes in and out */
.eu-person{animation: euPerson 8s ease-in-out infinite}
@keyframes euPerson{0%{transform: translateY(0)} 25%, 34%{transform: translateY(-34px)} 52%, 66%{transform: translateY(-70px)} 82%{transform: translateY(-34px)} 90%{transform: translateY(-30px)} 100%{transform: translateY(0)}}
.eu-gate{animation: euGate 8s cubic-bezier(.45,0,.25,1) infinite}
@keyframes euGate{0%, 24%{transform: rotate(0)} 33%, 84%{transform: rotate(-88deg)} 92%, 100%{transform: rotate(0)}}
.eu-light{animation: euLight 8s steps(1) infinite}
@keyframes euLight{0%{fill: #5fc27a} 26%{fill: #e0442f} 92%, 100%{fill: #5fc27a}}
.eu-bot-a{animation: euBotA 8s ease-in-out infinite}
@keyframes euBotA{0%{transform: translateX(0)} 26%, 92%{transform: translateX(14px)} 100%{transform: translateX(0)}}
.eu-bot-b{animation: euBotB 8s ease-in-out infinite}
@keyframes euBotB{0%{transform: translateX(0)} 26%, 92%{transform: translateX(-16px)} 100%{transform: translateX(0)}}

/* Simulation card: isometric robots drive, one waits near a person */
.iso-a{animation: isoA 5s ease-in-out infinite alternate}
@keyframes isoA{from{transform: translate(0,0)} to{transform: translate(66px,33px)}}
.iso-b{animation: isoB 6s ease-in-out infinite alternate}
@keyframes isoB{from{transform: translate(0,0)} to{transform: translate(-66px,33px)}}
.iso-c{animation: isoC 4s ease-in-out infinite alternate}
@keyframes isoC{from{transform: translate(0,0)} to{transform: translate(-44px,-22px)}}
.blink-red{animation: blinkRed 1.2s steps(1) infinite}
@keyframes blinkRed{0%{opacity: 1} 50%{opacity: .25}}

/* Insurer app: rating goes from 2.2 to 4.8 */
.rate-old{animation: rateOld 6s infinite}
@keyframes rateOld{0%, 44%{opacity: 1} 46%, 96%{opacity: 0} 98%, 100%{opacity: 1}}
.rate-new{animation: rateNew 6s infinite}
@keyframes rateNew{0%, 44%{opacity: 0} 46%, 96%{opacity: 1} 98%, 100%{opacity: 0}}
.star-on{animation: starOn 6s infinite; animation-delay: calc(var(--o, 0) * .15s)}
@keyframes starOn{0%, 46%{fill: rgba(0,0,0,.28)} 50%, 94%{fill: var(--egg)} 98%, 100%{fill: rgba(0,0,0,.28)}}

/* Backlog: four intake flows merge into one backlog */
.loop-merge{animation: merge 4.5s var(--ease) infinite; animation-delay: calc(var(--o, 0) * .15s)}
@keyframes merge{0%, 15%{transform: translate(0,0); opacity: 1} 55%{transform: translate(var(--mx, 0), var(--my, 0)); opacity: 1} 65%, 100%{transform: translate(var(--mx, 0), var(--my, 0)); opacity: 0}}

/* Principles */
.note{background: var(--surface); border-radius: var(--r); padding: 22px 22px 24px; transition: transform .3s var(--ease)}
.note:hover{transform: translateY(-3px)}
.note .num{display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--egg); font-family: var(--mono); font-size: 13px}
.note h3{margin-top: 16px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25}
.note p{margin-top: 10px; color: var(--muted); font-size: 15.5px}

/* Outside of work */
.hobbies{list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px}
.hobbies li{display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r); background: var(--surface); font-weight: 700; font-size: 16px; transition: transform .25s var(--ease), background .2s ease}
.hobbies li:hover{transform: translateY(-3px); background: #f4f3ee}
.hobbies .ico{flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c, var(--c-slate))}
.hobbies svg{width: 22px; height: 22px; fill: none; stroke: var(--egg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round}
.hobbies .gate svg{transition: transform 1.2s var(--ease)}
.hobbies .gate:hover svg{transform: rotate(200deg)}
.hobbies .ai svg{animation: twinkle 3s ease-in-out infinite}
.hobbies .dog:hover svg{animation: wag .5s ease-in-out 2}
@keyframes wag{0%, 100%{transform: rotate(0)} 25%{transform: rotate(-14deg)} 75%{transform: rotate(14deg)}}
@keyframes twinkle{0%, 100%{transform: scale(1) rotate(0)} 50%{transform: scale(.82) rotate(45deg)}}

.grid-2{grid-template-columns: repeat(2, minmax(0,1fr))}

/* Contact */
.contact{display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); align-items: center; background: var(--ink); color: var(--egg); border-radius: var(--r); padding: 44px; overflow: hidden; position: relative}
.contact p{grid-column: 1 / span 8; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -.01em}
.contact .button{position: relative; z-index: 1; grid-column: 9 / span 4; justify-self: end; min-height: 64px; padding: 0 34px; font-size: 16px; background: var(--egg); color: var(--ink)}
.contact .button svg{width: 14px; height: 14px}
.contact .button:hover{background: var(--accent); color: #fff}
.contact .deco{position: absolute; right: -60px; top: -60px; width: 220px; opacity: .08; animation: spin 40s linear infinite; pointer-events: none}

/* Footer */
.site-footer{padding: 40px 0 48px}
.site-footer .wrap{display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px}
.site-footer a{text-decoration: none}
.site-footer a:hover{color: var(--ink)}

/* Back to top */
.to-top{
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--ink); color: var(--egg);
  box-shadow: 0 12px 28px -12px rgba(11,20,24,.6);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .3s ease, transform .35s var(--ease), background .2s ease;
}
.to-top.show{opacity: 1; transform: none; pointer-events: auto}
.to-top:hover{background: var(--accent)}
.to-top svg{width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease)}
.to-top:hover svg{transform: translateY(-2px)}

/* Reveal */
.js .reveal{opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms)}
.js .reveal.in{opacity: 1; transform: none}

/* Case study pages */
.cs-hero{padding: 56px 0 24px; position: relative; isolation: isolate}
.cs-hero .wrap > *{animation: rise .8s var(--ease) both}
.cs-hero .wrap > :nth-child(2){animation-delay: .08s}
.cs-hero .wrap > :nth-child(3){animation-delay: .16s}
.cs-hero h1{margin-top: 0; font-size: clamp(34px, 4.6vw, 60px); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; max-width: 900px}
.cs-hero .lede{margin-top: 20px; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; color: var(--muted)}
.cs-graphic{position: relative; margin-top: 36px; height: clamp(220px, 32vw, 380px); border-radius: var(--r); background: var(--c); overflow: hidden}
.cs-graphic.sim3d{height: clamp(360px, 48vw, 600px); background: #22405a}
.sim3d canvas{position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; cursor: grab; touch-action: none}
.sim3d canvas:active{cursor: grabbing}
.sim3d.live canvas{opacity: 1}
.sim3d .sim-fallback{position: absolute; inset: 0; background: var(--c-indigo); transition: opacity .6s ease}
.sim3d.live .sim-fallback{opacity: 0; pointer-events: none}
.sim3d .floor-bar{z-index: 2}
.cs-graphic svg{width: 100%; height: 100%; display: block}
.metrics{display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; margin-top: var(--gap); padding: 14px 6px; background: var(--surface); border-radius: var(--r)}
.metric{flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 22px; border-left: 1px solid var(--line)}
.metric:first-child{border-left: 0}
.metric .ico{flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--c, var(--ink))}
.metric svg{width: 13px; height: 13px; fill: none; stroke: var(--egg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round}
.metric .val{font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap}
.metric .lbl{color: var(--muted); font-size: 15px; white-space: nowrap}
.cs-layout{display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); padding-top: 40px; padding-bottom: 72px}
.cs-body{grid-column: 1 / -1}
.cs-body h2{font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 44px 0 12px; padding-top: 14px; border-top: 1.5px solid var(--ink)}
.cs-body h2:first-child{margin-top: 0}
.cs-body p + p{margin-top: 1em}
.cs-body ul{list-style: none; margin-top: 14px}
.cs-body li{position: relative; padding-left: 26px; margin-bottom: 12px}
.cs-body li::before{content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--accent))}
.aside{margin-top: 36px; display: flex; background: var(--surface); border-radius: var(--r); overflow: hidden}
.aside span{flex: none; width: 52px; background: var(--c, var(--accent))}
.aside p{padding: 16px 20px; font-family: var(--mono); font-size: 13px; line-height: 1.7}
.cs-next{display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-bottom: 24px}
.cs-next a{display: block; text-decoration: none; background: var(--surface); border-radius: var(--r); padding: 22px 24px; transition: transform .3s var(--ease), box-shadow .3s var(--ease)}
.cs-next a:hover{transform: translateY(-3px); box-shadow: 0 22px 40px -26px rgba(11,20,24,.5)}
.cs-next .title{display: block; margin-top: 6px; font-size: 20px; font-weight: 700}
.cs-next a:last-child{text-align: right}

@media (max-width: 1000px){
  .grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .hero-text{grid-column: 1 / -1}
  .floor{grid-column: 1 / -1; aspect-ratio: 16 / 10}
  .cs-body{grid-column: 1 / -1}
}
@media (max-width: 680px){
  body{font-size: 16.5px}
  .wrap{padding: 0 16px}
  .site-header .wrap{grid-template-columns: auto 1fr; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 8px}
  .site-nav{grid-row: 2; grid-column: 1 / -1; justify-content: space-between; gap: 2px}
  .site-nav a{font-size: 14px; min-height: 40px; padding: 0 8px}
  .header-right a{font-size: 14px; min-height: 40px; padding: 0 12px}
  html{scroll-padding-top: 120px}
  .site-header:has(.subbar) .site-nav{display: none}
  .subbar .wrap{height: 54px; gap: 12px}
  .back-pill{font-size: 14px; min-height: 40px; padding: 0 14px}
  .contact .button{width: 100%; justify-content: center}
  .logo span{display: none}
  .hero{padding: 32px 0 24px}
  .floor{aspect-ratio: 1 / 1}
  .stats, .grid, .grid-2{grid-template-columns: 1fr}
  .card--wide{grid-column: auto}
  .card--wide .card__graphic{aspect-ratio: 16 / 9}
  .section{padding: 64px 0 16px}
  .contact{padding: 28px}
  .contact p, .contact .button{grid-column: 1 / -1; justify-self: start}
  .cs-next{grid-template-columns: 1fr}
  .cs-next a:last-child{text-align: left}
  .to-top{right: 16px; bottom: 16px; width: 46px; height: 46px}
  .metrics{flex-direction: column; align-items: stretch; padding: 6px 0}
  .metric{justify-content: flex-start; border-left: 0; border-top: 1px solid var(--line); padding: 10px 18px}
  .metric:first-child{border-top: 0}
  .metric .lbl{white-space: normal}
}

/* Reduced motion: keep the small in-card loops and fades, drop large movement */
@media (prefers-reduced-motion: reduce){
  .bg-shapes svg, .contact .deco{animation: none}
  .hero-text > *, .floor, .cs-hero .wrap > *{animation-name: fade}
  .js .reveal, .js .card .pop, .js .cs-graphic .pop{transform: none}
  .card:hover, .note:hover, .hobbies li:hover, .cs-next a:hover, .button:hover{transform: none}
}
@keyframes fade{from{opacity: 0}}