@import url('https://fonts.googleapis.com/css2?family=Belanosima:wght@400;600&display=swap');
@font-face { font-family: Chunko; src: url('assets/chunko-bold.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
/* One rem equals one Figma pixel at 1440px. Preserve the supplied desktop composition proportionally. */
:root { font-size: calc(var(--frame-width, 100vw) / 1440); --paper:#e5eafa; --ink:#080c2d; --yellow:#ffd166; --blue:#273be2; --pale:#ccd1cd; --grey-600:#a9adba; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:20rem/1.4 Belanosima,sans-serif; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font:400 98rem/1.2 Chunko,'Arial Black',sans-serif; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3rem solid var(--yellow); outline-offset:5rem; }
.page { width:1440rem; overflow:hidden; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:100; padding:12px; background:var(--yellow); font-size:16px; }
.skip-link:focus { top:16px; }
.button { display:inline-flex; align-items:center; justify-content:center; flex:none; gap:8rem; height:48rem; padding:12rem 24rem; border:0; border-radius:12rem; font:400 16rem/24rem Belanosima,sans-serif; white-space:nowrap; }
.button i { font-size:20rem; width:20rem; height:20rem; display:inline-flex; align-items:center; justify-content:center; }
.yellow { background:var(--yellow); color:var(--ink); }
.pale { background:var(--pale); color:var(--ink); }
.glass { background:rgb(8 12 45 / 72%); color:white; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:inset 0 0 0 1px rgb(255 255 255 / 8%); }

.hero-section { height:913rem; padding-bottom:16rem; }
.news-strip { height:54rem; background:var(--ink); color:var(--yellow); overflow:hidden; }
.news-track { display:flex; align-items:center; gap:16rem; width:max-content; height:50rem; padding:16rem 0; }
.news-track span { display:flex; gap:16rem; align-items:center; font-size:16rem; line-height:18rem; white-space:nowrap; }
.news-track i { font-size:16rem; }
.hero { position:relative; width:1408rem; height:827rem; margin:16rem auto 0; overflow:hidden; border-radius:20rem; color:white; background:linear-gradient(rgb(0 0 0 / 20%),rgb(0 0 0 / 20%)),url('assets/hero-clean.png') center/cover; }
.navigation { position:absolute; inset:0 0 auto; height:80rem; padding:16rem; display:flex; align-items:center; justify-content:space-between; }
.nav-left,.nav-right { flex:1; display:flex; align-items:center; gap:24rem; }
.nav-left { padding-left:24rem; }
.nav-right { padding-left:24rem; }
.nav-right { justify-content:flex-end; }
.wordmark { width:48rem; height:48rem; flex:none; display:block; }
.wordmark img { display:block; width:100%; height:100%; object-fit:contain; }
.navigation a:not(.wordmark) { display:inline-flex; align-items:center; justify-content:center; height:48rem; padding:12rem 0; border-radius:12rem; background:transparent; font:400 16rem/24rem Belanosima,sans-serif; white-space:nowrap; }
.navigation .wordmark { font:400 48rem/58rem Chunko,sans-serif; }
.resume { width:auto; }
.hero-socials .button { min-width:136rem; }
.hero h1 { width:100%; font-size:min(128rem, 15.5cqh); line-height:1.2; text-align:center; }
.hero-socials { display:flex; justify-content:center; gap:16rem; height:48rem; flex:none; }

.intro { height:534rem; padding:64rem 100rem; display:flex; flex-direction:column; gap:64rem; }
.intro-copy { height:192rem; width:1240rem; font-size:40rem; line-height:48rem; letter-spacing:-.8rem; text-transform:uppercase; text-align:center; color:black; }
.stats { width:1240rem; height:150rem; display:flex; justify-content:space-between; align-items:center; }
.stats>div { text-align:center; display:flex; flex-direction:column; }
.stats strong { font:400 98rem/118rem Chunko,sans-serif; color:black; }
.stats span { font-size:18rem; line-height:25rem; }
.stats b { width:2rem; height:150rem; background:rgb(8 12 45 / 20%); }
.playground { height:1193.93rem; position:relative; }
.ribbon { position:absolute; width:2100rem; left:-330rem; display:flex; pointer-events:none; }
.ribbon span { width:585rem; height:100%; flex:none; border-radius:80rem; }
/* Overlap lobes so rounded corners form shallow notches, not open seams. */
.ribbon span + span { margin-left:-80rem; }
.yellow-ribbon { height:1050rem; top:71.965rem; transform:rotate(-4deg); }
.yellow-ribbon span { background:var(--yellow); }
.playground-content { position:absolute; left:100rem; top:203rem; width:1240rem; display:flex; flex-direction:column; align-items:center; gap:64rem; }
.center-heading { display:flex; flex-direction:column; align-items:center; gap:8rem; text-align:center; }
.center-heading h2 { color:black; }
.playground .center-heading { height:304rem; }
.playground-track { width:1728rem; align-self:flex-start; display:flex; gap:32rem; }
.visual-card { position:relative; width:320rem; height:420rem; flex:none; overflow:hidden; border-radius:19.6875rem; background:black; color:white; }
.laptop-image { position:absolute; inset:0; background:url('assets/dorascribe-mockup.png') center/cover no-repeat; }
.deep-dives { height:824rem; padding:64rem 100rem; display:flex; flex-direction:column; align-items:center; gap:64rem; }
.deep-dives .center-heading { height:186rem; }
.three-cards { width:1240rem; display:grid; grid-template-columns:repeat(3,392rem); gap:32rem; }
.project-card,.blog-card { display:flex; flex-direction:column; gap:16rem; }
.empty-image { width:392rem; height:392rem; background:white; border-radius:32rem; }
.three-cards h3 { font-size:32rem; line-height:38rem; }
.project-card h3 { text-align:center; }

.about-section { height:748rem; padding:16rem; }
.about-panel { width:1408rem; height:716rem; display:flex; gap:64rem; padding:64rem 84rem; background:var(--ink); border-radius:20rem; color:#edeefe; }
.about-copy { width:588rem; height:588rem; display:flex; flex-direction:column; justify-content:space-between; }
.about-copy h2,.more-copy h2 { font-size:64rem; line-height:77rem; }
.bio { display:flex; flex-direction:column; gap:32rem; align-items:flex-start; }
.bio p { font-size:18rem; line-height:25rem; height:75rem; }
.bio .button { width:177rem; }
.reference-photo { width:588rem; height:588rem; flex:none; background-image:url('assets/design-reference.png'); background-size:1440rem 8011rem; background-repeat:no-repeat; }
.mirror-photo { background-position:-752rem -3544.93rem; }
.social-section { height:716rem; padding:64rem 100rem; display:flex; align-items:center; gap:64rem; }
.standing-photo { background-position:-100rem -4276.93rem; }
.social-list { width:588rem; height:554rem; display:flex; flex-direction:column; gap:32rem; }
.social-list p { font-size:18rem; line-height:25rem; }
.social-list>div { border-bottom:2rem solid rgb(8 12 45 / 20%); }
.social-list button { height:99rem; width:588rem; display:block; text-align:left; padding:10rem 0; border:0; border-top:2rem solid rgb(8 12 45 / 20%); color:black; background:transparent; font:400 64rem/77rem Chunko,sans-serif; }
.roles-strip { height:103rem; display:flex; align-items:center; gap:16rem; white-space:nowrap; overflow:hidden; padding:20rem 0 16rem; }
.roles-strip span { flex:none; font:400 56rem/67rem Chunko,sans-serif; }
.more-about { height:844.78rem; position:relative; }
.purple-ribbon { height:700rem; top:72.39rem; transform:matrix(1, .07, .07, -1, 0, 0); }
.purple-ribbon span { background:var(--blue); }
.more-content { position:absolute; width:1240rem; height:588rem; left:100rem; top:128.07rem; display:flex; align-items:center; gap:64rem; }
.casual-photo { background-position:-100rem -5160rem; }
.more-copy { color:white; width:588rem; display:flex; flex-direction:column; gap:64rem; }
.blog { height:904rem; padding:64rem 100rem; display:flex; flex-direction:column; gap:64rem; }
.blog-heading { width:1240rem; height:236rem; display:flex; justify-content:space-between; align-items:flex-start; }
.blog-heading h2 { color:black; }
.blog-card>div:last-child { display:flex; flex-direction:column; gap:8rem; }
.blog-card time { font-size:16rem; line-height:22rem; }
.follow { height:698rem; padding:64rem 100rem; display:flex; flex-direction:column; align-items:center; gap:64rem; }
.follow .center-heading { height:186rem; }
.photo-track { display:flex; gap:32rem; width:1440rem; height:320rem; align-self:center; }
.strip-photo { display:block; width:256rem; height:320rem; flex:none; border-radius:32rem; object-fit:cover; object-position:center; }

footer { height:532rem; background:var(--ink); color:white; }
.footer-top { height:350rem; padding:64rem 100rem; display:flex; gap:64rem; }
.footer-links { display:flex; flex-direction:column; gap:10rem; width:250rem; }
.footer-links a { font:400 40rem/48rem Chunko,sans-serif; white-space:nowrap; }
.footer-socials { display:flex; flex-direction:column; align-items:flex-start; gap:8rem; flex:1; }
.footer-socials button { border:0; background:none; color:var(--grey-600); padding:0; font-size:16rem; line-height:22rem; }
.newsletter { width:320rem; flex:none; display:flex; flex-direction:column; gap:32rem; }
.newsletter label { color:var(--grey-600); font-size:16rem; line-height:22rem; }
.email-field { width:320rem; height:48rem; border:1rem solid var(--yellow); border-radius:8rem; display:flex; padding:12rem 20rem; align-items:center; background:transparent; transition:background-color 180ms; }
.email-field input { min-width:0; width:100%; color:var(--ink); background:transparent; border:0; outline:none; font-size:16rem; line-height:22rem; }
.email-field input::placeholder { color:#656773; opacity:1; }
.email-field button { background:none; padding:0; border:0; color:var(--ink); font-size:20rem; display:inline-flex; align-items:center; justify-content:center; flex:none; width:24rem; height:24rem; }
.footer-marquee { height:128rem; position:relative; overflow:hidden; }
.footer-marquee>div { position:absolute; right:0; width:max-content; white-space:pre; font:400 128rem/128rem Chunko,sans-serif; word-spacing:22rem; color:var(--yellow); }
.footer-bottom { padding:0 100rem 32rem; height:54rem; display:flex; justify-content:space-between; gap:32rem; color:var(--grey-600); font-size:16rem; line-height:22rem; }
#notice { max-width:400px; padding:25px; border:0; border-radius:12px; font:18px/1.5 Belanosima,sans-serif; color:var(--ink); background:var(--paper); }
#notice::backdrop { background:#080c2daa; }
#notice button { font-size:16px; border:0; padding:9px 20px; border-radius:6px; margin-top:18px; background:var(--yellow); }

.intro-copy span { display:block; white-space:nowrap; }

/* Motion layer: retain the Figma composition, with a viewport-height hero. */
html { scroll-behavior:smooth; }
.hero-section { height:100svh; min-height:420px; padding:0 0 16rem; display:flex; flex-direction:column; }
.news-strip { flex:0 0 54rem; }
.news-strip[hidden] { display:none; }
.hero { height:auto; flex:1; min-height:0; margin-top:16rem; background-position:50% 0%; }
.hero { container-type:size; }
.hero-content { position:absolute; bottom:2.5%; left:5%; width:90%; display:flex; flex-direction:column; align-items:center; gap:12rem; }
.hero h1 span { display:block; animation:hero-arrive 900ms cubic-bezier(.2,.7,.2,1) both; }
.hero h1 span:nth-child(2) { animation-delay:140ms; }

.navigation { animation:fade-in 800ms 100ms both; }
.hero-socials { animation:fade-in 800ms 350ms both; }
.news-track { padding:0; height:100%; gap:0; animation:marquee-left 32s linear infinite; }
.marquee-group { display:flex; align-items:center; flex:none; width:max-content; }
.news-track .marquee-group { gap:16rem; padding-right:16rem; }
.news-track a { display:flex; gap:16rem; align-items:center; white-space:nowrap; font-size:16rem; line-height:18rem; }
.footer-marquee>div { left:0; right:auto; display:flex; word-spacing:normal; animation:marquee-left 24s linear infinite; }
.footer-marquee .marquee-group { gap:32rem; padding-right:32rem; }
.footer-marquee .marquee-group span { flex:none; }
.news-strip:focus-within .news-track { animation-play-state:paused; }
.button,.visual-card,.empty-image,.reference-photo,.strip-photo { transition:transform 350ms cubic-bezier(.2,.7,.2,1),box-shadow 350ms; }
.navigation a:not(.wordmark),.footer-links a,.footer-socials button { transition:opacity 180ms; }
.social-list button { transition:padding-left 300ms,color 300ms; }
@media (hover:hover) and (pointer:fine) {
  .button:hover { transform:translateY(-4rem); box-shadow:0 8rem 20rem #080c2d20; }
  .visual-card:hover { transform:translateY(-12rem) rotate(-1deg); }
  .project-card:hover .empty-image,.blog-card:hover .empty-image { transform:translateY(-7rem); box-shadow:0 15rem 35rem #080c2d12; }
  .reference-photo:hover { transform:rotate(2deg); }
  .strip-photo:hover { transform:translateY(-8rem) rotate(-2deg); }
  .social-list button:hover { padding-left:20rem; color:#273be2; }
  .navigation a:hover,.footer-links a:hover,.footer-socials button:hover { opacity:.7; }
}
.reveal { opacity:0; transform:translateY(24px); transition:opacity 700ms ease,transform 700ms cubic-bezier(.2,.7,.2,1); transition-delay:var(--reveal-delay,0ms); }
.reveal.is-visible { opacity:1; transform:translateY(0); }
.playground-track,.photo-track { display:block; }
.image-loop { display:flex; width:max-content; animation:marquee-left 40s linear infinite; }
.image-loop-group { display:flex; flex:none; gap:32rem; padding-right:32rem; }
.photo-track .image-loop { animation-duration:36s; }
.image-loop.is-interacting,.image-loop:has(:focus-visible) { animation-play-state:paused; }
.roles-strip { gap:0; }
.roles-track { display:flex; flex:none; width:max-content; animation:marquee-left 52s linear infinite; }
.roles-group { display:flex; align-items:center; flex:none; gap:16rem; padding-right:16rem; }
.roles-track.is-interacting { animation-play-state:paused; }
@keyframes marquee-left { to { transform:translateX(-50%); } }
@keyframes hero-arrive { from { opacity:0; transform:translateY(32rem); } to { opacity:1; transform:translateY(0); } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}

/* Supplied style guide: interaction colors and Component 4 link states. */
.button { transition:background-color 180ms,color 180ms,box-shadow 180ms; }
.button:hover { transform:none; }
.yellow:hover { background:#ccaa52; }
.yellow:active { background:#99813e; color:var(--ink); }
.pale:hover { background:#99a29b; color:var(--ink); }
.pale:active { background:#80838b; color:var(--ink); }
.glass:hover { background:rgb(8 12 45 / 64%); box-shadow:inset 0 0 0 1px rgb(255 255 255 / 16%); }
.glass:active { background:rgb(8 12 45 / 82%); }
.email-field:focus-within { background:#fff6df; border-color:var(--yellow); }
.email-field:focus-within input { color:var(--ink); }
.news-track a { color:white; }
.news-track i { color:var(--yellow); }

/* Scroll-driven scenery; foreground copy and portraits remain steady. */
.yellow-ribbon { transform:translateX(var(--scroll-shift,0rem)) rotate(-4deg); }
.purple-ribbon { transform:translateX(var(--scroll-shift,0rem)) matrix(1, .07, .07, -1, 0, 0); }
.portrait-frame { background:none; clip-path:polygon(100.000% 50.000%,99.766% 51.955%,99.084% 53.863%,98.016% 55.683%,96.655% 57.389%,95.116% 58.974%,93.527% 60.450%,92.010% 61.848%,90.671% 63.215%,89.588% 64.605%,88.803% 66.073%,88.320% 67.666%,88.103% 69.414%,88.083% 71.328%,88.168% 73.389%,88.248% 75.556%,88.215% 77.765%,87.971% 79.934%,87.439% 81.976%,86.572% 83.807%,85.355% 85.355%,83.807% 86.572%,81.976% 87.439%,79.934% 87.971%,77.765% 88.215%,75.556% 88.248%,73.389% 88.168%,71.328% 88.083%,69.414% 88.103%,67.666% 88.320%,66.073% 88.803%,64.605% 89.588%,63.215% 90.671%,61.848% 92.010%,60.450% 93.527%,58.974% 95.116%,57.389% 96.655%,55.683% 98.016%,53.863% 99.084%,51.955% 99.766%,50.000% 100.000%,48.045% 99.766%,46.137% 99.084%,44.317% 98.016%,42.611% 96.655%,41.026% 95.116%,39.550% 93.527%,38.152% 92.010%,36.785% 90.671%,35.395% 89.588%,33.927% 88.803%,32.334% 88.320%,30.586% 88.103%,28.672% 88.083%,26.611% 88.168%,24.444% 88.248%,22.235% 88.215%,20.066% 87.971%,18.024% 87.439%,16.193% 86.572%,14.645% 85.355%,13.428% 83.807%,12.561% 81.976%,12.029% 79.934%,11.785% 77.765%,11.752% 75.556%,11.832% 73.389%,11.917% 71.328%,11.897% 69.414%,11.680% 67.666%,11.197% 66.073%,10.412% 64.605%,9.329% 63.215%,7.990% 61.848%,6.473% 60.450%,4.884% 58.974%,3.345% 57.389%,1.984% 55.683%,0.916% 53.863%,0.234% 51.955%,0.000% 50.000%,0.234% 48.045%,0.916% 46.137%,1.984% 44.317%,3.345% 42.611%,4.884% 41.026%,6.473% 39.550%,7.990% 38.152%,9.329% 36.785%,10.412% 35.395%,11.197% 33.927%,11.680% 32.334%,11.897% 30.586%,11.917% 28.672%,11.832% 26.611%,11.752% 24.444%,11.785% 22.235%,12.029% 20.066%,12.561% 18.024%,13.428% 16.193%,14.645% 14.645%,16.193% 13.428%,18.024% 12.561%,20.066% 12.029%,22.235% 11.785%,24.444% 11.752%,26.611% 11.832%,28.672% 11.917%,30.586% 11.897%,32.334% 11.680%,33.927% 11.197%,35.395% 10.412%,36.785% 9.329%,38.152% 7.990%,39.550% 6.473%,41.026% 4.884%,42.611% 3.345%,44.317% 1.984%,46.137% 0.916%,48.045% 0.234%,50.000% 0.000%,51.955% 0.234%,53.863% 0.916%,55.683% 1.984%,57.389% 3.345%,58.974% 4.884%,60.450% 6.473%,61.848% 7.990%,63.215% 9.329%,64.605% 10.412%,66.073% 11.197%,67.666% 11.680%,69.414% 11.897%,71.328% 11.917%,73.389% 11.832%,75.556% 11.752%,77.765% 11.785%,79.934% 12.029%,81.976% 12.561%,83.807% 13.428%,85.355% 14.645%,86.572% 16.193%,87.439% 18.024%,87.971% 20.066%,88.215% 22.235%,88.248% 24.444%,88.168% 26.611%,88.083% 28.672%,88.103% 30.586%,88.320% 32.334%,88.803% 33.927%,89.588% 35.395%,90.671% 36.785%,92.010% 38.152%,93.527% 39.550%,95.116% 41.026%,96.655% 42.611%,98.016% 44.317%,99.084% 46.137%,99.766% 48.045%); transform:rotate(var(--frame-turn,0deg)); transition:none; }
.portrait-frame:hover { transform:rotate(var(--frame-turn,0deg)); }
.portrait-frame img { display:block; width:100%; height:100%; object-fit:cover; transform:rotate(calc(-1 * var(--frame-turn,0deg))); }
.mirror-photo img { object-position:38% center; }
.casual-photo img { object-position:center; }
@media (prefers-reduced-motion:reduce) {
  .yellow-ribbon { transform:rotate(-4deg); }
  .purple-ribbon { transform:matrix(1, .07, .07, -1, 0, 0); }
  .portrait-frame,.portrait-frame:hover,.portrait-frame img { transform:none; }
}

/* Exported yellow vector already includes its tilt. The extended viewBox
   exposes existing off-canvas paths so scrolling cannot reveal a cut edge. */
.yellow-ribbon { width:2160rem; height:1182rem; left:-360rem; top:5.965rem; transform:translateX(var(--scroll-shift,0rem)); }
.yellow-ribbon img { display:block; width:100%; height:100%; }
@media (prefers-reduced-motion:reduce) { .yellow-ribbon { transform:none; } }
/* The purple export already contains its slope and orientation. */
.purple-ribbon { width:2160rem; height:834rem; left:-360rem; top:5.39rem; transform:translateX(var(--scroll-shift,0rem)); }
.purple-ribbon img { display:block; width:100%; height:100%; }
@media (prefers-reduced-motion:reduce) { .purple-ribbon { transform:none; } }
/* Reference-specific tertiary buttons and contrast-safe keyboard focus. */
.white { background:#fff; color:var(--ink); }
.white:hover { background:#f5f6fa; color:var(--ink); }
.white:active { background:#edeef5; color:var(--ink); }
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid white; outline-offset:2px; box-shadow:0 0 0 5px var(--ink); }
/* Focus belongs to the complete input component, not an inner text box. */
.email-field:focus-within { outline:2px solid var(--yellow); outline-offset:3px; }
.email-field input:focus-visible { outline:none; box-shadow:none; }
/* Footer input rests on the footer surface; active colors use the guide. */
.email-field input { color:var(--grey-600); }
.email-field input::placeholder { color:var(--grey-600); }
.email-field button { color:var(--yellow); }
.email-field:focus-within input,.email-field:focus-within button { color:var(--ink); }
.email-field:focus-within input::placeholder { color:#656773; }
/* Autofill uses the same resting and active surfaces as the whole field. */
.email-field { --input-surface:var(--ink); --input-text:var(--grey-600); }
.email-field:focus-within { --input-surface:#fff6df; --input-text:var(--ink); }
.email-field input { caret-color:var(--input-text); }
.email-field input:autofill { box-shadow:inset 0 0 0 1000px var(--input-surface); -webkit-text-fill-color:var(--input-text); }
.email-field input:-webkit-autofill { -webkit-box-shadow:inset 0 0 0 1000px var(--input-surface); -webkit-text-fill-color:var(--input-text); }
.project-link { align-self:center; display:inline-flex; align-items:center; justify-content:center; gap:8rem; padding:0; background:none; color:var(--ink); border:0; border-bottom:1rem solid transparent; font:400 16rem/22rem Belanosima,sans-serif; }
.project-link i { font-size:20rem; }
.project-link:hover,.project-link:focus-visible { border-bottom-color:currentColor; }
.project-link:active { font-weight:600; }

/* Updated landing-page content and creative-inventory composition. */
.deep-dives { height:auto; min-height:824rem; }
.project-card { text-align:center; }
.case-caption { font:400 18rem/25rem Belanosima,sans-serif; }
.project-link { margin-top:auto; }
.about-copy h2 { font-size:56rem; line-height:1.2; }
.about-copy .bio p { height:auto; font-size:20rem; line-height:28rem; }
.bio .button { width:auto; }
.more-about { height:1111.82rem; }
.more-about .purple-ribbon { top:5.91rem; height:1100rem; }
.more-content { height:764rem; top:174.07rem; }
.inventory-portrait { position:relative; width:588rem; height:764rem; flex:none; border-radius:294rem; overflow:hidden; }
.inventory-portrait img { position:absolute; left:-113.42rem; top:-21rem; width:856.84rem; height:785rem; display:block; object-fit:cover; }
.more-copy { gap:64rem; }
.inventory-list { list-style:none; padding:0; margin:0; }
.inventory-list li { display:flex; align-items:center; gap:12rem; padding:24rem 0; border-top:2rem solid #7d89ee; }
.inventory-list img { width:64rem; height:64rem; flex:none; object-fit:cover; border-radius:12rem; }
.inventory-list span { font:400 64rem/64rem Chunko,sans-serif; transform:translateY(6.4rem); white-space:nowrap; }
.blog-heading h2 { font-size:72rem; line-height:1.2; }
footer { height:auto; }
.footer-top { height:350rem; }
.footer-contact { width:480rem; flex:none; display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:24rem; }
.footer-contact h2 { font-size:40rem; line-height:48rem; }
.footer-contact p { font-size:16rem; line-height:22rem; color:var(--grey-600); }
.footer-contact .button { margin-top:8rem; }

/* Match Figma's 764px inventory column and visually centered cap-height labels. */
.inventory-list li:last-child { padding-bottom:0; }
.more-copy { height:764rem; }
.more-copy h2 { height:154rem; flex:none; }
.case-copy { display:flex; flex-direction:column; gap:4rem; }
.case-copy h3 { line-height:1.05; }
.project-card { gap:12rem; }
@supports (text-box-trim:trim-both) {
  .inventory-list span { text-box-trim:trim-both; text-box-edge:cap alphabetic; transform:none; }
}