@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&family=Manrope:wght@300;400;500;600&display=swap");

:root {
  --black: #080808;
  --soft: #121212;
  --ivory: #f3eee7;
  --gold: #d4af55;
  --muted: #9a9189;
  --line: rgba(255,255,255,.14);
  --serif: "Bodoni Moda", Didot, "Times New Roman", serif;
  --sans: "Manrope", Arial, sans-serif;
  --wrap: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; overflow-x: hidden; background: var(--black); color: var(--ivory); font-family: var(--sans); line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
figure, h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: .95; }
h2 em { color: var(--gold); font-weight: 400; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.wrap { width: var(--wrap); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; left: 15px; top: 10px; padding: 10px 14px; background: white; color: black; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; z-index: -3; inset: -55px; width: calc(100% + 110px); height: calc(100% + 110px); object-fit: cover; filter: blur(26px); transform: scale(1.15); opacity: .5; animation: backgroundDrift 15s ease-in-out infinite alternate; }
.hero-shade { position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at center,rgba(0,0,0,.08),rgba(0,0,0,.9) 82%), rgba(0,0,0,.28); }
.hero-content { width: min(96%, 720px); padding: 70px 10px; text-align: center; }
.hero-logo-wrap { position: relative; width: min(96vw, 650px); margin: 0 auto 4px; isolation: isolate; animation: logoFloat 5s ease-in-out 1s infinite alternate; }
.hero-logo-wrap::before, .hero-logo-wrap::after { content: none; }
.hero-logo { position: relative; z-index: 1; width: 100%; height: auto; max-height: 440px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(255,255,255,.16)) drop-shadow(0 0 22px rgba(212,175,85,.13)); animation: logoReveal .9s ease-out both; }
.hero-line { width: 1px; height: 34px; margin: 0 auto 18px; background: var(--gold); transform-origin: top; animation: lineIn .7s ease-out .45s both; }
.hero h1 { margin-bottom: 35px; font: 400 clamp(.78rem,2vw,1rem)/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; animation: fadeUp .75s ease-out .5s both; }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; animation: fadeUp .75s ease-out .7s both; }
.button { min-width: 145px; min-height: 52px; padding: 13px 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; font-size: .75rem; transition: transform .25s, background .25s; }
.button:hover { transform: translateY(-2px); }
.button-light { background: var(--ivory); color: var(--black); }
.button-dark { border: 1px solid var(--line); background: rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.scroll-cue { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; color: rgba(255,255,255,.55); font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; animation: scrollBob 1.8s ease-in-out infinite; }
.scroll-cue b { color: var(--gold); font-size: 1rem; }

.portfolio { min-height: 100vh; padding: 110px 20px; background: #090909; }
.section-heading { margin-bottom: 50px; text-align: center; }
.section-icon { width: 52px; height: 52px; margin: 0 0 20px; border: 1px solid rgba(212,175,85,.42); border-radius: 50%; display: inline-grid; place-items: center; color: var(--gold); background: rgba(212,175,85,.055); box-shadow: 0 0 28px rgba(212,175,85,.1); font: 400 1.1rem var(--serif); font-style: normal; }
.section-heading > .section-icon, .contact > .section-icon { margin-inline: auto; }
.section-heading > p, .label { margin-bottom: 12px; color: var(--gold); font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; }
.section-heading h2 { margin-bottom: 12px; font-size: clamp(2.8rem,7vw,4.8rem); }
.section-heading > span { color: var(--muted); font-size: .8rem; }
.category-cards { width: var(--wrap); margin: auto; display: grid; gap: 18px; }
.category-card { position: relative; min-height: 230px; padding: 25px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; background: #171717; }
.category-card::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 72% 18%,rgba(212,175,85,.2),transparent 48%); opacity: .72; transform: scale(1.03); transition: opacity .35s, transform .5s; }
.category-card.has-image::before { background: var(--card-image) center/cover no-repeat; opacity: .28; }
.category-card.card-branding::before { background: radial-gradient(circle at 18% 20%,rgba(103,92,112,.55),transparent 45%),radial-gradient(circle at 82% 28%,rgba(79,99,104,.48),transparent 50%); }
.category-card.card-social::before { background: radial-gradient(circle at 18% 78%,rgba(96,68,78,.55),transparent 48%),radial-gradient(circle at 78% 20%,rgba(55,99,86,.5),transparent 52%); }
.category-card.card-profile::before { background: radial-gradient(circle at 35% 20%,rgba(97,104,118,.58),transparent 52%),radial-gradient(circle at 80% 75%,rgba(82,73,56,.48),transparent 50%); }
.category-card.card-motion::before { background: radial-gradient(circle at 25% 25%,rgba(54,76,105,.58),transparent 48%),radial-gradient(circle at 78% 78%,rgba(113,70,84,.48),transparent 52%); }
.category-card.card-packaging::before { background: radial-gradient(circle at 75% 20%,rgba(117,83,48,.55),transparent 48%),radial-gradient(circle at 20% 75%,rgba(71,88,77,.48),transparent 52%); }
.category-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to top,rgba(5,5,5,.96),rgba(5,5,5,.28)); }
.category-card:hover::before { opacity: .48; transform: scale(1); }
.category-card > b { position: absolute; right: 25px; top: 25px; color: var(--gold); }
.card-icon { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); }
.card-icon.material-symbols-outlined { color: var(--ivory); font-size: 1.55rem; font-variation-settings: "FILL" 0,"wght" 300,"GRAD" 0,"opsz" 24; }
.category-card > b { font-family: var(--sans); font-weight: 300; }
.category-card small { color: var(--gold); font-size: .6rem; }
.category-card h3 { margin: 5px 0 0; font-size: 1.7rem; }

.category-heading { padding-top: 140px; padding-bottom: 50px; }
.category-heading h2 { margin-bottom: 12px; font-size: clamp(3rem,8vw,5.4rem); }
.category-heading > span { color: var(--muted); font-size: .78rem; }
.project { padding-top: 55px; background: var(--soft); }
.project-intro { display: block; }
.artwork { margin: 0; }
.artwork img { width: 100%; aspect-ratio: 4/5; object-fit: contain; background: #0b0b0b; }
.artwork figcaption { padding-top: 10px; color: var(--muted); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.project-copy h2 { margin-bottom: 5px; font-size: clamp(3.4rem,10vw,6rem); }
.project-copy h3 { margin-bottom: 25px; color: var(--gold); font-size: 1.45rem; }
.project-copy > p:not(.label) { max-width: 510px; color: var(--muted); }
.project-copy { max-width: 760px; }
.project-copy dl { margin: 35px 0 0; }
.project-copy dl div { padding: 13px 0; display: grid; grid-template-columns: 90px 1fr; border-top: 1px solid var(--line); }
.project-copy dl div:last-child { border-bottom: 1px solid var(--line); }
.project-copy dt { color: var(--muted); font-size: .62rem; text-transform: uppercase; }
.project-copy dd { margin: 0; font-size: .72rem; }
.project-sequence { padding-top: 80px; padding-bottom: 140px; display: grid; gap: 60px; }

.feature { padding-top: 130px; }
.feature-title { margin-bottom: 35px; }
.feature-title h2, .left-heading h2, .final-copy h2, .contact h2 { font-size: clamp(2.8rem,7vw,5rem); }
.feature > .artwork { max-width: 900px; margin-left: auto; }
.two-up { padding-top: 110px; display: grid; gap: 24px; }
.applications { padding-top: 130px; }
.left-heading { text-align: left; }
.gallery { display: grid; gap: 45px; }
.project-final { padding-top: 130px; }
.final-copy { margin-bottom: 35px; }
.project-final .artwork { max-width: 900px; margin-left: auto; }

.about { padding-top: 120px; padding-bottom: 80px; display: grid; gap: 45px; align-items: center; }
.portrait { position: relative; margin: 0; min-height: 480px; display: flex; align-items: end; justify-content: center; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: radial-gradient(circle at 50% 30%,#403128,#101010 68%); box-shadow: 0 35px 90px rgba(0,0,0,.3); }
.portrait::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; background: linear-gradient(transparent,rgba(8,8,8,.2)); pointer-events: none; }
.portrait img { width: 100%; height: 100%; max-height: 720px; object-fit: contain; object-position: bottom; }
.about h2 { margin-bottom: 22px; font-size: clamp(3rem,8vw,5.3rem); }
.about-summary { max-width: 610px; margin-bottom: 16px; color: #d4cdc5; font-size: clamp(.92rem,1.5vw,1.08rem); line-height: 1.8; }
.about-note { max-width: 610px; margin-bottom: 0; color: var(--muted); font-size: .78rem; line-height: 1.9; }
.profile-facts { margin-top: 30px; padding: 18px 0; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-facts > div { padding: 0 15px; display: grid; gap: 3px; border-right: 1px solid var(--line); }
.profile-facts > div:first-child { padding-left: 0; }
.profile-facts > div:last-child { padding-right: 0; border-right: 0; }
.profile-facts strong { color: var(--ivory); font: 500 clamp(1.55rem,3vw,2.15rem)/1 var(--serif); }
.profile-facts span { color: var(--muted); font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; }
.skills { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.skills span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: #ccc; font-size: .6rem; }

.resume { padding-top: 70px; padding-bottom: 140px; }
.resume-heading { margin-bottom: 38px; display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.resume-heading h2 { margin-bottom: 0; font-size: clamp(3rem,7vw,5rem); letter-spacing: -.035em; }
.resume-heading .label { margin-bottom: 11px; }
.rail-hint { margin: 0 0 9px; color: var(--muted); font-size: .62rem; letter-spacing: .05em; white-space: nowrap; }
.rail-hint span { margin-right: 7px; color: var(--gold); }
.career-rail { padding: 2px 2px 19px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px,35%); gap: 14px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-color: rgba(212,175,85,.55) rgba(255,255,255,.05); scrollbar-width: thin; cursor: grab; user-select: none; }
.career-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.career-rail::-webkit-scrollbar { height: 5px; }
.career-rail::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 99px; }
.career-rail::-webkit-scrollbar-thumb { background: rgba(212,175,85,.55); border-radius: 99px; }
.career-card { position: relative; min-height: 290px; padding: 25px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; scroll-snap-align: start; background: radial-gradient(circle at 100% 0,rgba(255,255,255,.045),transparent 48%),#111; }
.career-card::before { content: ""; position: absolute; left: 25px; top: 0; width: 42px; height: 2px; background: var(--gold); opacity: .45; }
.career-card-current { border-color: rgba(212,175,85,.44); background: radial-gradient(circle at 95% 0,rgba(212,175,85,.12),transparent 48%),#12110e; }
.career-card-current::after { content: "Current"; position: absolute; right: 18px; top: 17px; padding: 5px 8px; border: 1px solid rgba(212,175,85,.28); border-radius: 999px; color: var(--gold); font-size: .48rem; letter-spacing: .11em; text-transform: uppercase; }
.career-card time, .card-kicker { color: var(--gold); font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; }
.career-card h3 { min-height: 58px; margin: 20px 0 17px; font-size: clamp(1.45rem,2.6vw,2rem); line-height: 1.05; }
.career-card p { margin-bottom: 0; color: var(--muted); font-size: .67rem; line-height: 1.7; }
.career-card .career-company { color: #d7d0c9; font-size: .66rem; font-weight: 600; }
.career-card .career-market { margin: 2px 0 15px; color: #776f68; font-size: .56rem; letter-spacing: .04em; text-transform: uppercase; }
.resume-lower { margin-top: 26px; display: grid; gap: 16px; }
.education-card, .tools-card { position: relative; min-height: 290px; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #111; }
.education-card { background: radial-gradient(circle at 100% 0,rgba(212,175,85,.12),transparent 50%),#111; }
.education-mark { position: absolute; right: 24px; top: 22px; color: rgba(212,175,85,.45); font-size: 2rem; }
.education-card h3 { max-width: 470px; margin: 45px 0 17px; font-size: clamp(1.75rem,3.3vw,2.65rem); line-height: 1.04; }
.education-card > p { margin-bottom: 25px; color: var(--muted); font-size: .68rem; }
.education-grade { padding: 8px 11px; border: 1px solid rgba(212,175,85,.3); border-radius: 999px; color: #d7c584; font-size: .55rem; letter-spacing: .06em; }
.tools-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.tools-heading h3 { margin: 10px 0 0; font-size: clamp(2rem,4vw,3rem); }
.tools-count { color: #6f6964; font-size: .53rem; letter-spacing: .1em; text-transform: uppercase; }
.tools-tabs { margin: 25px 0 22px; padding: 4px; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: #090909; }
.tool-tab { min-height: 34px; padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 500 .57rem/1 var(--sans); letter-spacing: .04em; cursor: pointer; transition: color .2s ease,background .2s ease; }
.tool-tab[aria-selected="true"] { background: var(--ivory); color: var(--black); }
.tool-panel[hidden] { display: none; }
.tool-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-cloud span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.035); color: #d4cec8; font-size: .62rem; }

.contact { padding-top: 150px; padding-bottom: 150px; text-align: center; }
.contact > p:not(.label) { margin: 0 auto 35px; color: var(--muted); font-size: .78rem; }
.contact-links { max-width: 860px; margin: 0 auto 38px; display: grid; border-top: 1px solid var(--line); }
.contact-link { min-height: 76px; padding: 14px 4px; display: grid; grid-template-columns: 1fr auto 42px; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); text-align: left; }
.contact-link b { font: 500 clamp(1.5rem,5vw,2.2rem) var(--serif); }
.contact-link small { color: var(--muted); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.contact-link i { color: var(--gold); font-style: normal; }
.platform-icon { width: 36px; height: 36px; border: 1px solid rgba(212,175,85,.38); border-radius: 50%; display: grid; place-items: center; background: rgba(212,175,85,.055); color: var(--gold); font: 600 1rem/1 var(--sans); }
.platform-icon svg { width: 21px; height: 21px; }
.behance-icon { font-size: .72rem; letter-spacing: -.05em; }
.facebook-icon { font: 600 1.25rem/1 Georgia,serif; }
.instagram-icon { font-size: 1.35rem; }
.threads-icon { font-size: 1.05rem; }
.contact-link { transition: padding .25s ease, background .25s ease; }
.contact-link:hover { padding-inline: 14px; background: rgba(255,255,255,.035); }
.contact-link:hover .platform-icon { transform: translate(3px,-3px); }
.platform-icon { transition: transform .25s ease; }
.back-top { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: .7rem; }
.footer { padding: 35px 0; border-top: 1px solid var(--line); display: grid; gap: 15px; justify-items: center; color: var(--muted); text-align: center; font-size: .62rem; }
.footer img { width: 105px; height: 54px; object-fit: contain; }
.footer p { margin: 0; letter-spacing: .16em; text-transform: uppercase; }

.inner-topbar { position: sticky; z-index: 30; top: 0; min-height: 68px; padding: 8px max(20px,calc((100% - 1180px)/2)); display: flex; align-items: center; justify-content: space-between; background: rgba(8,8,8,.82); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.inner-topbar > a { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: .7rem; }
.inner-topbar img { width: 82px; height: 48px; object-fit: contain; }
.archive-hero { padding-top: 110px; padding-bottom: 70px; }
.archive-hero h1 { margin-bottom: 18px; font-size: clamp(3.5rem,9vw,6.8rem); letter-spacing: -.035em; }
.archive-hero > p:last-child { max-width: 520px; color: var(--muted); }
.projects-grid { padding-bottom: 130px; display: grid; gap: 55px 24px; }
.project-card { position: relative; display: block; transition: transform .55s cubic-bezier(.2,.75,.25,1); }
.project-cover { position: relative; aspect-ratio: 4/5; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--soft); box-shadow: 0 24px 60px rgba(0,0,0,.18); transition: border-color .4s ease, box-shadow .55s ease; isolation: isolate; }
.project-cover::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg,transparent 48%,rgba(0,0,0,.52)); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.project-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1),filter .4s; }
.project-card-cta { position: absolute; z-index: 2; left: 50%; bottom: 22px; min-height: 42px; padding: 11px 17px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; transform: translate(-50%,16px); opacity: 0; background: rgba(8,8,8,.68); color: var(--ivory); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; backdrop-filter: blur(12px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.75,.25,1), background .25s ease; }
.profile-grid .project-cover { aspect-ratio: 16/9; }
.packaging-grid .project-cover { aspect-ratio: 3/4; }
.packaging-grid .project-cover img { object-fit: contain; }
.fish-day-yearless { position: relative; overflow: hidden; }
.fish-day-yearless::after { content: ""; position: absolute; z-index: 2; left: 73.75%; top: 43.89%; width: 7.5%; height: 7.78%; background: url("assets/projects/fish-day-profile/slide-01-date-patch.png") center/100% 100% no-repeat; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at center,#000 58%,transparent 100%); mask-image: radial-gradient(ellipse at center,#000 58%,transparent 100%); }
.fish-day-case { position: relative; }
.fish-day-case::after { content: ""; position: absolute; z-index: 2; left: 73.75%; top: calc(min(100vw,1122px) * .246875); width: 7.5%; aspect-ratio: 12/7; background: url("assets/projects/fish-day-profile/slide-01-date-patch.png") center/100% 100% no-repeat; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at center,#000 58%,transparent 100%); mask-image: radial-gradient(ellipse at center,#000 58%,transparent 100%); }
.motion-grid .project-cover { aspect-ratio: 4/5; }
.motion-grid .project-card:first-child .project-cover { aspect-ratio: 16/9; }
.project-card:hover { transform: translateY(-7px); }
.project-card:hover .project-cover { border-color: rgba(212,175,85,.48); box-shadow: 0 34px 80px rgba(0,0,0,.36), 0 0 0 1px rgba(212,175,85,.06); }
.project-card:hover .project-cover::after { opacity: 1; }
.project-card:hover .project-cover img { transform: scale(1.045); filter: brightness(1.04); }
.project-card:hover .project-card-cta, .project-card:focus-visible .project-card-cta { opacity: 1; transform: translate(-50%,0); }
.project-card > div:nth-child(2) span { color: var(--gold); font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; }
.project-card h2 { margin: 8px 0 4px; font-size: clamp(1.9rem,4.5vw,3.15rem); letter-spacing: -.025em; }
.project-card p { margin: 0; color: var(--muted); font-size: .7rem; }
.project-card > b { position: absolute; right: 0; bottom: 13px; color: var(--gold); transition: transform .25s; }
.project-card:hover > b { transform: translate(4px,-4px); }
.simple-footer { padding: 28px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: .65rem; }

.case-page { background: #000; }
.case-topbar { position: sticky; z-index: 30; top: 0; min-height: 58px; padding: 7px max(14px,calc((100% - 1122px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(8,8,8,.88); border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); font: 500 .62rem/1.2 var(--sans); }
.case-topbar span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.case-slides { width: min(100%,1122px); margin: 0 auto; padding: 0; font-size: 0; line-height: 0; }
.case-slides img { display: block; width: 100%; height: auto; margin: 0; padding: 0; object-fit: contain; }
.case-back { min-height: 100px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .7rem; }
.project-progress { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,.07); pointer-events: none; }
.project-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg,#a9822f,var(--gold),#f0d98e); will-change: transform; }
.next-project { width: min(1122px,calc(100% - 40px)); min-height: 330px; margin: 90px auto 0; padding: 34px; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.72fr); align-items: center; gap: 38px; background: radial-gradient(circle at 20% 20%,rgba(212,175,85,.1),transparent 42%),#111; transition: border-color .4s ease, transform .5s cubic-bezier(.2,.75,.25,1), box-shadow .5s ease; }
.next-project-copy { padding: 18px; display: flex; flex-direction: column; align-items: flex-start; }
.next-project-copy small { color: var(--gold); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; }
.next-project-copy strong { margin: 18px 0 30px; font: 500 clamp(2.8rem,6vw,5.2rem)/.9 var(--serif); letter-spacing: -.03em; }
.next-project-copy > span { min-height: 44px; padding: 10px 17px; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; align-items: center; gap: 15px; color: var(--muted); font-size: .65rem; transition: color .3s ease, border-color .3s ease, background .3s ease; }
.next-project-copy b { color: var(--gold); font-size: .9rem; transition: transform .3s ease; }
.next-project-cover { aspect-ratio: 4/5; overflow: hidden; border-radius: 20px; background: #090909; }
.next-project-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.25,1), filter .4s ease; }
.next-project:hover { transform: translateY(-6px); border-color: rgba(212,175,85,.42); box-shadow: 0 28px 80px rgba(0,0,0,.32); }
.next-project:hover .next-project-cover img { transform: scale(1.035); filter: brightness(1.07); }
.next-project:hover .next-project-copy > span { color: var(--ivory); border-color: rgba(212,175,85,.38); background: rgba(212,175,85,.05); }
.next-project:hover .next-project-copy b { transform: translate(3px,-3px); }

.project-transition { position: fixed; z-index: 999; overflow: hidden; background: #050505; box-shadow: 0 0 0 100vmax #050505; pointer-events: none; transition: left .52s cubic-bezier(.7,0,.2,1), top .52s cubic-bezier(.7,0,.2,1), width .52s cubic-bezier(.7,0,.2,1), height .52s cubic-bezier(.7,0,.2,1), border-radius .42s ease; }
.project-transition img { width: 100%; height: 100%; object-fit: contain !important; background: #050505; transition: transform .52s cubic-bezier(.7,0,.2,1); }
.project-transition.is-active { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0 !important; }
.project-transition.is-active img { transform: scale(1.01); }
.is-transitioning { cursor: progress; }
.project-entering .case-slides > img:first-child, .project-entering .motion-showcase { animation: projectEnter .72s cubic-bezier(.2,.75,.25,1) both; }
.motion-showcase { padding-top: 90px; padding-bottom: 120px; }
.motion-title { margin-bottom: 45px; }
.motion-title h1 { margin: 0; font-size: clamp(3.2rem,8vw,6.5rem); letter-spacing: -.03em; }
.motion-video { margin: 0 0 70px; }
.motion-video p { margin-bottom: 12px; color: var(--gold); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; }
.motion-video video { display: block; width: 100%; max-height: 82svh; background: #000; border: 1px solid var(--line); border-radius: 20px; object-fit: contain; box-shadow: 0 24px 70px rgba(0,0,0,.42); }
.drive-video { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #000; box-shadow: 0 24px 70px rgba(0,0,0,.42); }
.drive-video img { width: 100%; max-height: 82svh; object-fit: contain; transition: transform .6s ease,filter .35s ease; }
.drive-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.72),transparent 48%); pointer-events: none; }
.drive-video > span { position: absolute; z-index: 1; left: 50%; bottom: 24px; min-height: 50px; padding: 12px 22px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; transform: translateX(-50%); background: var(--ivory); color: var(--black); font-size: .72rem; white-space: nowrap; }
.drive-video > span b { color: var(--gold); }
.drive-video:hover img { transform: scale(1.015); filter: brightness(.82); }

.social-rail { position: fixed; z-index: 70; right: max(12px,env(safe-area-inset-right)); bottom: max(18px,env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 10px; }
.social-rail > a { width: 52px; height: 52px; display: grid; place-items: center; background: rgba(30,30,30,.92); border: 1px solid rgba(255,255,255,.18); color: var(--ivory); backdrop-filter: blur(15px); }
.social-rail > a:first-child { border-radius: 28px 28px 0 0; border-bottom-color: rgba(255,255,255,.08); }
.social-rail > a:nth-child(2) { margin-top: -10px; border-radius: 0 0 28px 28px; }
.social-rail > a:hover, .social-rail > a:focus-visible { color: var(--gold); background: #282828; }
.rail-top { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; display: grid; place-items: center; background: rgba(30,30,30,.92); color: var(--ivory); font: 300 1.8rem/1 var(--sans); cursor: pointer; backdrop-filter: blur(15px); }
.rail-whatsapp { display: block; width: 27px; height: 27px; }
.rail-instagram { position: relative; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 6px; }
.rail-instagram::before { content: ""; position: absolute; inset: 5px; border: 2px solid currentColor; border-radius: 50%; }
.rail-instagram::after { content: ""; position: absolute; right: 3px; top: 3px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.motion-ready .reveal-item { opacity: 0; transform: translateY(28px); transition: opacity .75s ease,transform .75s cubic-bezier(.2,.75,.25,1); }
.motion-ready .reveal-item.is-visible { opacity: 1; transform: none; }
.motion-ready .case-slides img.reveal-slide { filter: brightness(.7); transform: scale(.992); transition: filter .8s ease,transform .9s cubic-bezier(.2,.75,.25,1); }
.motion-ready .case-slides img.reveal-slide.is-visible { filter: none; transform: none; }

.asset-missing { opacity: 0; }
.missing-asset { position: relative; min-height: 250px; background: #151515; }
.missing-asset::after { content: "Image unavailable"; position: absolute; inset: 0; display: grid; place-items: center; color: #666; font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; }

@media (min-width: 700px) {
  :root { --wrap: min(1180px, calc(100% - 80px)); }
  .category-cards { grid-template-columns: repeat(2,1fr); }
  .category-card { min-height: 290px; }
  .projects-grid { grid-template-columns: repeat(2,1fr); }
  .project-sequence { grid-template-columns: 1fr 1fr; gap: 90px 30px; }
  .project-sequence figure:nth-child(even) { transform: translateY(70px); }
  .two-up { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 80px 30px; }
  .gallery figure:nth-child(even) { transform: translateY(80px); }
  .project-final { padding-top: 210px; }
  .about { grid-template-columns: .8fr 1.2fr; gap: 8vw; }
  .resume-lower { grid-template-columns: .88fr 1.12fr; }
  .footer { grid-template-columns: 1fr 1fr 1fr; align-items: center; justify-items: stretch; text-align: left; }
  .footer p { text-align: center; }
  .footer span { text-align: right; }
}

@media (min-width: 900px) {
  .social-rail { right: 24px; bottom: 28px; }
  .social-rail > a { width: 58px; height: 58px; }
}

@keyframes logoReveal {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to { opacity: 1; transform: none; }
}

@keyframes logoFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

@keyframes starGlow {
  from { opacity: .58; transform: translate(-50%,-50%) scale(.82); }
  to { opacity: 1; transform: translate(-50%,-50%) scale(1.18); }
}

@keyframes nameGlow {
  from { opacity: .58; transform: scale(.96); }
  to { opacity: 1; transform: scale(1.04); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes lineIn {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes scrollBob {
  0%,100% { transform: translate(-50%,0); }
  50% { transform: translate(-50%,7px); }
}

@keyframes backgroundDrift {
  from { transform: scale(1.1) translate3d(-1%,-1%,0); }
  to { transform: scale(1.16) translate3d(1%,1%,0); }
}

@keyframes projectEnter {
  from { opacity: 0; transform: scale(1.012); filter: brightness(.72); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (min-width: 1024px) {
  .portfolio { padding-top: 150px; }
  .category-cards { grid-template-columns: repeat(5,1fr); }
  .category-card { min-height: 330px; }
  .projects-grid { grid-template-columns: repeat(3,1fr); }
  .project { padding-top: 160px; }
  .feature, .applications { padding-top: 180px; }
  .two-up { padding-top: 150px; gap: 40px; }
  .about { padding-top: 150px; }
}

@media (max-width: 699px) {
  .hero h1 { max-width: 310px; margin-right: auto; margin-left: auto; line-height: 1.55; letter-spacing: .28em; }
  .about { padding-top: 90px; padding-bottom: 55px; }
  .portrait { min-height: 430px; }
  .about-copy .section-icon { margin-bottom: 15px; }
  .profile-facts > div { padding-inline: 10px; }
  .profile-facts strong { font-size: 1.45rem; }
  .profile-facts span { font-size: .45rem; line-height: 1.45; }
  .resume { padding-top: 50px; padding-bottom: 105px; }
  .resume-heading { margin-bottom: 27px; display: block; }
  .rail-hint { margin-top: 15px; }
  .career-rail { grid-auto-columns: min(82vw,310px); }
  .career-card { min-height: 280px; padding: 22px; }
  .career-card h3 { min-height: 0; margin-top: 18px; }
  .education-card, .tools-card { min-height: 0; padding: 23px; }
  .education-card h3 { margin-top: 38px; }
  .tools-tabs { width: 100%; }
  .tool-tab { flex: 1; padding-inline: 8px; }
  .portfolio { padding-top: 90px; padding-bottom: 100px; }
  .next-project { min-height: 0; margin-top: 58px; padding: 16px; grid-template-columns: 1fr; gap: 10px; }
  .next-project-copy { order: 2; padding: 16px 6px 8px; }
  .next-project-copy strong { margin: 12px 0 22px; font-size: clamp(2.5rem,12vw,3.8rem); }
  .next-project-cover { aspect-ratio: 4/3; }
  .next-project-cover img { object-position: center top; }
  .project-card-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .hero-bg, .hero-logo-wrap, .hero-logo, .star-aura, .hero-line, .hero h1, .hero-actions, .scroll-cue { animation: none; }
  .motion-ready .reveal-item, .motion-ready .case-slides img.reveal-slide { opacity: 1; transform: none; filter: none; }
  .project-transition { display: none; }
}