/* UMIBE interior pages: editorial typography and accessible, restrained navigation.
   Keep the established Figma-based homepage design unchanged. */
.inner-page{background:var(--blue);color:#fff}
.inner-page .site-header{min-height:108px}
.inner-page .page-nav{display:flex;gap:34px;align-items:center;font:400 16px/1.2 var(--display);letter-spacing:.015em}
.inner-page .page-nav a[aria-current="page"]{border-bottom:1px solid #fff;padding-bottom:6px}
.inner-page .page-nav a:focus-visible,.inner-page .page-mobile-menu a:focus-visible{outline:2px solid #fff;outline-offset:5px}
.inner-page .page-mobile-menu{display:none}
.interior-main{min-height:50vh}
.interior-kicker,.interior-section-head,.service-block-index,.project-index,.project-meta,.step-card>span,.interior-cta>div>span{
 font:500 14px/1.4 var(--display);letter-spacing:.055em
}
.interior-kicker{display:flex;align-items:baseline;gap:24px}
.interior-kicker span{font-family:var(--latin)}
.interior-hero{padding-top:105px;padding-bottom:135px}
.interior-hero h1{font:700 clamp(68px,10.1vw,160px)/.94 var(--hero-display);letter-spacing:-.025em;margin:58px 0 104px}
.interior-hero-foot{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;max-width:1230px;align-items:start}
.interior-hero-foot h2{font:600 clamp(25px,3.3vw,44px)/1.55 var(--body);letter-spacing:-.035em}
.interior-hero-foot p{font:400 16px/2.15 var(--body);max-width:490px}
.interior-section{padding-bottom:135px}
.interior-section-head{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid rgba(255,255,255,.76);padding-top:18px;margin-bottom:43px}
.service-block,.project-block{display:grid;grid-template-columns:minmax(150px,28%) minmax(0,1fr);gap:48px;padding:48px 0 64px;border-bottom:1px solid rgba(255,255,255,.55)}
.service-block-index,.project-index{padding-top:9px;opacity:.8}
.service-block-body,.project-main{max-width:780px;min-width:0}
.service-block h2{font:500 clamp(37px,5vw,68px)/1.08 var(--display);letter-spacing:-.015em}
.service-block h3{font:600 22px/1.65 var(--body);margin-top:13px}
.service-block .service-lead{font:500 21px/1.7 var(--body);margin-top:43px}
.service-block .service-copy,.project-main>p{font:400 16px/2.05 var(--body);max-width:640px;margin-top:19px}
.service-scope{padding:22px 0 0;margin:22px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.35)}
.service-scope li{font:400 14px/1.8 var(--body);padding:7px 0 7px 20px;position:relative}
.service-scope li:before{content:"—";position:absolute;left:0}
.service-note,.interior-small-note{font:400 13px/1.95 var(--body);opacity:.83;max-width:820px}
.service-note{margin-top:24px}
.steps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.step-card{border-top:1px solid rgba(255,255,255,.65);padding:20px 12px 15px 0;min-width:0}
.step-card h3{font:600 18px/1.65 var(--body);margin:35px 0 10px}
.step-card p{font:400 14px/1.85 var(--body)}
.steps-grid+.interior-small-note{margin-top:38px}
.project-meta{display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap;opacity:.8}
.project-main h2{font:600 clamp(34px,4.5vw,56px)/1.3 var(--body);letter-spacing:-.035em;margin-top:26px}
.project-main h3{font:500 clamp(19px,2.4vw,28px)/1.65 var(--body);margin-top:25px}
.project-external{margin-top:30px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;padding:16px 0;border-top:1px solid rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.55);font:500 17px/1.5 var(--display)}
.project-external span:nth-child(1){font:400 13px/1.5 var(--latin);opacity:.8}
.project-external span:last-child{margin-left:auto}
.project-block+.interior-small-note{margin-top:35px}
.interior-cta{display:flex;align-items:end;justify-content:space-between;gap:25px;padding-block:42px 52px;border-top:1px solid rgba(255,255,255,.75)}
.interior-cta h2{font:600 clamp(24px,3vw,37px)/1.5 var(--body);margin-top:15px}
.interior-cta a{display:flex;align-items:center;gap:28px;flex-shrink:0;font:500 18px/1.4 var(--display);padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.75)}
.interior-cta a span{font:400 25px/1 var(--latin)}
.interior-cta-last{padding-bottom:115px}
.interior-footer{padding-bottom:33px}
.interior-footer-rule{border-top:1px solid rgba(255,255,255,.75)}
.interior-footer-top{padding:41px 0 65px;display:flex;justify-content:space-between;gap:28px}
.interior-footer-brand{font:700 44px/1 var(--display)}
.interior-footer-top p{font:400 14px/1.85 var(--body)}
.interior-footer-bottom{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:18px;font:400 12px/1.5 var(--latin)}
.interior-footer-bottom nav{display:flex;gap:19px;flex-wrap:wrap}
@media(max-width:1000px){
 .inner-page .page-nav{gap:20px}
 .interior-hero-foot{gap:35px}
 .steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
 .inner-page .site-header{min-height:88px}
 .inner-page .page-nav{display:none}
 .inner-page .page-mobile-menu{display:block;position:relative}
 .inner-page .page-mobile-menu summary{list-style:none;cursor:pointer;border:1px solid rgba(255,255,255,.65);padding:11px 16px;font:500 14px/1 var(--display)}
 .inner-page .page-mobile-menu summary::-webkit-details-marker{display:none}
 .inner-page .page-mobile-menu summary span{margin-left:10px}
 .inner-page .page-mobile-menu nav{position:absolute;right:0;top:48px;min-width:min(320px,calc(100vw - 56px));padding:18px 23px;background:#0b498e;border:1px solid rgba(255,255,255,.65);z-index:40}
 .inner-page .page-mobile-menu nav a{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.35);font:500 22px/1.2 var(--display)}
 .inner-page .page-mobile-menu nav a span{font:400 11px/1.7 var(--body);opacity:.8}
 .inner-page .page-mobile-menu nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px}
 .interior-hero{padding-top:70px;padding-bottom:100px}
 .interior-hero h1{margin:50px 0 72px}
 .interior-hero-foot{grid-template-columns:1fr;gap:24px}
 .service-block,.project-block{grid-template-columns:100px minmax(0,1fr);gap:22px}
}
@media(max-width:600px){
 .inner-page .site-header{min-height:76px}
 .interior-hero{padding-top:57px;padding-bottom:83px}
 .interior-kicker,.interior-section-head{font-size:12px}
 .interior-hero h1{font-size:clamp(57px,15vw,88px);line-height:.98;margin:48px 0 52px;overflow-wrap:normal}
 .interior-hero-foot h2{font-size:25px}
 .interior-hero-foot p{font-size:14px;line-height:2}
 .interior-section{padding-bottom:90px}
 .interior-section-head{margin-bottom:20px}
 .service-block,.project-block{grid-template-columns:1fr;gap:15px;padding:29px 0 43px}
 .service-block-index,.project-index{font-size:12px}
 .service-block h2{font-size:42px}
 .service-block h3{font-size:17px}
 .service-block .service-lead{font-size:18px;margin-top:25px}
 .service-block .service-copy,.project-main>p{font-size:14px}
 .steps-grid{grid-template-columns:1fr;gap:15px}
 .step-card h3{margin-top:20px}
 .project-main h2{font-size:30px}
 .project-main h3{font-size:18px}
 .project-meta{font-size:12px}
 .interior-cta{align-items:stretch;flex-direction:column;gap:22px}
 .interior-cta h2{font-size:24px}
 .interior-cta a{align-self:flex-start;font-size:17px}
 .interior-footer-top{flex-direction:column;gap:20px}
 .interior-footer-bottom{display:block}
 .interior-footer-bottom nav{margin:16px 0}
}

/* About / company facts */
.company-heading{font:600 clamp(29px,4vw,49px)/1.35 var(--body);margin:25px 0 38px}
.company-facts{margin:0;border-top:1px solid rgba(255,255,255,.55)}
.company-facts>div{display:grid;grid-template-columns:minmax(150px,28%) minmax(0,1fr);gap:48px;border-bottom:1px solid rgba(255,255,255,.4);padding:20px 0}
.company-facts dt{font:500 16px/1.65 var(--display)}
.company-facts dd{margin:0;font:400 15px/1.85 var(--body)}
.company-facts dd a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){.company-facts>div{grid-template-columns:1fr;gap:4px;padding:16px 0}.company-facts dt{font-size:13px}.company-facts dd{font-size:14px}}


/* WORKS layout draft — protected page only. Mockup screenshots remain unpublished until client consent. */
.works-project {
 display:grid;grid-template-columns:minmax(0,57fr) minmax(0,43fr);
 gap:clamp(36px,5.5vw,88px);align-items:center;
 padding:clamp(54px,7vw,115px) 0;
 border-bottom:1px solid rgba(255,255,255,.52);
}
.works-project:first-of-type{padding-top:34px}
.works-project-figure{margin:0;min-width:0}
.works-project-visual{
 position:relative;aspect-ratio:4/3;width:100%;
 background:#f4f5f2;overflow:hidden;
}
.works-project-mockup{display:block;width:100%;height:100%;object-fit:contain}
.works-figure-caption{
 display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;
 padding-top:12px;color:rgba(255,255,255,.75);
 font:400 11px/1.4 var(--latin);letter-spacing:.08em;
}
.works-project-copy{min-width:0}
.works-project-eyebrow{
 display:flex;justify-content:space-between;gap:20px;align-items:baseline;
 border-top:1px solid rgba(255,255,255,.75);padding:17px 0 34px;
 font:500 13px/1.5 var(--latin);letter-spacing:.035em;color:rgba(255,255,255,.85)
}
.works-project-eyebrow span:last-child{text-align:right}
.works-project-english{font:500 13px/1.4 var(--display);letter-spacing:.14em;opacity:.8}
.works-project-copy h2{
 font:600 clamp(27px,3.2vw,49px)/1.4 var(--body);
 letter-spacing:-.035em;overflow-wrap:anywhere;margin-top:12px
}
.works-project-copy h3{
 font:500 clamp(19px,2.05vw,27px)/1.7 var(--body);
 letter-spacing:-.02em;margin-top:37px;max-width:610px
}
.works-project-description{
 margin-top:20px;max-width:590px;
 font:400 clamp(14px,1.15vw,16px)/2.05 var(--body);
 color:rgba(255,255,255,.82);
}
.works-project-external{
 display:grid;grid-template-columns:auto minmax(0,1fr) auto;
 gap:10px 16px;align-items:center;margin-top:42px;
 padding:18px 0;border-top:1px solid rgba(255,255,255,.65);
 border-bottom:1px solid rgba(255,255,255,.65);
 font:500 17px/1.4 var(--display);
}
.works-project-external .works-project-site{
 min-width:0;overflow-wrap:anywhere;text-align:right;
 font:400 12px/1.6 var(--latin);color:rgba(255,255,255,.78);
}
.works-project-external>span:last-child{font:400 20px/1 var(--latin)}
.works-project-external:hover,.works-project-external:focus-visible{opacity:1;background:rgba(255,255,255,.07)}
/* A neutral geometry-only placeholder: no customer pages are copied to the repository. */
.works-mockup-pending{position:relative;width:100%;height:100%;color:#8c96a1}
.works-placeholder-devices{position:absolute;inset:13% 11% 19%}
.works-device{display:block;position:absolute;background:#28303a;border:clamp(3px,.5vw,7px) solid #28303a;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.works-device>span{display:block;width:100%;height:100%;background:linear-gradient(145deg,#cdd5da,#e4e8e8)}
.works-device-desktop{width:70%;height:67%;left:17%;top:5%;border-radius:6px}
.works-device-desktop::after{content:"";position:absolute;top:100%;left:41%;width:18%;height:23%;background:#a1a9af;box-shadow:0 4px 0 #7f8a93}
.works-device-tablet{width:31%;height:65%;right:0;bottom:0;border-radius:9px;z-index:2}
.works-device-phone{width:15%;height:49%;left:0;bottom:0;border-radius:10px;z-index:3}
.works-device-tablet>span,.works-device-phone>span{border-radius:4px}
.works-mockup-pending-caption{
 position:absolute;left:0;right:0;bottom:7%;text-align:center;
 font:500 clamp(9px,.9vw,12px)/1.5 var(--latin);letter-spacing:.12em;
}
@media(max-width:1000px){
 .works-project{grid-template-columns:minmax(0,53fr) minmax(0,47fr);gap:34px}
 .works-project-copy h3{margin-top:24px}
 .works-project-external{margin-top:28px}
 .works-project-eyebrow{padding-bottom:22px}
}
/* Use a vertical case-study layout at tablet widths as well as phones:
   long editorial descriptions should not be squeezed beside a narrow image. */
@media(max-width:860px){
 .works-project{grid-template-columns:1fr;gap:23px;padding:52px 0 57px}
 .works-project:first-of-type{padding-top:24px}
 .works-project-visual{max-width:600px;margin-inline:auto}
 .works-figure-caption{font-size:10px}
 .works-project-copy h2{font-size:clamp(27px,7vw,37px)}
 .works-project-copy h3{font-size:19px;margin-top:22px}
 .works-project-description{font-size:14px;line-height:2}
 .works-project-eyebrow{padding:12px 0 21px;font-size:12px}
 .works-project-external{margin-top:28px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 .works-project-external{transition:none}
}

/* Reveal preview WebP images only after load; retain the fallback on failure. */
.works-project-visual .works-project-mockup{
 position:absolute;inset:0;opacity:0;z-index:2;
 transition:opacity .24s ease;
}
.works-project-visual.works-image-ready .works-project-mockup{opacity:1}
.works-project-visual.works-image-ready .works-mockup-pending{visibility:hidden}
@media(prefers-reduced-motion:reduce){
 .works-project-visual .works-project-mockup{transition:none}
}