/* sumalu V12 | Approved hero portrait, gradient blend and simplified signature.
   Keeps all V11 service content, project examples, language handling and phone protection. */
:root { --header-h:84px; }
.header{height:var(--header-h);background:rgba(255,255,255,.96);border-bottom-color:rgba(15,30,51,.08)}
.header .brand,.footer .brand{align-items:center;align-self:center;gap:0;line-height:0}
.brand-signature{display:block;width:159px;height:76px;max-width:100%;object-fit:contain}
.header .wrap{gap:19px}
.nav a{font-weight:500}
/* The hero is a real photo element with a CSS transparency fade, not a composed screenshot. */
.home .hero{position:relative;display:block!important;min-height:0!important;overflow:hidden;background:#f9f8f5;padding:0!important;border-bottom:0}
.home .hero>.wrap{position:relative;width:100%;z-index:1}
.home .hero-grid{position:relative;display:flex!important;align-items:center!important;justify-content:flex-start;gap:0!important;min-height:610px;isolation:isolate;padding:62px 0 58px}
.home .hero-copy{position:relative;z-index:2;flex:0 0 min(61%,700px);max-width:700px}
.home .hero-visual{position:absolute;z-index:1;top:0;right:-10vw;width:min(67vw,1000px);height:100%;max-width:none!important;margin:0!important;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.14) 11%,rgba(0,0,0,.7) 31%,#000 52%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.14) 11%,rgba(0,0,0,.7) 31%,#000 52%,#000 100%)}
.home .hero-photo{width:100%;height:100%;aspect-ratio:auto!important;border-radius:0!important;box-shadow:none!important;overflow:hidden;background:transparent}
.home .hero-photo img{display:block;width:100%;height:100%;object-fit:cover!important;object-position:50% 16%!important;max-width:none}
.home .hero-kicker{font-size:12px;letter-spacing:.14em;color:var(--navy-2);margin:0 0 23px}
.home .hero h1{max-width:710px;font-size:clamp(41px,4.3vw,61px);line-height:1.075;letter-spacing:-.028em;margin:0 0 25px!important;font-weight:650}
.home .hero-keyword{color:#2173A2}
.home .hero-dot{color:#CD8930}
.home .hero-description{max-width:640px;font-size:17px;line-height:1.6;color:#475a6d;margin:0 0 17px}
.home .hero-positioning{max-width:650px;font-size:17px;line-height:1.5;font-weight:600;margin-bottom:8px}
.home .hero-audience{max-width:620px;font-size:13px;line-height:1.5;color:#536577;margin-bottom:0}
.home .hero-actions-v12{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.home .hero-actions-v12 .btn{min-height:48px;font-weight:600;padding:12px 21px;font-size:15px}
.home .hero-actions-v12 .btn--primary{background:var(--sumalu-action);color:white}
.home .hero-actions-v12 .btn--primary:hover{background:var(--navy)}
.home .hero-actions-v12 .btn--outline{border:1px solid var(--sumalu-action);color:var(--sumalu-action);background:rgba(255,255,255,.55)}
.home .hero-actions-v12 .btn--outline:hover{background:#eaf3f8}
.home .cta-arrow{display:inline-block;font-size:19px;line-height:1;margin-left:5px;font-weight:400;transition:transform .22s ease}
.home .btn--primary:hover .cta-arrow{transform:translateX(3px)}
.home .entry-references{position:relative;z-index:3;background:#f9f8f5;margin-top:0;padding:18px 0 24px;border-top:1px solid #e6e8e7}
.home .entry-references-head{margin-bottom:9px}
/* Never overlay portrait behind copy on smaller screens; stack it with a soft bottom fade. */
@media(max-width:1050px){
 .home .hero-grid{min-height:630px;padding:55px 0 47px}
 .home .hero-copy{flex-basis:64%;max-width:650px}
 .home .hero h1{font-size:clamp(38px,4.7vw,54px)}
 .home .hero-visual{right:-12vw;width:66vw}
 .home .hero-description{font-size:16px}
}
@media(max-width:820px){
 :root{--header-h:72px}
 .header .brand-signature{width:138px;height:66px}
 .home .hero-grid{display:flex!important;flex-direction:column!important;align-items:stretch!important;min-height:0;padding:40px 0 0;gap:0!important}
 .home .hero-copy{flex:0 0 auto;max-width:680px;width:100%}
 .home .hero h1{font-size:clamp(37px,5.9vw,53px);max-width:690px}
 .home .hero-description{font-size:17px}
 .home .hero-visual{position:relative;right:auto;top:auto;order:2;margin:8px -5vw -15px auto!important;width:min(78vw,600px);height:390px;max-width:none!important;overflow:hidden;
   -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%);
   mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%)}
 .home .hero-photo img{object-position:50% 14%!important}
 .home .entry-references{padding-top:15px}
}
@media(max-width:560px){
 :root{--header-h:68px}
 .header .brand-signature{width:111px;height:56px}
 .header .wrap{gap:8px}
 .home .hero-grid{padding:30px 0 0}
 .home .hero-kicker{font-size:10px;letter-spacing:.115em;margin:0 0 18px}
 .home .hero h1{font-size:clamp(31px,8.35vw,40px);line-height:1.13;margin:0 0 23px!important}
 .home .hero-description{font-size:16px;line-height:1.6;margin-bottom:15px}
 .home .hero-positioning{font-size:16px;line-height:1.53}
 .home .hero-audience{font-size:13px;line-height:1.6}
 .home .hero-actions-v12{gap:10px;margin-top:23px}
 .home .hero-actions-v12 .btn{font-size:13px;padding:10px 14px;min-height:44px}
 .home .hero-visual{width:min(98vw,470px);margin:6px -12vw -32px auto!important;height:340px}
 .home .entry-references{padding:12px 0 20px}
}
@media(max-width:360px){
 .header .brand-signature{width:101px;height:51px}
 .home .hero h1{font-size:30px}
 .home .hero-actions-v12 .btn{font-size:12px;padding:10px 11px}
 .home .hero-visual{height:300px}
}
@media(prefers-reduced-motion:reduce){.home .cta-arrow{transition:none!important}}
@media print{.home .hero-grid{min-height:0!important;display:block!important;padding:24px 0!important}.home .hero-visual{display:none}.home .entry-references{padding-top:10px}}

/* Portrait uses a fixed visual scale rather than 'cover', preserving the upper body
   instead of enlarging the head. The transparency gradient acts on the real photo. */
@media(min-width:821px){
 .home .hero-visual{-webkit-mask-image:none;mask-image:none;overflow:visible}
 .home .hero-photo{position:relative;overflow:visible}
 .home .hero-photo img{position:absolute;right:0;top:-47px;height:790px!important;width:auto!important;max-width:none!important;object-fit:contain!important;object-position:center!important;
   -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.23) 15%,#000 37%,#000 100%);
   mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.23) 15%,#000 37%,#000 100%)}
}
@media(max-width:820px){
 .home .hero-visual{display:block!important;overflow:hidden;margin-top:14px!important}
 .home .hero-photo{position:relative;width:100%;height:100%;overflow:visible}
 .home .hero-photo img{position:absolute;right:0;top:-36px;height:570px!important;width:auto!important;max-width:none!important;object-fit:contain!important;object-position:center!important;
   -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 56%,transparent 100%);
   mask-image:linear-gradient(to bottom,#000 0%,#000 56%,transparent 100%)}
}
@media(max-width:560px){
 .home .hero-visual{margin-top:7px!important}
 .home .hero-photo img{top:-25px;height:550px!important;right:-12px}
}
@media(max-width:360px){
 .home .hero-photo img{height:510px!important;right:-10px}
}

/* Keep the portrait clipped to the hero so it never spills behind the logo strip. */
@media(min-width:821px){
 .home .hero-visual{overflow:hidden}
}
/* Older theme rules paint the tiny mobile contact link like a squeezed button.
   Restore a simple readable text link in the compact header. */
@media(max-width:560px){
 .header .header-contact{background:transparent!important;color:var(--navy)!important;
   padding:8px 0!important;white-space:nowrap;flex:none;font-size:13px}
}
@media(max-width:820px){
 /* The image fades both leftward into the text's background and downward into the page. */
 .home .hero-visual{
   -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 20%);
   mask-image:linear-gradient(to right,transparent 0%,#000 20%)}
}
@media(max-width:560px){
 /* On phones the photographic layer reaches both screen edges, so no image box
    edge appears inside the reading column. */
 .home .hero-visual{width:calc(100% + 2 * var(--gutter));max-width:none!important;
   margin:7px calc(-1 * var(--gutter)) 0!important}
}