:root {
  color-scheme: dark;
  --paper: #01010D;
  --paper-soft: #0e101b;
  --ink: #edf1ff;
  --muted: #a8afc9;
  --line: rgba(136, 249, 192, 0.18);
  --green: #88F9C0;
  --brand-indigo: #6331FB;
  --brand-violet: #7d57ff;
  --brand-mint: #88F9C0;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'DM Sans', sans-serif;
  --display: 'DM Sans', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: radial-gradient(circle at top, rgba(99, 49, 251, 0.22), transparent 28%), linear-gradient(180deg, #01010D 0%, #0a0c17 100%); color: var(--ink); font-family: var(--sans); font-size: 15px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.page-width { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.site-header { position: relative; z-index: 10; padding: 15px 24px; background: rgba(1, 1, 13, 0.8); border-bottom: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); }
.site-header::after { position: absolute; right: 0; bottom: -5px; left: 0; height: 5px; background: linear-gradient(90deg, rgba(99,49,251,0.3), rgba(136,249,192,0.25), rgba(99,49,251,0.3)); clip-path: polygon(0 0, 4% 38%, 8% 0, 13% 58%, 18% 0, 24% 45%, 30% 0, 36% 67%, 43% 0, 49% 48%, 55% 0, 62% 62%, 69% 0, 76% 48%, 82% 0, 89% 56%, 94% 0, 100% 46%, 100% 100%, 0 100%); content: ''; }
.nav-shell { width: min(1132px, 100%); min-height: 48px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.brand-logo { display: block; width: 168px; height: 49px; object-fit: contain; filter: brightness(1.1); }
.site-menu { display: flex; align-items: center; gap: 35px; }
.nav-link { color: #bec7dd; font-size: 13px; transition: color .2s ease; }
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-cta { display: inline-flex; min-height: 40px; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid rgba(99,49,251,0.5); border-radius: 99px; background: rgba(99,49,251,0.08); color: var(--ink); font-size: 13px; transition: background .2s, border-color .2s; }
.nav-cta:hover { background: rgba(99,49,251,0.16); border-color: rgba(136,249,192,0.5); }
.menu-toggle { display: none; }
.hero { min-height: 650px; display: grid; grid-template-columns: 1fr 1.02fr; align-items: center; gap: 48px; padding-top: 50px; padding-bottom: 92px; }
.hero-copy { position: relative; z-index: 1; padding-bottom: 7px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .035em; }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--brand-mint); box-shadow: 0 0 0 3px rgba(136, 249, 192, 0.15); }
.eyebrow-divider { color: rgba(255,255,255,0.3); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: 0; }
.hero h1, .contact-intro h1 { margin-bottom: 23px; font-size: clamp(43px, 5.1vw, 67px); line-height: 1.08; }
.serif-accent { color: var(--brand-mint); font-family: var(--serif); font-weight: 400; font-style: italic; }
.hero-intro { max-width: 420px; margin-bottom: 28px; color: rgba(237, 241, 255, 0.74); font-size: 15px; line-height: 1.8; }
.language-section { margin: 22px 0 26px; }
.language-heading { margin: 0 0 13px; color: var(--muted); font-size: 11px; font-weight: 500; }
.language-list { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.language-item { display: flex; min-width: 54px; flex-direction: column; align-items: center; gap: 7px; color: rgba(237,241,255,0.8); font-size: 10px; }
.language-item img { display: block; width: 25px; height: 25px; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 18px; padding: 0 19px; border: 0; border-radius: 99px; cursor: pointer; font-size: 12px; font-weight: 500; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: linear-gradient(135deg, var(--brand-indigo), #7c4dff); color: white; }
.button-dark:hover { background: linear-gradient(135deg, #7c4dff, var(--brand-indigo)); }
.text-link { color: #cbd8ff; font-size: 12px; }
.text-link span { margin-left: 4px; }
.hero-art { position: relative; display: grid; min-height: 440px; align-items: center; }
.hero-glow { position: absolute; inset: 35px 5px; border-radius: 48%; background: radial-gradient(ellipse at center, rgba(99,49,251,0.38), rgba(136,249,192,0.08), transparent 74%); }
.portrait-sheet { position: relative; z-index: 1; width: min(82%, 420px); margin: 0 auto; padding: 11px 11px 0; background: rgba(10, 12, 19, 0.9); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 24px 40px rgba(20, 26, 40, 0.45); transform: rotate(2deg); }
.portrait-sheet::before { position: absolute; z-index: 2; top: -10px; left: calc(50% - 38px); width: 76px; height: 21px; background: rgba(99,49,251,0.38); content: ''; transform: rotate(-4deg); }
.portrait-sheet img { display: block; width: 100%; height: 425px; object-fit: cover; object-position: center 32%; }
.portrait-sheet figcaption { display: flex; min-height: 43px; align-items: center; justify-content: space-between; gap: 8px; color: rgba(237,241,255,0.8); font-size: 9px; }
.portrait-sheet figcaption > span:first-child { color: var(--brand-mint); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.portrait-sheet figcaption b { padding-left: 4px; color: var(--brand-mint); }
.portrait-note { position: absolute; z-index: 2; top: 72%; right: 0; padding: 12px 15px; background: rgba(14,16,27,0.92); border: 1px solid rgba(136,249,192,0.2); box-shadow: 0 10px 20px rgba(26, 22, 40, 0.4); color: var(--brand-mint); font: italic 15px/1.3 var(--serif); transform: rotate(-4deg); }
.work-section { padding-top: 63px; padding-bottom: 112px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 26px; }
.section-heading .eyebrow { margin-bottom: 9px; }
.section-heading h2 { margin: 0; font-size: 31px; }
.heading-period { color: var(--brand-mint); }
.section-count { padding-bottom: 5px; color: rgba(168,175,201,0.7); font: 10px var(--display); }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid rgba(136,249,192,0.18); border-radius: 22px; background: linear-gradient(180deg, rgba(14, 16, 27, 0.96), rgba(9, 11, 18, 0.96)); box-shadow: 0 18px 30px rgba(11, 13, 24, 0.25); }
.project-image { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: rgba(255,255,255,0.02); }
.project-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.project-card:hover .project-image img { transform: scale(1.04); }
.project-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 18px 20px; }
.project-meta h3 { margin: 0; font: 600 18px var(--display); }
.project-meta p { margin: 0; color: rgba(237,241,255,0.72); font-size: 12px; line-height: 1.7; }
.project-meta a { color: var(--brand-mint); }
.project-type { order: -1; color: var(--brand-mint); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.project-actions { width: 100%; margin-top: 4px; }
.project-link { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid rgba(99,49,251,0.65); border-radius: 999px; background: rgba(99,49,251,0.12); color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.project-link:hover, .project-link:focus-visible { background: rgba(136,249,192,0.12); border-color: rgba(136,249,192,0.5); transform: translateY(-1px); }
.approach-band { background: linear-gradient(90deg, rgba(99,49,251,0.18), rgba(136,249,192,0.05)); border-top: 1px solid rgba(136,249,192,0.12); border-bottom: 1px solid rgba(136,249,192,0.12); }
.approach-inner { display: flex; min-height: 180px; align-items: center; gap: 23px; }
.approach-mark { align-self: center; color: var(--brand-mint); font-size: 28px; }
.approach-inner p { margin: 0; font: 23px/1.35 var(--display); }
.approach-inner p span { color: rgba(237,241,255,0.72); font: italic 22px var(--serif); }
.round-arrow { display: grid; width: 42px; height: 42px; place-items: center; margin-left: auto; border: 1px solid rgba(136,249,192,0.4); border-radius: 50%; color: var(--brand-mint); font-size: 15px; transition: background .2s, transform .2s; }
.round-arrow:hover { background: rgba(136,249,192,0.08); transform: translateY(-2px); }
.closing { padding-top: 60px; padding-bottom: 64px; }
.closing-actions { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 24px; }
.social-links { display: flex; align-items: center; gap: 9px; }
.social-links .icon-link { color: #fff; }
.social-links .brand-icon { filter: brightness(0) invert(1); }
.icon-link { position: relative; display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 1px solid rgba(136,249,192,0.2); border-radius: 50%; background: rgba(9,11,18,0.85); color: var(--brand-mint); transition: background .2s, color .2s, border-color .2s, transform .2s; }
.icon-link svg { width: 18px; height: 18px; stroke-width: 1.8; }
.icon-link .brand-icon { display: block; width: 18px; height: 18px; }
.icon-link:hover { transform: translateY(-2px); border-color: rgba(99,49,251,0.8); background: linear-gradient(135deg, rgba(99,49,251,0.35), rgba(136,249,192,0.12)); color: #fff; }
.icon-link:focus-visible { outline: 2px solid rgba(136,249,192,0.8); outline-offset: 3px; }
.icon-tooltip { position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 50%; padding: 6px 9px; border-radius: 4px; background: rgba(9,11,18,0.95); color: white; font-size: 10px; font-weight: 500; line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 3px); transition: opacity .15s, transform .15s; }
.icon-link:hover .icon-tooltip, .icon-link:focus-visible .icon-tooltip { opacity: 1; transform: translate(-50%, 0); }
.footer-nav { display: flex; align-items: center; gap: 7px; }
.footer-nav .icon-link { width: 34px; height: 34px; flex-basis: 34px; background: transparent; }
.footer-nav .icon-link svg { width: 16px; height: 16px; }
.footer-nav .icon-link:hover { background: linear-gradient(135deg, rgba(99,49,251,0.38), rgba(136,249,192,0.08)); }
.site-footer { display: flex; min-height: 82px; align-items: center; justify-content: space-between; border-top: 1px dashed rgba(136,249,192,0.16); color: rgba(237,241,255,0.62); font-size: 10px; }
.site-footer .brand { color: var(--ink); font-size: 12px; }
.site-footer .brand-logo { width: 148px; height: 43px; }
.site-footer p { margin: 0; }
.legal-nav { display: flex; align-items: center; gap: 16px; }
.legal-nav a { color: inherit; transition: color .2s; }
.legal-nav a:hover, .legal-nav a:focus-visible { color: var(--brand-mint); }
.legal-page { max-width: 820px; min-height: calc(100vh - 160px); padding-top: 90px; padding-bottom: 90px; }
.legal-page h1 { margin-bottom: 10px; font-size: clamp(42px, 6vw, 64px); }
.legal-page .legal-updated { margin-bottom: 42px; color: var(--muted); font-size: 12px; }
.legal-page h2 { margin: 34px 0 10px; font-size: 21px; }
.legal-page p, .legal-page li { color: rgba(237,241,255,0.74); font-size: 14px; line-height: 1.8; }
.legal-page ul { padding-left: 21px; }
#text_link { font-weight: 900; color: var(--brand-mint);}

/* Contact page */
.contact-main { display: grid; min-height: calc(100vh - 160px); grid-template-columns: .9fr 1fr; align-content: center; column-gap: 12%; padding-top: 95px; padding-bottom: 70px; }
.contact-intro { align-self: center; padding-bottom: 30px; }
.contact-intro .eyebrow { margin-bottom: 24px; }
.contact-intro h1 { font-size: clamp(46px, 5.6vw, 70px); }
.contact-intro .hero-intro { max-width: 370px; }
.contact-socials { margin: 19px 0 23px; }
.contact-form-section { align-self: center; padding: 34px; border: 0; border-radius: 0; background: rgba(12, 14, 21, 0.94); box-shadow: 0 18px 32px rgba(0,0,0,0.25); clip-path: polygon(0 1%, 8% .4%, 17% 1.3%, 27% 0, 37% 1%, 48% .2%, 59% 1.4%, 70% 0, 82% 1.2%, 92% .3%, 100% 1%, 99% 12%, 100% 24%, 99% 36%, 100% 49%, 99% 62%, 100% 75%, 99% 87%, 100% 99%, 90% 100%, 80% 99%, 69% 100%, 58% 99%, 47% 100%, 35% 99%, 23% 100%, 12% 99%, 0 100%, 1% 87%, 0 75%, 1% 62%, 0 49%, 1% 37%, 0 25%, 1% 13%); }
.contact-form { display: flex; flex-direction: column; }
.contact-form label { margin: 0 0 8px; color: rgba(237,241,255,0.72); font-size: 11px; font-weight: 500; }
.contact-form input, .contact-form textarea { width: 100%; margin-bottom: 21px; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,0.12); border-radius: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; resize: vertical; transition: border-color .2s; }
.contact-form input:focus, .contact-form textarea:focus { border-color: rgba(136,249,192,0.8); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(168,175,201,0.7); }
.form-submit { align-self: flex-start; margin-top: 2px; }
.form-note { margin: 12px 0 0; color: rgba(168,175,201,0.7); font-size: 10px; }
.contact-foot { display: flex; grid-column: 1/-1; justify-content: space-between; padding-top: 32px; color: rgba(168,175,201,0.7); font-size: 10px; }
.contact-foot > span:last-child { display: flex; align-items: center; gap: 9px; }
.contact-foot .status-dot { width: 6px; height: 6px; flex-basis: 6px; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.project-card:nth-child(2) { transition-delay: .08s; }
.project-card:nth-child(3) { transition-delay: .16s; }
.connect-blob { position: fixed; z-index: 20; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--brand-mint); transform: translate3d(var(--connect-x, calc(100vw - 92px)), var(--connect-y, calc(100vh - 90px)), 0) rotate(var(--connect-tilt, 0deg)); transition: transform 2.4s cubic-bezier(.2,.72,.24,1); }
.connect-blob-art { display: block; width: 78px; height: 72px; overflow: visible; filter: drop-shadow(0 12px 18px rgba(63, 38, 112, 0.35)); animation: connect-float 3s ease-in-out infinite; transform-origin: center; }
.connect-blob-body { fill: url(#connect-gradient); stroke: rgba(136,249,192,0.55); stroke-width: 1.6; }
.connect-pupil { fill: #090d18; transform: translate(var(--connect-look-x, 0px), var(--connect-look-y, 0px)); transform-box: fill-box; transform-origin: center; transition: transform .12s ease-out; }
.connect-message { position: absolute; z-index: 1; bottom: calc(100% + 9px); left: 50%; width: max-content; max-width: min(220px, 70vw); padding: 9px 12px; border: 1px solid rgba(136,249,192,0.2); border-radius: 12px 12px 12px 3px; background: rgba(5, 8, 16, 0.95); box-shadow: 0 12px 24px rgba(0,0,0,0.18); color: rgba(237,241,255,0.82); font-size: 11px; line-height: 1.35; opacity: 0; transform: translate(-50%, 5px) scale(.96); transform-origin: bottom center; transition: opacity .18s ease, transform .18s ease; }
.connect-blob[data-side="left"] .connect-message { left: 0; border-radius: 12px 12px 12px 3px; transform: translate(0, 5px) scale(.96); transform-origin: bottom left; }
.connect-blob[data-side="right"] .connect-message { left: auto; right: 0; transform: translate(0, 5px) scale(.96); transform-origin: bottom right; }
.connect-blob[data-message-position="below"] .connect-message { top: calc(100% + 9px); bottom: auto; border-radius: 3px 12px 12px 12px; transform-origin: top left; }
.connect-blob[data-message-position="below"][data-side="right"] .connect-message { border-radius: 12px 3px 12px 12px; transform-origin: top right; }
.connect-blob.has-message .connect-message { opacity: 1; transform: translate(0, 0) scale(1); }
.connect-blob.is-giggling .connect-blob-art { animation: connect-giggle .75s ease-in-out; }
.connect-blob:hover .connect-blob-art, .connect-blob:focus-visible .connect-blob-art { animation: connect-giggle .7s ease-in-out infinite alternate; }
.connect-blob:focus-visible { border-radius: 12px; outline: 2px solid rgba(136,249,192,0.8); outline-offset: 4px; }
@keyframes connect-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes connect-giggle { 0% { transform: rotate(-7deg) translateY(0); } 25% { transform: rotate(9deg) translateY(-2px); } 50% { transform: rotate(-9deg) translateY(0); } 75% { transform: rotate(7deg) translateY(-2px); } 100% { transform: rotate(-5deg) translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 850px) {
  .page-width { width: min(100% - 56px, 650px); }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 28px; padding-top: 77px; padding-bottom: 75px; }
  .hero-copy { max-width: 570px; }
  .hero h1 { font-size: clamp(48px, 8vw, 67px); }
  .hero-art { min-height: 370px; margin-inline: 12px; }
  .portrait-sheet { width: min(76%, 390px); }
  .portrait-sheet img { height: 350px; }
  .work-section { padding-top: 30px; padding-bottom: 85px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-main { min-height: auto; grid-template-columns: 1fr 1fr; gap: 7%; padding-top: 95px; padding-bottom: 60px; }
  .contact-form-section { padding: 26px; }
  .contact-intro h1 { font-size: clamp(43px, 7vw, 60px); }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 74px; }
  .connect-blob-art { width: 58px; height: 51px; }
  .page-width { width: calc(100% - 40px); }
  .site-header { padding: 10px 20px; }
  .brand-logo { width: 142px; height: 42px; }
  .nav-shell { min-height: 43px; }
  .menu-toggle { display: flex; width: 38px; height: 38px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; background: transparent; cursor: pointer; }
  .menu-toggle span { width: 13px; height: 1px; background: #fff; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .site-menu { position: absolute; top: 58px; right: 20px; left: 20px; display: none; align-items: stretch; gap: 0; padding: 8px 16px 13px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(10, 12, 19, 0.98); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); }
  .site-menu.is-open { display: flex; flex-direction: column; }
  .nav-link { padding: 13px 1px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13px; }
  .nav-cta { align-self: flex-start; margin-top: 11px; }
  .hero { gap: 23px; padding-top: 58px; padding-bottom: 64px; }
  .eyebrow { margin-bottom: 19px; font-size: 10px; }
  .hero h1, .contact-intro h1 { font-size: clamp(42px, 11vw, 57px); }
  .hero-intro { font-size: 14px; line-height: 1.75; }
  .hero-actions { flex-wrap: wrap; gap: 17px; }
  .hero-art { min-height: 365px; margin-inline: 0; }
  .portrait-sheet { width: min(83%, 310px); padding: 9px 9px 0; }
  .portrait-sheet img { height: 295px; }
  .portrait-sheet figcaption { min-height: 37px; font-size: 8px; }
  .portrait-sheet figcaption > span:first-child { font-size: 8px; }
  .portrait-note { right: -3px; font-size: 13px; }
  .work-section { padding-top: 24px; padding-bottom: 68px; }
  .section-heading h2 { font-size: 27px; }
  .project-grid { grid-template-columns: 1fr; gap: 28px; }
  .project-meta { padding-top: 11px; }
  .project-link { font-size: 10px; }
  .approach-inner { min-height: 150px; gap: 13px; }
  .approach-mark { font-size: 22px; }
  .approach-inner p { font-size: 17px; }
  .approach-inner p span { font-size: 17px; }
  .round-arrow { width: 37px; height: 37px; flex: 0 0 37px; }
  .closing { padding-top: 50px; padding-bottom: 55px; }
  .closing-actions { align-items: flex-start; flex-direction: column; gap: 22px; }
  .social-links { gap: 3px; }
  .social-links .icon-link { width: 40px; height: 40px; flex-basis: 40px; }
  .site-footer { min-height: 100px; flex-wrap: wrap; gap: 5px 15px; padding-top: 17px; padding-bottom: 17px; }
  .site-footer p { order: 3; width: 100%; }
  .site-footer > span { font-size: 9px; }
  .legal-nav { order: 3; width: 100%; font-size: 10px; }
  .legal-page { min-height: calc(100vh - 200px); padding-top: 60px; padding-bottom: 55px; }
  .legal-page .legal-updated { margin-bottom: 32px; }
  .contact-main { display: flex; flex-direction: column; gap: 34px; padding-top: 65px; padding-bottom: 45px; }
  .contact-intro { padding-bottom: 0; }
  .contact-intro h1 { font-size: clamp(45px, 12vw, 61px); }
  .contact-form-section { padding: 23px 20px; }
  .contact-foot { gap: 12px; flex-direction: column; padding-top: 23px; font-size: 9px; }
}

/* Contact page */
.contact-main { display: grid; min-height: calc(100vh - 160px); grid-template-columns: .9fr 1fr; align-content: center; column-gap: 12%; padding-top: 95px; padding-bottom: 70px; }
.contact-intro { align-self: center; padding-bottom: 30px; }
.contact-intro .eyebrow { margin-bottom: 24px; }
.contact-intro h1 { font-size: clamp(46px, 5.6vw, 70px); }
.contact-intro .hero-intro { max-width: 370px; }
.contact-socials { margin: 19px 0 23px; }
.contact-form-section { align-self: center; padding: 34px; border: 0; border-radius: 0; background: #fffdf8; box-shadow: 4px 7px 0 #e1d7c7, 0 12px 25px rgb(65 52 34 / 7%); clip-path: polygon(0 1%, 8% .4%, 17% 1.3%, 27% 0, 37% 1%, 48% .2%, 59% 1.4%, 70% 0, 82% 1.2%, 92% .3%, 100% 1%, 99% 12%, 100% 24%, 99% 36%, 100% 49%, 99% 62%, 100% 75%, 99% 87%, 100% 99%, 90% 100%, 80% 99%, 69% 100%, 58% 99%, 47% 100%, 35% 99%, 23% 100%, 12% 99%, 0 100%, 1% 87%, 0 75%, 1% 62%, 0 49%, 1% 37%, 0 25%, 1% 13%); }
.contact-form { display: flex; flex-direction: column; }
.contact-form label { margin: 0 0 8px; color: #555951; font-size: 11px; font-weight: 500; }
.contact-form input, .contact-form textarea { width: 100%; margin-bottom: 21px; padding: 12px 0; border: 0; border-bottom: 1px solid #dedfd8; border-radius: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; resize: vertical; transition: border-color .2s; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #758671; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #a1a39b; }
.form-submit { align-self: flex-start; margin-top: 2px; }
.form-note { margin: 12px 0 0; color: #94978e; font-size: 10px; }
.contact-foot { display: flex; grid-column: 1/-1; justify-content: space-between; padding-top: 32px; color: #878a82; font-size: 10px; }
.contact-foot > span:last-child { display: flex; align-items: center; gap: 9px; }
.contact-foot .status-dot { width: 6px; height: 6px; flex-basis: 6px; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.project-card:nth-child(2) { transition-delay: .08s; }
.project-card:nth-child(3) { transition-delay: .16s; }
.connect-blob { position: fixed; z-index: 20; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--brand-indigo); transform: translate3d(var(--connect-x, calc(100vw - 92px)), var(--connect-y, calc(100vh - 90px)), 0) rotate(var(--connect-tilt, 0deg)); transition: transform 2.4s cubic-bezier(.2,.72,.24,1); }
.connect-blob-art { position: relative; display: block; width: 78px; height: 78px; overflow: visible; filter: drop-shadow(0 8px 16px rgba(99, 49, 251, 0.25)); animation: connect-float 5.2s ease-in-out infinite; transform-origin: center; }
.connect-blob-liquid { position: absolute; inset: 4px 5px; border-radius: 50% 50% 50% 50% / 49% 51% 49% 51%; background: linear-gradient(145deg, #b19dce 0%, #8d72b4 24%, #7350a2 48%, #501b89 76%, #15245f 100%); filter: url(#connect-goo); transform: translate3d(calc(var(--connect-fluid-x, 0) * 4px), calc(var(--connect-fluid-y, 0) * 3px), 0) scaleX(calc(1 + var(--connect-fluid-x, 0) * .035)) scaleY(calc(1 + var(--connect-fluid-y, 0) * .025)); transition: transform .65s cubic-bezier(.18,.72,.24,1); animation: connect-water-morph 3.1s ease-in-out infinite; }
.connect-blob-bulge { position: absolute; display: block; border-radius: 50%; background: inherit; }
.connect-blob-bulge-top { top: -5px; left: 34%; width: 30px; height: 29px; animation: connect-drift-left 3.8s ease-in-out infinite; }
.connect-blob-bulge-right { top: 26%; right: -6px; width: 27px; height: 26px; animation: connect-drift-right 4.1s ease-in-out infinite; }
.connect-blob-bulge-bottom { bottom: -6px; left: 46%; width: 31px; height: 30px; animation: connect-drift-left 4s ease-in-out infinite reverse; }
.connect-blob-bulge-left { bottom: 24%; left: -6px; width: 26px; height: 25px; animation: connect-drift-right 4.4s ease-in-out infinite reverse; }
.connect-blob-gloss { position: absolute; z-index: 1; inset: 2px 3px 4px; border-radius: inherit; background: linear-gradient(155deg, rgba(255,255,255,.38), rgba(255,255,255,.1) 27%, transparent 48%); background-size: 180% 180%; box-shadow: inset 1px 2px 2px rgba(255,255,255,.3), inset -4px -5px 10px rgba(29,14,92,.24); pointer-events: none; animation: connect-gloss-drift 5.5s ease-in-out infinite; }
.connect-blob-gloss::before, .connect-blob-gloss::after { position: absolute; display: block; border-top: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; content: ''; pointer-events: none; }
.connect-blob-gloss::before { top: 7px; left: 15px; width: 22px; height: 9px; transform: rotate(-24deg); box-shadow: 0 -2px 0 -1px rgba(255,255,255,.28); }
.connect-blob-gloss::after { top: 17px; right: 10px; width: 13px; height: 7px; transform: rotate(38deg); opacity: .7; }
.connect-highlight-line { position: absolute; z-index: 2; display: block; height: 7px; border-top: 2px solid rgba(255,255,255,.96); border-radius: 50%; filter: drop-shadow(0 0 2px rgba(255,255,255,.65)); pointer-events: none; }
.connect-highlight-line-one { top: 8px; left: 12px; width: 23px; transform: rotate(-25deg); }
.connect-highlight-line-two { top: 17px; left: 8px; width: 12px; border-top-width: 1.5px; opacity: .85; transform: rotate(-42deg); }
.connect-highlight-line-three { top: 13px; right: 9px; width: 14px; border-top-width: 1.5px; opacity: .82; transform: rotate(36deg); }
.connect-blob-face { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; }
.connect-pupil { fill: #171925; transform: translate(var(--connect-look-x, 0px), var(--connect-look-y, 0px)); transform-box: fill-box; transform-origin: center; transition: transform .12s ease-out; }
.connect-message { position: absolute; z-index: 1; bottom: calc(100% + 9px); left: 50%; width: max-content; max-width: min(220px, 70vw); padding: 9px 12px; border: 1px solid rgba(136,249,192,0.3); border-radius: 12px 12px 3px 12px; background: rgba(5,8,16,0.97); box-shadow: 0 8px 20px rgb(0 0 0 / 32%); color: #fff; font-size: 11px; line-height: 1.45; opacity: 0; pointer-events: none; transform: translate(-50%, 5px) scale(.96); transform-origin: bottom center; transition: opacity .25s ease, transform .25s ease; }
.connect-blob[data-side="left"] .connect-message { left: 0; border-radius: 12px 12px 12px 3px; transform: translate(0, 5px) scale(.96); transform-origin: bottom left; }
.connect-blob[data-side="right"] .connect-message { left: auto; right: 0; transform: translate(0, 5px) scale(.96); transform-origin: bottom right; }
.connect-blob[data-message-position="below"] .connect-message { top: calc(100% + 9px); bottom: auto; border-radius: 3px 12px 12px 12px; transform-origin: top left; }
.connect-blob[data-message-position="below"][data-side="right"] .connect-message { border-radius: 12px 3px 12px 12px; transform-origin: top right; }
.connect-blob.has-message .connect-message { opacity: 1; transform: translate(0, 0) scale(1); }
.connect-blob.is-giggling .connect-blob-art { animation: connect-giggle .75s ease-in-out; }
.connect-blob:hover .connect-blob-art, .connect-blob:focus-visible .connect-blob-art { animation: connect-giggle .7s ease-in-out infinite alternate; }
.connect-blob:focus-visible { border-radius: 12px; outline: 2px solid var(--brand-violet); outline-offset: 4px; }
@keyframes connect-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes connect-water-morph { 0%, 100% { border-radius: 50% 50% 50% 50% / 49% 51% 49% 51%; } 25% { border-radius: 40% 60% 56% 44% / 58% 42% 56% 44%; } 50% { border-radius: 60% 40% 43% 57% / 42% 58% 40% 60%; } 75% { border-radius: 45% 55% 60% 40% / 56% 44% 58% 42%; } }
@keyframes connect-drift-left { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4px, -5px) scale(1.12); } }
@keyframes connect-drift-right { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4px, 4px) scale(.9); } }
@keyframes connect-gloss-drift { 0%, 100% { background-position: 0% 0%; opacity: .8; } 50% { background-position: 100% 100%; opacity: 1; } }
@keyframes connect-giggle { 0% { transform: rotate(-7deg) translateY(0); } 25% { transform: rotate(9deg) translateY(-2px); } 50% { transform: rotate(-9deg) translateY(0); } 75% { transform: rotate(7deg) translateY(-2px); } 100% { transform: rotate(-5deg) translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 850px) {
  .page-width { width: min(100% - 56px, 650px); }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 28px; padding-top: 77px; padding-bottom: 75px; }
  .hero-copy { max-width: 570px; }
  .hero h1 { font-size: clamp(48px, 8vw, 67px); }
  .hero-art { min-height: 370px; margin-inline: 12px; }
  .portrait-sheet { width: min(76%, 390px); }
  .portrait-sheet img { height: 350px; }
  .work-section { padding-top: 30px; padding-bottom: 85px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-main { min-height: auto; grid-template-columns: 1fr 1fr; gap: 7%; padding-top: 95px; padding-bottom: 60px; }
  .contact-form-section { padding: 26px; }
  .contact-intro h1 { font-size: clamp(43px, 7vw, 60px); }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 74px; }
  .connect-blob-art { width: 58px; height: 58px; }
  .page-width { width: calc(100% - 40px); }
  .site-header { padding: 10px 20px; }
  .brand-logo { width: 142px; height: 42px; }
  .nav-shell { min-height: 43px; }
  .menu-toggle { display: flex; width: 38px; height: 38px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid #dedfd9; border-radius: 50%; background: transparent; cursor: pointer; }
  .menu-toggle span { width: 13px; height: 1px; background: #363831; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .site-menu { position: absolute; top: 58px; right: 20px; left: 20px; display: none; align-items: stretch; gap: 0; padding: 8px 16px 13px; border: 1px solid #e5e6df; border-radius: 12px; background: rgb(250 250 247 / 97%); box-shadow: 0 12px 32px rgb(35 38 31 / 10%); }
  .site-menu.is-open { display: flex; flex-direction: column; }
  .nav-link { padding: 13px 1px; border-bottom: 1px solid #edeee8; font-size: 13px; }
  .nav-cta { align-self: flex-start; margin-top: 11px; }
  .hero { gap: 23px; padding-top: 58px; padding-bottom: 64px; }
  .eyebrow { margin-bottom: 19px; font-size: 10px; }
  .hero h1, .contact-intro h1 { font-size: clamp(42px, 11vw, 57px); }
  .hero-intro { font-size: 14px; line-height: 1.75; }
  .hero-actions { flex-wrap: wrap; gap: 17px; }
  .hero-art { min-height: 365px; margin-inline: 0; }
  .portrait-sheet { width: min(83%, 310px); padding: 9px 9px 0; }
  .portrait-sheet img { height: 295px; }
  .portrait-sheet figcaption { min-height: 37px; font-size: 8px; }
  .portrait-sheet figcaption > span:first-child { font-size: 8px; }
  .portrait-note { right: -3px; font-size: 13px; }
  .work-section { padding-top: 24px; padding-bottom: 68px; }
  .section-heading h2 { font-size: 27px; }
  .project-grid { grid-template-columns: 1fr; gap: 28px; }
  .project-meta { padding-top: 11px; }
  .approach-inner { min-height: 150px; gap: 13px; }
  .approach-mark { font-size: 22px; }
  .approach-inner p { font-size: 17px; }
  .approach-inner p span { font-size: 17px; }
  .round-arrow { width: 37px; height: 37px; flex: 0 0 37px; }
  .closing { padding-top: 50px; padding-bottom: 55px; }
  .closing-actions { align-items: flex-start; flex-direction: column; gap: 22px; }
  .social-links { gap: 3px; }
  .social-links .icon-link { width: 40px; height: 40px; flex-basis: 40px; }
  .site-footer { min-height: 100px; flex-wrap: wrap; gap: 5px 15px; padding-top: 17px; padding-bottom: 17px; }
  .site-footer p { order: 3; width: 100%; }
  .site-footer > span { font-size: 9px; }
  .legal-nav { order: 3; width: 100%; font-size: 10px; }
  .legal-page { min-height: calc(100vh - 200px); padding-top: 60px; padding-bottom: 55px; }
  .legal-page .legal-updated { margin-bottom: 32px; }
  .contact-main { display: flex; flex-direction: column; gap: 34px; padding-top: 65px; padding-bottom: 45px; }
  .contact-intro { padding-bottom: 0; }
  .contact-intro h1 { font-size: clamp(45px, 12vw, 61px); }
  .contact-form-section { padding: 23px 20px; }
  .contact-foot { gap: 12px; flex-direction: column; padding-top: 23px; font-size: 9px; }
}

:root {
  color-scheme: light;
  --paper: #f5f0e7;
  --paper-soft: #fffdf8;
  --ink: #28271f;
  --muted: #777065;
  --line: #ded5c7;
  --green: #66765f;
  --brand-indigo: #15245f;
  --brand-violet: #501b89;
  --brand-mint: #7350a2;
}

body {
  background-color: var(--paper);
  background-image: radial-gradient(#8d795c22 .65px, transparent .65px);
  background-size: 5px 5px;
  color: var(--ink);
}
.site-header { background: #fff; border-bottom-color: #e8e4de; backdrop-filter: none; }
.site-header::after { display: none; }
.brand-logo { filter: none; }
.nav-link, .nav-link:hover, .nav-link.active { color: var(--brand-indigo); }
.nav-cta { border-color: #d7cde2; background: #fff; color: var(--brand-indigo); }
.nav-cta:hover { background: #f5f0e7; border-color: #b9a7ce; }
.status-dot { background: #7350a2; box-shadow: 0 0 0 3px rgb(115 80 162 / 12%); }
.eyebrow-divider { color: rgb(40 39 31 / 30%); }
.hero-intro { color: #6b6e67; }
.language-item { color: #5e5c62; }
.button-dark, .button-dark:hover { background: var(--brand-indigo); color: #fff; }
.text-link { color: var(--brand-indigo); }
.hero-glow { background: radial-gradient(ellipse at center, #e1d9ed 0%, #eee7da 52%, transparent 74%); }
.portrait-sheet { background: #fffdf8; border-color: #eee8dc; box-shadow: 8px 10px 0 #d8cde5, 0 18px 38px rgb(42 34 53 / 17%); }
.portrait-sheet::before { background: rgb(80 27 137 / 18%); }
.portrait-sheet figcaption { color: #777065; }
.portrait-sheet figcaption > span:first-child, .portrait-sheet figcaption b { color: var(--brand-violet); }
.portrait-note { background: #fffdf8; border-color: #ded5c7; box-shadow: 3px 4px 0 #ded5c7; color: var(--brand-indigo); }
.heading-period { color: var(--brand-violet); }
.section-count { color: #918776; }
.project-card { border-color: #e3dfd7; background: #fffdf8; box-shadow: 0 12px 24px rgb(42 34 53 / 8%); }
.project-meta p { color: #777065; }
.project-meta a, .project-type { color: var(--brand-indigo); }
.project-type { font-weight: 500; }
.legal-page p, .legal-page li { color: #555951; }
.project-link { border-color: #d7cde2; background: #f5f0e7; color: var(--brand-indigo); }
.project-link:hover, .project-link:focus-visible { border-color: #b9a7ce; background: #eee8f5; }
.approach-band { background: #e8e5d9; border-color: #ded5c7; }
.approach-mark { color: var(--brand-violet); }
.approach-inner p span { color: #777065; }
.round-arrow { border-color: #cbd0c4; color: var(--brand-indigo); }
.round-arrow:hover { background: #f5f0e7; }
.social-links .icon-link { color: var(--brand-indigo); }
.social-links .brand-icon { filter: none; }
.icon-link { border-color: #d8d1e2; background: #fffdf8; color: var(--brand-indigo); }
.icon-link:hover { border-color: #a898be; background: #eee8f5; color: var(--brand-indigo); }
.icon-link:focus-visible { outline-color: var(--brand-violet); }
.icon-tooltip { background: var(--brand-indigo); }
.footer-nav .icon-link:hover { background: #eee8f5; }
.site-footer { border-top-color: #c9bda9; color: #82796d; }
.legal-nav a:hover, .legal-nav a:focus-visible { color: var(--brand-violet); }
#text_link { color: var(--brand-violet); }
.contact-form-section { background: #fffdf8; box-shadow: 4px 7px 0 #e1d7c7, 0 12px 25px rgb(65 52 34 / 7%); }
.contact-form label { color: #555951; }
.contact-form input, .contact-form textarea { border-bottom-color: #dedfd8; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #7350a2; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #a1a39b; }
.form-note, .contact-foot { color: #878a82; }
.connect-blob { color: var(--brand-indigo); }
.connect-blob-art { filter: drop-shadow(0 8px 16px rgb(42 34 53 / 20%)); }
.connect-blob-liquid { background: linear-gradient(145deg, #a18ac3 0%, #7350a2 30%, #501b89 68%, #15245f 100%); }
.connect-blob-gloss { box-shadow: inset 1px 2px 2px rgb(255 255 255 / 30%), inset -3px -4px 9px rgb(29 14 92 / 18%); }
.connect-message { border-color: #e3d9ca; background: #fffdf8; box-shadow: 0 5px 16px rgb(40 39 31 / 12%); color: var(--ink); }
.connect-blob:focus-visible { outline-color: var(--brand-violet); }
.menu-toggle { border-color: #d7cde2; background: #fff; }
.menu-toggle span { background: #363831; }
.site-menu { border-color: #e5e6df; background: rgb(255 255 255 / 98%); box-shadow: 0 12px 32px rgb(35 38 31 / 10%); }
.nav-link { border-bottom-color: #edeee8; }