/* Reusable client presentation: a slim silver display in a quiet studio setting.
   Place an image, linked image or existing capture crop inside .site-mockup-screen.
   Device geometry scales with its container; website imagery is never baked into the frame. */
.site-mockup{position:relative;isolation:isolate;display:block;min-width:0;width:100%;padding:clamp(28px,3.7vw,54px) clamp(24px,4.5vw,68px) clamp(24px,3vw,44px);overflow:hidden;border-radius:12px;background:radial-gradient(ellipse at 50% 24%,#fff 0,#f6f6f6 52%,#eeeef0 100%)}
.site-mockup:after{content:'';position:absolute;z-index:0;left:23%;right:23%;bottom:clamp(18px,2.8vw,38px);height:10px;border-radius:50%;background:#363b44;opacity:.18;filter:blur(10px);pointer-events:none}
/* Geometry follows the minimal iMac on Website Launch, scaled to each card. */
.site-mockup{container-type:inline-size}
.site-mockup-display{position:relative;z-index:2;padding:clamp(3px,.9cqi,12px);padding-bottom:clamp(3px,.75cqi,10px);background:#16181c;border:0;border-radius:clamp(5px,1.05cqi,14px) clamp(5px,1.05cqi,14px) 0 0;box-shadow:0 16px 28px #20263714}
.site-mockup-display:before{content:'';position:absolute;top:clamp(1px,.3cqi,5px);left:50%;width:clamp(2px,.3cqi,4px);height:clamp(2px,.3cqi,4px);background:#454b55;border-radius:50%;transform:translateX(-50%);pointer-events:none}
.site-mockup-screen{display:block;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#fff;border-radius:1px}
.site-mockup-screen>a{display:block;width:100%;height:100%}
.site-mockup-screen>img,.site-mockup-screen>a>img{display:block;width:100%;max-width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:top center}
.site-mockup-screen>a:focus-visible{outline:3px solid #2767d7;outline-offset:-4px}
.site-mockup-chin{height:clamp(15px,3.6cqi,47px);border:1px solid #b6bac1;border-top:0;border-radius:0 0 clamp(5px,1.05cqi,14px) clamp(5px,1.05cqi,14px);background:linear-gradient(#f1f2f4,#d9dce1);position:relative;z-index:2}
.site-mockup-chin span{position:absolute;width:clamp(5px,1.3cqi,17px);height:clamp(6px,1.5cqi,20px);left:50%;top:25%;transform:translateX(-50%);border:1px solid #8e939b;border-radius:50% 50% 45% 45%;opacity:.48}
.site-mockup-stand{position:relative;z-index:1;width:20%;height:clamp(20px,4.4cqi,58px);margin:0 auto;background:linear-gradient(90deg,#c4c8ce,#eef0f3 50%,#b9bdc4);clip-path:polygon(25% 0,75% 0,90% 82%,100% 91%,100% 100%,0 100%,0 91%,10% 82%)}

/* One frame across homepage projects, work listings and service-page examples. */
#main .project-image{background:transparent;border-radius:12px;overflow:hidden}
#main .project .site-mockup-screen>img{height:100%;width:100%;aspect-ratio:auto;object-fit:cover;transform:none;transition:none}
#main .work-feature-visual{padding:0;background:transparent;border-radius:12px}
#main .work-feature-visual:hover .site-mockup-display{box-shadow:0 2px 3px #11121626,0 16px 28px #11121618}
.service-work-example>.site-mockup{min-width:0}

/* Hero and supporting captures use the same studio surface and display proportions. */
.case-page .case-hero-stage{background:#fff;padding-top:0;padding-bottom:28px}
.case-main-browser{max-width:1180px;margin-inline:auto}
.site-mockup-screen>.hg-before-crop{width:100%;height:100%;aspect-ratio:auto;overflow:hidden}
.hg-case .site-mockup-screen>.hg-before-crop>img{display:block;width:101.1253%;max-width:none;height:auto;margin-top:-5.85146%}

/* Preserve the quiet carousel, gradients and pause controls with the same device silhouette. */
.home-work-glimpses .work-glimpse{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
.work-glimpse .site-mockup{padding:22px 24px 20px;border-radius:10px}

.work-glimpse .site-mockup:after{bottom:15px;filter:blur(7px)}
@media(max-width:700px){
 .site-mockup{padding:22px 16px 20px;border-radius:10px}
 .site-mockup:after{bottom:15px;height:7px;filter:blur(7px)}
 .case-page .case-hero-stage{padding-bottom:24px}
 .work-glimpse .site-mockup{padding:18px 16px 16px}
}

/* White editorial surfaces let real website captures blend into the case study. */
.case-page main>section,.case-page .site-mockup,.case-page .hg-brand-showcase{background:#fff}
.case-page .hg-heritage,.case-page .bond-management{color:var(--ink)}
.case-page .hg-heritage-intro>p:last-child,.case-page .hg-story-pair p,.case-page .hg-story-number,.case-page .bond-management .case-section-heading>p:last-child,.case-page .bond-management .case-deliverables dd{color:var(--muted)}
.case-page .hg-story-pair article,.case-page .bond-management .case-deliverables>div{border-color:var(--line)}
.case-page .hg-story-pair a:focus-visible{outline-color:#2767d7}
.case-page .hg-brand-showcase{padding-inline:0}
.case-page .site-mockup{padding:clamp(16px,2.2vw,32px) clamp(8px,2vw,28px) clamp(18px,2.4vw,34px);border-radius:0}
.case-page .site-mockup:after{bottom:25px;opacity:.1}
.case-page .case-screen-pair{gap:clamp(28px,4vw,56px)}
/* Static editorial spreads: every selected page is visible, with no inner scrolling. */
.case-editorial{border-top:1px solid var(--line)}
.case-editorial>.wrap{max-width:1240px}
.case-editorial .case-section-heading{margin-bottom:clamp(30px,4vw,56px)}
.case-editorial-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;gap:clamp(38px,5vw,76px) clamp(24px,4vw,56px)}
.editorial-shot{grid-column:span 6;min-width:0;margin:0}
.editorial-shot-device{grid-column:span 7}
.editorial-shot-detail,.editorial-shot-package-detail{grid-column:span 5;margin-top:clamp(44px,8vw,105px)}
.editorial-shot-wide{grid-column:1/-1;width:86%;margin-inline:auto}
.editorial-page-image{position:relative;overflow:hidden;background:#fff;border:1px solid #e2e3e6;border-radius:5px;box-shadow:0 6px 16px #11121607,0 24px 48px #1112160a}
.editorial-page-image>img{display:block;width:101.1253%;max-width:none;height:auto}
.editorial-shot-package-detail .editorial-page-image{aspect-ratio:1333/621}
.editorial-shot-package-detail .editorial-page-image>img{margin-top:-22.88%}
.case-page .case-editorial .site-mockup{padding-inline:0;padding-top:0}
.editorial-shot figcaption{padding-top:22px;max-width:560px}
.case-page .editorial-shot h3{font-size:1.125rem;line-height:1.35;margin:0 0 9px;letter-spacing:-.01em}
.editorial-shot figcaption p{font-size:.9375rem;line-height:1.6;color:var(--muted);margin:0}
.editorial-shot-wide figcaption{max-width:660px}
@media(max-width:700px){
 .case-page .site-mockup{padding:12px 0 20px}
 .case-page .site-mockup:after{bottom:14px}
 .case-editorial-grid{grid-template-columns:1fr;gap:38px}
 .editorial-shot,.editorial-shot-device,.editorial-shot-detail,.editorial-shot-package-detail,.editorial-shot-wide{grid-column:1;margin:0;width:100%}
 .editorial-shot figcaption{padding-top:18px}
 .case-page .editorial-shot h3{font-size:1.0625rem}
 .editorial-shot figcaption p{font-size:.9375rem}
}