:root { --ink:#151515; --paper:#ededea; --rule:#d4d4cf; --muted:#656561; --accent:#3F5FA8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Poppins", Arial, sans-serif; font-size:16px; font-weight:300; overflow-anchor:none; }
body.lightbox-open { overflow:hidden; }
body.contact-modal-open, body.project-modal-open { overflow:hidden; }
img:not(.is-media-ready),video:not(.is-media-ready) { background-color:#1b1b1b !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'%3E%3Ctext x='80' y='33' text-anchor='middle' fill='%23969696' font-family='Arial,sans-serif' font-size='11' font-weight='600' letter-spacing='1.5'%3ELOADING...%3C/text%3E%3C/svg%3E") !important; background-position:center !important; background-repeat:no-repeat !important; background-size:160px 60px !important; }
img { height:auto; }
.case-study img:not(.portfolio-companion img), .case-study video { cursor:zoom-in; }
.project-modal .case-study img, .project-modal .case-study video { cursor:default; }
.media-lightbox { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:clamp(18px,4vw,56px); background:rgba(0,0,0,.9); opacity:0; visibility:hidden; transition:opacity .2s ease,visibility .2s ease; }
.media-lightbox.is-open { opacity:1; visibility:visible; }
.media-lightbox-content { display:flex; max-width:100%; max-height:100%; align-items:center; justify-content:center; }
.media-lightbox-content img,.media-lightbox-content video { display:block; max-width:100%; max-height:calc(100vh - 48px); width:auto; height:auto; border:0 !important; border-radius:8px; object-fit:contain; cursor:default; }
.media-lightbox .media-lightbox-content img { cursor:zoom-out !important; }
.media-lightbox-close { position:fixed; top:18px; right:20px; z-index:2; width:42px; height:42px; padding:0; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(20,20,20,.72); color:#fff; font-size:0; cursor:pointer; }
.media-lightbox-close::before,.media-lightbox-close::after { content:""; position:absolute; top:50%; left:50%; width:18px; height:2px; border-radius:2px; background:currentColor; }
.media-lightbox-close::before { transform:translate(-50%,-50%) rotate(45deg); }
.media-lightbox-close::after { transform:translate(-50%,-50%) rotate(-45deg); }
@media (prefers-reduced-motion:reduce) { .media-lightbox { transition:none; } }
.contact-modal { position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.76); opacity:0; visibility:hidden; transition:opacity .2s ease,visibility .2s ease; }
.contact-modal.is-open { opacity:1; visibility:visible; }
.contact-modal-panel { width:min(100%,440px); padding:28px; border:1px solid rgba(255,255,255,.14); border-radius:24px; background:#181818; box-shadow:0 24px 70px rgba(0,0,0,.45); color:#f3f3f0; }
.contact-modal-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:12px; }
.contact-modal-header h2 { margin:0; font-size:30px; font-weight:500; letter-spacing:-.04em; }
.contact-modal-close { position:relative; flex:0 0 auto; width:38px; height:38px; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:transparent; color:#f3f3f0; font-size:0; cursor:pointer; }
.contact-modal-close::before,.contact-modal-close::after { content:""; position:absolute; top:50%; left:50%; width:16px; height:2px; border-radius:2px; background:currentColor; }
.contact-modal-close::before { transform:translate(-50%,-50%) rotate(45deg); }
.contact-modal-close::after { transform:translate(-50%,-50%) rotate(-45deg); }
.contact-modal-intro { margin:0 0 24px; color:#a1a1a1; font-size:14px; line-height:1.5; }
.contact-options { display:grid; gap:10px; }
.contact-option { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:16px; min-height:54px; padding:12px 14px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.05); color:#f3f3f0; font-size:14px; font-weight:500; text-decoration:none; }
.contact-option:hover { background:rgba(255,255,255,.09); opacity:1; }
.contact-option span { min-width:0; overflow-wrap:anywhere; }
.contact-option-arrow { color:#a1a1a1; }
.contact-copy { flex:0 0 auto; padding:8px 13px; border:0; border-radius:999px; background:#f3f3f0; color:#181818; font:600 12px/1 "Poppins",Arial,sans-serif; cursor:pointer; }
.contact-copy:hover { opacity:.82; }
.resume-body .contact-modal { background:rgba(35,30,24,.48); }
.resume-body .contact-modal-panel { border-color:rgba(45,38,29,.14); background:#e7e0d4; box-shadow:0 24px 70px rgba(35,30,24,.28); color:#1b1916; }
.resume-body .contact-modal-close { border-color:rgba(45,38,29,.2); color:#1b1916; }
.resume-body .contact-modal-close:hover { background:rgba(45,38,29,.09); opacity:1; }
.resume-body .contact-option { border-color:rgba(45,38,29,.14); background:#f3eee5; color:#1b1916; }
.resume-body .contact-option:hover { background:#ddd4c6; }
.resume-body .contact-option-arrow { color:#746c61; }
.resume-body .contact-copy { border:1px solid rgba(45,38,29,.16); background:#f8f3ea; color:#1b1916; }
@media (max-width:520px) { .contact-modal { padding:16px; }.contact-modal-panel { padding:22px; }.contact-option { align-items:flex-start; flex-direction:column; }.contact-copy { align-self:stretch; } }
@media (prefers-reduced-motion:reduce) { .contact-modal { transition:none; } }
main, footer { max-width:1440px; margin:auto; padding-left:4vw; padding-right:4vw; }
@media (min-width:1000px) { main, footer { max-width:none; padding-left:240px; padding-right:240px; }.site-nav { margin-left:-240px; margin-right:-240px; padding-left:240px; padding-right:240px; } }
a { color:inherit; }
a, button { transition:opacity .2s ease; } a:hover, button:hover { opacity:.68; }
.site-nav { display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:20; margin:0 -4vw; padding:28px 4vw; background:color-mix(in srgb, var(--paper) 78%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }.nav-links { display:flex; gap:6px; align-items:center; }
@media (min-width:1000px) { .site-nav { margin-left:-240px; margin-right:-240px; padding-left:240px; padding-right:240px; } }
.wordmark { font-weight:500; font-size:17px; letter-spacing:-.02em; text-decoration:none; }.nav-tab { appearance:none; cursor:pointer; color:var(--ink); font:inherit; font-size:13px; line-height:1; border:1px solid transparent; background:transparent; border-radius:100px; padding:9px 12px; text-decoration:none; transition:border-color .2s ease, opacity .2s ease; }.nav-tab:hover { border-color:var(--ink); }.nav-tab.active { background:var(--ink); color:var(--paper); }
.text-link { font-size:14px; text-underline-offset:5px; }.text-link span { margin-left:5px; }
.hero { min-height:calc(100vh - 82px); display:flex; flex-direction:column; justify-content:space-between; position:relative; padding:8.8vh 0 5vh; }
.eyebrow { margin:0; font-family:"Poppins", Arial, sans-serif; font-size:12px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; }
h1, h2, h3, p { margin-top:0; } h1, h2 { letter-spacing:-.02em; font-weight:500; }
h1 { font-size:clamp(3rem,7.2vw,7.2rem); letter-spacing:-.015em; line-height:1.02; margin:4vh 0; max-width:1100px; } h1 em { font-family:Georgia, serif; font-weight:400; }.hero-name-line { display:inline-block; white-space:nowrap; }.role-rotator { display:inline-block; color:var(--accent); font-size:.78em; white-space:nowrap; transition:opacity .4s ease; }.role-rotator.is-changing { opacity:0; }
.intro-details { display:grid; grid-template-columns:minmax(220px, .65fr) minmax(280px, 1fr); gap:48px; max-width:760px; margin:0 0 4vh; isolation:isolate; overflow:visible; }.intro-details .eyebrow { margin-bottom:10px; }.intro-details p:not(.eyebrow) { margin:0; font-size:15px; line-height:1.45; }.intro-details a { text-underline-offset:4px; }.current-note { display:block; margin-top:7px; color:var(--muted); font-family:"Poppins", Arial, sans-serif; font-size:15px; line-height:1.45; }.tooltip-trigger { position:relative; display:inline-block; cursor:default; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; outline:none; }.tooltip-trigger:focus-visible { outline:1px solid currentColor; outline-offset:3px; }.tooltip-copy { position:absolute; z-index:100; top:calc(100% + 10px); left:0; width:240px; padding:12px 14px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:#111; box-shadow:0 8px 24px rgba(0,0,0,.45); color:#f3f3f0; font-family:"Poppins", Arial, sans-serif; font-size:12px; line-height:1.45; opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease; }.tooltip-trigger:hover .tooltip-copy, .tooltip-trigger:focus .tooltip-copy { opacity:1; transform:translateY(0); }
.impact-stats { align-self:flex-start; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:48px; width:min(100%, 980px); margin:0 0 4vh; }.impact { margin:0; font-size:15px; line-height:1.35; }.impact strong { display:block; color:var(--accent); font-size:clamp(2.8rem,5vw,4.7rem); font-weight:500; letter-spacing:-.03em; line-height:.92; margin-bottom:10px; }
.work { border-top:1px solid var(--ink); padding:20px 0 120px; }.section-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:52px; }.section-heading h2 { font-size:clamp(2.4rem,5vw,5.3rem); line-height:.98; margin:0; }
.projects { display:grid; grid-template-columns:1fr; gap:96px; max-width:1180px; }.project-card { display:none; }.project-card.visible { display:block; animation:appear .35s ease both; }.project-link { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:42px; align-items:start; text-decoration:none; }.project-image { aspect-ratio:1.3; position:relative; overflow:hidden; padding:18px; }.project-image > span { font-size:12px; position:relative; z-index:2; }.cobalt { background:var(--accent); color:#fff; }.moss { background:#718265; }.apricot { background:#ea8f65; }.lavender { background:#a7a1cf; }.seafoam { background:#8ec6b9; }
.placeholder-mark { position:absolute; font-size:clamp(5rem,14vw,13rem); font-weight:700; letter-spacing:-.12em; bottom:-5%; right:11%; }.shape { background:#e6ddc8; position:absolute; }.shape-one { width:45%; height:45%; border-radius:50%; left:22%; top:17%; }.shape-two { height:75%; width:12%; right:22%; top:16%; transform:rotate(34deg); }.dash-grid { width:60%; height:60%; margin:10% auto; background:repeating-linear-gradient(90deg,transparent 0 20px,#242424 20px 25px), repeating-linear-gradient(0deg,transparent 0 20px,#242424 20px 25px); opacity:.8; }.arc { position:absolute; border:16px solid #f5f3ee; border-radius:50%; }.arc-one { width:78%; height:105%; left:-17%; bottom:-57%; }.arc-two { width:38%; height:51%; right:12%; top:18%; }.circle-ring { position:absolute; width:52%; aspect-ratio:1; border:25px solid #173b34; border-radius:50%; top:24%; left:24%; }
.project-video video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.redirect-preview video { object-position:right top; }
.shipping-video { background:#fff; }
.shipping-video video { left:30px; right:30px; width:calc(100% - 60px); }
.empty-cart-cover { display:grid; place-items:center; padding:4px; background:#fff; }
.empty-cart-cover img, .empty-cart-cover video { display:block; width:100%; height:auto; object-fit:contain; }
.project-image > span { display:none; }
.project-copy { padding-top:12px; }.project-meta { border-top:0; margin:0; }.project-meta h3 { font-size:24px; font-weight:500; line-height:1.08; margin-bottom:10px; }.project-meta p { font-size:12px; margin-bottom:0; color:var(--muted); text-align:left; }.project-description { max-width:360px; margin:12px 0 0; color:var(--muted); font-size:15px; line-height:1.45; }.project-impact { margin:24px 0 0; }.project-impact strong { display:block; color:var(--accent); font-size:19px; font-weight:500; letter-spacing:-.015em; }.project-impact sup { font-size:.55em; vertical-align:super; }.project-impact small { display:block; margin-top:4px; color:var(--muted); font-family:"SF Mono", Monaco, Menlo, Courier, monospace; font-size:10px; }
.project-callout { display:inline-block; margin:18px 0 0; padding:8px 10px; border:1px solid rgba(255,255,255,.18); border-radius:2px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.9); font-size:11px; font-weight:500; line-height:1; }
.about { border-top:1px solid var(--ink); padding:22px 0 140px; }.about-copy { max-width:820px; }.about h2 { font-size:clamp(2.4rem,4.6vw,5rem); letter-spacing:-.015em; line-height:1.02; margin:0 0 48px; }.about-copy p { max-width:490px; font-size:18px; line-height:1.48; }.text-link { display:inline-block; margin-top:16px; font-weight:500; }
footer { border-top:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; padding-top:18px; padding-bottom:26px; color:var(--muted); font-size:12px; } footer p { margin:0; } footer a { text-underline-offset:3px; }.footer-links { display:flex; gap:8px; }.footer-icon { display:grid; width:30px; height:30px; place-items:center; border:1px solid currentColor; border-radius:50%; color:var(--ink); transition:background .2s ease, color .2s ease, opacity .2s ease; }.footer-icon:hover { background:var(--ink); color:var(--paper); opacity:1; }.footer-icon svg { width:14px; height:14px; fill:currentColor; }
.project-modal { width:min(94vw, 1400px); height:fit-content; block-size:fit-content; max-height:min(92vh, 1000px); padding:0; border:1px solid var(--rule); border-radius:12px; background:var(--paper); color:var(--ink); overflow:auto; }.project-modal::backdrop { background:rgba(0,0,0,.7); backdrop-filter:blur(7px); }.project-modal-content { min-height:0; }.project-modal .modal-sheet { min-height:0; }.modal-sheet { position:relative; min-height:100%; padding:clamp(28px,5vw,72px); }.modal-close { position:sticky; top:0; float:right; z-index:2; width:42px; height:42px; border:0; border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; font-size:0; transition:background .2s ease, opacity .2s ease; }.modal-close::before, .modal-close::after { content:""; position:absolute; top:50%; left:50%; width:22px; height:2px; background:currentColor; }.modal-close::before { transform:translate(-50%,-50%) rotate(45deg); }.modal-close::after { transform:translate(-50%,-50%) rotate(-45deg); }.modal-close:hover { background:var(--ink); color:var(--paper); opacity:1; }.modal-header { clear:both; max-width:900px; padding-top:4vh; }.modal-header .eyebrow { margin-bottom:20px; }.modal-header h2 { margin:0 0 14px; font-size:clamp(3.4rem,8vw,8rem); line-height:.9; letter-spacing:-.06em; }.modal-header > p:last-child { margin:0; color:var(--muted); }.modal-media { aspect-ratio:1.7; margin:8vh 0; overflow:hidden; background:#202020; }.modal-media video { width:100%; height:100%; object-fit:cover; object-position:center top; }.prototype-frame { height:min(68vh, 780px); aspect-ratio:auto; background:#fff; border:1px solid var(--rule); }.prototype-frame iframe { display:block; width:100%; height:100%; border:0; background:#fff; }.skeleton-media { display:grid; place-items:center; background:linear-gradient(110deg, #1a1a1a 20%, #303030 42%, #1a1a1a 64%); background-size:200% 100%; color:#b6b6b6; font-family:"SF Mono", Monaco, Menlo, Courier, monospace; font-size:11px; animation:shimmer 2.2s linear infinite; }.modal-details { display:grid; grid-template-columns:1fr 1fr; gap:56px; max-width:920px; }.modal-details section:last-child { grid-column:1 / -1; max-width:600px; }.modal-details .eyebrow { margin-bottom:12px; }.modal-details p:not(.eyebrow) { margin:0; line-height:1.5; }.modal-impact { color:var(--accent); font-size:clamp(1.8rem,3vw,3rem); font-weight:500; letter-spacing:-.04em; }.modal-impact sup { font-size:.5em; }.modal-impact small { display:block; margin-top:5px; color:var(--muted); font-family:"SF Mono", Monaco, Menlo, Courier, monospace; font-size:10px; letter-spacing:0; }
.case-study { padding-top:36px; }.case-back { display:inline-block; color:var(--muted); font-family:"SF Mono", Monaco, Menlo, Courier, monospace; font-size:11px; text-decoration:none; }.case-study .modal-header h1 { margin:0 0 14px; font-size:clamp(3.4rem,8vw,8rem); line-height:.9; letter-spacing:-.06em; font-weight:500; }
.project-modal .modal-close { position:absolute; top:24px; right:24px; }
.project-modal .modal-close:hover { background:rgba(255,255,255,.2); color:var(--ink); opacity:1; }
.case-layout { display:grid; grid-template-columns:160px minmax(0,1fr); gap:60px; align-items:start; }
.case-layout > .case-study { min-width:0; padding-right:0; padding-left:0; }
.case-toc { position:sticky; top:92px; z-index:10; display:flex; width:160px; flex-direction:column; gap:3px; padding-top:36px; }
.case-toc p { margin:0 0 8px; padding:0 8px; color:var(--muted); font-family:"Inter",Arial,sans-serif; font-size:10px; font-weight:500; letter-spacing:.1em; text-align:left; text-transform:uppercase; }
.case-toc a { position:relative; padding:6px 8px; border-radius:5px; color:var(--muted); font-size:11px; font-weight:400; line-height:1.35; text-align:left; text-decoration:none; transition:color .18s ease,background .18s ease; }
.case-toc a:hover { background:rgba(255,255,255,.05); color:var(--ink); opacity:1; }
.case-toc a.is-active { background:rgba(255,255,255,.08); color:var(--ink); }
@media (max-width:980px) { .case-layout { display:block; }.case-toc { display:none; }.case-layout > .case-study { padding-right:clamp(28px,5vw,72px); padding-left:clamp(28px,5vw,72px); } }
.filtering-study section[id],.filtering-study h2[id] { scroll-margin-top:90px; }
.case-study .modal-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:32px; column-gap:56px; row-gap:32px; }
.case-study .modal-details section { margin:0; }
.case-study .modal-details .eyebrow { margin:0 0 12px; }
.filtering-study .modal-details section:last-child { grid-column:auto; max-width:none; }
.filtering-study img { border:1px solid rgba(255,255,255,.5) !important; border-radius:4px; }
.filtering-intro { display:flex; flex-direction:column; gap:24px; margin-top:32px; }
.filtering-summary { display:grid; grid-template-columns:1.18fr 1fr 157px; gap:12px; }
.filtering-summary-card { min-height:118px; padding:12px; border-radius:8px; background:rgba(255,255,255,.05); }
.filtering-summary-card .eyebrow { margin:0 0 4px; color:#f3f3f0; }
.filtering-summary-card > p:last-child { margin:0; color:#f3f3f0; font-size:16px; font-weight:500; line-height:1.35; }
.filtering-summary-overview > p:last-child { font-weight:400; }
.filtering-summary-card > p.modal-overview-large:last-child { font-size:18px; }
.filtering-summary-card > p.modal-summary-copy:last-child { font-weight:400; }
.filtering-summary-card a { text-underline-offset:2px; }
.project-modal .filtering-summary { grid-template-columns:minmax(0,1.45fr) minmax(260px,.8fr); grid-template-rows:auto auto; align-content:start; }
.project-modal .filtering-summary-card { min-height:0; }
.project-modal .filtering-summary-overview { grid-column:1; grid-row:1 / 3; }
.project-modal .filtering-summary-impact { grid-column:2; grid-row:1; }
.project-modal .filtering-summary-role { grid-column:2; grid-row:2; }
.project-modal .filtering-summary-role > p:last-child { max-width:none; font-size:16px; font-weight:400; line-height:1.35; }
.project-modal .filtering-summary.is-two-column { grid-template-columns:minmax(0,1.5fr) minmax(220px,.75fr); grid-template-rows:auto; }
.project-modal .filtering-summary.is-two-column .filtering-summary-overview { grid-column:1; grid-row:1; }
.project-modal .filtering-summary.is-two-column .filtering-summary-role { grid-column:2; grid-row:1; }
.project-case-copy { max-width:880px; margin-top:48px; }
.project-case-copy p { margin:0; color:#f3f3f0; font-size:18px; font-weight:300; line-height:1.55; }
.project-case-copy p + p { margin-top:18px; }
.filtering-summary-card > p.modal-impact:last-child { color:#8ed39a; font-size:clamp(26px,2.5vw,34px); font-weight:600; line-height:1.05; letter-spacing:-.04em; }
.filtering-summary-card .modal-impact small { margin-top:3px; color:#a1a1a1; font-size:10px; font-weight:500; line-height:1.3; }
.filtering-summary-role > p:last-child { max-width:133px; color:#fff; font-size:24px; line-height:1; }
.filtering-prototype { display:flex; flex-direction:column; align-items:center; }
.filtering-prototype .prototype-frame { width:100%; height:min(54vw, 560px); margin:0 0 -30px; overflow:hidden; border:0; border-radius:12px; background:#d9d9d9; transition:width .2s ease, height .2s ease; }
.filtering-prototype .prototype-frame.is-mobile { width:min(390px, 100%); height:auto; aspect-ratio:1179 / 1819; }
.filtering-mobile-preview { display:none !important; width:100%; height:100%; object-fit:cover; object-position:top; border:0 !important; border-radius:0 !important; }
.filtering-prototype .prototype-frame.is-mobile iframe { display:none; }
.filtering-prototype .prototype-frame.is-mobile .filtering-mobile-preview { display:block !important; }
.filtering-prototype .prototype-view-toggle { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:0; padding:5px; overflow:hidden; border:1px solid rgba(255,255,255,.24); background:#292929; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.filtering-prototype .prototype-view-toggle button { min-width:112px; padding:10px 18px; color:#fff; font-family:"Poppins", Arial, sans-serif; font-size:18px; font-weight:600; line-height:1.2; letter-spacing:0; }
.filtering-prototype .prototype-view-toggle button.is-selected { background:transparent; color:#252525; }
.filtering-prototype .prototype-view-toggle::before,
.filter-before-after-toggle::before,
.filter-pills-view-toggle::before { content:""; position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:999px; background:#f7f7f5; box-shadow:0 1px 4px rgba(0,0,0,.2); transform:translateX(0); transition:transform .32s cubic-bezier(.22,1,.36,1); }
.filtering-prototype .prototype-view-toggle:has(button:last-child.is-selected)::before,
.filter-before-after-toggle:has(button:last-child.is-selected)::before,
.filter-pills-view-toggle:has(button:last-child.is-selected)::before { transform:translateX(100%); }
.filtering-prototype .prototype-view-toggle:has(button:focus-visible),
.filter-before-after-toggle:has(button:focus-visible),
.filter-pills-view-toggle:has(button:focus-visible) { outline:2px solid #ff6fa2; outline-offset:3px; }
.filtering-prototype .prototype-view-toggle button:focus-visible,
.filter-before-after-toggle button:focus-visible,
.filter-pills-view-toggle button:focus-visible { outline:0; }
@media (max-width:760px) { .filtering-summary { grid-template-columns:1fr 1fr; }.filtering-summary-role { grid-column:1 / -1; }.filtering-summary-role > p:last-child { max-width:none; } }
@media (max-width:760px) { .project-modal .filtering-summary { grid-template-columns:1fr; grid-template-rows:auto; }.project-modal .filtering-summary-overview,.project-modal .filtering-summary-impact,.project-modal .filtering-summary-role { grid-column:1; grid-row:auto; } }
@media (max-width:760px) { .project-modal .filtering-summary.is-two-column { grid-template-columns:1fr; }.project-modal .filtering-summary.is-two-column .filtering-summary-overview,.project-modal .filtering-summary.is-two-column .filtering-summary-role { grid-column:1; grid-row:auto; } }
@media (max-width:520px) { .filtering-summary { grid-template-columns:1fr; }.filtering-summary-role { grid-column:auto; }.filtering-prototype .prototype-frame { height:68vh; }.filtering-prototype .prototype-view-toggle button { min-width:96px; padding:9px 14px; font-size:15px; } }
.inspo .modal-impact { color:#8ed39a; }
.project-impact small, .modal-impact small, .case-back, body.inspo .section-marker, .media-slides i::after { font-family:"Inter", Arial, sans-serif; }
.prototype-section { margin-top:48px; }
.prototype-section .eyebrow { margin-bottom:16px; }
.prototype-section .modal-media { margin:0 0 24px; }
.plp-analysis { margin-top:112px; }
.plp-analysis h2 { width:100%; margin:0 0 24px; font-size:30px; font-weight:500; line-height:normal; letter-spacing:-.07em; }
.plp-analysis-heading { display:flex; align-items:baseline; gap:20px; }
.plp-analysis-heading h2 { margin-right:auto; }
.plp-annotation-toggle { position:relative; z-index:2; flex:0 0 auto; margin-top:-30px; padding:10px; border:1px solid rgba(0,0,0,.25); border-radius:999px; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.25); color:#252525; font:600 18px/normal "Poppins", Arial, sans-serif; letter-spacing:0; cursor:pointer; }
.plp-annotation-toggle:hover { opacity:.82; }
.plp-analysis figure { margin:0; }
.plp-analysis-image { position:relative; display:flex; flex-direction:column; align-items:center; cursor:default; }
.plp-analysis img { display:block; width:100%; border:0 !important; border-radius:12px; }
.plp-analysis-image > img:first-child { margin-bottom:-120px; clip-path:inset(0 0 120px 0 round 12px); }
.plp-analysis .plp-annotations { position:absolute; inset:0 0 auto; height:auto; opacity:0; pointer-events:none; }
.plp-analysis .plp-annotations { clip-path:inset(0 0 120px 0 round 12px); }
.plp-analysis-image.is-annotated .plp-annotations { opacity:1; pointer-events:auto; }
.plp-analysis figcaption { margin-top:10px; color:var(--muted); font-size:12px; }
@media (max-width:650px) { .plp-analysis { margin-top:72px; }.plp-analysis h2 { font-size:28px; }.plp-annotation-toggle { font-size:16px; } }
.filtering-plan { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:72px; }
.filtering-plan-card { min-width:0; min-height:142px; padding:18px 18px 12px 12px; border-radius:8px; background:rgba(255,255,255,.05); color:#f3f3f0; }
.filtering-plan-card .eyebrow { margin:0 0 4px; }
.filtering-plan-card h2 { margin:0; font-size:clamp(23px,2.35vw,30px); font-weight:500; line-height:1; letter-spacing:-.07em; overflow-wrap:anywhere; }
@media (max-width:900px) { .filtering-plan { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .filtering-plan { grid-template-columns:1fr; gap:12px; margin-top:56px; }.filtering-plan-card { min-height:0; } }
.filter-part { margin-top:72px; }
.filter-part h2 { margin:8px 0 28px; font-size:clamp(28px,3.6vw,48px); font-weight:300; line-height:1.05; letter-spacing:-.045em; }
.filter-part > img { display:block; width:100%; border:1px solid var(--rule); }
.filter-part-heading { display:flex; align-items:baseline; gap:20px; }
.filter-part-heading h2 { margin-right:auto; }
.filter-after-toggle { flex:0 0 auto; margin:0 0 28px; padding:9px 13px; border:1px solid var(--rule); border-radius:999px; background:transparent; color:var(--ink); font:500 11px/1 "Inter", Arial, sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.filter-after-toggle:hover { opacity:.65; }
.filter-removals-image { position:relative; margin:0; }
.filter-removals-image img { display:block; width:100%; border:1px solid var(--rule); transition:opacity .32s ease, transform .32s ease; }
.filter-removals-after { position:absolute; inset:0; opacity:0; pointer-events:none; transform:scale(.995); }
.filter-removals-image.is-after > img:first-child { opacity:0; transform:scale(1.005); }
.filter-removals-image.is-after .filter-removals-after { opacity:1; pointer-events:auto; transform:scale(1); }
.filter-quick-wins { display:flex; flex-direction:column; gap:24px; }
.filter-quick-wins > .eyebrow { margin:0 0 -24px; }
.filter-quick-wins > h2 { width:100%; margin:0; font-size:30px; font-weight:500; line-height:normal; letter-spacing:-.07em; }
.filter-quick-wins .filter-removals-image { display:flex; flex-direction:column; align-items:center; }
.filter-quick-wins .filter-removals-image > img:first-child { border:0 !important; border-radius:0; }
.filter-quick-wins .filter-removals-after { bottom:auto; height:auto; border:0 !important; border-radius:0; }
.filter-before-after-toggle { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-top:-30px; padding:5px; overflow:hidden; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:#292929; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.filter-before-after-toggle button { position:relative; z-index:1; min-width:112px; padding:10px 18px; border:0; border-radius:999px; background:transparent; color:#fff; font:600 18px/1.2 "Poppins", Arial, sans-serif; cursor:pointer; transition:color .28s ease,opacity .2s ease; }
.filter-before-after-toggle button.is-selected { color:#252525; }
.filter-before-after-toggle button:hover { opacity:.82; }
@media (max-width:650px) { .filter-quick-wins > h2 { font-size:28px; }.filter-before-after-toggle button { min-width:96px; padding:9px 14px; font-size:16px; } }
.filter-pills-redesign { display:flex; flex-direction:column; gap:24px; }
.filter-pills-redesign > .eyebrow { margin:0 0 -24px; }
.filter-pills-redesign > h2 { width:100%; margin:0; font-size:30px; font-weight:500; line-height:normal; letter-spacing:-.07em; }
.filter-pills-redesign .filter-pill-states { display:block; width:100%; aspect-ratio:876.69 / 246.28; object-fit:cover; border:1px solid rgba(255,255,255,.5) !important; border-radius:12px !important; }
.filter-pills-comparison { position:relative; display:flex; width:100%; height:auto; flex-direction:column; align-items:center; justify-content:flex-end; margin:0 0 30px; overflow:visible; border-radius:12px; background:#fff; }
.filter-pills-comparison > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border:0 !important; border-radius:12px !important; background:#fff; transition:opacity .32s ease,transform .32s ease; }
.filter-pills-comparison > img:first-child { position:relative; height:auto; opacity:1; }
.filter-pills-comparison .filter-pills-after { opacity:0; pointer-events:none; transform:scale(.995); }
.filter-pills-comparison.is-after > img:first-child { opacity:0; transform:scale(1.005); }
.filter-pills-comparison.is-after .filter-pills-after { opacity:1; pointer-events:auto; transform:scale(1); }
.filter-pills-view-toggle { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-bottom:-30px; padding:5px; overflow:hidden; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:#292929; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.filter-pills-view-toggle button { position:relative; z-index:1; min-width:112px; padding:10px 18px; border:0; border-radius:999px; background:transparent; color:#fff; font:600 18px/1.2 "Poppins",Arial,sans-serif; cursor:pointer; transition:color .28s ease,opacity .2s ease; }
.filter-pills-view-toggle button.is-selected { color:#252525; }
@media (max-width:650px) { .filter-pills-redesign > h2 { font-size:28px; }.filter-pills-view-toggle button { min-width:96px; padding:9px 14px; font-size:16px; } }
@media (prefers-reduced-motion:reduce) { .filter-pills-comparison > img { transition:none; transform:none !important; } }
.portfolio-companion { position:fixed; right:8px; bottom:clamp(14px,3vw,34px); z-index:30; display:flex; align-items:flex-end; gap:8px; max-width:min(330px,calc(100vw - 16px)); }
.portfolio-companion[hidden] { display:none !important; }
.portfolio-companion > img { order:2; width:92px; height:72px; object-fit:contain; border:0 !important; filter:drop-shadow(0 8px 18px rgba(0,0,0,.35)); cursor:grab; touch-action:none; user-select:none; -webkit-user-drag:none; }
.portfolio-companion.is-dragging > img { cursor:grabbing; }
.portfolio-companion-message { position:relative; order:1; margin-bottom:10px; padding:12px 14px; border:1px solid rgba(255,255,255,.14); border-radius:12px 12px 3px 12px; background:#202020; box-shadow:0 10px 28px rgba(0,0,0,.3); color:#f3f3f0; opacity:0; pointer-events:none; transform:translateX(12px) scale(.96); transform-origin:right bottom; transition:opacity .24s ease,transform .32s cubic-bezier(.2,.8,.2,1); }
.portfolio-companion.is-visible .portfolio-companion-message { opacity:1; pointer-events:auto; transform:translateX(0) scale(1); }
.portfolio-companion-message p { margin:0; font-size:13px; font-weight:400; line-height:1.35; }
.portfolio-companion-message button { position:absolute; top:5px; right:7px; width:24px; height:24px; padding:0; border:0; background:transparent; color:#a1a1a1; font:400 20px/1 "Inter",Arial,sans-serif; cursor:pointer; }
@media (max-width:520px) { .portfolio-companion > img { width:76px; height:60px; }.portfolio-companion-message { padding:10px 12px; }.portfolio-companion-message p { font-size:12px; } }
@media (prefers-reduced-motion:reduce) { .portfolio-companion { transition:none; } }
.filter-comparison { display:grid; grid-template-columns:minmax(130px,.25fr) minmax(0,1.75fr); align-items:stretch; column-gap:12px; row-gap:8px; }
.filter-comparison figure { margin:0; }
.filter-comparison > figure { position:relative; display:flex; flex-direction:column; }
.filter-comparison > figure img { flex:1; min-height:0; object-fit:contain; object-position:top; background:#fff; }
.filter-comparison img { display:block; width:100%; border:1px solid var(--rule); }
.filter-comparison figcaption { margin-top:8px; color:var(--muted); font-size:12px; }
.filter-comparison-label { grid-column:1 / -1; margin:0; color:var(--muted); font-size:12px; }
.auto-scroll-demo { margin:24px 0 0; }
.auto-scroll-demo video { display:block; width:100%; border:1px solid rgba(255,255,255,.5); border-radius:4px; }
.auto-scroll-demo figcaption { margin-top:8px; color:var(--muted); font-size:12px; }
.filter-relevance { margin-top:56px; }
.filter-relevance h3 { max-width:720px; margin:0; font-size:clamp(24px,2.8vw,38px); font-weight:300; line-height:1.08; letter-spacing:-.04em; }
.filter-relevance p { max-width:620px; margin:12px 0 24px; color:var(--muted); }
.filter-relevance img { display:block; width:100%; border:0 !important; border-radius:4px; }
.part-two-addition { display:block; width:100%; margin:0; border:1px solid var(--rule); }
.filter-pills-column { display:grid; grid-template-columns:1fr; grid-template-rows:auto auto; align-content:space-between; gap:12px; min-width:0; min-height:0; }
.filter-smush { display:flex; flex-direction:column; min-height:0; }
.filter-smush img { flex:none; height:auto; object-fit:initial; object-position:top; background:#fff; }
.density-test + .density-test { margin-top:0; }
.extra-space { display:flex; flex-direction:column; gap:24px; margin-top:72px; }
.extra-space > .eyebrow { margin:0 0 -24px; }
.extra-space > h2 { width:100%; margin:0; font-size:30px; font-weight:500; line-height:normal; letter-spacing:-.07em; }
.extra-space-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.extra-space-comparison figure { min-width:0; margin:0; }
.extra-space-comparison h3 { margin:0 0 4px; color:#f3f3f0; font-size:24px; font-weight:400; line-height:normal; letter-spacing:-.07em; }
.extra-space-comparison img { display:block; width:100%; aspect-ratio:2.4 / 1; object-fit:cover; object-position:top; border:0 !important; border-radius:12px !important; }
.extra-space-comparison figcaption { margin-top:4px; color:#f3f3f0; font-size:15px; line-height:normal; letter-spacing:.066em; text-transform:uppercase; }
.extra-space-comparison figcaption strong { color:#8ed39a; font-weight:700; }
.attribute-filters { display:flex; flex-direction:column; gap:24px; margin-top:112px; }
.attribute-filters > .eyebrow { margin:0 0 -24px; }
.attribute-filters > h2 { width:100%; margin:0; font-size:30px; font-weight:500; line-height:normal; letter-spacing:-.07em; }
.attribute-filters-media { display:flex; width:100%; align-items:flex-start; justify-content:space-between; gap:clamp(24px,8vw,138px); }
.attribute-filters-media video { display:block; width:auto; max-width:46%; height:auto; border:0; border-radius:0; outline:0; background:#fff; }
.attribute-filters-media video:first-child { flex:0 1 432px; margin-bottom:-6px; clip-path:inset(0 0 6px 0); }
.attribute-filters-media video:last-child { flex:0 1 390px; border-radius:12px; }
@media (max-width:650px) { .attribute-filters { margin-top:72px; }.attribute-filters > h2 { font-size:28px; }.attribute-filters-media { flex-direction:column; gap:20px; }.attribute-filters-media video { width:100%; max-width:none; } }
.test-heading { margin:0 0 12px; font-size:16px; color:var(--ink); }
.test-heading span { color:#8ed39a; font-weight:500; }
.test-heading .control { color:var(--muted); font-weight:400; }
.product-test-impact { margin:8px 0 0; font-size:13px; color:var(--muted); }
.product-test-impact strong { margin-right:5px; color:#8ed39a; font-size:clamp(20px,2.2vw,30px); font-weight:500; letter-spacing:-.04em; }
.final-designs { margin-top:72px; }
.final-designs h2 { margin:0 0 10px; font-size:clamp(28px,3.6vw,48px); font-weight:500; line-height:1.05; letter-spacing:-.045em; }
.final-designs-instruction { margin:0 0 28px; color:var(--muted); font-size:18px; font-weight:400; line-height:1.45; }
.final-designs-prototype { margin-bottom:72px; }
.filtering-intro-prototype.final-designs-prototype { margin-bottom:0; }
.final-designs-prototype .prototype-frame { height:auto; aspect-ratio:16 / 9; }
.final-designs-prototype .prototype-frame.is-mobile { width:min(375px,100%); height:575px; aspect-ratio:auto; background:#000; }
.final-designs-prototype .prototype-frame.is-mobile iframe { display:block; }
.final-designs-prototype .filtering-mobile-preview { display:none !important; }
.final-designs h3 { margin:0 0 24px; color:#f3f3f0; font-size:30px; font-weight:500; line-height:normal; letter-spacing:-.07em; }
.final-designs > img { display:block; width:100%; border:1px solid var(--rule); }
.final-impact { margin-top:72px; }
.final-impact > h2 { margin:0 0 24px; color:#f3f3f0; font-size:30px; font-weight:500; line-height:normal; letter-spacing:-.07em; }
.final-impact-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.final-impact-metric { display:flex; min-height:132px; flex-direction:column; justify-content:flex-start; gap:6px; padding:18px; border-radius:8px; background:rgba(255,255,255,.05); }
.final-impact-metric strong { color:#8ed39a; font-size:clamp(30px,3.3vw,44px); font-weight:600; line-height:1; letter-spacing:-.045em; }
.final-impact-metric span { color:#f3f3f0; font-size:16px; font-weight:400; line-height:1.35; }
.final-impact-metric small { display:block; margin-top:4px; color:#a1a1a1; font-size:10px; font-weight:400; line-height:1.35; }
.final-impact-total { max-width:900px; margin:48px 0 0; color:#f3f3f0; font-size:clamp(32px,5vw,64px); font-weight:700; line-height:1.02; letter-spacing:-.055em; }
.final-impact-total span { color:#8ed39a; }
@media (max-width:760px) { .final-impact-metrics { grid-template-columns:1fr; }.final-impact-metric { min-height:112px; }.final-impact-total { margin-top:36px; } }
.plp-analysis, .filter-part, .extra-space, .final-designs { margin-top:112px; }
.filtering-try { margin-top:112px; }
.case-scaffold-section { margin-top:96px; }
.case-scaffold-section > .eyebrow { margin-bottom:8px; }
.case-scaffold-section > h2 { margin:0 0 24px; font-size:clamp(28px,3.6vw,48px); font-weight:500; line-height:1.05; letter-spacing:-.045em; }
.case-scaffold-placeholder { min-height:280px; border-radius:12px; }
.case-scaffold-placeholder--short { min-height:180px; }
@media (max-width:650px) { .case-scaffold-section { margin-top:72px; }.case-scaffold-placeholder { min-height:220px; } }
.redirect-pdp-study .modal-header { max-width:none; padding-top:32px; }
.redirect-pdp-study .modal-header h1 { margin-bottom:0; font-size:clamp(56px,7.2vw,96px); line-height:.96; letter-spacing:-.055em; }
.redirect-pdp-study .filtering-intro { margin-top:56px; gap:32px; }
.redirect-pdp-study .filtering-summary { grid-template-columns:minmax(0,1.4fr) minmax(190px,.76fr) minmax(250px,1.02fr); }
.redirect-pdp-study .filtering-summary-card { min-height:124px; padding:16px; border-radius:8px; background:rgba(255,255,255,.05); }
.redirect-pdp-study .filtering-summary-card .eyebrow { margin-bottom:10px; }
.redirect-pdp-study .filtering-summary-card > p:last-child { font-size:20px; font-weight:400; line-height:1.5; }
.redirect-pdp-study .filtering-summary-impact > p:last-child,
.redirect-pdp-study .filtering-summary-role > p:last-child { max-width:none; font-size:26px; font-weight:400; line-height:1.2; }
.redirect-preview { display:flex; width:100%; flex-direction:column; align-items:center; margin-top:0; }
.redirect-preview-stage { position:relative; width:100%; min-height:0; aspect-ratio:16 / 9; overflow:hidden; border-radius:12px; background:transparent; }
.redirect-preview-stage video { position:absolute; inset:0; display:block; width:100%; height:100%; aspect-ratio:16 / 9; border:0; border-radius:12px; outline:0; background:transparent; object-fit:cover; opacity:0; pointer-events:none; transition:opacity .28s ease; }
.redirect-preview-stage video.is-selected { opacity:1; pointer-events:auto; }
.redirect-preview-toggle { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,max-content); margin-top:-40px; padding:6px; overflow:hidden; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:#292929; box-shadow:0 5px 16px rgba(0,0,0,.3); }
.redirect-preview-toggle::before { content:""; position:absolute; top:6px; bottom:6px; left:6px; width:var(--redirect-tab-width,112px); border-radius:999px; background:#f3f3f0; box-shadow:0 1px 4px rgba(0,0,0,.22); transform:translateX(var(--redirect-tab-offset,0)); transition:transform .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1); }
.redirect-preview-toggle button { position:relative; z-index:1; min-width:112px; padding:11px 16px; border:0; border-radius:999px; background:transparent; color:#f3f3f0; font:600 17px/1.2 "Poppins",Arial,sans-serif; cursor:pointer; }
.redirect-preview-toggle button:nth-child(2) { min-width:190px; }
.redirect-preview-toggle button.is-selected { color:#292929; }
.redirect-preview-toggle:has(button:nth-child(1).is-selected) { --redirect-tab-width:112px; --redirect-tab-offset:0; }
.redirect-preview-toggle:has(button:nth-child(2).is-selected) { --redirect-tab-width:190px; --redirect-tab-offset:112px; }
.redirect-preview-toggle:has(button:nth-child(3).is-selected) { --redirect-tab-width:112px; --redirect-tab-offset:302px; }
@media (max-width:900px) { .redirect-pdp-study .filtering-summary { grid-template-columns:1fr 1fr; }.redirect-pdp-study .filtering-summary-overview { grid-column:1 / -1; } }
@media (max-width:650px) { .redirect-pdp-study .modal-header h1 { font-size:clamp(48px,15vw,70px); }.redirect-pdp-study .filtering-intro { margin-top:40px; }.redirect-pdp-study .filtering-summary { grid-template-columns:1fr; }.redirect-pdp-study .filtering-summary-overview { grid-column:auto; }.redirect-pdp-study .filtering-summary-card { min-height:0; }.redirect-preview-toggle { grid-template-columns:repeat(3,1fr); width:min(100%,380px); margin-top:-32px; padding:5px; }.redirect-preview-toggle::before { top:5px; bottom:5px; left:5px; width:calc((100% - 10px) / 3); transform:translateX(var(--redirect-mobile-offset,0)); }.redirect-preview-toggle button,.redirect-preview-toggle button:nth-child(2) { min-width:0; padding:10px 8px; font-size:13px; }.redirect-preview-toggle:has(button:nth-child(1).is-selected) { --redirect-mobile-offset:0; }.redirect-preview-toggle:has(button:nth-child(2).is-selected) { --redirect-mobile-offset:100%; }.redirect-preview-toggle:has(button:nth-child(3).is-selected) { --redirect-mobile-offset:200%; } }
@media (prefers-reduced-motion:reduce) { .redirect-preview-toggle::before,.redirect-preview-stage video { transition:none; } }
.redirect-context { margin-top:112px; }
.redirect-context-copy { display:grid; gap:12px; }
.redirect-context-copy .eyebrow,
.redirect-context-copy h2,
.redirect-context-copy > p:last-child { margin:0; }
.redirect-context-copy h2 { font-size:clamp(32px,3.6vw,48px); font-weight:500; line-height:1.05; letter-spacing:-.045em; }
.redirect-context-copy > p:last-child { font-size:clamp(18px,2vw,24px); font-weight:400; line-height:1.45; }
.redirect-context-media { display:block; width:100%; height:auto; margin-top:24px; border:0; border-radius:12px; outline:0; background:#d9d9d9; }
@media (max-width:650px) { .redirect-context { margin-top:72px; }.redirect-context-copy > p:last-child { font-size:18px; } }
.redirect-types { margin-top:112px; }
.redirect-types > h2 { margin:0 0 40px; font-size:clamp(32px,3.6vw,48px); font-weight:500; line-height:1.05; letter-spacing:-.045em; }
.redirect-type-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.redirect-type-card { padding:26px 20px; border-radius:8px; background:rgba(255,255,255,.05); }
.redirect-type-card p { margin:0; color:#f3f3f0; font-size:clamp(18px,1.8vw,24px); font-weight:400; line-height:1.5; letter-spacing:-.025em; }
.redirect-type-card strong { font-weight:600; }
@media (max-width:850px) { .redirect-type-grid { grid-template-columns:1fr; gap:12px; } }
@media (max-width:650px) { .redirect-types { margin-top:72px; }.redirect-types > h2 { margin-bottom:24px; }.redirect-type-card { padding:20px; }.redirect-type-card p { font-size:18px; } }
.redirect-problem { margin-top:112px; }
.redirect-problem > .eyebrow { margin:0 0 12px; }
.redirect-problem > h2 { max-width:1100px; margin:0 0 40px; font-size:clamp(32px,3.6vw,48px); font-weight:500; line-height:1.05; letter-spacing:-.045em; }
.redirect-problem-media { display:grid; grid-template-columns:minmax(0,1.383fr) minmax(0,.894fr); gap:24px; align-items:stretch; }
.redirect-pdp-study .redirect-problem-media img,
.redirect-problem-media video { display:block; width:100%; height:auto; border:0 !important; border-radius:12px !important; outline:0; object-fit:cover; }
@media (max-width:650px) { .redirect-problem { margin-top:72px; }.redirect-problem > h2 { margin-bottom:24px; }.redirect-problem-media { grid-template-columns:1fr; }.redirect-pdp-study .redirect-problem-media img,.redirect-problem-media video { height:auto; object-fit:contain; } }
.redirect-test { margin-top:112px; }
.redirect-test > .eyebrow { margin:0 0 12px; }
.redirect-test > h2 { max-width:1160px; margin:0 0 40px; font-size:clamp(32px,3.6vw,48px); font-weight:500; line-height:1.05; letter-spacing:-.045em; }
.redirect-test-layout { display:grid; grid-template-columns:minmax(0,3.25fr) minmax(250px,1fr); gap:24px; align-items:stretch; }
.redirect-test-video { display:block; width:100%; height:auto; min-height:0; aspect-ratio:1100 / 574; border:0; border-radius:12px; outline:0; background:#fff; object-fit:contain; }
.redirect-test-metrics { position:relative; min-height:0; }
.redirect-test-metric { position:absolute; left:0; right:0; display:flex; height:calc((100% - 24px) / 2); min-height:0; flex-direction:column; justify-content:flex-start; padding:16px; overflow:hidden; border-radius:12px; background:rgba(255,255,255,.05); }
.redirect-test-metric:first-child { top:0; }
.redirect-test-metric:last-child { bottom:0; }
.redirect-test-metric > .eyebrow { margin:0 0 4px; color:#f3f3f0; }
.redirect-test-metric > p:last-child { margin:0; color:#f3f3f0; font-size:clamp(18px,2vw,28px); font-weight:400; line-height:1.2; letter-spacing:-.025em; }
.redirect-test-metric strong { font-weight:600; white-space:nowrap; }
.redirect-test-metric small { display:block; margin-top:4px; color:#a1a1a1; font-size:10px; font-weight:400; line-height:1.35; }
.redirect-test-metric .is-negative { color:#c84b3e; }
.redirect-test-metric .is-positive { color:#8ed39a; }
@media (max-width:850px) { .redirect-test-layout { grid-template-columns:1fr; }.redirect-test-metrics { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }.redirect-test-metric { position:static; height:auto; min-height:140px; }.redirect-test-metric > p:last-child { font-size:clamp(20px,3.5vw,28px); } }
@media (max-width:650px) { .redirect-test { margin-top:72px; }.redirect-test > h2 { margin-bottom:24px; }.redirect-test-layout,.redirect-test-metrics { gap:12px; } }
@media (max-width:520px) { .redirect-test-metrics { grid-template-columns:1fr; }.redirect-test-metric { min-height:0; padding:20px; }.redirect-test-metric > .eyebrow { margin-bottom:10px; } }
.redirect-new-tests { margin-top:112px; }
.redirect-new-tests h2 { margin:0 0 28px; font-size:48px; font-weight:600; line-height:1.05; letter-spacing:-.045em; }
.redirect-new-tests p { margin:0; font-size:24px; font-weight:400; line-height:1.2; letter-spacing:-.035em; }
.redirect-new-tests h3 { max-width:1080px; margin:72px 0 40px; font-size:clamp(28px,3.3vw,44px); font-weight:400; line-height:1.25; letter-spacing:-.035em; }
.redirect-price-comparison { display:grid; grid-template-columns:minmax(0,.824fr) minmax(0,.751fr); gap:24px; align-items:start; }
.redirect-price-comparison figure { margin:0; }
.redirect-pdp-study .redirect-price-comparison img { display:block; width:100%; height:auto; border:0 !important; border-radius:12px !important; }
.redirect-price-comparison figcaption { margin-top:16px; color:#f3f3f0; font-size:18px; font-weight:400; letter-spacing:.08em; text-align:center; text-transform:uppercase; }
@media (max-width:650px) { .redirect-new-tests { margin-top:72px; }.redirect-new-tests h2 { margin-bottom:18px; font-size:36px; }.redirect-new-tests p { font-size:22px; } }
@media (max-width:650px) { .redirect-new-tests h3 { margin:48px 0 24px; font-size:26px; }.redirect-price-comparison { grid-template-columns:1fr; }.redirect-price-comparison figcaption { margin-top:10px; font-size:14px; } }
.redirect-disclosure { margin-top:112px; }
.redirect-disclosure > h2 { margin:0 0 40px; font-size:clamp(32px,3.6vw,48px); font-weight:500; line-height:1.05; letter-spacing:-.045em; }
.redirect-disclosure-copy { max-width:1100px; margin:0 0 40px; font-size:clamp(20px,2.5vw,30px); font-weight:400; line-height:1.45; letter-spacing:-.03em; }
.redirect-disclosure-copy strong { font-weight:600; }
.redirect-disclosure-preview { display:flex; flex-direction:column; align-items:center; }
.redirect-disclosure-stage { position:relative; width:100%; min-height:0; aspect-ratio:16 / 9; overflow:hidden; border-radius:12px; background:#fff; }
.redirect-disclosure-stage video { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; border-radius:12px; outline:0; background:#fff; object-fit:contain; opacity:0; pointer-events:none; transition:opacity .28s ease; }
.redirect-disclosure-stage video[data-disclosure-video="original"] { object-fit:cover; }
.redirect-disclosure-stage video.is-selected { opacity:1; pointer-events:auto; }
.redirect-disclosure-toggle { position:relative; z-index:1; display:grid; width:auto; max-width:100%; grid-template-columns:112px 140px 156px; margin-top:-40px; padding:6px; overflow:hidden; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:#292929; box-shadow:0 5px 16px rgba(0,0,0,.3); }
.redirect-disclosure-toggle::before { content:""; position:absolute; top:6px; bottom:6px; left:6px; width:var(--disclosure-tab-width,112px); border-radius:999px; background:#f3f3f0; box-shadow:0 1px 4px rgba(0,0,0,.22); transform:translateX(var(--disclosure-tab-offset,0)); transition:transform .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1); }
.redirect-disclosure-toggle button { position:relative; z-index:1; min-width:0; padding:11px 14px; border:0; border-radius:999px; background:transparent; color:#f3f3f0; font:600 17px/1.2 "Poppins",Arial,sans-serif; cursor:pointer; }
.redirect-disclosure-toggle button.is-selected { color:#292929; }
.redirect-disclosure-toggle:has(button:nth-child(1).is-selected) { --disclosure-tab-width:112px; --disclosure-tab-offset:0; }
.redirect-disclosure-toggle:has(button:nth-child(2).is-selected) { --disclosure-tab-width:140px; --disclosure-tab-offset:112px; }
.redirect-disclosure-toggle:has(button:nth-child(3).is-selected) { --disclosure-tab-width:156px; --disclosure-tab-offset:252px; }
@media (max-width:650px) { .redirect-disclosure { margin-top:72px; }.redirect-disclosure > h2,.redirect-disclosure-copy { margin-bottom:24px; }.redirect-disclosure-copy { font-size:18px; }.redirect-disclosure-toggle { width:min(100%,390px); grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:-28px; padding:5px; }.redirect-disclosure-toggle::before { top:5px; bottom:5px; left:5px; width:calc((100% - 10px) / 3); }.redirect-disclosure-toggle button { padding:10px 6px; font-size:13px; }.redirect-disclosure-toggle:has(button:nth-child(1).is-selected) { --disclosure-tab-offset:0; }.redirect-disclosure-toggle:has(button:nth-child(2).is-selected) { --disclosure-tab-offset:100%; }.redirect-disclosure-toggle:has(button:nth-child(3).is-selected) { --disclosure-tab-offset:200%; } }
@media (prefers-reduced-motion:reduce) { .redirect-disclosure-stage video,.redirect-disclosure-toggle::before { transition:none; } }
.redirect-discount-method { margin-top:112px; }
.redirect-discount-method > h2 { margin:0 0 20px; font-size:clamp(32px,3.6vw,48px); font-weight:500; line-height:1.05; letter-spacing:-.045em; }
.redirect-discount-method > p { margin:0; font-size:clamp(20px,2.5vw,30px); font-weight:400; line-height:1.35; letter-spacing:-.03em; }
.redirect-discount-slides { position:relative; width:100%; aspect-ratio:2212 / 928; margin:40px 0 0; overflow:hidden; border-radius:12px; background:#fff; }
.redirect-pdp-study .redirect-discount-slides img { position:absolute; inset:0; display:block; width:100%; height:100%; border:0 !important; border-radius:12px !important; object-fit:cover; opacity:0; transform:scale(.998); transition:opacity .45s ease,transform .45s ease; }
.redirect-pdp-study .redirect-discount-slides img.is-selected { opacity:1; transform:scale(1); }
@media (max-width:650px) { .redirect-discount-method { margin-top:72px; }.redirect-discount-method > h2 { margin-bottom:14px; }.redirect-discount-method > p { font-size:18px; }.redirect-discount-slides { margin-top:24px; } }
@media (prefers-reduced-motion:reduce) { .redirect-pdp-study .redirect-discount-slides img { transition:none; } }
.redirect-status { margin-top:112px; padding-bottom:48px; }
.redirect-status > h2 { margin:0 0 40px; font-size:48px; font-weight:600; line-height:1.05; letter-spacing:-.045em; }
@media (max-width:650px) { .redirect-status { margin-top:72px; padding-bottom:24px; }.redirect-status > h2 { margin-bottom:24px; font-size:36px; } }
.prototype-heading { display:flex; align-items:baseline; gap:20px; }
.filtering-try h2 { margin:0 0 10px; font-size:clamp(28px,3.6vw,48px); font-weight:300; line-height:1.05; letter-spacing:-.045em; }
.prototype-heading h2 { margin-right:auto; }
.prototype-view-toggle { position:relative; display:inline-flex; margin-bottom:10px; padding:2px; border:1px solid var(--rule); border-radius:999px; }
.prototype-view-toggle button { position:relative; z-index:1; padding:7px 10px; border:0; border-radius:999px; background:transparent; color:var(--muted); font:500 11px/1 "Inter", Arial, sans-serif; letter-spacing:.03em; cursor:pointer; transition:color .28s ease,opacity .2s ease; }
.prototype-view-toggle button.is-selected { background:var(--ink); color:var(--paper); }
.prototype-view-toggle button:hover { opacity:.65; }
.filtering-try .prototype-frame { transition:width .2s ease, height .2s ease; }
.filtering-try .prototype-frame.is-mobile { width:min(390px, 100%); height:min(740px, 82vh); margin-right:auto; margin-left:auto; }
.filtering-try > p { margin:0 0 28px; color:var(--muted); }
@media (max-width:650px) { .plp-analysis, .filter-part, .extra-space, .final-designs { margin-top:72px; } }
@media (max-width:650px) { .filtering-try { margin-top:72px; } }
@media (max-width:650px) { .prototype-heading { align-items:flex-start; flex-wrap:wrap; gap:8px 16px; }.prototype-heading h2 { margin-right:0; }.prototype-view-toggle { margin-left:auto; } }
@media (prefers-reduced-motion:reduce) { .filtering-prototype .prototype-view-toggle::before,.filter-before-after-toggle::before,.filter-pills-view-toggle::before { transition:none; } }
@media (max-width:650px) { .final-designs { margin-top:72px; } }
@media (max-width:650px) { .filter-comparison { grid-template-columns:1fr; gap:12px; }.filter-pills-column { grid-template-columns:1fr; }.filter-pills-column > figure:first-child, .filter-unlocks { grid-column:auto; } }
@media (max-width:650px) { .filter-smush { grid-column:auto; }.extra-space { margin-top:56px; }.extra-space > h2 { font-size:28px; }.extra-space-comparison { grid-template-columns:1fr; gap:28px; }.extra-space-comparison h3 { font-size:22px; } }
@media (max-width:650px) { .filter-part { margin-top:56px; } }
.case-study .modal-media { margin:48px 0 24px; }
.ai-study section[id],.ai-study h2[id] { scroll-margin-top:90px; }
.ai-prototype-section { margin-top:48px; }
.ai-prototype-section > .eyebrow { margin:0 0 4px; }
.ai-prototype-section > h2 { width:100%; margin:0 0 24px; font-size:30px; font-weight:500; line-height:normal; letter-spacing:-.07em; }
.case-study .ai-prototype-frame { width:100%; height:300px; overflow:clip; border:0; border-radius:12px; background:transparent; }
.case-study .ai-prototype-frame iframe { display:block; width:100%; height:100%; border:0; background:transparent; }
.project-case-media { aspect-ratio:1150 / 640; padding:0; border:0; border-radius:12px; background:transparent; }
.project-case-media video { width:100%; height:100%; border:0; border-radius:12px; outline:0; object-fit:contain; }
@media (max-width:650px) { .ai-prototype-section { margin-top:48px; }.ai-prototype-section > h2 { font-size:28px; } }
.resume-page { width:min(100%,1080px); margin:0 auto; padding:clamp(64px,9vh,104px) 0 130px; }
.resume-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; padding-bottom:36px; border-bottom:1px solid var(--ink); }
.resume-intro h1 { margin:0; font-size:clamp(3.5rem,7vw,6.5rem); line-height:.9; letter-spacing:-.055em; }
.resume-download { display:inline-flex; align-items:center; gap:8px; margin:0; padding:11px 16px; border:1px solid var(--ink); border-radius:999px; font-size:13px; font-weight:500; line-height:1; text-decoration:none; }
.resume-download:hover { background:var(--ink); color:var(--paper); opacity:1; }
.resume-download span { margin:0; font-size:16px; }
.resume-details { display:grid; grid-template-columns:minmax(0,2fr) minmax(230px,.72fr); gap:clamp(48px,7vw,88px); align-items:start; padding-top:40px; }
.resume-experience > .eyebrow { margin-bottom:12px; }
.resume-entry { padding:24px 0 26px; border-bottom:1px solid var(--rule); }
.resume-entry:first-of-type { border-top:1px solid var(--rule); }
.resume-entry-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.resume-entry-heading h2 { max-width:500px; margin:0 0 5px; font-size:20px; font-weight:500; line-height:1.25; letter-spacing:-.025em; }
.resume-entry-heading p { margin:0; color:var(--muted); font-size:13px; line-height:1.4; }
.resume-entry-heading > p { flex:0 0 auto; padding-top:3px; font-family:"Inter",Arial,sans-serif; font-size:12px; letter-spacing:.02em; }
.resume-entry-date { display:grid; justify-items:end; gap:7px; }
.resume-current-label { display:inline-flex; align-items:center; gap:5px; color:#4f8b5d; font-family:"Poppins",Arial,sans-serif; font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.resume-current-label::before { content:""; width:6px; height:6px; border-radius:50%; background:#6eae7c; }
.job-description { max-width:680px; margin:16px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }
.resume-sidebar { position:sticky; top:92px; display:grid; gap:14px; }
.resume-sidebar section { padding:20px; border-radius:12px; background:rgba(21,21,21,.045); }
.resume-sidebar .eyebrow { margin-bottom:14px; }
.resume-copy { max-width:270px; margin:0; font-size:14px; line-height:1.55; }
.resume-copy strong { font-weight:600; }
.resume-copy span { color:var(--muted); }
.resume-focus { display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none; }
.resume-focus li { padding:7px 9px; border:1px solid var(--rule); border-radius:999px; font-size:11px; font-weight:400; line-height:1.15; }
@keyframes appear { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes shimmer { to { background-position:-200% 0; } }
/* Inspiration variation: open index.html#inspo */
body.inspo { --ink:#f3f3f0; --paper:#090909; --rule:#3a3a3a; --muted:#a1a1a1; --accent:#b8c6ff; background:#090909; }
body.inspo main, body.inspo footer { max-width:1320px; padding-left:6vw; padding-right:6vw; }
body.inspo .site-nav { margin-left:-6vw; margin-right:-6vw; padding:18px 6vw; background:rgba(9,9,9,.58); border-bottom:1px solid rgba(255,255,255,.1); }
body.inspo .wordmark { font-size:14px; letter-spacing:0; }.inspo .nav-tab { color:var(--ink); font-family:"Poppins",Arial,sans-serif; font-size:13px; font-weight:600; text-transform:none; letter-spacing:0; }.inspo .nav-tab.active { background:rgba(255,255,255,.15); color:var(--ink); }
body.inspo .hero { min-height:calc(100vh - 62px); padding-top:13vh; overflow:visible; }
body.inspo .section-marker { position:sticky; top:92px; z-index:4; display:block; width:0; height:0; margin-left:-4.8vw; color:var(--muted); font-family:"SF Mono", Monaco, Menlo, Courier, monospace; font-size:10px; letter-spacing:.12em; line-height:1; text-transform:uppercase; white-space:nowrap; writing-mode:vertical-rl; }
body.inspo h1 { max-width:1020px; font-size:clamp(3.25rem,5.5vw,6rem); line-height:.96; letter-spacing:-.045em; }
body.inspo .role-rotator { color:var(--ink); opacity:.82; }
body.inspo .intro-details { max-width:800px; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:28px; margin-left:13vw; padding:20px; background:rgba(255,255,255,.08); backdrop-filter:blur(10px); }
body.inspo .intro-details > div:first-child a { white-space:nowrap; }
body.inspo .intro-details > div:first-child { position:relative; z-index:10; }
body.inspo .intro-details > div:last-child { position:relative; z-index:1; }
body.inspo .intro-details .current-location { margin-top:14px; color:var(--muted); font-size:13px; line-height:1.5; }
body.inspo .intro-details .current-location strong { font-weight:600; }
body.inspo .intro-details a.tooltip-trigger { cursor:pointer; }
body.inspo .intro-details a.tooltip-trigger:hover,
body.inspo .intro-details a.tooltip-trigger:focus { opacity:1; }
body.inspo .intro-details a.tooltip-trigger .tooltip-copy { white-space:normal; }
body.inspo:not(:has(.case-study)) .intro-details,
body.inspo:not(:has(.case-study)) .impact-stats,
body.inspo:not(:has(.case-study)) .project-link,
body.inspo:not(:has(.case-study)) .project-image,
body.inspo:not(:has(.case-study)) .project-copy,
body.inspo:not(:has(.case-study)) .project-callout,
body.inspo:not(:has(.case-study)) img,
body.inspo:not(:has(.case-study)) video { border-radius:12px; }
body.inspo:not(:has(.case-study)) .impact-stats,
body.inspo:not(:has(.case-study)) .project-link,
body.inspo:not(:has(.case-study)) .project-image { overflow:hidden; }
body.inspo .intro-details > div:last-child { color:color-mix(in srgb,var(--ink) 72%,transparent); }
body.inspo .impact-stats { position:relative; z-index:1; width:calc(100% - 4vw); margin:8vh 0 0; gap:1px; background:rgba(255,255,255,.14); }
body.inspo .impact { padding:20px; background:#161616; }.inspo .impact strong { color:var(--ink); font-size:clamp(2.1rem,4vw,4.1rem); }
body.inspo .work { position:relative; padding-top:18px; padding-bottom:60px; border-top-color:rgba(255,255,255,.28); }.inspo .section-heading { margin-left:13vw; margin-bottom:74px; }.inspo .section-heading .eyebrow { color:var(--muted); }
body.inspo .projects { gap:130px; max-width:none; }.inspo .project-card:nth-child(even) { transform:translateX(8vw); }.inspo .project-link { grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); column-gap:0; background:#111; transition:transform .3s ease; }.inspo .project-link:hover { transform:translate(-10px,-10px); }.inspo .project-image { aspect-ratio:1.25; }.inspo .project-copy { position:relative; margin:22px 0 22px -34px; padding:24px; background:rgba(28,28,28,.94); border:1px solid rgba(255,255,255,.12); align-self:center; z-index:1; }.inspo .project-meta h3 { font-size:clamp(1.55rem,2.2vw,2.35rem); }.inspo .project-description { color:#b6b6b6; }.inspo .project-impact strong { color:#8ed39a; }.inspo .project-link:hover .project-image { filter:brightness(1.12); }
body.inspo .about { position:relative; margin-top:0; padding-top:60px; border-top-color:rgba(255,255,255,.28); }.inspo .about-copy { margin-left:13vw; }.inspo .about h2 { max-width:920px; font-size:clamp(2.8rem,6vw,6.5rem); line-height:.94; letter-spacing:-.05em; }.inspo .about-copy p { color:#b6b6b6; }
body.inspo footer { border-top-color:rgba(255,255,255,.2); }
@media (prefers-color-scheme: light) {
  body.inspo { --ink:#171717; --paper:#f2f1ed; --rule:#cbc9c2; --muted:#686763; --accent:#3f5fa8; background:var(--paper); }
  body.inspo .site-nav { background:rgba(242,241,237,.64); border-bottom-color:rgba(23,23,23,.12); }
  body.inspo .nav-tab { color:var(--ink); }.inspo .nav-tab.active { background:rgba(23,23,23,.12); color:var(--ink); }
  body.inspo .intro-details { background:rgba(23,23,23,.055); }
  body.inspo .impact-stats { background:rgba(23,23,23,.13); }.inspo .impact { background:rgba(255,255,255,.58); }
  body.inspo .work, body.inspo .about { border-top-color:rgba(23,23,23,.28); }
  body.inspo .project-link { background:#e4e2dc; }.inspo .project-copy { background:rgba(250,249,245,.93); border-color:rgba(23,23,23,.14); }.inspo .project-description, body.inspo .about-copy p { color:#686763; }
  body.inspo .about, body.inspo footer { border-top-color:rgba(23,23,23,.2); }
}
@media (max-width:650px) { main,footer { padding-left:20px;padding-right:20px; }.site-nav { align-items:flex-start; gap:14px; margin:0 -20px; padding-left:20px; padding-right:20px; }.nav-links { justify-content:flex-end; flex-wrap:wrap; }.nav-tab { padding:8px 9px; }.hero { min-height:680px; }.role-rotator { font-size:.6em; }.intro-details { grid-template-columns:1fr; gap:24px; margin-bottom:5vh; }.impact-stats { grid-template-columns:1fr; gap:26px; margin-bottom:5vh; }.section-heading,.about { display:block; }.section-heading .eyebrow { margin-bottom:0; }.projects { gap:64px; }.project-link { display:block; }.project-image { aspect-ratio:1.45; }.project-meta { margin-top:16px; }.project-meta p { text-align:left; margin-top:6px; }.project-description { margin-top:12px; }.about { padding-bottom:90px; }.about h2 { margin-bottom:30px; }.about-copy p { font-size:16px; }.resume-page { padding:9vh 0 80px; }.resume-intro { padding-bottom:55px; }.resume-details { display:block; padding-top:22px; }.resume-details section + section { margin-top:46px; }.resume-entry { grid-template-columns:1fr; gap:5px; }.resume-entry p:last-child { color:var(--muted); }.project-modal { width:100vw; height:100dvh; max-height:none; border:0; }.modal-sheet { padding:24px 20px 60px; }.modal-header { padding-top:50px; }.modal-header h2 { font-size:clamp(3.1rem,16vw,5rem); }.modal-media { aspect-ratio:1.1; margin:46px 0; }.modal-details { grid-template-columns:1fr; gap:32px; }.modal-details section:last-child { grid-column:auto; } }
@media (max-width:650px) { body.inspo main, body.inspo footer { padding-left:20px; padding-right:20px; } body.inspo .site-nav { margin-left:-20px; margin-right:-20px; padding-left:20px; padding-right:20px; } body.inspo .section-marker { display:none; } body.inspo .hero { padding-top:9vh; } body.inspo h1 { font-size:clamp(3.2rem,14vw,5rem); } body.inspo .intro-details { max-width:none; grid-template-columns:1fr; } body.inspo .intro-details, body.inspo .section-heading, body.inspo .about-copy { margin-left:0; } body.inspo .impact-stats { width:100%; margin-top:6vh; } body.inspo .project-card:nth-child(even) { transform:none; } body.inspo .project-link { display:block; background:transparent; } body.inspo .project-copy { margin:-28px 14px 0; } body.inspo .about { margin-top:0; } }

/* Media flip slots: replace these colored frames with project screenshots or GIFs. */
.project-image { isolation:isolate; z-index:0; }.media-slides { position:absolute; inset:0; z-index:1; display:none; overflow:hidden; pointer-events:none; }.project-image.showing-media .media-slides { display:block; }.media-slides i { position:absolute; inset:0; display:none; background:linear-gradient(135deg, rgba(255,255,255,.18), transparent 46%), var(--slide-color, #242424); }.media-slides i.active { display:block; }.media-slides i::after { content:"PROJECT VIEW"; position:absolute; left:18px; bottom:16px; color:rgba(255,255,255,.74); font-family:"SF Mono", Monaco, Menlo, Courier, monospace; font-size:10px; letter-spacing:.12em; }.media-slides i:nth-child(2) { --slide-color:#383838; }.media-slides i:nth-child(3) { --slide-color:#1d1d1d; }.cobalt .media-slides i { --slide-color:#305490; }.cobalt .media-slides i:nth-child(2) { --slide-color:#213b69; }.cobalt .media-slides i:nth-child(3) { --slide-color:#4269a8; }.moss .media-slides i { --slide-color:#64755b; }.moss .media-slides i:nth-child(2) { --slide-color:#4d5c46; }.moss .media-slides i:nth-child(3) { --slide-color:#87977d; }.apricot .media-slides i { --slide-color:#db7852; }.apricot .media-slides i:nth-child(2) { --slide-color:#b85239; }.apricot .media-slides i:nth-child(3) { --slide-color:#ee9d78; }.lavender .media-slides i { --slide-color:#9089c1; }.lavender .media-slides i:nth-child(2) { --slide-color:#716ba0; }.lavender .media-slides i:nth-child(3) { --slide-color:#b8b2e4; }.seafoam .media-slides i { --slide-color:#72ac9d; }.seafoam .media-slides i:nth-child(2) { --slide-color:#52877a; }.seafoam .media-slides i:nth-child(3) { --slide-color:#a4d8cc; }
body.inspo .project-link { transition:none; } body.inspo .project-link:hover { transform:none; opacity:1; } body.inspo .project-link:hover .project-image { filter:none; }
@media (prefers-reduced-motion: reduce) { body.inspo .project-link:hover .media-slides i { animation:none; opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .filter-removals-image img { transition:none; transform:none !important; } }
@media (max-width:850px) {
  .resume-details { grid-template-columns:1fr; gap:40px; }
  .resume-sidebar { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:650px) {
  .resume-page { padding:64px 0 80px; }
  .resume-intro { align-items:flex-start; flex-direction:column; gap:22px; padding-bottom:32px; }
  .resume-details { display:grid; gap:40px; padding-top:32px; }
  .resume-details section + section { margin-top:0; }
  .resume-sidebar { grid-template-columns:1fr; gap:12px; }
  .resume-entry { display:block; padding:22px 0; }
  .resume-entry-heading { gap:18px; }
  .resume-entry-heading h2 { font-size:18px; }
  .job-description { margin-top:14px; }
}
@media (max-width:430px) {
  .resume-entry-heading { flex-direction:column; gap:7px; }
  .resume-entry-heading > p { padding-top:0; }
  .resume-entry-date { justify-items:start; }
}
.resume-body main,
.resume-body footer { max-width:1320px; padding-left:6vw; padding-right:6vw; }
.resume-body .site-nav { margin-right:-6vw; margin-left:-6vw; padding:18px 6vw; border-bottom:1px solid rgba(21,21,21,.1); background:rgba(237,237,234,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.resume-body .wordmark { font-size:14px; font-weight:500; letter-spacing:0; }
.resume-body .nav-tab { color:var(--ink); font-family:"Poppins",Arial,sans-serif; font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; }
.resume-body .nav-tab.active { background:rgba(21,21,21,.12); color:var(--ink); }
@media (max-width:650px) {
  .resume-body main,
  .resume-body footer { padding-right:20px; padding-left:20px; }
  .resume-body .site-nav { margin-right:-20px; margin-left:-20px; padding-right:20px; padding-left:20px; }
}

/* Center the portfolio content on a consistent reading width. */
body.inspo main > .hero,
body.inspo main > .work,
body.inspo main > .about,
body.inspo footer {
  width:100%;
  max-width:770px;
  margin-right:auto;
  margin-left:auto;
}
body.inspo main > .hero { padding-top:48px; }
body.inspo main > .hero h1 { margin-top:0; font-size:clamp(3rem,5vw,5.4rem); }
body.inspo main > .about .about-copy { width:100%; margin-left:0; }
body.inspo .site-nav {
  display:block;
  width:100vw;
  max-width:none;
  margin-right:calc(50% - 50vw);
  margin-left:calc(50% - 50vw);
  padding:0;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  background:color-mix(in srgb,var(--paper) 78%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
body.inspo .site-nav-inner {
  display:flex;
  width:100%;
  max-width:770px;
  margin-right:auto;
  margin-left:auto;
  padding:18px;
  align-items:center;
  justify-content:space-between;
}
body.inspo footer { padding-right:0; padding-left:0; }
body.inspo .case-layout {
  position:relative;
  display:block;
  width:100%;
  max-width:770px;
  margin-right:auto;
  margin-left:auto;
}
body.inspo .case-layout > .case-toc {
  width:160px;
  height:0;
  margin-left:-220px;
  overflow:visible;
}
.redirect-page .case-toc { display:none; }
body.inspo .case-layout > .case-study,
body.inspo main > .case-study {
  width:100%;
  max-width:770px;
  margin-right:auto;
  margin-left:auto;
}
.project-modal { width:min(calc(100vw - 48px),770px); }

@media (min-width:981px) {
  body.inspo main > .case-study { padding-right:0; padding-left:0; }
}
@media (max-width:980px) {
  body.inspo .case-layout > .case-toc { display:none; }
}
@media (max-width:650px) {
  .hero-name-line { white-space:normal; }
  body.inspo .site-nav {
    width:100vw;
    max-width:none;
    margin-right:calc(50% - 50vw);
    margin-left:calc(50% - 50vw);
    padding:0;
  }
  body.inspo .site-nav-inner { padding-right:20px; padding-left:20px; align-items:flex-start; gap:14px; }
  body.inspo footer { padding-right:0; padding-left:0; }
  .project-modal { width:100vw; }
}

/* AI Q&A summary: overview first, then metric and role side by side. */
.ai-study .filtering-summary:not(.is-two-column),
.project-modal .ai-study .filtering-summary:not(.is-two-column) {
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto auto;
}
.ai-study .filtering-summary:not(.is-two-column) .filtering-summary-overview,
.project-modal .ai-study .filtering-summary:not(.is-two-column) .filtering-summary-overview {
  grid-column:1 / -1;
  grid-row:1;
}
.ai-study .filtering-summary:not(.is-two-column) .filtering-summary-impact,
.project-modal .ai-study .filtering-summary:not(.is-two-column) .filtering-summary-impact {
  grid-column:1;
  grid-row:2;
}
.ai-study .filtering-summary:not(.is-two-column) .filtering-summary-role,
.project-modal .ai-study .filtering-summary:not(.is-two-column) .filtering-summary-role {
  grid-column:2;
  grid-row:2;
}
@media (max-width:760px) {
  .ai-study .filtering-summary:not(.is-two-column),
  .project-modal .ai-study .filtering-summary:not(.is-two-column) { grid-template-columns:1fr; }
  .ai-study .filtering-summary:not(.is-two-column) .filtering-summary-overview,
  .ai-study .filtering-summary:not(.is-two-column) .filtering-summary-impact,
  .ai-study .filtering-summary:not(.is-two-column) .filtering-summary-role,
  .project-modal .ai-study .filtering-summary:not(.is-two-column) .filtering-summary-overview,
  .project-modal .ai-study .filtering-summary:not(.is-two-column) .filtering-summary-impact,
  .project-modal .ai-study .filtering-summary:not(.is-two-column) .filtering-summary-role {
    grid-column:1;
    grid-row:auto;
  }
}