.hero{grid-template-columns:1fr 1.02fr;gap:48px;padding-top:64px;padding-bottom:56px}.hero h1{font-size:clamp(40px,4.65vw,61px);letter-spacing:-.055em}.hero h1 em{white-space:nowrap;font-size:.91em}.hero-lead{max-width:420px;font-size:15px;line-height:1.8;margin:25px 0}.showcase-hero{min-width:0}.hero-product{border-radius:12px;background:#eae7df;padding:17px;border:1px solid #dcdad0}.product-topline{display:flex;align-items:center;gap:7px;font-size:9px;color:#686e60;margin:1px 1px 16px}.live-pill{margin-left:auto;font-size:8px;color:#52654d}.hero-product>a{display:grid;place-items:center;border-radius:6px;overflow:hidden;background:#f8f5ee;min-height:270px}.hero-product img{width:100%;height:285px;object-fit:contain}.hero-project-tabs{display:flex;gap:7px;margin-top:15px}.hero-project-tabs button{flex:1;padding:8px 5px;border:1px solid transparent;border-radius:5px;background:transparent;font-size:9px;color:#797a70;cursor:pointer;min-height:34px}.hero-project-tabs .selected{border-color:#d4d6c9;background:#f9f7f0;color:var(--ink)}.showcase-hero figcaption{font-size:10px;color:var(--muted);margin:10px 2px 0}.case-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:37px 27px}.case-card{display:flex;flex-direction:column;min-width:0;cursor:default;border:0}.portfolio-cover{position:relative;display:grid;place-items:center;aspect-ratio:1.55;width:100%;padding:26px;border:1px solid #2d372410;border-radius:12px;overflow:hidden;cursor:pointer;background:#e6e9df}.portfolio-cover img{width:100%;height:100%;object-fit:contain;border-radius:5px;max-height:100%;filter:drop-shadow(0 9px 13px #29332c12);transition:transform .3s}.portfolio-cover:hover img{transform:scale(1.025)}.portfolio-cover .cover-open{position:absolute;right:13px;top:13px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fffdf5e6;color:var(--ink);font-size:17px}.portfolio-cover.peach{background:#eaded2}.portfolio-cover.lavender{background:#ded8ed}.portfolio-cover.sage{background:#dfe6d8}.portfolio-cover.rose{background:#ede3e0}.portfolio-cover.sky{background:#dbe7e9}.portfolio-cover.sand{background:#e6dfd3}.portfolio-cover.cyan{background:#cfe9e8}.portfolio-cover.slate{background:#d8dbe2}.portfolio-cover[data-project="wheel"]{padding:18px;background:#f1e9e3}.portfolio-cover[data-project="minipc"]{padding:0}.portfolio-cover[data-project="minipc"] img{object-fit:cover}.portfolio-cover[data-project="wildforge"]{padding:0}.portfolio-cover[data-project="wildforge"] img{object-fit:cover}.project-body{padding:16px 1px 0}.project-category{margin:0 0 7px;color:var(--rust);font-size:10px;font-weight:700}.project-category span{float:right;color:#929588;font-weight:500;font-size:9px}.project-body h3{font-size:21px;letter-spacing:-.045em;line-height:1.25;margin:0}.project-title-button{padding:0;border:0;background:transparent;text-align:left;font:inherit;letter-spacing:inherit;cursor:pointer}.project-title-button:hover{color:var(--accent)}.project-body>p:not(.project-category){font-size:12px;line-height:1.65;color:var(--muted);margin:9px 0 16px;max-width:49ch}.project-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;margin-top:auto;border-top:1px solid var(--line);padding-top:10px;font-size:9px;color:var(--muted)}.project-bottom a,.project-bottom button{padding:3px 0;min-height:28px;border:0;background:transparent;text-decoration:none;font-size:11px;font-weight:800;color:var(--accent);cursor:pointer}.more-projects{display:flex;justify-content:center;margin-top:37px}.more-projects:has(button[hidden]){display:none}.section-note{max-width:260px}.filters{gap:3px}.filter{padding-inline:13px}.modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 22px}.modal-actions .button{font-size:11px;min-height:43px;padding:10px 16px}.modal-reference{padding-top:17px;margin-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}.modal-reference a{color:var(--accent);text-underline-offset:3px}.modal-video{display:block;width:100%;max-height:410px;margin-top:20px;border-radius:8px;background:#282b31}.modal-proof{padding-bottom:6px}.modal-grid{margin-top:18px}.section{padding-top:58px;padding-bottom:55px}.approach{padding-block:36px}.contact{margin-top:10px}.filter.active{box-shadow:none}@media(max-width:1000px){.hero{gap:27px}.hero h1{font-size:47px}.hero-product img{height:260px}.hero h1 em{font-size:.86em}.portfolio-cover{padding:21px}.project-body h3{font-size:19px}}@media(max-width:740px){.hero{grid-template-columns:1fr;padding-top:35px;gap:27px}.hero h1{font-size:clamp(38px,7.5vw,53px)}.hero h1 em{font-size:1em}.hero-lead{margin:18px 0 21px;font-size:14px;max-width:440px}.showcase-hero{max-width:540px;width:100%;justify-self:center}.hero-product{padding:13px}.hero-product img{height:260px}.hero-product>a{min-height:0}.hero-project-tabs{margin-top:10px}.product-topline{margin-bottom:11px;font-size:9px}.case-grid{gap:28px 19px}.portfolio-cover{padding:14px;aspect-ratio:1.35}.project-body h3{font-size:18px}.project-body>p:not(.project-category){font-size:11px}.project-category{font-size:9px}.project-bottom{font-size:8px}.project-bottom a,.project-bottom button{font-size:10px}.section{padding-top:38px;padding-bottom:37px}.section-note{max-width:400px}.filter{padding-inline:11px}.more-projects{margin-top:25px}.approach{padding-block:30px}.approach h2{font-size:28px}}@media(max-width:520px){.hero h1 em{white-space:normal}.case-grid{grid-template-columns:1fr;gap:29px}.portfolio-cover{aspect-ratio:1.55;padding:18px}.project-body{padding-top:13px}.project-body h3{font-size:21px}.project-body>p:not(.project-category){font-size:12px;margin-bottom:12px}.project-category{font-size:10px}.project-bottom{font-size:9px}.project-bottom a,.project-bottom button{font-size:11px}.hero-product img{height:225px}.live-pill{font-size:7px}.hero h1{font-size:40px}.hero-product>a{min-height:0}.portfolio-cover .cover-open{width:29px;height:29px}.portfolio-cover[data-project="wheel"]{padding:13px}.modal-actions .button{flex:1}.modal-reference{line-height:1.7}}@media(max-width:360px){.hero h1{font-size:36px}.hero-product img{height:205px}.hero-project-tabs button{font-size:8px}.product-topline{font-size:8px}.live-pill{font-size:7px}.project-body h3{font-size:20px}.portfolio-cover{padding:13px}}@media(prefers-reduced-motion:reduce){.portfolio-cover img{transition:none}.portfolio-cover:hover img{transform:none}}
/* Pin screenshots inside the preview frame; intrinsic image sizes must not set the grid track. */
.portfolio-cover{--cover-pad:26px}
.portfolio-cover img{position:absolute;inset:var(--cover-pad);width:calc(100% - var(--cover-pad) - var(--cover-pad));height:calc(100% - var(--cover-pad) - var(--cover-pad));max-height:none}
.portfolio-cover[data-project="wheel"]{--cover-pad:18px}
.portfolio-cover[data-project="minipc"],.portfolio-cover[data-project="wildforge"]{--cover-pad:0px}
@media(max-width:1000px){.portfolio-cover{--cover-pad:21px}}
@media(max-width:740px){.portfolio-cover{--cover-pad:14px}}
@media(max-width:520px){.portfolio-cover{--cover-pad:18px}.portfolio-cover[data-project="wheel"]{--cover-pad:13px}}
@media(max-width:360px){.portfolio-cover{--cover-pad:13px}}
@media(max-width:520px){
  .case-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .portfolio-cover{aspect-ratio:1.13;--cover-pad:9px}
  .portfolio-cover[data-project="wheel"]{--cover-pad:8px}
  .portfolio-cover .cover-open{width:23px;height:23px;right:7px;top:7px;font-size:13px}
  .project-category{font-size:8px;line-height:1.4;margin-bottom:5px}
  .project-category span{display:none}
  .project-body{padding-top:10px}
  .project-body h3{font-size:16px;line-height:1.3;letter-spacing:-.035em}
  .project-body>p:not(.project-category){display:none}
  .project-bottom{display:block;border-top:0;padding-top:11px;font-size:8px;line-height:1.4}
  .project-bottom>span{display:block;min-height:23px}
  .project-bottom a,.project-bottom button{font-size:10px;min-height:32px}
  .hero{padding-bottom:33px}
  .approach-copy>p{font-size:11px}
}
@media(max-width:360px){.case-grid{gap:22px 11px}.project-body h3{font-size:15px}.project-category{font-size:7px}.project-bottom{font-size:7px}}
/* Real client work leads the page; keep the remaining gallery compact. */
.hero h1{font-size:clamp(39px,4.2vw,55px);line-height:1.08}
.hero h1 em{font-size:1em}
.hero-lead{max-width:440px;font-size:14px;line-height:1.8}
.hero-product{background:#e9e7df}
.hero-product>a{background:#fdfaf5}
.hero-product img{height:315px}
.hero-product[data-active-project="payment"]{background:#e2e8db}
.hero-product[data-active-project="media"]{background:#e3ddef}
#hero-project-caption{line-height:1.65;max-width:51ch}
#hero-project-caption b{color:var(--accent);font-weight:700}
@media(max-width:1000px){.hero h1{font-size:43px}.hero-product img{height:285px}}
@media(max-width:740px){.hero h1{font-size:clamp(37px,7.5vw,49px)}.hero-lead{font-size:14px}.hero-product img{height:280px}.hero{padding-top:30px;gap:23px}.hero-project-tabs button{min-height:40px}}
@media(max-width:520px){
  .hero h1{font-size:39px}
  .hero-product img{height:265px}
  .hero-product{padding:13px}
  .personal-note{max-width:38ch}
  .case-card:has([data-project="wheel"]){grid-column:1/-1;margin-bottom:2px}
  .portfolio-cover[data-project="wheel"]{aspect-ratio:1.45;--cover-pad:12px}
  .case-card:has([data-project="wheel"]) .project-category{font-size:10px;margin-top:3px}
  .case-card:has([data-project="wheel"]) .project-body h3{font-size:23px}
  .case-card:has([data-project="wheel"]) .project-body>p:not(.project-category){display:block;font-size:12px;max-width:43ch;margin:9px 0 10px}
  .case-card:has([data-project="wheel"]) .project-bottom{display:flex;align-items:center;border-top:1px solid var(--line);font-size:9px}
  .case-card:has([data-project="wheel"]) .project-bottom>span{min-height:0}
  .case-card:has([data-project="wheel"]) .project-bottom a,.case-card:has([data-project="wheel"]) .project-bottom button{font-size:11px;min-height:36px}
}
@media(max-width:360px){.hero h1{font-size:34px}.hero-product img{height:245px}.product-topline{font-size:8px}.live-pill{font-size:7px}}
