/* A2 art direction: one shared grid, an animated interface sculpture, real project previews. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/inter-latin.woff2") format("woff2");
}
:root {
    --page: #0b0a13;
    --ink: #0b0a13;
    --panel: #15121f;
    --text: #f3effc;
    --muted: #b4adc5;
    --violet: #7c4dff;
    --lavender: #cebeff;
    --line: #332d42;
    --font-display: "Inter", Arial, sans-serif;
    --font-body: "Inter", Arial, sans-serif;
}

.a2-portfolio { background: var(--ink); color: var(--text); }
.a2-portfolio * { letter-spacing: 0; }
.a2-portfolio main { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.a2-portfolio main > .section { width: 100%; max-width: none; margin-inline: 0; }
.a2-portfolio .section { padding-top: 96px; }
.a2-portfolio :is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--lavender); outline-offset: 5px; }

.a2-portfolio .site-header { position: relative; width: min(1280px, calc(100% - 96px)); min-height: 82px; margin: auto; padding: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; border: 0; border-bottom: 1px solid var(--line); background: var(--ink); box-shadow: none; backdrop-filter: none; }
.site-header::after { display: none; }
.a2-portfolio .brand { gap: 18px; color: var(--text); font: 650 16px/1.2 var(--font-body); }
.a2-portfolio .brand-mark { display: inline; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text); font: 800 28px/1 var(--font-display); }
.brand-mark > span { color: #a77aff; }
.a2-portfolio .nav-links { grid-column: 2; grid-row: 1; gap: 34px; padding: 0; }
.a2-portfolio .nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: #dcd5e7; font: 500 14px var(--font-body); }
.a2-portfolio .nav-links a:hover { color: var(--lavender); }
.a2-portfolio .nav-links a.active::after { display: none; }
.a2-portfolio .availability { grid-column: 3; grid-row: 1; justify-self: end; padding: 0; background: none; border: 0; box-shadow: none; color: #dcd5e7; font: 500 13px var(--font-body); }
.a2-portfolio .availability span { background: #9c6bfb; box-shadow: none; animation: none; }
.menu-toggle { display: none; }

.a2-portfolio .hero.section { display: block; position: relative; min-height: 0; padding: 52px 0 0; overflow: visible; isolation: isolate; background: none; border: 0; }
.a2-portfolio .hero::before, .a2-portfolio .hero::after { display: none !important; }
.a2-portfolio .hero-copy { position: relative; z-index: 2; max-width: none; animation: none; pointer-events: none; }
.hero-copy a { pointer-events: auto; }
.a2-portfolio .hero-copy > .eyebrow { margin: 0 0 24px; color: var(--lavender); font: 600 13px/1.3 var(--font-body); text-transform: uppercase; }
.a2-portfolio .hero-copy h1 { max-width: none; margin: 0; font: 900 112px/.97 var(--font-display); color: var(--text); text-wrap: nowrap; text-shadow: none; }
.a2-portfolio .hero-copy h1 span { background: none; -webkit-text-fill-color: currentColor; color: inherit; text-shadow: none; }
.hero-copy h1 .hero-line { display: block; overflow: hidden; padding: 0 0 .12em; margin: 0 0 -.08em; }
.hero-copy h1 .hero-line > span { display: block; animation: title-enter 800ms cubic-bezier(.2,.8,.2,1) both; }
.a2-portfolio .hero-copy h1 .hero-line--accent { color: var(--lavender); }
.hero-line--accent > span { animation-delay: 100ms !important; }
.mobile-break { display: none; }
.a2-portfolio .hero-copy .hero-tagline { position: relative; max-width: 530px; margin: 24px 0 0; font: 400 24px/1.45 var(--font-body); color: var(--text) !important; animation: support-enter 650ms 230ms both; }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; animation: support-enter 650ms 320ms both; }
.a2-portfolio .hero-actions { display: flex; align-items: center; gap: 30px; margin: 0; }
.a2-portfolio .hero-actions .button.primary { display: inline-flex; flex: initial; align-items: center; justify-content: center; gap: 22px; min-height: 52px; padding: 14px 24px; border: 0; border-radius: 4px; background: var(--lavender) !important; color: #1a112c !important; box-shadow: none !important; font: 700 15px/1.4 var(--font-body); transition: background 180ms, transform 180ms; }
.hero-actions .button.primary span { font-size: 21px; transition: transform 180ms; }
.hero-actions .button.primary:hover span { transform: translate(3px,-3px); }
.a2-portfolio .hero-actions .button.primary:hover { background: #e1d5ff !important; transform: translateY(-2px); }
.hero-contact-link { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 0; border-bottom: 1px solid #8e739f; color: #e1d8ef; text-decoration: none; font-size: 14px; }
.hero-contact-link:hover { color: #fff; }
.hero-identity { display: flex; align-items: center; gap: 13px; padding-right: 10px; }
.hero-identity img { display: block; width: 57px; height: 57px; object-fit: cover; object-position: 50% 16%; border-radius: 50%; background: #332b42; border: 1px solid #5b476f; }
.hero-identity div { display: grid; gap: 4px; }
.hero-identity strong { font-size: 14px; font-weight: 600; }
.hero-identity span { color: var(--muted); font-size: 12px; }
.hero-indexline { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 18px 0 0; border-top: 1px solid var(--line); color: var(--muted); font: 500 12px/1.4 var(--mono); }
.hero-indexline span:first-child { color: var(--lavender); }
.hero-sculpture { position: absolute; z-index: 0; right: -42px; top: -12px; width: 700px; height: 530px; pointer-events: none; }
.hero-sculpture canvas { display: block; width: 100%; height: 100%; }
.sculpture-fallback { position: absolute; inset: 90px 80px; perspective: 800px; }
.sculpture-fallback span { position: absolute; inset: 0; border: 2px solid #9866dd; border-radius: 8px; background: #29194388; transform: rotateY(-26deg) rotateZ(-8deg); }
.sculpture-fallback span:nth-child(2) { transform: translate(-38px,32px) rotateY(-26deg) rotateZ(-8deg); }
.sculpture-fallback span:nth-child(3) { transform: translate(-76px,64px) rotateY(-26deg) rotateZ(-8deg); }
.hero-sculpture.is-rendered .sculpture-fallback { display: none; }
@keyframes title-enter { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes support-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.a2-portfolio .projects-section { padding-top: 26px; }
.a2-portfolio .projects-section > .section-heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 50px; row-gap: 8px; align-items: end; margin-bottom: 0; max-width: none; }
.projects-section .section-heading-bar { display: none; }
.projects-section .section-heading-bar .eyebrow { display: none; }
.a2-portfolio .section-count { color: var(--muted); font-size: 12px; }
.a2-portfolio .projects-section .section-heading h2 { max-width: none; margin: 0; font: 650 30px/1.15 var(--font-display); color: var(--text); }
.a2-portfolio .projects-section .section-heading > p { margin: 0; color: var(--muted) !important; font-size: 13px; line-height: 1.6; }
.work-filters { display: flex; gap: 25px; margin: 16px 0 18px; }
.work-filters button { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--muted); font: 500 13px var(--font-body); cursor: pointer; }
.work-filters button span { color: #91869e; font: 10px var(--mono); }
.work-filters button[aria-pressed="true"] { color: var(--lavender); border-color: var(--lavender); }
.work-filters button:hover { color: #fff; }
.work-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 80px 36px; }
.work-item { min-width: 0; }
.work-item--featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,2.45fr) minmax(250px,1fr); align-items: center; gap: 56px; }
.work-visual { display: block; position: relative; width: 100%; min-width: 0; margin: 0; padding: 0 0 38px; border: 0; background: transparent; color: var(--text); cursor: pointer; perspective: 1400px; text-align: left; font: inherit; }
.browser-preview { display: block; overflow: hidden; border: 1px solid #625477; border-radius: 7px; background: #15111e; box-shadow: 0 12px 22px #0003; transform: perspective(1200px) rotateY(5deg) rotateX(2deg) rotateZ(-1deg); transform-origin: 50% 50%; transition: transform 350ms cubic-bezier(.2,.8,.2,1), border-color 250ms; }
.work-visual:hover .browser-preview, .work-visual:focus-visible .browser-preview { transform: perspective(1200px) rotateY(0) rotateX(0) rotateZ(0); border-color: #b7a0da; }
.browser-preview img { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; }
.preview-chrome { display: flex; align-items: center; gap: 5px; height: 27px; padding: 0 12px; color: #b5a8c6; background: #211b2d; }
.preview-chrome i { width: 4px; height: 4px; border-radius: 50%; background: #826c9d; }
.preview-chrome > span { margin-inline: 13px auto; font: 10px var(--mono); }
.preview-action { position: absolute; right: 4px; bottom: 0; display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0; color: var(--lavender); font-size: 12px; }
.preview-action svg:last-child { transition: transform 220ms; }
.work-visual:hover .preview-action svg:last-child { transform: translate(3px,-3px); }
.work-number { display: block; margin: 0 0 12px; color: transparent; -webkit-text-stroke: 1px #c7afe9; font: 300 88px/.95 var(--font-display); }
.work-kicker { margin: 0 0 10px; color: #a69ab7; font: 500 11px/1.4 var(--mono); text-transform: uppercase; }
.work-copy h3 { margin: 0 0 12px; color: var(--text); font: 650 33px/1.12 var(--font-display); }
.work-tech { margin: 0 0 20px; color: #d0c2e2; font-size: 15px; line-height: 1.5; }
.work-disclosure { margin: 0 0 18px; color: #c3b7d5; font: 12px/1.5 var(--mono); }
.work-disclosure::before { content: ""; display: block; width: 24px; height: 1px; margin-bottom: 16px; background: #9672b8; }
.work-description { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.work-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 3px; }
.work-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0; border: 0; background: none; color: #d9cfea; text-decoration: none; font: 500 13px var(--font-body); cursor: pointer; }
.work-link--primary { color: var(--lavender); font-size: 15px; }
.work-link--primary::after { display: none; }
.work-link svg { transition: transform 200ms; }
.work-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.work-link:hover svg { transform: translate(3px,-2px); }
.work-link--quiet { color: #afa2c1; font-size: 12px; }
.work-details { margin-top: 15px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.work-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; border-top: 1px solid #30283c; cursor: pointer; color: #b9accb; list-style: none; }
.work-details summary::-webkit-details-marker { display: none; }
.work-details[open] summary svg { transform: rotate(45deg); }
.work-details ul { margin: 6px 0 16px; padding-left: 16px; }
.work-details li + li { margin-top: 8px; }
.work-tags { display: flex; flex-wrap: wrap; gap: 12px; color: #c0aed8; font: 11px var(--mono); }
.work-item--mobile { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.65fr); gap: 72px; align-items: center; }
.work-item--mobile .work-visual { grid-column: 2; grid-row: 1; }
.work-item--mobile .work-copy { grid-column: 1; grid-row: 1; }
.phone-composition { position: relative; display: block; height: 470px; width: 100%; }
.phone { position: absolute; display: block; overflow: hidden; width: 220px; aspect-ratio: 803/1600; padding: 5px; border: 1px solid #594b75; border-radius: 27px; background: #10131e; box-shadow: 16px 18px 35px #0004; transition: transform 400ms cubic-bezier(.2,.8,.2,1); }
.phone img { display: block; width: 100%; height: 100%; border-radius: 21px; object-fit: contain; }
.phone--back { top: 0; left: 15%; transform: rotate(-8deg); }
.phone--front { top: 23px; left: 48%; transform: rotate(7deg); }
.work-visual:hover .phone--back { transform: translate(-5px,-4px) rotate(-5deg); }
.work-visual:hover .phone--front { transform: translate(5px,-4px) rotate(3deg); }
.work-visual--mobile .preview-action { right: 13%; }
.work-item--compact .browser-preview { transform: none; border-color: #3f354c; }
.work-item--compact .work-visual { margin-bottom: 23px; }
.work-item--compact .work-copy { position: relative; padding-left: 70px; }
.work-item--compact .work-number { position: absolute; left: 0; top: 0; font-size: 49px; }
.work-item--compact .work-copy h3 { font-size: 27px; }
.work-item--compact .work-kicker { margin-bottom: 8px; }
.work-item--compact .work-tech { font-size: 13px; margin-bottom: 12px; }
.work-item--archive { padding-top: 24px; border-top: 1px solid var(--line); }
.work-visual--archive { max-height: 290px; overflow: hidden; margin-bottom: 20px; }
.work-visual--archive img { display: block; width: 100%; height: 250px; object-fit: contain; }
.work-archive-toggle { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 42px auto 0; padding: 12px 0; background: none; border: 0; color: var(--lavender); font: 500 13px var(--font-body); cursor: pointer; }
.work-empty { color: var(--muted); font-size: 15px; }
.work-entered .browser-preview { animation: preview-enter 850ms cubic-bezier(.2,.8,.2,1); }
.work-entered .work-copy { animation: support-enter 700ms 100ms backwards; }
.work-entered .phone--back { animation: phone-back-enter 900ms cubic-bezier(.2,.8,.2,1); }
.work-entered .phone--front { animation: phone-front-enter 1000ms cubic-bezier(.2,.8,.2,1); }
@keyframes preview-enter { from { opacity: .25; clip-path: inset(0 18% 10% 0); transform: perspective(1200px) rotateY(13deg) rotateX(6deg) translateY(35px) scale(.96); } to { opacity: 1; clip-path: inset(0); } }
@keyframes phone-back-enter { from { opacity: 0; transform: translate(35px,35px) rotate(0); } to { opacity: 1; transform: rotate(-8deg); } }
@keyframes phone-front-enter { from { opacity: 0; transform: translate(-35px,55px) rotate(0); } to { opacity: 1; transform: rotate(7deg); } }

.project-dialog { position: fixed; width: min(1320px,calc(100vw - 48px)); max-width: none; height: min(900px,calc(100dvh - 48px)); max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid #514360; border-radius: 8px; background: #14101e; color: var(--text); box-shadow: 0 25px 90px #0009; }
.project-dialog::backdrop { background: #05030dcc; backdrop-filter: blur(7px); }
.project-dialog[open] { display: flex; flex-direction: column; animation: dialog-enter 320ms cubic-bezier(.2,.8,.2,1); }
.dialog-toolbar { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: #1a1525; }
.dialog-toolbar > div:first-child { display: grid; gap: 3px; }
.dialog-toolbar strong { font-size: 15px; }
.dialog-toolbar span { color: var(--muted); font-size: 12px; }
.dialog-commands { display: flex; gap: 8px; }
.dialog-commands :is(a,button) { display: grid; place-items: center; width: 44px; height: 44px; background: transparent; border: 1px solid #514360; border-radius: 4px; color: var(--text); cursor: pointer; }
.dialog-commands :is(a,button):hover { background: #392748; }
.live-demo-stage { position: relative; flex: 1; min-height: 0; background: #f3f5fb; }
.live-demo-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.demo-loading { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 20px; background: #14101e; color: #e7dcf8; font-size: 15px; }
.demo-loading a { display: inline-flex; align-items: center; gap: 10px; color: var(--lavender); }
.loading-line { width: 120px; height: 2px; background: var(--violet); transform-origin: left; animation: loading-line 1000ms alternate infinite ease-in-out; }
.dialog-content { overflow-y: auto; padding: 28px; }
.dialog-content > p, .dialog-content > ul { max-width: 720px; color: #c6bcd4; font-size: 16px; line-height: 1.7; }
.capture-gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; margin: 26px 0; }
.capture-gallery figure { margin: 0; }
.capture-gallery img { display: block; width: 100%; height: auto; border-radius: 8px; }
.capture-gallery figcaption { margin-top: 10px; color: var(--muted); font-size: 13px; }
.capture-gallery .capture-wide { grid-column: span 2; }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes loading-line { from { transform: scaleX(.2); } to { transform: scaleX(1); } }

.a2-portfolio .section-heading h2, .a2-portfolio .case-study-intro h2 { color: var(--text); font-size: 38px; line-height: 1.15; }
.a2-portfolio .section-heading > p:not(.eyebrow) { color: var(--muted) !important; font-size: 15px; }
.a2-portfolio .eyebrow { color: var(--lavender); }
.a2-portfolio .capabilities { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 42px; }
.profile-context { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-bottom: 8px; }
.profile-context .hero-lead { margin: 0; color: #c6bdd3; font-size: 18px; line-height: 1.7; }
.profile-practices { display: grid; gap: 18px; margin: 0; }
.profile-practices > div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.profile-practices dt { color: var(--lavender); font: 12px/1.5 var(--mono); }
.profile-practices dd { margin: 0; color: #d2c8e0; font-size: 14px; }
.a2-portfolio .capabilities article { padding: 0; }
.a2-portfolio .capabilities article h2 { margin: 12px 0; font-size: 23px; }
.a2-portfolio .capabilities article p { color: var(--muted); font-size: 15px; }
.a2-portfolio .proof-bar { padding-top: 36px; padding-bottom: 0; }
.a2-portfolio .proof-list { gap: 20px; }
.a2-portfolio .proof-list span { padding: 5px 0; border: 0; border-radius: 0; background: none; color: #baabc9; font-size: 12px; }
.a2-portfolio .case-study-intro, .a2-portfolio .case-study-grid article, .a2-portfolio .case-study-proof, .a2-portfolio .method-grid li, .a2-portfolio .terrain-grid article, .a2-portfolio .expertise-grid article, .a2-portfolio .timeline article { border: 0 !important; border-radius: 6px; background: #161220 !important; color: var(--text); box-shadow: none !important; }
.a2-portfolio .case-study-intro { padding: 32px; }
.a2-portfolio .case-study-intro p, .a2-portfolio .method-grid li p { color: #c6bdd3 !important; }
.a2-portfolio .method-grid li strong { color: var(--text) !important; }
.a2-portfolio .button.primary { border: 0 !important; background: var(--lavender) !important; color: #191024 !important; box-shadow: none !important; border-radius: 4px; }
.a2-portfolio .button.primary:hover { background: #e1d5ff !important; }
.a2-portfolio .playground-shell { border: 1px solid #40334f; background: #15121f; }
.a2-portfolio .playground-toolbar { background: #100c18; }
.a2-portfolio .playground-preview { background: #171220; }
.a2-portfolio .playground-preview h3 { color: var(--text) !important; }
.a2-portfolio .playground-tab.active { background: #302043; color: var(--lavender); }
.a2-portfolio .playground-status { border-color: #47315f; color: var(--lavender); }
.a2-portfolio .playground-status span { background: var(--lavender); }
.a2-portfolio .contact-section { margin-top: 96px; padding: 38px; background: #14111f; border-radius: 8px; }
.a2-portfolio .contact-intro h2 { color: var(--text); font-size: 34px; }
.a2-portfolio .site-footer { width: min(1280px,calc(100% - 96px)); margin: 42px auto 0; padding-bottom: 30px; }

@media(min-width:1600px) { .a2-portfolio .hero-copy h1 { font-size: 120px; } }
@media(max-width:1199px) {
    .a2-portfolio main, .a2-portfolio .site-header { width: calc(100% - 64px); }
    .a2-portfolio .hero-copy h1 { font-size: 90px; }
    .hero-sculpture { width: 610px; height: 480px; right: -45px; }
    .hero-identity { padding-right: 0; }
    .work-item--featured { grid-template-columns: minmax(0,1.8fr) minmax(250px,1fr); gap: 36px; }
    .work-number { font-size: 74px; }
    .work-copy h3 { font-size: 29px; }
    .phone { width: 195px; }
    .phone--back { left: 10%; }
    .phone--front { left: 48%; }
    .phone-composition { height: 425px; }
}
@media(max-width:900px) {
    .a2-portfolio .hero-copy h1 { font-size: 74px; }
    .hero-sculpture { width: 520px; height: 420px; right: -35px; top: -15px; }
    .a2-portfolio .hero-copy .hero-tagline { font-size: 22px; }
    .hero-bottom { align-items: flex-start; }
    .a2-portfolio .hero-actions { gap: 18px; }
    .hero-identity { max-width: 190px; gap: 9px; }
    .hero-identity img { width: 46px; height: 46px; }
    .hero-identity strong { font-size: 12px; }
    .hero-identity span { font-size: 11px; }
    .a2-portfolio .hero-actions .button.primary { padding-inline: 16px; font-size: 13px; gap: 12px; }
    .hero-contact-link { font-size: 12px; }
    .work-item--featured { grid-template-columns: minmax(0,1.5fr) minmax(230px,1fr); gap: 24px; }
    .work-item--mobile { gap: 32px; grid-template-columns: 1fr 1.15fr; }
    .phone { width: 163px; border-radius: 23px; }
    .phone img { border-radius: 18px; }
    .phone-composition { height: 365px; }
    .phone--back { left: 0; }
    .phone--front { left: 42%; }
    .profile-context { gap: 30px; }
    .a2-portfolio .capabilities { gap: 24px; }
}
@media(max-width:900px) {
    .a2-portfolio main, .a2-portfolio .site-header { width: calc(100% - 40px); }
    .a2-portfolio .site-header { min-height: 72px; grid-template-columns: 1fr auto; gap: 0; }
    .a2-portfolio .brand { gap: 12px; font-size: 14px; }
    .a2-portfolio .brand-mark { font-size: 26px; }
    .a2-portfolio .site-header .availability { display: none; }
    .a2-portfolio .menu-toggle { display: inline-flex; grid-column: 2; grid-row: 1; justify-self: end; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font: 13px var(--font-body); cursor: pointer; }
    .menu-toggle-icon { width: 20px; height: 12px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
    .menu-open .menu-toggle-icon { height: 1px; border-bottom: 0; transform: rotate(-45deg); }
    .a2-portfolio .site-header .nav-links { grid-column: 1/-1; grid-row: 2; display: flex; padding: 0 0 14px; }
    .js .a2-portfolio .site-header .nav-links { display: none; }
    .js .a2-portfolio .site-header.menu-open .nav-links { display: flex; animation: support-enter 250ms both; }
    .a2-portfolio .hero.section { padding-top: 26px; }
    .a2-portfolio .hero-copy > .eyebrow { font-size: 11px; margin: 0 0 222px; }
    .hero-sculpture { width: 100%; height: 238px; right: 0; top: 55px; }
    .a2-portfolio .hero-copy h1 { font-size: 68px; line-height: .98; }
    .mobile-break { display: block; }
    .a2-portfolio .hero-copy .hero-tagline { margin-top: 19px; font-size: 21px; }
    .hero-bottom { display: block; margin-top: 24px; }
    .a2-portfolio .hero-actions { display: flex; gap: 24px; }
    .a2-portfolio .hero-actions .button.primary { min-height: 50px; font-size: 14px; }
    .hero-identity { max-width: none; margin-top: 23px; }
    .hero-identity img { width: 50px; height: 50px; }
    .hero-identity strong { font-size: 13px; }
    .hero-identity span { font-size: 12px; }
    .hero-indexline { margin-top: 28px; font-size: 10px; }
    .a2-portfolio .projects-section { padding-top: 30px; }
    .a2-portfolio .projects-section > .section-heading { display: block; }
    .projects-section .section-heading-bar { margin-bottom: 12px; }
    .a2-portfolio .projects-section .section-heading h2 { font-size: 28px; margin-bottom: 12px; }
    .a2-portfolio .projects-section .section-heading > p { font-size: 14px; }
    .work-list { gap: 56px 24px; }
    .work-item--featured, .work-item--mobile { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
    .work-item--mobile .work-visual { order: 0; }
    .work-item--mobile .work-copy { order: 1; }
    .work-item--featured .work-copy, .work-item--mobile .work-copy { position: relative; padding-left: 75px; }
    .work-item--featured .work-number, .work-item--mobile .work-number { position: absolute; left: 0; top: 0; font-size: 54px; }
    .work-copy h3 { font-size: 29px; }
    .work-tech { margin-bottom: 13px; }
    .work-disclosure::before { display: none; }
    .work-description { font-size: 15px; }
    .phone-composition { width: min(100%,500px); height: 420px; margin-inline: auto; }
    .phone { width: 200px; }
    .phone--back { left: 7%; }
    .phone--front { left: 47%; }
    .work-visual--mobile .preview-action { right: 7%; }
    .work-item--compact { grid-column: 1/-1; }
    .work-item--compact .work-copy { padding-left: 75px; }
    .work-item--compact .work-number { font-size: 54px; }
    .work-item--archive { grid-column: 1/-1; }
    .a2-portfolio .section { padding-top: 72px; }
    .profile-context { display: block; }
    .profile-context .hero-lead { font-size: 17px; margin-bottom: 28px; }
    .a2-portfolio .capabilities { grid-template-columns: 1fr; gap: 30px; }
    .a2-portfolio .proof-bar { padding-top: 32px; }
    .a2-portfolio .section-heading h2 { font-size: 31px; }
    .a2-portfolio .contact-section { margin-top: 72px; padding: 24px; }
    .a2-portfolio .contact-intro h2 { font-size: 31px; }
    .a2-portfolio .site-footer { width: calc(100% - 40px); }
    .capture-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
    .project-dialog { width: calc(100% - 20px); height: calc(100dvh - 24px); }
    .dialog-toolbar { padding: 10px 14px; }
    .dialog-toolbar span { font-size: 10px; }
    .dialog-content { padding: 20px; }
}
@media(max-width:480px) {
    .a2-portfolio main, .a2-portfolio .site-header { width: calc(100% - 36px); }
    .a2-portfolio .hero-copy h1 { font-size: 47px; }
    .a2-portfolio .hero-copy > .eyebrow { font-size: 10px; margin-bottom: 186px; }
    .hero-sculpture { top: 43px; height: 211px; }
    .a2-portfolio .hero-copy .hero-tagline { margin-top: 14px; font-size: 18px; line-height: 1.4; }
    .a2-portfolio .hero-actions { display: flex; flex-direction: column; gap: 7px; }
    .a2-portfolio .hero-actions .button.primary { width: 100%; height: 50px; padding-block: 10px; }
    .hero-bottom { margin-top: 20px; }
    .hero-identity { margin-top: 14px; }
    .hero-contact-link { font-size: 13px; }
    .hero-indexline span:last-child { display: none; }
    .work-filters { gap: 23px; margin-top: 14px; }
    .work-filters button { font-size: 12px; }
    .work-copy h3 { font-size: 25px; }
    .work-tech { font-size: 13px; }
    .work-item--featured .work-copy, .work-item--mobile .work-copy, .work-item--compact .work-copy { padding-left: 57px; }
    .work-item .work-number { font-size: 42px; }
    .work-description { font-size: 14px; }
    .browser-preview { transform: none; }
    .preview-chrome { height: 22px; }
    .preview-chrome > span { font-size: 8px; }
    .phone-composition { height: 337px; }
    .phone { width: 156px; padding: 4px; border-radius: 21px; }
    .phone img { border-radius: 16px; }
    .phone--back { left: 5%; }
    .phone--front { left: 47%; top: 15px; }
    .a2-portfolio .contact-section { padding: 22px 16px; }
    .profile-practices > div { grid-template-columns: 75px 1fr; }
}
@media(max-width:359px) {
    .a2-portfolio .hero-copy h1 { font-size: 40px; }
    .a2-portfolio .brand { font-size: 12px; }
    .work-filters { gap: 15px; }
    .phone { width: 135px; }
    .phone-composition { height: 300px; }
    .work-item--featured .work-copy, .work-item--mobile .work-copy, .work-item--compact .work-copy { padding-left: 48px; }
}
@media(prefers-reduced-motion:reduce) {
    .a2-portfolio *, .a2-portfolio *::before, .a2-portfolio *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .a2-portfolio .hero-line > span, .a2-portfolio .hero-tagline, .a2-portfolio .hero-bottom, .a2-portfolio .work-copy, .a2-portfolio .reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
    .browser-preview { transform: none !important; }
}

/* Direct contact details share one quiet, accessible panel. */
.a2-portfolio .contact-intro .contact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 4px 18px;
    border: 1px solid var(--line);
    border-left: 3px solid #ad94ed;
    border-radius: 8px;
    background: #211d2d;
    box-shadow: none;
}
.a2-portfolio .contact-intro .contact-card a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-height: 90px;
    padding: 18px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    text-decoration: none;
    transition: background-color 160ms ease;
}
.a2-portfolio .contact-intro .contact-card a + a {
    border-top: 1px solid #3a334b;
}
.a2-portfolio .contact-intro .contact-card .contact-coordinate-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 50%;
    background: #30283f;
    color: #cebeff;
}
.contact-coordinate-copy { min-width: 0; }
.a2-portfolio .contact-intro .contact-card .contact-coordinate-copy span {
    display: block;
    margin: 0 0 6px;
    color: #c4b8dd;
    font-size: 12px;
    line-height: 1.4;
}
.a2-portfolio .contact-card .contact-coordinate-copy strong {
    display: block;
    color: #f3effc;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.a2-portfolio .contact-intro .contact-card a:hover,
.a2-portfolio .contact-intro .contact-card a:focus-visible {
    padding-left: 0;
    background: #2a2438;
}
.a2-portfolio .contact-card a:hover strong {
    text-decoration: underline;
    text-decoration-color: #ad94ed;
    text-underline-offset: 4px;
}
@media (max-width: 480px) {
    .a2-portfolio .contact-intro .contact-card { padding-inline: 12px; }
    .a2-portfolio .contact-intro .contact-card a { gap: 10px; min-height: 84px; }
    .a2-portfolio .contact-intro .contact-card .contact-coordinate-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }
    .a2-portfolio .contact-card .contact-coordinate-copy strong { font-size: 14px; }
}