/* Homepage redesign: an editorial, responsive portfolio layer. */
:root { --ink: #15211e; --paper: #f7f5ef; --lime: #d7ff58; --coral: #ff765f; --line: rgba(21, 33, 30, .18); }
.studio-page { background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
.studio-page h1, .studio-page h2, .studio-page h3, .studio-page p { color: inherit; margin-top: 0; }
.studio-page a { color: inherit; }
.page-grain { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .09; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); }
.studio-nav { position: fixed; inset: 0 0 auto; z-index: 20; padding: 25px 0; transition: background .35s, padding .35s, border-color .35s; border-bottom: 1px solid transparent; }
.studio-nav.is-scrolled { background: rgba(247, 245, 239, .88); padding: 14px 0; border-color: var(--line); backdrop-filter: blur(12px); }
.studio-logo { font: 700 1.45rem/1 "DM Mono", monospace; letter-spacing: -.12em; text-decoration: none; }.studio-logo span { color: var(--coral); font-size: .58em; vertical-align: top; margin-left: 3px; }
.studio-links { display: flex; gap: 28px; font: 500 .78rem "DM Mono", monospace; text-transform: uppercase; }.studio-links a, .studio-footer a { text-decoration: none; }.studio-links a:hover, .studio-footer a:hover { color: var(--coral); }
.nav-availability { display: flex; gap: 8px; align-items: center; font: 500 .72rem "DM Mono", monospace; text-decoration: none; text-transform: uppercase; }.nav-availability span { width: 8px; height: 8px; border-radius: 50%; background: #54c56f; box-shadow: 0 0 0 4px rgba(84,197,111,.15); }
.studio-hero { min-height: 100svh; position: relative; display: flex; align-items: end; padding: 145px 0 52px; overflow: hidden; background: #d7ff58; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); animation: float 9s ease-in-out infinite; }.orb-one { width: 33vw; height: 33vw; right: -7vw; top: 13%; background: var(--coral); }.orb-two { width: 14vw; height: 14vw; left: 42%; bottom: 9%; background: #b09eff; animation-delay: -4s; }
.hero-topline, .section-kicker { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid var(--line); font: 500 .69rem "DM Mono", monospace; letter-spacing: .025em; text-transform: uppercase; }.hero-grid { min-height: 58vh; }.eyebrow { font: 500 .72rem "DM Mono", monospace; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 23px; }.eyebrow i { display: inline-block; width: 26px; height: 1px; background: currentColor; margin: 0 8px 4px; }
.hero-title { max-width: 870px; font-size: clamp(3.5rem, 8.8vw, 8.7rem); line-height: .88; letter-spacing: -.075em; font-weight: 700; }.hero-title span, .hero-title em { display: block; }.hero-title em, .display-copy em, .process-sticky em, .contact-shell em { font-family: "Playfair Display", serif; font-weight: 600; letter-spacing: -.075em; }.hero-intro { position: relative; z-index: 2; padding-bottom: 11px; }.hero-intro p { max-width: 280px; font-size: 1.1rem; line-height: 1.45; }.round-link { display: grid; place-items: center; width: 59px; height: 59px; border: 1px solid var(--ink); border-radius: 50%; text-decoration: none; font-size: 1.4rem; transition: transform .3s, background .3s; }.round-link:hover { background: var(--ink); color: var(--lime); transform: rotate(45deg); }
.hero-marquee { position: absolute; left: 0; bottom: -8px; width: 125%; transform: rotate(-2deg); background: var(--ink); color: var(--paper); padding: 12px 0; overflow: hidden; white-space: nowrap; font: 500 .72rem "DM Mono", monospace; letter-spacing: .09em; }.hero-marquee div { animation: marquee 20s linear infinite; }.hero-marquee b { color: var(--lime); padding: 0 20px; }
.practice-section, .work-section, .process-section, .tools-section, .contact-section { padding: 130px 0; }.practice-section { background: var(--paper); }.practice-grid { margin-top: 24px; }.practice-card { min-height: 530px; padding: 32px; position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 4px; }.visual-card { background: #172520; color: #f7f5ef; }.data-card { background: #ff765f; }.card-number { font: 500 .72rem "DM Mono", monospace; }.practice-card > i { position: absolute; right: 31px; top: 27px; font-size: 1.4rem; }.card-label { margin: auto 0 13px; font: 500 .69rem "DM Mono", monospace; text-transform: uppercase; }.practice-card h2 { position: relative; max-width: 490px; z-index: 1; font-size: clamp(2rem, 3.3vw, 3.5rem); letter-spacing: -.06em; line-height: .98; }.card-copy { position: relative; z-index: 1; max-width: 380px; margin: 18px 0 0; line-height: 1.5; }.shape-stack span { position: absolute; border-radius: 50%; border: 1px solid rgba(215,255,88,.8); width: 235px; height: 235px; right: -35px; bottom: -70px; }.shape-stack span:nth-child(2) { right: 53px; bottom: -110px; }.shape-stack span:nth-child(3) { right: 102px; bottom: -148px; }.mini-chart { position: absolute; right: 25px; bottom: 24px; width: 58%; height: 170px; border-bottom: 1px solid rgba(21,33,30,.5); }.mini-chart span { display: inline-block; width: 1px; height: 100%; margin-right: 24%; border-left: 1px dashed rgba(21,33,30,.25); }.mini-chart svg { position: absolute; inset: 20px 0 0; width: 100%; height: 130px; overflow: visible; }.mini-chart path { fill: none; stroke: var(--ink); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 430; animation: draw 2.5s ease both .7s; }
.work-section { background: var(--ink); color: var(--paper); }.work-section .section-kicker { border-color: rgba(247,245,239,.25); }.display-copy { max-width: 780px; margin: 36px 0 80px; font-size: clamp(2.5rem, 5vw, 5.4rem); line-height: .95; letter-spacing: -.07em; }.project-list { border-top: 1px solid rgba(247,245,239,.24); }.project-row { position: relative; display: grid; grid-template-columns: 65px minmax(140px, 240px) 1fr 54px; gap: 25px; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(247,245,239,.24); text-decoration: none; transition: padding .35s, color .35s; }.project-row:hover { padding-left: 18px; color: var(--lime); }.project-index, .project-meta p { font: 500 .68rem "DM Mono", monospace; text-transform: uppercase; }.project-image { height: 138px; overflow: hidden; background: #293630; }.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }.project-row:hover img { transform: scale(1.08); }.project-meta h3 { font-size: clamp(1.8rem, 3.5vw, 3.55rem); letter-spacing: -.06em; margin: 0 0 7px; }.project-meta p { opacity: .68; margin: 0; }.project-arrow { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; transition: transform .3s; }.project-row:hover .project-arrow { transform: rotate(45deg); }
.process-section { background: #eeece4; }.process-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 11vw; }.process-sticky { align-self: start; position: sticky; top: 130px; }.process-sticky h2 { font-size: clamp(3rem, 5vw, 5.4rem); letter-spacing: -.08em; line-height: .88; }.process-steps article { display: grid; grid-template-columns: 80px 1fr; gap: 20px; padding: 32px 0; border-top: 1px solid var(--line); }.process-steps span { font: .74rem "DM Mono", monospace; }.process-steps h3 { font-size: clamp(1.7rem, 2.6vw, 2.8rem); letter-spacing: -.06em; }.process-steps p { max-width: 420px; font-size: 1.05rem; line-height: 1.5; }.tools-section { padding-top: 0; background: #eeece4; }.tools-panel { padding: 48px; background: #b09eff; }.tool-cloud { display: flex; flex-wrap: wrap; gap: 10px; max-width: 750px; }.tool-cloud span { border: 1px solid var(--ink); border-radius: 100px; padding: 10px 15px; font: 500 .8rem "DM Mono", monospace; transition: background .25s, color .25s; }.tool-cloud span:hover { color: #b09eff; background: var(--ink); }.tools-note { margin: 35px 0 0; max-width: 310px; line-height: 1.45; }
.contact-section { padding-bottom: 65px; background: var(--paper); }.contact-shell { padding: 64px 7.5%; background: var(--lime); }.contact-shell h2 { margin: 30px 0 68px; font-size: clamp(3.8rem, 9vw, 9.5rem); line-height: .82; letter-spacing: -.09em; }.contact-bottom { display: flex; justify-content: space-between; align-items: end; gap: 30px; }.contact-bottom p { max-width: 295px; margin: 0; line-height: 1.45; }.contact-email { padding-bottom: 8px; border-bottom: 2px solid currentColor; font-size: clamp(1.5rem, 2.5vw, 2.5rem); font-weight: 600; letter-spacing: -.05em; text-decoration: none; }.contact-email i { font-size: .7em; }.studio-footer { padding: 24px 0; border-top: 1px solid var(--line); font: .7rem "DM Mono", monospace; text-transform: uppercase; }.studio-footer div div { display: flex; gap: 20px; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.22,1,.36,1); }.reveal.is-visible { opacity: 1; transform: none; }.hero-title .reveal-word { opacity: 0; transform: translateY(44px); animation: reveal-word .85s cubic-bezier(.22,1,.36,1) forwards; }.hero-title .reveal-word:nth-child(2) { animation-delay: .12s; }.hero-title .reveal-word:nth-child(3) { animation-delay: .24s; }.studio-hero .reveal { animation: none; }.studio-hero .hero-topline, .studio-hero .hero-intro { opacity: 0; animation: fade-up .7s ease forwards .45s; }.studio-hero .hero-intro { animation-delay: .6s; }
@keyframes reveal-word { to { opacity: 1; transform: translateY(0); } } @keyframes fade-up { to { opacity: 1; transform: none; } } @keyframes float { 50% { transform: translate(-24px, 20px) scale(1.08); } } @keyframes marquee { to { transform: translateX(-40%); } } @keyframes draw { from { stroke-dashoffset: 430; } to { stroke-dashoffset: 0; } }
@media (max-width: 991px) { .studio-hero { min-height: auto; padding: 140px 0 65px; }.hero-grid { min-height: 0; }.hero-intro { margin-top: 42px; }.hero-orb { opacity: .85; }.orb-one { width: 48vw; height: 48vw; }.orb-two { width: 21vw; height: 21vw; }.practice-section, .work-section, .process-section, .contact-section { padding: 90px 0; }.process-layout { grid-template-columns: 1fr; gap: 45px; }.process-sticky { position: static; }.project-row { grid-template-columns: 40px 165px 1fr 44px; gap: 15px; }.project-image { height: 116px; } }
@media (max-width: 575px) { .studio-nav { padding: 18px 0; }.studio-links { gap: 14px; font-size: .63rem; }.nav-availability { display: none; }.hero-topline { font-size: .57rem; }.hero-topline span:last-child { display: none; }.hero-title { font-size: clamp(3.35rem, 15vw, 5.3rem); }.orb-one { width: 66vw; height: 66vw; }.orb-two { width: 34vw; height: 34vw; left: 6%; bottom: 18%; }.practice-card { min-height: 440px; padding: 25px; }.project-row { grid-template-columns: 26px 1fr 36px; gap: 11px; }.project-image { display: none; }.project-row { padding: 25px 0; }.project-meta h3 { font-size: 1.8rem; }.project-meta p { font-size: .58rem; }.project-arrow { width: 34px; height: 34px; }.tools-panel, .contact-shell { padding: 34px 25px; }.contact-shell h2 { margin: 25px 0 48px; }.contact-bottom { display: block; }.contact-email { display: inline-block; margin-top: 28px; }.studio-footer .container { gap: 15px; align-items: start !important; }.studio-footer div div { flex-direction: column; gap: 8px; text-align: right; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Reference-inspired portfolio hero */
.reference-hero { min-height: 870px; display: block; padding: 120px 0 38px; background: #f9f9f7; }
.reference-hero .container { max-width: 1280px; }.reference-hero .hero-topline { position: relative; z-index: 3; }
.hero-stage { position: relative; min-height: 650px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #fcfcfa 10%, #efffd0 58%, #fff 95%); border: 1px solid #e2e2de; }
.hero-glow { position: absolute; z-index: 0; top: 300px; left: 50%; width: min(780px, 78vw); height: 360px; border-radius: 50%; background: #a0ff00; filter: blur(70px); transform: translateX(-50%); opacity: .8; }
.reference-hero .hero-award { position: absolute; z-index: 2; left: 50%; top: 47px; margin: 0; transform: translateX(-50%); font: 500 .62rem "DM Mono", monospace; white-space: nowrap; }.hero-award i { margin-right: 6px; color: #a0df00; }
.reference-hero .hero-title { position: relative; z-index: 2; max-width: none; padding: 90px 20px 0; text-align: center; color: #151515; font-size: clamp(3.4rem, 7.6vw, 7.9rem); line-height: .8; }.reference-hero .hero-title em { margin-top: 2px; font-size: 1.08em; }
.hero-portrait-wrap { position: absolute; z-index: 1; bottom: 0; left: 50%; width: min(345px, 38vw); height: 457px; transform: translateX(-50%); overflow: hidden; mask-image: linear-gradient(to bottom, black 82%, transparent 100%); }.hero-portrait { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1) contrast(1.05); }
.availability-pill { position: absolute; z-index: 2; left: 33px; top: 330px; display: flex; gap: 7px; align-items: center; padding: 9px 13px; border-radius: 50px; background: rgba(255,255,255,.86); box-shadow: 0 5px 20px rgba(0,0,0,.08); font-size: .68rem; }.availability-pill span { width: 8px; height: 8px; border-radius: 50%; background: #9bf100; box-shadow: 0 0 0 4px #e5ffbc; }
.hero-note { position: absolute; z-index: 2; top: 318px; right: 40px; max-width: 230px; font-size: .82rem; line-height: 1.35; }.hero-contact { position: absolute; z-index: 3; right: 90px; bottom: 97px; }.hero-contact a { display: inline-flex; align-items: center; gap: 18px; padding: 15px 22px; border-radius: 50px; background: #171717; color: white; text-decoration: none; font-size: .75rem; transition: transform .3s, background .3s; }.hero-contact a:hover { background: #a0df00; color: #171717; transform: translateY(-3px); }
.hero-proof { position: absolute; z-index: 2; bottom: 91px; left: 34px; display: flex; gap: 12px; align-items: center; }.hero-proof p { margin: 0; font-size: .62rem; line-height: 1.35; }.avatar-pile { display: flex; }.avatar-pile img { width: 29px; height: 29px; margin-left: -8px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; }.avatar-pile img:first-child { margin-left: 0; }
.hero-clients { display: flex; justify-content: space-around; padding: 29px 20px 0; color: #8a8a86; font: 500 .66rem "DM Mono", monospace; letter-spacing: .06em; }.menu-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #d7d7d1; border-radius: 50%; background: white; color: var(--ink); font-size: 1.2rem; }
.studio-logo { font-family: "Playfair Display", serif; font-size: 1.3rem; letter-spacing: -.07em; }.studio-logo span { color: inherit; }.studio-nav { background: rgba(249,249,247,.78); backdrop-filter: blur(12px); }.studio-nav.is-scrolled { background: rgba(249,249,247,.94); }
@media (max-width: 767px) { .reference-hero { min-height: 730px; padding-top: 96px; }.hero-stage { min-height: 535px; }.reference-hero .hero-title { padding-top: 84px; font-size: clamp(3.2rem, 14vw, 5.5rem); }.reference-hero .hero-award { top: 38px; font-size: .5rem; }.hero-portrait-wrap { width: 245px; height: 320px; }.availability-pill { left: 15px; top: 250px; font-size: .54rem; padding: 7px 9px; }.hero-note { top: 276px; right: 15px; max-width: 135px; font-size: .62rem; }.hero-contact { right: 15px; bottom: 42px; }.hero-contact a { padding: 11px 14px; gap: 8px; font-size: .62rem; }.hero-proof { left: 15px; bottom: 41px; }.hero-proof p { display: none; }.hero-clients { gap: 14px; justify-content: flex-start; overflow: hidden; padding-left: 0; font-size: .5rem; white-space: nowrap; }.hero-clients span:nth-child(n+4) { display: none; }.studio-links { display: none; } }

/* Continuation of the light, layered reference language. */
.reference-practice { padding: 115px 0 135px; background: radial-gradient(circle at 82% 25%, rgba(195,255,71,.22), transparent 18%), #fbfbf9; }.reference-practice .section-kicker { color: #554c44; }.approach-heading { margin: 68px auto 35px; text-align: center; }.approach-heading > span { font: italic .78rem "Playfair Display", serif; }.approach-heading h2 { margin: 13px 0 0; font-size: clamp(2.2rem, 4vw, 4.2rem); letter-spacing: -.07em; line-height: .95; }.approach-heading em { font-family: "Playfair Display", serif; font-weight: 600; }.approach-cards { position: relative; display: flex; align-items: end; justify-content: center; min-height: 326px; padding: 28px 55px 0; }.approach-card { position: relative; width: min(31%, 295px); min-height: 240px; padding: 26px 23px; border: 1px solid #e8e8e3; border-radius: 10px; background: rgba(255,255,255,.88); box-shadow: 0 18px 40px rgba(30,43,31,.05); transition: transform .35s ease, box-shadow .35s ease; }.approach-card:hover { transform: translateY(-15px) rotate(0deg); box-shadow: 0 25px 45px rgba(30,43,31,.13); }.approach-card:nth-child(1) { transform: rotate(-4deg) translateX(36px); }.approach-card:nth-child(2) { z-index: 2; min-height: 272px; background: linear-gradient(140deg, #fff, #efffd0); }.approach-card:nth-child(3) { transform: rotate(4deg) translateX(-36px); }.approach-card span { display: block; margin-bottom: 48px; font: 400 1.55rem "DM Sans", sans-serif; }.approach-card i { position: absolute; top: 27px; right: 22px; color: #87bb00; font-size: 1.35rem; }.approach-card h3 { margin: 0 0 9px; font-size: 1.4rem; letter-spacing: -.05em; }.approach-card p { max-width: 195px; margin: 0; color: #666761; font-size: .72rem; line-height: 1.45; }
.reference-work { padding: 120px 0 135px; color: var(--ink); background: #fbfbf9; }.reference-work .section-kicker, .reference-work .project-list { border-color: #d9d9d3; }.reference-work .display-copy { max-width: 720px; margin: 32px auto 55px; text-align: center; font-size: clamp(2.35rem, 4.7vw, 4.7rem); }.reference-work .project-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; border-top: 0; }.reference-work .project-row { display: block; padding: 0; overflow: hidden; border: 0; color: var(--ink); }.reference-work .project-row:hover { padding-left: 0; color: var(--ink); }.reference-work .project-index, .reference-work .project-arrow { display: none; }.reference-work .project-image { height: clamp(215px, 25vw, 340px); border-radius: 9px; background: #edf1ed; }.reference-work .project-meta { padding: 14px 3px; }.reference-work .project-meta h3 { margin-bottom: 4px; font-size: clamp(1.35rem, 2vw, 2rem); }.reference-work .project-meta p { color: #76766f; font-size: .61rem; }.reference-work .project-row:nth-child(2) .project-image { background: #f0f3df; }.reference-work .project-row:nth-child(3) .project-image { background: #e7efdf; }
@media (max-width: 767px) { .reference-practice { padding: 75px 0 80px; }.approach-heading { margin-top: 45px; }.approach-cards { display: grid; gap: 13px; min-height: 0; padding: 0 10px; }.approach-card, .approach-card:nth-child(1), .approach-card:nth-child(3) { width: 100%; min-height: 190px; transform: none; }.approach-card:nth-child(2) { min-height: 205px; }.approach-card span { margin-bottom: 24px; }.reference-work { padding: 80px 0; }.reference-work .project-list { grid-template-columns: 1fr; gap: 22px; }.reference-work .project-image { height: 260px; } }

/* Selected work: light, quiet gallery with small interactive details. */
.reference-work { background: radial-gradient(circle at 87% 26%, rgba(208,255,88,.2), transparent 20%), #fbfbf9; }.reference-work .section-heading { position: relative; }.reference-work .work-intro { max-width: 350px; margin: -32px auto 48px; color: #70716b; text-align: center; font-size: .82rem; line-height: 1.45; }.reference-work .project-list { gap: 23px; }.reference-work .project-row { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transform-style: preserve-3d; transition: transform .35s ease, opacity .55s ease; }.reference-work .project-image { position: relative; height: clamp(210px, 23vw, 316px); border: 1px solid #e8e8e1; border-radius: 6px; box-shadow: 0 12px 26px rgba(30,40,30,.045); }.reference-work .project-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.55) 45%, transparent 62%); transform: translateX(-130%); transition: transform .7s ease; pointer-events: none; }.reference-work .project-row:hover .project-image::after { transform: translateX(130%); }.reference-work .project-row:hover .project-image { border-color: #b7d96a; box-shadow: 0 18px 36px rgba(51,75,25,.13); }.project-view { position: absolute; z-index: 2; top: 13px; right: 13px; padding: 7px 10px; border-radius: 30px; background: rgba(255,255,255,.92); color: #172520; font: 500 .57rem "DM Mono", monospace; text-transform: uppercase; opacity: 0; transform: translateY(7px); transition: opacity .25s, transform .25s; }.project-row:hover .project-view { opacity: 1; transform: translateY(0); }.reference-work .project-meta { display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 12px 2px 0; }.reference-work .project-meta h3 { font-size: clamp(1.2rem, 1.8vw, 1.75rem); }.reference-work .project-meta p { max-width: 155px; text-align: right; line-height: 1.4; }.reference-work .project-row:nth-child(2) { transition-delay: .1s; }.reference-work .project-row:nth-child(3) { transition-delay: .2s; }
@media (max-width: 767px) { .reference-work .work-intro { margin: -20px auto 36px; }.reference-work .project-list { gap: 30px; }.reference-work .project-meta { align-items: start; }.project-view { opacity: 1; transform: none; }.reference-work .project-image { height: 250px; } }

/* Digital exhibition cards: replace the conventional thumbnail grid. */
.reference-work { background: #111917; color: #f5f5ef; overflow: hidden; }.reference-work::before { position: absolute; width: 55vw; height: 55vw; border-radius: 50%; top: 48%; left: -20vw; background: #b2ff2c; filter: blur(160px); opacity: .08; content: ""; }.reference-work .section-heading, .reference-work .project-list { position: relative; z-index: 1; }.reference-work .section-kicker { border-color: rgba(255,255,255,.2); }.reference-work .display-copy { color: #f5f5ef; }.reference-work .work-intro { color: rgba(245,245,239,.62); }.gallery-grid { display: grid !important; grid-template-columns: 1.1fr .92fr .92fr !important; gap: 18px !important; }.reference-work .project-row { position: relative; display: flex; min-height: 485px; padding: 0; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; background: #1b2522; color: #f5f5ef; isolation: isolate; transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }.reference-work .project-row:hover { padding: 0; color: #f5f5ef; }.reference-work .project-row::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(6,12,10,.12) 25%, rgba(6,12,10,.82) 100%); content: ""; pointer-events: none; }.reference-work .project-index { position: absolute; z-index: 3; top: 19px; left: 20px; display: block; color: #fff; font: 500 .62rem "DM Mono", monospace; letter-spacing: .08em; }.reference-work .project-image { position: absolute; inset: 0; z-index: 0; display: block; height: auto; border: 0; border-radius: 0; background: #1b2522; box-shadow: none; }.reference-work .project-image::after { display: none; }.reference-work .project-image img { height: 100%; filter: saturate(.9) contrast(1.04); transition: transform .75s cubic-bezier(.2,.8,.2,1), filter .6s ease; }.reference-work .project-glow { position: absolute; inset: auto -25% -32% auto; width: 75%; aspect-ratio: 1; border-radius: 50%; background: #bbff34; filter: blur(52px); opacity: 0; transition: opacity .5s; }.reference-work .project-row:hover .project-image img { transform: scale(1.1); filter: saturate(1.15) contrast(1.1); }.reference-work .project-row:hover .project-glow { opacity: .22; }.reference-work .project-meta { position: relative; z-index: 2; display: block; padding: 0 21px 21px; color: #fff; }.reference-work .project-meta p { max-width: none; margin: 0 0 6px; color: rgba(255,255,255,.63); text-align: left; font-size: .61rem; }.reference-work .project-meta h3 { margin: 0; color: #fff; font-size: clamp(2.1rem, 3vw, 3.3rem); line-height: .88; letter-spacing: -.075em; }.reference-work .project-view { position: absolute; right: 19px; bottom: 23px; display: grid; width: 45px; height: 45px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(20,30,27,.35); color: transparent; font-size: 0; opacity: 1; transform: none; backdrop-filter: blur(8px); }.reference-work .project-view i { color: #fff; font-size: 1.1rem; }.reference-work .project-row:hover .project-view { background: #b2ff2c; border-color: #b2ff2c; transform: rotate(45deg); }.reference-work .project-row:hover .project-view i { color: #15211e; }.reference-work .loan-tile { min-height: 440px; margin-top: 45px; }.reference-work .study-tile { min-height: 390px; margin-top: 95px; }.reference-work .loan-tile .project-image img { object-position: 58% center; }.reference-work .study-tile .project-image img { object-position: left center; }
@media (max-width: 991px) { .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }.reference-work .study-tile { margin-top: 0; }.reference-work .project-row { min-height: 400px; }.reference-work .loan-tile { min-height: 400px; margin-top: 0; } }
@media (max-width: 575px) { .gallery-grid { grid-template-columns: 1fr !important; gap: 14px !important; }.reference-work .project-row, .reference-work .loan-tile, .reference-work .study-tile { min-height: 390px; margin-top: 0; }.reference-work .project-meta h3 { font-size: 2.45rem; }.reference-work .project-view { width: 40px; height: 40px; } }

/* Edge cards open outward on desktop, keeping the centre card as the anchor. */
@media (hover: hover) and (min-width: 768px) {
  .approach-cards { overflow: visible; }
  .approach-card { transform-origin: center bottom; transition: width .46s cubic-bezier(.22,1,.36,1), transform .46s cubic-bezier(.22,1,.36,1), box-shadow .46s ease, background .35s ease, opacity .35s ease; }
  .approach-card:nth-child(1) { transform-origin: left bottom; }
  .approach-card:nth-child(3) { transform-origin: right bottom; }
  .approach-card:nth-child(1):hover { z-index: 4; width: min(39%, 385px); transform: rotate(-1deg) translate(-5px, -12px); background: linear-gradient(135deg, #fff, #f2ffd3); box-shadow: 0 28px 55px rgba(30,43,31,.17); }
  .approach-card:nth-child(3):hover { z-index: 4; width: min(39%, 385px); transform: rotate(1deg) translate(5px, -12px); background: linear-gradient(225deg, #fff, #f2ffd3); box-shadow: 0 28px 55px rgba(30,43,31,.17); }
  .approach-cards:has(.approach-card:nth-child(1):hover) .approach-card:nth-child(3), .approach-cards:has(.approach-card:nth-child(3):hover) .approach-card:nth-child(1) { opacity: .72; }
  .approach-card:nth-child(1):hover p, .approach-card:nth-child(3):hover p { color: #37413b; }
}

/* Signal lab: an interactive process and tool system. */
.process-section { position: relative; overflow: hidden; padding: 118px 0 0; background: #111917; color: #eff5ee; }.process-section::before { position: absolute; width: 52vw; height: 52vw; top: -20vw; left: -14vw; border-radius: 50%; background: #aaff22; filter: blur(150px); opacity: .12; content: ""; }.process-section::after { position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px); background-size: 44px 44px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 72%); pointer-events: none; }.process-section .container { position: relative; z-index: 1; }.process-layout { grid-template-columns: .9fr 1.3fr; gap: 8vw; }.process-sticky { top: 120px; padding: 34px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(23,34,31,.7); backdrop-filter: blur(12px); }.process-sticky .eyebrow { color: #baff3c; }.process-sticky h2 { color: #eff5ee; font-size: clamp(3.2rem, 5.3vw, 5.8rem); }.process-sticky em { color: #baff3c; }.process-steps { display: grid; gap: 14px; }.process-steps article { position: relative; min-height: 174px; grid-template-columns: 54px 1fr; align-items: start; padding: 25px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; background: rgba(26,39,35,.76); cursor: default; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s, box-shadow .35s; }.process-steps article::after { position: absolute; right: -56px; bottom: -66px; width: 170px; height: 170px; border: 1px solid rgba(187,255,60,.6); border-radius: 50%; box-shadow: 0 0 0 20px rgba(187,255,60,.04), 0 0 0 40px rgba(187,255,60,.02); content: ""; transition: transform .7s cubic-bezier(.2,.8,.2,1), background .35s; }.process-steps article:hover { transform: translateX(14px) scale(1.015); border-color: rgba(187,255,60,.7); background: #1c2b27; box-shadow: -12px 16px 36px rgba(0,0,0,.25); }.process-steps article:hover::after { background: rgba(187,255,60,.13); transform: scale(1.45); }.process-steps article > span { position: relative; z-index: 1; color: #baff3c; font: 500 .68rem "DM Mono", monospace; }.process-steps article > div { position: relative; z-index: 1; }.step-icon { position: absolute; right: 5px; top: 3px; color: #baff3c; font-size: 1.2rem; opacity: .8; transition: transform .45s, opacity .35s; }.process-steps article:hover .step-icon { opacity: 1; transform: rotate(18deg) scale(1.28); }.process-steps h3 { margin: 0 0 8px; color: #f4f8f3; font-size: clamp(1.75rem, 2.6vw, 2.8rem); }.process-steps p { margin: 0; color: rgba(239,245,238,.68); font-size: .93rem; }.tools-section { position: relative; padding: 52px 0 120px; background: #111917; }.tools-section .container { position: relative; z-index: 1; }.tools-panel { position: relative; min-height: 250px; padding: 42px; overflow: hidden; border: 1px solid rgba(187,255,60,.55); border-radius: 18px; background: linear-gradient(120deg, rgba(188,255,64,.18), rgba(78,119,224,.36)); color: #eef7eb; box-shadow: inset 0 1px rgba(255,255,255,.16), 0 25px 55px rgba(0,0,0,.25); }.tools-panel .eyebrow { color: #eaffba; }.tool-cloud { position: relative; z-index: 1; max-width: 820px; }.tool-cloud span { position: relative; padding: 11px 16px; border-color: rgba(238,247,235,.7); color: #eff5ee; background: rgba(12,26,22,.18); cursor: default; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, box-shadow .3s; }.tool-cloud span:hover { color: #13231e; background: #baff3c; box-shadow: 0 8px 22px rgba(5,10,8,.27); transform: translateY(-8px) rotate(-3deg); }.tool-cloud span:nth-child(even):hover { transform: translateY(-8px) rotate(3deg); }.tools-note { position: relative; z-index: 1; color: rgba(239,245,238,.76); }.toolbox-orbit { position: absolute; right: 3%; top: 50%; width: 210px; height: 210px; border: 1px solid rgba(232,255,180,.4); border-radius: 50%; transform: translateY(-50%); animation: slow-spin 15s linear infinite; }.toolbox-orbit::before, .toolbox-orbit::after, .toolbox-orbit span { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #baff3c; box-shadow: 0 0 20px #baff3c; content: ""; }.toolbox-orbit::before { left: 12px; top: 28px; }.toolbox-orbit::after { right: 22px; bottom: 12px; }.toolbox-orbit span:first-child { top: -7px; left: 50%; }.toolbox-orbit span:nth-child(2) { bottom: 25%; left: -7px; }.toolbox-orbit span:nth-child(3) { top: 40%; right: -7px; }.tools-panel:hover .toolbox-orbit { animation-duration: 3s; }.tools-panel:hover { border-color: #e4ff9d; }
@keyframes slow-spin { to { transform: translateY(-50%) rotate(360deg); } }
@media (max-width: 991px) { .process-layout { grid-template-columns: 1fr; gap: 30px; }.process-sticky { position: relative; top: auto; }.tools-section { padding-bottom: 85px; } }
@media (max-width: 575px) { .process-section { padding-top: 75px; }.process-sticky { padding: 25px; }.process-steps article { min-height: 150px; padding: 21px; }.process-steps article:hover { transform: translateY(-5px); }.tools-panel { padding: 28px 24px; }.toolbox-orbit { width: 145px; height: 145px; right: -43px; opacity: .45; }.tool-cloud { max-width: 90%; } }

/* Light lime theme: carries the hero palette through the whole experience. */
.reference-work { position: relative; background: radial-gradient(circle at 5% 20%, rgba(188,255,60,.58), transparent 27%), radial-gradient(circle at 96% 64%, rgba(188,255,60,.38), transparent 23%), #f8f8f4; color: #15211e; }.reference-work::before { background: #c3ff48; opacity: .22; }.reference-work .section-kicker { border-color: rgba(21,33,30,.18); color: #15211e; }.reference-work .display-copy { color: #15211e; }.reference-work .work-intro { color: rgba(21,33,30,.68); }.reference-work .project-row { border-color: rgba(21,33,30,.2); background: #fff; color: #15211e; box-shadow: 0 18px 42px rgba(45,64,35,.11); }.reference-work .project-row:hover { color: #15211e; }.reference-work .project-row::before { background: linear-gradient(180deg, rgba(255,255,255,.02) 35%, rgba(18,34,28,.67) 100%); }.reference-work .project-index { color: #15211e; padding: 7px 9px; border-radius: 30px; background: rgba(255,255,255,.86); }.reference-work .project-meta { color: #fff; }.reference-work .project-meta h3 { color: #fff; }.reference-work .project-meta p { color: rgba(255,255,255,.72); }.reference-work .project-view { border-color: rgba(255,255,255,.68); background: rgba(255,255,255,.22); }.reference-work .project-row:hover .project-view { background: #c3ff48; border-color: #c3ff48; }.reference-work .project-glow { background: #c3ff48; }
.process-section { background: radial-gradient(circle at 5% 5%, rgba(188,255,60,.65), transparent 24%), #f8f8f4; color: #15211e; }.process-section::before { background: #c3ff48; opacity: .25; }.process-section::after { background-image: linear-gradient(rgba(21,33,30,.32) 1px, transparent 1px), linear-gradient(90deg, rgba(21,33,30,.32) 1px, transparent 1px); opacity: .08; }.process-sticky { border-color: rgba(21,33,30,.18); background: rgba(255,255,255,.68); box-shadow: 0 18px 38px rgba(45,64,35,.07); }.process-sticky .eyebrow, .process-sticky em { color: #6d9c00; }.process-sticky h2 { color: #15211e; }.process-steps article { border-color: rgba(21,33,30,.16); background: rgba(255,255,255,.78); box-shadow: 0 12px 28px rgba(45,64,35,.06); }.process-steps article::after { border-color: rgba(122,179,0,.55); box-shadow: 0 0 0 20px rgba(160,230,24,.08), 0 0 0 40px rgba(160,230,24,.04); }.process-steps article:hover { border-color: rgba(117,171,0,.72); background: #fff; box-shadow: -12px 16px 36px rgba(45,64,35,.13); }.process-steps article:hover::after { background: rgba(188,255,60,.25); }.process-steps article > span, .step-icon { color: #6d9c00; }.process-steps h3 { color: #15211e; }.process-steps p { color: rgba(21,33,30,.7); }
.tools-section { background: #f8f8f4; }.tools-panel { border-color: rgba(115,166,0,.6); background: linear-gradient(120deg, #c8ff54, #eaffb7 55%, #b9f7b3); color: #15211e; box-shadow: inset 0 1px rgba(255,255,255,.55), 0 25px 55px rgba(45,64,35,.13); }.tools-panel .eyebrow { color: #385600; }.tool-cloud span { border-color: rgba(21,33,30,.54); background: rgba(255,255,255,.38); color: #15211e; }.tool-cloud span:hover { color: #f8f8f4; background: #15211e; box-shadow: 0 8px 22px rgba(45,64,35,.2); }.tools-note { color: rgba(21,33,30,.72); }.toolbox-orbit { border-color: rgba(21,33,30,.38); }.toolbox-orbit::before, .toolbox-orbit::after, .toolbox-orbit span { background: #15211e; box-shadow: 0 0 20px rgba(21,33,30,.45); }.tools-panel:hover { border-color: #385600; }

/* Footer: a larger, animated final touchpoint. */
.studio-footer { padding: 34px 0 26px; overflow: hidden; border-top: 1px solid rgba(21,33,30,.18); background: #f8f8f4; color: #15211e; font-family: "DM Mono", monospace; text-transform: uppercase; }.footer-top, .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: .63rem; letter-spacing: .06em; }.footer-top p { margin: 0; }.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 33px 0 30px; }.footer-links a { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 24px 2px 17px; overflow: hidden; border-bottom: 1px solid rgba(21,33,30,.26); color: #15211e; font-family: "DM Sans", sans-serif; font-size: clamp(2.3rem, 6vw, 6.7rem); font-weight: 500; letter-spacing: -.075em; line-height: .82; text-decoration: none; transition: color .35s ease, padding .35s ease; }.footer-links a::before { position: absolute; z-index: -1; inset: auto 0 0; height: 0; background: #c3ff48; content: ""; transition: height .42s cubic-bezier(.22,1,.36,1); }.footer-links a::after { position: absolute; left: -6%; bottom: 13px; width: 112%; height: 2px; background: #15211e; content: ""; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.22,1,.36,1); }.footer-links a i { display: grid; width: clamp(40px, 5vw, 67px); height: clamp(40px, 5vw, 67px); flex: 0 0 auto; margin-left: 15px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: clamp(1.2rem, 2vw, 2rem); transition: transform .42s cubic-bezier(.22,1,.36,1), background .35s; }.footer-links a:hover { padding-left: 16px; color: #15211e; }.footer-links a:hover::before { height: 100%; }.footer-links a:hover::after { transform: scaleX(1); }.footer-links a:hover i { background: #15211e; color: #c3ff48; transform: rotate(45deg); }.footer-bottom { padding-top: 4px; color: rgba(21,33,30,.62); }.footer-bottom a { color: inherit; text-decoration: none; }.footer-bottom a:hover { color: #385600; }.footer-bottom i { margin-left: 4px; }.studio-footer .container > div { display: flex; }
@media (max-width: 575px) { .studio-footer { padding: 28px 0 20px; }.footer-links { gap: 10px; margin: 25px 0; }.footer-links a { padding: 16px 0 13px; font-size: clamp(1.9rem, 9vw, 3rem); }.footer-links a i { width: 35px; height: 35px; margin-left: 8px; font-size: 1rem; }.footer-bottom { font-size: .53rem; } }

/* Typography + hero motion pass. */
.studio-page { font-family: "Manrope", sans-serif; font-weight: 500; }.studio-page h1, .studio-page h2, .studio-page h3, .studio-page h4, .studio-page h5, .studio-page h6 { font-family: "Manrope", sans-serif; font-weight: 700; }.hero-title em, .display-copy em, .process-sticky em, .contact-shell em, .approach-heading em, .studio-logo { font-family: "Bodoni Moda", serif; }.reference-hero .hero-title { font-weight: 800; letter-spacing: -.09em; }.reference-hero .hero-title em { font-weight: 600; letter-spacing: -.095em; }.hero-stage { box-shadow: 0 28px 60px rgba(45,64,35,.08); }.reference-hero .hero-title .reveal-word { will-change: transform, opacity; }.reference-hero .hero-portrait-wrap.reveal { opacity: 0; transform: translate(-50%, 48px) scale(.94); animation: portrait-rise 1s cubic-bezier(.22,1,.36,1) forwards .52s; }.reference-hero .availability-pill.reveal { opacity: 0; animation: pop-in .55s cubic-bezier(.22,1,.36,1) forwards 1.05s, badge-float 3.5s ease-in-out infinite 1.7s; }.reference-hero .hero-note.reveal { opacity: 0; transform: translateX(20px); animation: side-in .7s cubic-bezier(.22,1,.36,1) forwards 1.1s; }.reference-hero .hero-contact.reveal { opacity: 0; transform: translateY(15px); animation: fade-up .6s ease forwards 1.28s; }.reference-hero .hero-proof.reveal { opacity: 0; transform: translateY(12px); animation: fade-up .6s ease forwards 1.35s; }.hero-glow { animation: hero-breathe 6s ease-in-out infinite; }.reference-hero .hero-clients span { transition: color .3s ease, transform .3s ease; }.reference-hero .hero-clients span:hover { color: #5f8e00; transform: translateY(-4px); }.hero-portrait-wrap::after { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.55) 48%, transparent 67%); content: ""; transform: translateX(-130%); animation: portrait-sheen 2s ease 1.4s both; pointer-events: none; }
@keyframes portrait-rise { to { opacity: 1; transform: translate(-50%, 0) scale(1); } } @keyframes pop-in { to { opacity: 1; } } @keyframes side-in { to { opacity: 1; transform: translateX(0); } } @keyframes badge-float { 50% { transform: translateY(-6px); } } @keyframes hero-breathe { 50% { opacity: 1; transform: translateX(-50%) scale(1.12); } } @keyframes portrait-sheen { to { transform: translateX(130%); } }
@media (max-width: 1150px) { .reference-hero .hero-title { font-size: clamp(4.1rem, 8.6vw, 6.6rem); }.hero-note { right: 25px; }.hero-contact { right: 38px; }.hero-stage { min-height: 610px; }.hero-portrait-wrap { height: 420px; } }
@media (max-width: 767px) { .studio-page { font-size: 16px; }.reference-hero { padding-top: 94px; }.reference-hero .container { padding-right: 16px; padding-left: 16px; }.reference-hero .hero-title { padding-top: 88px; font-size: clamp(3.45rem, 15.2vw, 5.6rem); line-height: .82; }.reference-hero .hero-title em { font-size: 1em; }.reference-hero .hero-stage { min-height: 548px; }.reference-hero .hero-portrait-wrap { width: 230px; height: 313px; }.reference-hero .availability-pill { top: 268px; }.reference-hero .hero-note { top: 289px; }.reference-hero .hero-contact { bottom: 40px; }.reference-hero .hero-proof { bottom: 43px; }.hero-topline { padding-bottom: 14px; }.section-kicker { font-size: .61rem; }.display-copy { font-size: clamp(2.45rem, 11vw, 4rem); }.contact-shell h2 { font-size: clamp(3.75rem, 15vw, 6rem); }.process-sticky h2 { font-size: clamp(3rem, 13vw, 4.4rem); } }

/* Subtle hero motion and responsive layout reinforcement. */
.reference-hero { --hero-x: 0px; --hero-y: 0px; }.hero-glow { animation: hero-breathe 8s ease-in-out infinite; }.hero-portrait-wrap { transition: transform .8s cubic-bezier(.22,1,.36,1); transform: translate(calc(-50% + var(--hero-x)), var(--hero-y)); animation: portrait-float 6s ease-in-out infinite; }.reference-hero .hero-title { position: relative; transition: transform .8s cubic-bezier(.22,1,.36,1); transform: translate(calc(var(--hero-x) * -.22), calc(var(--hero-y) * -.16)); }.hero-contact a { animation: contact-pulse 3.4s ease-in-out infinite; }.hero-contact a:hover { animation-play-state: paused; }.availability-pill { animation: status-pulse 3s ease-in-out infinite; }
@keyframes hero-breathe { 0%, 100% { opacity: .72; transform: translateX(-50%) scale(.94); } 50% { opacity: .96; transform: translateX(-50%) scale(1.08); } } @keyframes portrait-float { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 9px; } } @keyframes contact-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(160,230,24,0); } 50% { box-shadow: 0 0 0 9px rgba(160,230,24,.15); } } @keyframes status-pulse { 50% { transform: translateY(-3px); box-shadow: 0 9px 20px rgba(74,104,30,.12); } }
@media (max-width: 1199px) { .reference-hero .container { max-width: 1100px; }.hero-stage { min-height: 590px; }.reference-hero .hero-title { font-size: clamp(3.8rem, 8vw, 6.5rem); }.hero-portrait-wrap { width: min(305px, 35vw); height: 398px; }.hero-note { right: 28px; }.hero-contact { right: 48px; }.practice-section, .work-section { padding-left: 0; padding-right: 0; } }
@media (max-width: 991px) { .studio-nav .container { max-width: 94%; }.reference-hero { min-height: 760px; }.reference-hero .container { max-width: 94%; }.hero-stage { min-height: 570px; }.reference-hero .hero-title { padding-top: 100px; font-size: clamp(3.55rem, 9vw, 6rem); }.hero-portrait-wrap { width: 280px; height: 365px; }.hero-note { max-width: 190px; top: 296px; font-size: .74rem; }.availability-pill { top: 295px; }.hero-contact { right: 29px; bottom: 64px; }.hero-proof { bottom: 60px; }.hero-clients { font-size: .57rem; }.approach-cards { padding-left: 25px; padding-right: 25px; }.gallery-grid { gap: 14px !important; }.contact-shell { padding: 52px 6%; } }
@media (max-width: 767px) { .studio-page .container { width: min(100% - 32px, 620px); }.studio-nav { padding: 15px 0; }.studio-logo { font-size: 1.1rem; }.menu-button { width: 36px; height: 36px; }.reference-hero { min-height: auto; padding: 88px 0 25px; }.reference-hero .container { max-width: none; }.reference-hero .hero-topline { padding-bottom: 12px; font-size: .51rem; }.hero-stage { min-height: 520px; }.reference-hero .hero-award { top: 30px; }.reference-hero .hero-title { padding-top: 75px; font-size: clamp(3.15rem, 13.5vw, 5rem); }.hero-portrait-wrap { width: min(52vw, 255px); height: 330px; }.hero-note { top: 261px; right: 14px; max-width: 126px; font-size: .59rem; }.availability-pill { left: 14px; top: 238px; font-size: .53rem; }.hero-contact { right: 15px; bottom: 37px; }.hero-proof { bottom: 37px; left: 14px; }.hero-clients { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; padding: 18px 0 0; font-size: .49rem; }.hero-clients span:nth-child(n+4) { display: block; }.reference-practice, .reference-work, .process-section { padding-top: 75px; }.reference-work { padding-bottom: 78px; }.contact-section { padding: 65px 0 42px; }.contact-shell h2 { font-size: clamp(3.55rem, 15vw, 5.7rem); }.footer-top, .footer-bottom { font-size: .55rem; } }
@media (prefers-reduced-motion: reduce) { .hero-glow, .hero-portrait-wrap, .hero-contact a, .availability-pill { animation: none !important; }.hero-portrait-wrap, .reference-hero .hero-title { transform: none !important; } }