:root{--ease-out:cubic-bezier(.18,.8,.22,1)}
html{scroll-behavior:smooth}body{overflow-x:hidden}.portfolio-frame{width:min(calc(100% - 2rem),76rem);margin-inline:auto}.nav-progress{position:fixed;z-index:100;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-growth));transform:scaleX(0);transform-origin:left}.site-nav{box-shadow:0 1px 0 rgba(18,63,54,.08),0 .75rem 2rem rgba(18,63,54,.035);backdrop-filter:blur(16px) saturate(1.2)}
.portfolio-hero{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(5rem,10vw,9rem);background:radial-gradient(circle at 80% 20%,rgba(200,232,106,.25),transparent 25rem),radial-gradient(circle at 10% 90%,rgba(244,111,82,.15),transparent 22rem),var(--color-paper)}.portfolio-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(16rem,.65fr);gap:clamp(2rem,7vw,7rem);align-items:end;padding-bottom:clamp(4rem,8vw,7rem)}.portfolio-eyebrow{display:flex;align-items:center;gap:.7rem;color:var(--color-ink-soft);font-size:.72rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase}.portfolio-eyebrow span{width:2rem;height:2px;background:var(--color-accent)}.portfolio-hero h1{max-width:12ch;margin-top:1.25rem;font-size:clamp(3.9rem,8.2vw,8rem);font-weight:500;letter-spacing:-.065em;line-height:.86}.portfolio-hero h1 em{color:var(--color-accent);font-weight:400}.portfolio-hero-note{display:grid;grid-template-columns:3.1rem 1fr;gap:1rem;align-items:start;padding-top:1.3rem;border-top:1px solid var(--color-rule)}.portfolio-hero-note span{display:grid;width:2.5rem;height:2.5rem;place-items:center;border-radius:50%;background:var(--color-ink);color:var(--color-growth);font-family:var(--font-display);font-style:italic}.portfolio-hero-note p{color:var(--color-ink-soft);font-size:.96rem;line-height:1.75}.portfolio-orbit{position:absolute;z-index:-1;border:1px solid rgba(18,63,54,.12);border-radius:50%}.orbit-one{top:-8rem;left:-8rem;width:24rem;aspect-ratio:1;box-shadow:inset 0 0 0 4rem rgba(200,232,106,.06)}.orbit-two{right:-5rem;bottom:2rem;width:13rem;aspect-ratio:1;box-shadow:inset 0 0 0 2.2rem rgba(244,111,82,.05)}.portfolio-marquee{overflow:hidden;border-block:1px solid rgba(255,249,239,.13);background:var(--color-ink);color:var(--color-paper)}.portfolio-marquee>div{display:flex;width:max-content;align-items:center;gap:2.2rem;padding-block:.85rem;animation:portfolio-marquee 26s linear infinite}.portfolio-marquee span{font-family:var(--font-display);font-size:1.1rem;font-style:italic;white-space:nowrap}.portfolio-marquee i{color:var(--color-growth);font-size:.7rem;font-style:normal}
.portfolio-project{position:relative;padding:clamp(5rem,9vw,8.5rem) 0;border-bottom:1px solid var(--color-rule)}.project-erin{background:linear-gradient(145deg,#f7eedc,var(--color-paper))}.project-bomar{background:radial-gradient(circle at 88% 15%,rgba(200,232,106,.12),transparent 24rem),var(--color-ink);color:var(--color-paper)}.project-sunday{background:radial-gradient(circle at 8% 85%,rgba(244,111,82,.16),transparent 25rem),var(--color-paper)}.project-grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(18rem,.84fr);gap:clamp(2.5rem,7vw,7rem);align-items:center}.project-window{display:block;aspect-ratio:16/11;overflow:hidden;border:1px solid var(--color-ink);border-radius:1rem;background:#17251f;box-shadow:1rem 1rem 0 var(--color-growth),0 2.5rem 4.5rem rgba(18,63,54,.18);transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}.project-window:hover{transform:translateY(-.55rem) rotate(-.3deg);box-shadow:1.25rem 1.35rem 0 var(--color-growth),0 3rem 5rem rgba(18,63,54,.23)}.project-bomar .project-window{border-color:rgba(255,249,239,.55);box-shadow:1rem 1rem 0 var(--color-accent),0 2.5rem 4.5rem rgba(0,0,0,.28)}.project-bomar .project-window:hover{box-shadow:1.25rem 1.35rem 0 var(--color-accent),0 3rem 5rem rgba(0,0,0,.34)}.window-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:2.5rem;padding:0 .8rem;background:var(--color-paper);color:var(--color-ink)}.window-bar>span{display:flex;gap:.3rem}.window-bar i{width:.45rem;height:.45rem;border-radius:50%;background:var(--color-accent)}.window-bar i:nth-child(2){background:#efc358}.window-bar i:nth-child(3){background:#9bbf4d}.window-bar small{padding:.25rem 1rem;border-radius:2rem;background:rgba(18,63,54,.06);font-size:.56rem}.window-bar b{justify-self:end;font-size:.9rem;transition:transform .35s var(--ease-out)}.project-window:hover .window-bar b{transform:translate(.2rem,-.2rem)}.project-image{position:relative;height:calc(100% - 2.5rem);overflow:hidden}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}.project-window:hover img{transform:scale(1.055)}.project-image .image-overlay{position:absolute;inset:0}.project-image strong{position:absolute;left:7%;bottom:9%;max-width:11ch;color:#fff;font-family:var(--font-display);font-size:clamp(2rem,4.8vw,4.8rem);font-weight:500;letter-spacing:-.05em;line-height:.88}.project-erin .project-image img{object-position:center 52%}.project-erin .image-overlay{background:linear-gradient(90deg,rgba(10,24,18,.77),rgba(10,24,18,.12))}.project-bomar .image-overlay{background:linear-gradient(90deg,rgba(5,23,40,.86),rgba(5,23,40,.08))}.project-bomar .project-image strong{font-family:var(--font-body);font-size:clamp(1.8rem,4vw,4rem);font-weight:800;text-transform:uppercase}.project-sunday .project-image img{object-position:72% 48%}.project-sunday .image-overlay{background:linear-gradient(90deg,rgba(61,9,8,.9),rgba(91,13,10,.18))}.project-copy{min-width:0}.project-label{display:grid;grid-template-columns:2.5rem 1fr auto;gap:.8rem;align-items:center;margin-bottom:2rem}.project-label>span{display:grid;width:2.35rem;height:2.35rem;place-items:center;border:1px solid currentColor;border-radius:50%;color:var(--color-accent);font-family:var(--font-display);font-style:italic}.project-label p{font-size:.65rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.project-label small{padding:.35rem .65rem;border-radius:2rem;background:var(--color-growth);color:var(--color-ink);font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.project-copy h2{font-size:clamp(2.5rem,5vw,5rem);font-weight:500;letter-spacing:-.055em;line-height:.92}.project-lede{margin-top:1.4rem;color:var(--color-ink-soft);font-size:1rem;line-height:1.75}.project-bomar .project-lede{color:rgba(255,249,239,.72)}.project-details{display:grid;gap:1rem;margin-top:1.8rem}.project-details>div{padding-top:1rem;border-top:1px solid var(--color-rule)}.project-bomar .project-details>div{border-color:rgba(255,249,239,.18)}.project-details dt{font-size:.65rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.project-details dd{margin:.4rem 0 0;color:var(--color-mute);font-size:.86rem;line-height:1.65}.project-bomar .project-details dd{color:rgba(255,249,239,.6)}.project-link{display:inline-flex;align-items:center;gap:1rem;margin-top:1.8rem;padding-bottom:.3rem;border-bottom:1px solid currentColor;font-size:.78rem;font-weight:800}.project-link span{color:var(--color-accent);font-size:1.05rem;transition:transform .35s var(--ease-out)}.project-link:hover span{transform:translate(.25rem,-.25rem)}
.portfolio-growth{padding:clamp(5rem,9vw,8rem) 1rem;background:var(--color-growth-soft)}.growth-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,8vw,8rem);align-items:end}.growth-grid h2{max-width:10ch;margin-top:1rem;font-size:clamp(3rem,6vw,6rem);font-weight:500;letter-spacing:-.055em;line-height:.9}.growth-copy>p{max-width:36rem;color:var(--color-ink-soft);line-height:1.8}.growth-button{display:inline-flex;align-items:center;gap:2rem;margin-top:1.8rem;padding:1rem 1.25rem;border-radius:var(--radius-md);background:var(--color-ink);box-shadow:.45rem .45rem 0 var(--color-accent);color:var(--color-paper);font-weight:800;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}.growth-button:hover{transform:translateY(-.2rem);box-shadow:.65rem .65rem 0 var(--color-accent)}
.portfolio-motion [data-reveal]{opacity:0;transform:translateY(2rem);transition:opacity .7s ease,transform .85s var(--ease-out)}.portfolio-motion [data-reveal].is-visible{opacity:1;transform:translateY(0)}
@keyframes portfolio-marquee{to{transform:translateX(-50%)}}
@media(max-width:900px){.portfolio-hero-grid,.project-grid,.growth-grid{grid-template-columns:1fr}.project-bomar .project-copy{order:2}.project-bomar .project-window{order:1}.portfolio-hero-note{max-width:40rem}.project-copy{max-width:44rem}.growth-copy{max-width:44rem}}
@media(max-width:767px){.portfolio-frame{width:min(calc(100% - 2rem),76rem)}.portfolio-hero{padding-top:4rem}.portfolio-hero h1{font-size:clamp(3.3rem,16vw,5rem)}.project-window{aspect-ratio:1.2;box-shadow:.65rem .65rem 0 var(--color-growth),0 1.5rem 2.5rem rgba(18,63,54,.14)}.project-bomar .project-window{box-shadow:.65rem .65rem 0 var(--color-accent),0 1.5rem 2.5rem rgba(0,0,0,.25)}.project-label{grid-template-columns:2.5rem 1fr}.project-label small{grid-column:2;width:max-content}.project-image strong{font-size:clamp(1.8rem,9vw,3rem)}.project-bomar .project-image strong{font-size:clamp(1.5rem,7vw,2.6rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.portfolio-marquee>div{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.portfolio-marquee>div>:nth-child(n+9){display:none}.portfolio-motion [data-reveal]{opacity:1;transform:none;transition:none}.project-window,.project-window img{transition:none}}

/* Keep the alternating BoMar browser at the same visual scale as the other case studies. */
.project-bomar .project-grid{grid-template-columns:minmax(18rem,.84fr) minmax(0,1.16fr)}
@media(max-width:900px){.project-bomar .project-grid{grid-template-columns:1fr}}