/* 2026-10-29 MTG review. Scope: this separate page only. */
.hero-media :is(.hero-fallback,.sense-hero-slide){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 50%}
.hero-media .hero-video{position:absolute;inset:0;opacity:0;object-position:100% 50%}
.hero-media .hero-video.is-playing{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-media .hero-video.is-playing{opacity:0}}
@media(max-width:800px){.hero-media :is(.hero-fallback,.sense-hero-slide){object-position:100% 100%;transform-origin:100% 100%;transform:scale(1.3)}.hero:not(:has(.hero-video.is-playing))::before{background:linear-gradient(90deg,rgba(6,25,42,.72),rgba(6,25,42,.45) 48%,rgba(6,25,42,.12))}}
/* PC density proposal; tablet and mobile type/layout retain the approved sizes. */
@media(min-width:1025px){
 .hero-media :is(.hero-fallback,.sense-hero-slide){object-position:100% 100%;transform-origin:100% 100%;transform:scale(1.35)}
 .hero-media .hero-video{object-position:100% 50%;transform:none}
 .container{max-width:1080px}
 .hero-inner{width:min(1280px,calc(100% - 144px));padding-top:clamp(48px,7vh,76px);padding-bottom:32px}
 .hero h1{font-size:clamp(30px,2.7vw,42px)}
 .hero .credo-panel{width:min(670px,68%);padding:40px 56px;max-width:calc(100% - 96px);top:56px}
 .hero .credo-primary{font-size:clamp(23px,2vw,28px)}
 .hero .credo-content{width:fit-content;margin-inline:auto}
 .section{padding-block:96px}
 .section-heading h2{font-size:29px}
 .sense-services{padding-top:145px;padding-bottom:96px}
 .sense-services .sc-wrap{max-width:1040px;margin-inline:auto}
 .sense-services #sc-title{font-size:23px}
 .sense-services .sc-overview-orb{width:210px;height:210px;min-height:210px;padding:24px 16px 36px}
 .sense-services .sc-overview-orb .sc-symbol{width:54px;height:54px}
 .sense-services .sc-orb-label{font-size:18px}
 .sense-services .sc-overview-copy strong{font-size:17px}
 .sense-services article{padding-block:40px}
 .sense-services .sc-heading h3{font-size:24px}
 .sense-services .sc-heading .service-title-icon{width:62px;height:62px;margin-bottom:16px}
 .sense-services .sc-description{font-size:15px;line-height:2}
 .sense-services .sc-pictograms{padding:26px 24px}
 .sense-services .sc-feature-orb,.sense-services .sc-four .sc-feature-orb{width:184px;height:184px;max-width:100%;min-height:0;gap:10px;padding:16px 12px}
 .sense-services .sc-feature-orb .sc-symbol,.sense-services .sc-four .sc-feature-orb .sc-symbol{width:48px;height:48px}
 .sense-services .sc-feature-orb strong{font-size:17px}
 .sense-services .sc-four .sc-feature-orb strong{font-size:15px}
 .sense-services .sc-feature-grid .sc-feature-copy{font-size:14px;line-height:1.95}
 .works-grid{column-gap:60px}
 .work-item h3{font-size:18px}
 .work-item ul{font-size:14px}
 .company-layout{gap:56px}
 .greeting-layout{max-width:1040px;gap:40px 56px}
 .greeting-letter p{font-size:15px;line-height:2.25}
 .greeting-letter .greeting-quote{font-size:22px}
 .value h3{font-size:17px}
}

/* PC: retain the generous gutters seen at 2000px, with a readable narrow-PC floor. */
@media(min-width:1025px){
 .hero{min-height:clamp(585px,43vw,630px);align-content:space-between}
 .container{width:clamp(880px,54.4%,1440px);max-width:calc(100% - 96px)}
 .hero-inner{width:clamp(880px,64.5%,1600px);max-width:calc(100% - 96px);margin-inline:auto}
 .hero-caption{left:max(48px,calc((100% - clamp(880px,64.5%,1600px))/2))}
 .hero .credo-panel{margin-right:max(48px,calc((100% - clamp(880px,64.5%,1600px))/2))}
 .header-inner{width:80.6%;min-width:min(1120px,calc(100% - 56px));max-width:1800px}
 .sense-services .sc-intro{max-width:clamp(880px,52.4vw,1400px)}
 .sense-services .sc-wrap{width:clamp(880px,52.4vw,1400px);max-width:100%;margin-inline:auto}
 .greeting-layout{width:clamp(880px,52.4%,1400px);max-width:calc(100% - 96px)}
}

/* Slightly roomier tablet/narrow-desktop gutters. Ease back into adjacent widths. */
@media(min-width:801px) and (max-width:1439px){
 body{--review-inset:clamp(0px,calc((1440px - 100vw)*.1),16px)}
 .header-inner{width:calc(100% - 56px - var(--review-inset)*2);min-width:0}
 .container,.hero-inner{width:calc(100% - 96px - var(--review-inset)*2)}
 .sense-services{padding-inline:calc(48px + var(--review-inset))}
 .hero-caption{left:calc(48px + var(--review-inset))}
 .hero .credo-panel{margin-right:calc(48px + var(--review-inset))}
}
@media(min-width:1025px) and (max-width:1439px){
 .container{width:calc(clamp(880px,54.4%,1440px) - var(--review-inset)*2)}
 .hero-inner{width:calc(clamp(880px,64.5%,1600px) - var(--review-inset)*2)}
 .hero-caption{left:calc(max(48px,(100% - clamp(880px,64.5%,1600px))/2) + var(--review-inset))}
 .hero .credo-panel{margin-right:calc(max(48px,(100% - clamp(880px,64.5%,1600px))/2) + var(--review-inset))}
 .header-inner{width:calc(max(80.6%,min(1120px,100% - 56px)) - var(--review-inset)*2)}
 .sense-services .sc-intro{max-width:calc(clamp(880px,52.4vw,1400px) - var(--review-inset)*2)}
 .sense-services .sc-wrap{width:calc(clamp(880px,52.4vw,1400px) - var(--review-inset)*2)}
 .greeting-layout{width:calc(clamp(880px,52.4%,1400px) - var(--review-inset)*2)}
}

@media(min-width:801px) and (max-width:1024px){
 .sense-services .sc-overview-copy small{font-size:13px;letter-spacing:0}
 .values .value h3{font-size:16px;letter-spacing:.02em}
}

@media(min-width:801px) and (max-width:1439px){.work-item h3,.values .value h3{text-wrap:balance}}

/* Preserve the 1400px credo composition down to the mobile breakpoint.
   Reference: 27.7px copy, 670px panel, 40px/56px padding. */
@media(min-width:801px) and (max-width:1400px){
 .hero .credo-panel{font-size:clamp(22px,2vw,27.7px);width:24.1877em;max-width:calc(100% - 128px);padding:1.44404em 2.02166em}
 .hero .credo-content{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}
 .hero .credo-primary{font-size:1em;line-height:1.8;letter-spacing:.02em}
 .hero .credo-panel h2{font-size:.613718em;line-height:1.7;letter-spacing:.14em;margin-bottom:.705882em}
}

@media(min-width:801px) and (max-width:1024px){.hero-caption{font-size:9px;letter-spacing:.18em;gap:12px}}

/* Approved: trim only horizontal empty space; preserve copy and vertical padding. */
@media(min-width:801px) and (max-width:1400px){.hero .credo-panel{width:23.03247em}}
@media(min-width:1401px){.hero .credo-panel{width:min(638px,68%)}}

/* 2026-10-31: body content follows Oct 28 widths with only modest extra gutters.
   Keep the approved header/hero/credo geometry and current readable type sizes. */
@media(min-width:801px){
 .container{width:min(1180px,calc(100% - 160px));max-width:none}
 .sense-services{padding-inline:56px}
 .sense-services .sc-intro{max-width:100%}
 .sense-services .sc-wrap{width:100%;max-width:1100px;margin-inline:auto}
 .greeting-layout{width:min(1100px,calc(100% - 160px));max-width:none}
}
@media(min-width:801px) and (max-width:1150px){
 .container{width:calc(100% - 112px)}
 .greeting-layout{width:calc(100% - 112px)}
}

/* Still image: reference composition, no additional magnification. */
.hero-media :is(.hero-fallback,.sense-hero-slide){transform:none;object-position:64% center}
@media(max-width:800px){.hero-media :is(.hero-fallback,.sense-hero-slide){transform:none;object-position:82% center}}

/* PC hero height trial: match pattern16, retaining approved credo typography/padding. */
@media(min-width:1025px){.hero{min-height:760px}}
@media(min-width:1025px) and (max-width:1150px){.hero{min-height:740px}}
@media(min-width:1700px){.hero{min-height:860px}}

/* The loading poster matches frame one; keep paused video visible to avoid crop jumps. */
.hero-media .hero-video{object-position:64% center;opacity:1;transition:opacity .35s ease}
.hero-media .hero-video.is-unavailable,.hero-still-request .hero-media .hero-video{opacity:0}
@media(prefers-reduced-motion:reduce){.hero-media .hero-video{opacity:0}}
@media(max-width:800px){
 .hero::before,.hero:not(:has(.hero-video.is-playing))::before{background:linear-gradient(90deg,rgba(6,25,42,.9),rgba(6,25,42,.78) 48%,rgba(6,25,42,.43))}
 .hero-still-request .hero::before,.hero:has(.hero-video.is-unavailable)::before{background:linear-gradient(90deg,rgba(6,25,42,.72),rgba(6,25,42,.45) 48%,rgba(6,25,42,.12))}
}

@media(max-width:800px) and (prefers-reduced-motion:reduce){.hero::before,.hero:not(:has(.hero-video.is-playing))::before{background:linear-gradient(90deg,rgba(6,25,42,.72),rgba(6,25,42,.45) 48%,rgba(6,25,42,.12))}}

@media(min-width:801px){.hero-media .hero-video{object-position:100% 50%}}

@media(max-width:800px){.hero-media .hero-video[data-src-mobile]{object-position:center center}}

/* Choose the loading frame in HTML, before JavaScript; never expose the independently cropped fallback while loading. */
.hero-media .hero-loading-frame{position:absolute;inset:0;display:block}
.hero-media .hero-loading-frame img{width:100%;height:100%;object-fit:cover;object-position:100% 50%}
.hero-media:has(.hero-loading-frame) :is(.hero-fallback,.sense-hero-slide){visibility:hidden}
.hero-media:has(.hero-loading-frame) .hero-video{opacity:0;transition:opacity .15s linear}
.hero-media:has(.hero-loading-frame) .hero-video.has-frame{opacity:1}
.hero-media:has(.hero-video.is-unavailable) :is(.hero-fallback,.sense-hero-slide),.hero-still-request .hero-media :is(.hero-fallback,.sense-hero-slide){visibility:visible}
.hero-media:has(.hero-video.is-unavailable) .hero-loading-frame,.hero-still-request .hero-loading-frame{display:none}
.hero-media:has(.hero-loading-frame) .hero-video.is-unavailable,.hero-still-request .hero-media .hero-video.has-frame{opacity:0}
@media(max-width:800px){.hero-media .hero-loading-frame img{object-position:center center}}
@media(prefers-reduced-motion:reduce){.hero-media .hero-loading-frame{display:none}.hero-media:has(.hero-loading-frame) :is(.hero-fallback,.sense-hero-slide){visibility:visible}.hero-media:has(.hero-loading-frame) .hero-video.has-frame{opacity:0}}

.hero-media .sense-hero-slide{object-position:var(--pc-x,64%) var(--pc-y,50%);transform-origin:var(--pc-x,64%) var(--pc-y,50%);transform:scale(var(--pc-zoom,1))}
@media(max-width:800px){.hero-media .sense-hero-slide{object-position:var(--sp-x,82%) var(--sp-y,50%);transform-origin:var(--sp-x,82%) var(--sp-y,50%);transform:scale(var(--sp-zoom,1))}}
.sense-hero-still-preview .hero-media .hero-video{opacity:0}

.sense-hero-still-preview .hero-media .hero-loading-frame{display:none}
.sense-hero-still-preview .hero-media:has(.hero-loading-frame) .sense-hero-slide{visibility:visible}
.sense-hero-still-preview .hero-media .hero-video.has-frame{opacity:0}

/* Finished finite playback: reveal the selected, cropped still beneath the video. */
.hero-media.is-playback-complete .sense-hero-slide{visibility:visible;opacity:1}
.hero-media.is-playback-complete .hero-loading-frame{display:none}
.hero-media.is-playback-complete .hero-video.has-frame,.hero-media.is-playback-complete .hero-video{opacity:0;transition:opacity .8s ease}
@media(prefers-reduced-motion:reduce){.hero-media.is-playback-complete .hero-video{transition:none}}