/* SCG home · clearer services and a dedicated company section */
.hero__kw{max-width:34ch;margin-top:22px;font-family:var(--grot);font-size:clamp(18px,1.8vw,25px);font-weight:500;letter-spacing:-.015em;line-height:1.4;text-transform:none;color:var(--white);text-wrap:pretty}
.home-about{scroll-margin-top:100px;border-top:1px solid var(--line-paper);border-bottom:1px solid var(--line-paper)}
.home-about__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:start}
.home-about .statement{font-size:clamp(40px,4.8vw,70px);margin-top:28px;max-width:14ch}
.home-about__intro{max-width:43ch;font-size:clamp(18px,1.6vw,22px);line-height:1.55;margin-top:28px;color:#393b33}
.home-about__signature{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:40px;font-size:11px;line-height:1.5;color:var(--dim-2);font-family:var(--mono)}
.home-about__signature .ceo__name{color:var(--ink);font-size:52px;letter-spacing:0;margin-bottom:2px}
.home-about__location{border:1px solid #c8ccbd;border-radius:999px;padding:6px 12px;color:#454b34;margin-top:4px}
.home-about__process{border-left:1px solid #cdd0c3;padding-left:clamp(24px,4vw,56px)}
.home-about__process>h3{font-size:clamp(24px,2.6vw,35px);line-height:1.16;letter-spacing:-.035em;font-weight:700}
.home-about__body{font-size:16px;line-height:1.7;color:#52564a;max-width:50ch;margin-top:20px}
.home-about__process ol{list-style:none;margin:30px 0 0;padding:0}
.home-about__process li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:17px;border-top:1px solid #d2d5c9;padding:19px 0}
.home-about__step-no{font-family:var(--mono);font-size:11px;color:#53603b;padding-top:4px}
.home-about__process h4{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.home-about__process li p{font-size:14px;line-height:1.6;color:#52564a;max-width:43ch}
.home-about__actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 24px;margin-top:22px}
.home-about__actions .btn{font-size:12px;max-width:100%;white-space:normal;text-align:left}
.home-about__work{display:inline-flex;align-items:center;gap:15px;font-size:13px;font-weight:700;text-underline-offset:5px}
.home-about__work:hover{text-decoration:underline}
@media(max-width:760px){.hero__kw{font-size:18px;max-width:30ch;margin-top:18px}.home-about__grid{grid-template-columns:minmax(0,1fr);gap:40px}.home-about__process{border-left:0;border-top:1px solid #cdd0c3;padding:32px 0 0}.home-about__signature{margin-top:28px}.home-about .statement{font-size:clamp(38px,9vw,58px)}.home-about__intro{font-size:18px}.home-about__body{font-size:15px}.home-about__actions{gap:20px}.home-about__actions .btn{padding-inline:20px}}
/* The existing pencil artwork becomes the atmosphere of the whole brand block. */
.home-branding.home-branding--immersive{position:relative;isolation:isolate;display:flex;align-items:center;min-height:560px;gap:0;padding:55px 0;margin-top:70px;border:0;overflow:hidden;background:var(--paper)}.home-branding--immersive>figure{position:absolute;inset:-80px auto -80px -50px;width:82%;margin:0;border:0;background:none;opacity:.82;z-index:-2;mask-image:linear-gradient(90deg,#000 50%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 50%,transparent 100%)}.home-branding--immersive>figure>img{width:100%;height:100%;object-fit:cover;object-position:center 53%;display:block;mix-blend-mode:multiply}.home-branding--immersive:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,var(--paper),transparent 15%,transparent 85%,var(--paper)),linear-gradient(90deg,transparent 38%,#f4f4efa6 54%,var(--paper) 77%)}.home-branding--immersive>div{width:47%;margin-left:auto;position:relative;padding:35px 25px 35px 0;z-index:1}.home-branding--immersive>div>h3{font-size:clamp(32px,3.6vw,50px)}.home-branding--immersive>div>p{color:#4c5542}
@media(max-width:760px){.home-branding.home-branding--immersive{min-height:0;display:block;padding:0;margin-top:45px}.home-branding--immersive>figure{inset:0 -30px auto;width:calc(100% + 60px);height:480px;opacity:.85;mask-image:linear-gradient(#000 40%,transparent 100%);-webkit-mask-image:linear-gradient(#000 40%,transparent 100%)}.home-branding--immersive>figure>img{object-position:center 42%}.home-branding--immersive:after{background:linear-gradient(0deg,var(--paper),transparent 55%,var(--paper))}.home-branding--immersive>div{width:100%;margin:0;padding:360px 0 24px}.home-branding--immersive>div>h3{font-size:36px}.home-branding--immersive>div>p{max-width:48ch}}

/* SCG pencil artwork: retain the complete pencil, construction strokes and studies. */
.home-branding.home-branding--immersive{min-height:680px;padding:45px 0;margin-top:55px;overflow:hidden}
.home-branding--immersive>figure{inset:0 auto 0 -20px;width:64%;height:100%;opacity:1;mask-image:linear-gradient(90deg,#000 0%,#000 83%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 83%,transparent 100%)}
.home-branding--immersive>figure>img{width:100%;height:100%;object-fit:contain;object-position:left center;mix-blend-mode:multiply;filter:contrast(1.08)}
.home-branding--immersive:after{background:linear-gradient(0deg,var(--paper),transparent 5%,transparent 96%,var(--paper));pointer-events:none}
.home-branding--immersive>div{width:44%;padding:30px 0 30px 16px;margin-left:auto}
@media(min-width:761px) and (max-width:1000px){.home-branding.home-branding--immersive{min-height:610px}.home-branding--immersive>figure{width:63%;left:-24px}.home-branding--immersive>div{width:45%;padding-left:15px}.home-branding--immersive>div>h3{font-size:34px}}
@media(max-width:760px){.home-branding.home-branding--immersive{display:block;min-height:0;padding:0;margin-top:40px;overflow:visible}.home-branding--immersive>figure{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1122/1402;opacity:1;mask-image:linear-gradient(#000 0%,#000 94%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 94%,transparent 100%)}.home-branding--immersive>figure>img{width:100%;height:100%;object-fit:contain;object-position:center}.home-branding--immersive:after{display:none}.home-branding--immersive>div{width:100%;padding:22px 0 18px;margin:0}.home-branding--immersive>div>h3{font-size:clamp(30px,7.5vw,36px)}}
