.web-case-title { font: inherit; font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 2rem; }
.web-visit { display: inline-block; text-decoration: underline; text-underline-offset: .25em; padding-block: .65rem; }
.web-visit:hover { color: var(--accent); }
.web-case-cover { margin: 0; }
.pw-design-hero { background: #e8edf3; padding: clamp(24px, 6vw, 112px); }
.pw-screen { margin: 0; min-width: 0; }
.pw-screen a { display: block; overflow: hidden; background: white; cursor: zoom-in; }
.pw-screen img { display: block; width: 100%; height: auto; }
.pw-screen figcaption { font-size: .875rem; padding-top: 1rem; }
.pw-screen a:focus-visible { outline: 3px solid #0020ff; outline-offset: 6px; }
.pw-screen--hero { max-width: 1440px; margin-inline: auto; }
.pw-screen--hero a { aspect-ratio: 16 / 10; }
.pw-design-gallery { background: #142e51; color: white; padding: clamp(24px, 6vw, 112px); }
.pw-design-heading { max-width: 1440px; margin: 0 auto clamp(32px, 4vw, 64px); }
.pw-design-heading h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.05; letter-spacing: -.025em; font-weight: 400; margin: 0 0 1rem; }
.pw-design-heading p { margin: 0; }
.pw-design-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); max-width: 1440px; margin-inline: auto; align-items: start; }
.pw-screen--about a { aspect-ratio: 4 / 5; }
.pw-screen--projects { margin-top: clamp(48px, 8vw, 128px); }
.pw-design-hint { max-width: 1440px; margin: 2rem auto 0; font-size: .875rem; }
.pw-design-gallery + .web-site-link { margin-top: clamp(24px, 4vw, 64px); }
@media (max-width: 700px) {
  .pw-design-pair { grid-template-columns: 1fr; gap: 40px; }
  .pw-screen--projects { margin-top: 0; }
}
.web-art { position: relative; overflow: hidden; background: #142e51; aspect-ratio: 16 / 9; }
.web-art .web-art-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.web-art-brand { position: absolute; left: 5%; top: 8%; padding: 1.5rem; background: #142e51; max-width: 45%; }
.web-art .web-art-brand img { display: block; width: clamp(8rem, 24vw, 24rem); max-width: 100%; height: auto; object-fit: contain; transform: none !important; }
.web-art--confidence { background: #f1f3e9; }
.web-art--confidence .web-art-photo { width: 50%; margin-left: auto; object-position: center 35%; }
.web-art--confidence .web-art-brand { background: none; top: 50%; left: 5%; width: 40%; max-width: none; padding: 0; transform: translateY(-50%); }
.web-art--confidence .web-art-brand img { width: 100%; }
.wgrid .web-art-brand { padding: 1rem; }
.wgrid .web-art { aspect-ratio: auto; min-width: 0; width: 100%; }
.wgrid .web-art--confidence .web-art-brand { padding: 0; }
.wgrid .web-art .web-art-brand img { height: auto; transform: none !important; }
.wgrid .web-art--confidence .web-art-photo { width: 50%; }
.web-experience-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.web-experience-heading h2 { margin: 0; }
.web-description { margin: 1rem 0 2rem; max-width: 44rem; }
.web-preview { background: #f1f1ee; }
.web-toolbar { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1rem; }
.web-toolbar button { font: inherit; font-size: .875rem; border: 1px solid #ccc; background: transparent; color: #111; border-radius: 999px; padding: .7rem 1.1rem; cursor: pointer; min-height: 44px; }
.web-toolbar button:hover { border-color: #111; }
.web-toolbar button[aria-pressed="true"] { background: #111; border-color: #111; color: #fff; }
.web-toolbar button[aria-pressed="true"]:hover { background: var(--accent); border-color: var(--accent); }
.web-pages, .web-devices { display: flex; flex-wrap: wrap; gap: .4rem; }
.web-stage { position: relative; height: min(75vh, 850px); min-height: 420px; overflow: hidden; background: #e6e6e2; }
.web-idle { position: absolute; inset: 0; z-index: 1; }
.web-start:disabled { cursor: progress; opacity: .7; }
.web-idle .web-art { height: 100%; aspect-ratio: auto; }
.web-start { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); white-space: nowrap; border: 1px solid #fff; }
.web-frame-slot { width: 100%; height: 100%; margin: 0 auto; background: #fff; }
.web-frame-slot iframe { display: block; width: 100%; height: 100%; border: 0; background: white; }
.web-preview[data-device="mobile"] .web-frame-slot { width: min(390px, 100%); }
.web-preview-status { padding: .8rem 1rem; margin: 0; font-size: .85rem; color: #444; }
.web-preview-status:empty { display: none; }
.web-privacy { font-size: .85rem; color: #555; margin: 1rem 0 0; max-width: 48rem; }
.web-photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.web-photo-pair figure { margin: 0; }
.web-photo-pair img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.web-site-link { margin-bottom: clamp(3rem, 6vw, 6rem); }
.web-site-link a { display: flex; align-items: center; gap: 1.5rem; padding-block: 1.5rem; color: inherit; text-decoration: none; }
.web-site-link a > span:first-child { font-size: clamp(1.7rem, 3vw, 2.8rem); letter-spacing: -.025em; }
.web-site-domain { margin-left: auto; font-size: .9rem; }
.web-site-link svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.web-site-link a:hover { color: var(--accent); }
.web-site-link a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
@media (max-width: 700px) { .web-site-domain { display: none; } .web-site-link svg { margin-left: auto; } }
.web-preview [hidden] { display: none !important; }
.web-preview button:focus-visible, .web-visit:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 700px) {
  .web-case-cover .web-art { aspect-ratio: 4 / 3; }
  .web-art-brand { padding: .8rem; }
  .web-stage { height: 65svh; min-height: 420px; }
  .web-toolbar { gap: .65rem; padding: .75rem; }
  .web-toolbar button { padding: .65rem .85rem; }
  .web-photo-pair { grid-template-columns: 1fr; }
  .web-start { max-width: 90%; font-size: .9rem; }
}