.web-hero{padding:clamp(52px,7vw,102px) 0;overflow:hidden;position:relative;border-bottom:1px solid var(--line)}
.web-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,var(--accent-soft),transparent 46%);pointer-events:none}
.web-hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);gap:clamp(38px,6vw,84px);align-items:center;position:relative}
.browser-stage{border:1px solid var(--line);border-radius:18px;background:var(--ink-2);padding:9px;box-shadow:var(--shadow);transform:rotate(1.2deg)}
.browser-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 10px;border-bottom:1px solid var(--line);color:var(--text-dim);font-size:.72rem}.browser-bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}.browser-bar i:first-child{background:var(--accent)}.browser-bar span{margin-left:auto;margin-right:auto}
.browser-canvas{min-height:390px;padding:54px 42px;background:linear-gradient(145deg,var(--paper),var(--paper-2));border-radius:0 0 12px 12px}.canvas-kicker,.canvas-title,.canvas-copy,.canvas-button,.canvas-cards b{display:block;border-radius:4px}.canvas-kicker{width:25%;height:8px;background:var(--accent);margin-bottom:25px}.canvas-title{width:86%;height:24px;background:var(--text-ink);margin:11px 0}.canvas-title.short{width:62%}.canvas-copy{width:75%;height:9px;background:var(--text-ink-dim);opacity:.35;margin-top:28px}.canvas-copy.short{width:54%;margin-top:9px}.canvas-button{width:145px;height:38px;background:var(--accent);margin-top:30px}.canvas-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:46px}.canvas-cards b{height:76px;background:white;border:1px solid rgba(0,0,0,.08)}
.web-steps{grid-template-columns:1fr 1fr;gap:36px 24px}.portfolio-section{background:var(--paper);color:var(--text-ink);padding-bottom:clamp(72px,9vw,124px)}.portfolio-section .eyebrow{color:#9a622d}.portfolio-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:34px}.portfolio-intro p{color:var(--text-ink-dim);margin:0}.portfolio-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:50px}.portfolio-tabs button{border:1px solid rgba(0,0,0,.15);background:transparent;color:var(--text-ink);font:inherit;font-size:.88rem;font-weight:600;padding:10px 14px;border-radius:8px;cursor:pointer}.portfolio-tabs button span{color:var(--text-ink-dim);margin-left:5px}.portfolio-tabs button:hover,.portfolio-tabs button.is-active{background:var(--text-ink);border-color:var(--text-ink);color:var(--paper)}.portfolio-tabs button.is-active span{color:var(--accent-2)}.portfolio-group{margin-top:58px}.portfolio-group[hidden]{display:none}.group-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12);padding-bottom:15px}.group-head h3{font-size:clamp(1.35rem,1.05rem + 1vw,2rem);margin:0}.group-head p{max-width:56ch;margin:0;color:var(--text-ink-dim);font-size:.92rem}.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.portfolio-card{display:block;text-decoration:none;color:var(--text-ink);border:1px solid rgba(0,0,0,.1);background:white;border-radius:10px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}.portfolio-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 20px 36px -28px rgba(12,14,18,.6)}.portfolio-shot{position:relative;aspect-ratio:8/5;overflow:hidden;background:var(--paper-2)}.portfolio-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s}.portfolio-card:hover img{transform:scale(1.025)}.portfolio-shot span{position:absolute;right:10px;bottom:10px;background:rgba(12,14,18,.9);color:var(--text);font-size:.74rem;padding:6px 9px;border-radius:6px;opacity:0;transform:translateY(5px);transition:.2s}.portfolio-card:hover .portfolio-shot span{opacity:1;transform:none}.portfolio-copy{padding:16px 17px 18px}.portfolio-copy small{display:block;text-transform:uppercase;letter-spacing:.11em;color:#8b623b;font-size:.68rem;font-weight:700;margin-bottom:6px}.portfolio-copy h3{font-family:Inter,sans-serif;font-size:1rem;letter-spacing:0;margin:0;line-height:1.35}.web-contact-panel{align-self:start;background:var(--ink);color:var(--text);border-radius:18px;padding:clamp(28px,3vw,42px);position:sticky;top:100px}.web-contact-panel p{color:var(--text-dim)}
@media(max-width:980px){.web-hero-grid,.portfolio-intro{grid-template-columns:1fr}.browser-stage{max-width:680px}.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.web-contact-panel{position:static}.group-head{display:block}.group-head p{margin-top:8px}}
@media(max-width:640px){.browser-stage{transform:none}.browser-canvas{min-height:290px;padding:38px 25px}.web-steps,.portfolio-grid{grid-template-columns:1fr}.portfolio-tabs{position:sticky;top:72px;z-index:20;background:var(--paper);padding:10px 0;margin-left:-2px;margin-right:-2px}.portfolio-tabs button{flex:1 1 calc(50% - 8px)}.portfolio-group{margin-top:42px}.portfolio-shot span{opacity:1;transform:none}.group-head p{font-size:.88rem}}