body{font-family:DM,Arial,sans-serif;color:#123e58;background:#edf2ed}.brand{font-size:36px;letter-spacing:-2px}.brand span{color:#123e58}header{border-bottom:1px solid #afc2c8}.hero{padding:32px 3.5% 0}.hero-top{display:flex;justify-content:space-between;align-items:center}.hero-note{font-size:13px;line-height:1.5}h1{font-size:clamp(68px,9.8vw,158px);line-height:.93;letter-spacing:-.075em;font-weight:750;margin:34px 0 42px}.human{display:grid;grid-template-columns:1.12fr 1fr 60px;background:#153f59;color:#eef4ee;min-height:525px}.portrait img{height:580px;object-position:48% 38%}.human-copy{padding:52px 12%;display:flex;flex-direction:column;justify-content:center}.human-copy>p:first-child{font-size:clamp(24px,2.5vw,38px);line-height:1.2;letter-spacing:-.035em}.action{border-bottom:1px solid #eef4ee;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:60px;margin-top:48px;font-weight:650;font-size:16px}.disclosure{font-size:12px;line-height:1.5;margin-top:28px;max-width:31ch}.vertical{writing-mode:vertical-rl;align-self:stretch;border-left:1px solid #718fa0;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:2px}.services{padding:100px 3.5%}.services h2{font-size:clamp(48px,5.8vw,88px);line-height:.98;letter-spacing:-.06em;margin:26px 0 48px}.service-list{border-top:2px solid #123e58}.service-list a{display:grid;grid-template-columns:70px 1fr 1fr 35px;gap:28px;align-items:center;min-height:110px;border-bottom:1px solid #a8bfc8}.service-list strong{font-size:28px;letter-spacing:-1px}.service-desc{font-size:15px}.arrow{font-size:32px}.how{background:#dcebf1;padding:64px 3.5%;display:grid;grid-template-columns:1fr 1.3fr;gap:8%;align-items:center}.how figure{height:570px}.how img{object-position:48% 50%}.how h2{font-size:clamp(42px,4.5vw,72px);line-height:1.02;letter-spacing:-.055em;margin:24px 0}.how p:not(.eyebrow){font-size:18px;line-height:1.6;max-width:40ch}.how .notice{font-size:13px!important;margin:25px 0;max-width:45ch!important}.how .link{min-width:240px}.footer{border-color:#afc2c8}.footer strong{font-size:32px;letter-spacing:-2px}.sample{margin-top:8px}@media(max-width:700px){.hero{padding:26px 20px 0}.hero-note{font-size:11px}h1{font-size:clamp(58px,13.4vw,92px);margin:30px 0}.human{grid-template-columns:1fr}.portrait img{height:440px;object-position:48% 35%}.human-copy{padding:32px 24px}.human-copy>p:first-child{font-size:28px;max-width:25ch}.action{margin-top:28px}.vertical{display:none}.services{padding:58px 20px}.services h2{font-size:48px;margin:24px 0 36px}.service-list a{grid-template-columns:28px 1fr 25px;gap:16px;padding:24px 0;min-height:110px}.service-list strong{font-size:23px}.service-desc{grid-column:2;font-size:14px}.arrow{grid-column:3;grid-row:1/3}.how{padding:40px 20px;grid-template-columns:1fr;gap:36px}.how figure{height:400px}.how h2{font-size:43px}.how p:not(.eyebrow){font-size:17px}}
/* R3 / service poster: asymmetric full-height portrait and action crossing its edge. */
body{--ice:#edf2ed;--ink:#123e58;--blue:#153f59;--mist:#dcebf1;background:var(--ice);color:var(--ink)}
header{min-height:88px;background:var(--ice)}
.hero{position:relative;isolation:isolate;min-height:max(600px,calc(100svh - 88px));padding:28px 3.5% 92px;background:var(--ice)}
.hero-top{position:relative;z-index:2;width:46%;gap:24px;align-items:start}
.hero-note{font-size:12px;line-height:1.4;max-width:18ch}
h1{position:relative;z-index:1;font-size:clamp(78px,8.6vw,148px);line-height:.88;letter-spacing:-.075em;font-weight:750;margin:32px 0 0;width:51%;padding-bottom:10px}
h1>span{display:block}.mobile-space{display:none}
.human{display:contents}
.portrait{position:absolute;inset:0 0 0 auto;width:48%;z-index:0;margin:0;background:var(--mist)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:48% 28%}
.human-copy{position:absolute;z-index:3;right:3.5%;bottom:24px;width:51%;padding:26px 30px 22px;background:var(--blue);color:var(--ice);display:grid;grid-template-columns:1.3fr 1fr;gap:14px 28px;align-items:start;box-shadow:0 0 0 1px rgb(237 242 237 / .12)}
.human-copy>p:first-child{font-size:clamp(18px,1.65vw,25px);line-height:1.24;letter-spacing:-.025em;max-width:28ch;grid-row:1/3}
.action{font-size:15px;min-height:50px;margin:0;border-color:var(--ice);gap:18px;align-self:start}
.disclosure{font-size:11px;line-height:1.4;margin:0;max-width:35ch}
.vertical{position:absolute;left:3.5%;bottom:30px;writing-mode:horizontal-tb;border:0;display:block;color:var(--ink);font-size:10px;letter-spacing:1.7px;max-width:35%;line-height:1.5}
.services{position:relative;padding-top:64px;border-top:1px solid #afc2c8}
@media(min-width:701px) and (max-width:1000px){h1{font-size:9vw}.hero-note{font-size:10px}.hero-top{gap:14px}.hero-top .eyebrow{font-size:10px;max-width:13ch}.human-copy{grid-template-columns:1fr;width:48%;gap:12px;padding:22px}.human-copy>p:first-child{grid-row:auto;font-size:20px}.action{font-size:14px}}
@media(max-width:700px){
 header{min-height:80px;padding:16px 20px}header .brand{font-size:32px}
 .hero{padding:22px 20px 0;min-height:max(710px,calc(100svh - 80px))}
 .hero-top{width:100%;gap:20px}.hero-top .eyebrow{font-size:10px;letter-spacing:1px}.hero-note{font-size:10px;line-height:1.3;max-width:17ch}
 h1{width:100%;font-size:clamp(36px,10.8vw,74px);line-height:.98;letter-spacing:-.06em;margin:22px 0 0;padding:0}.desktop-break{display:none}.mobile-space{display:inline}
 .portrait{inset:168px 0 0 auto;width:76%}.portrait img{height:100%;object-position:48% 26%}
 .human-copy{right:20px;bottom:20px;width:calc(100% - 40px);padding:22px;grid-template-columns:1fr;gap:13px}
 .human-copy>p:first-child{font-size:19px;line-height:1.25;grid-row:auto;max-width:28ch}.action{min-height:44px;margin:0;font-size:14px}.disclosure{font-size:10px;line-height:1.35;max-width:40ch}
 .vertical{display:block;writing-mode:vertical-rl;left:24px;top:210px;bottom:auto;max-width:none;font-size:9px;letter-spacing:1.8px}
 .services{padding-top:48px}
}

/* Selected Perto miniature direction: live type and raster share one spatial assembly. */
.hero-mini{min-height:max(600px,calc(100svh - 88px));padding:26px 3.5%;background:#b6bead;overflow:clip}
.hero-mini .hero-top{position:relative;z-index:4;width:100%;align-items:start;pointer-events:none}
.hero-mini .hero-top .eyebrow{font-size:11px;letter-spacing:1.2px;max-width:none}
.hero-mini .hero-note{max-width:18ch;font-size:12px;text-align:right;background:rgb(237 242 237 / .94);padding:9px 12px}
.scene-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.scene-assembly,.scene-arrival{position:absolute;inset:0}
.scene-assembly{transform:translate3d(var(--scene-x,0px),var(--scene-y,0px),0);will-change:transform}
.scene-arrival{animation:perto-arrive 900ms cubic-bezier(.22,.7,.22,1) both}
.diorama{position:absolute;inset:0;margin:0;pointer-events:none}
.diorama img{height:100%;width:100%;object-fit:contain;object-position:right center}
.title-plane{position:absolute;left:4.2%;top:14%;width:62%}
.hero-mini .scene-title{position:relative;width:100%;padding:0;margin:0;font-family:DM,Arial,sans-serif;font-size:clamp(58px,8.2vw,144px);line-height:1.02;letter-spacing:-.065em;font-weight:800;color:#123e58;transform:none;text-shadow:none;pointer-events:auto}
.hero-mini .scene-title>span{display:block;white-space:nowrap}
.service-action{position:absolute;z-index:5;left:3.5%;bottom:28px;width:330px;padding:20px;background:rgb(237 242 237 / .97);border:1px solid rgb(18 62 88 / .16)}
.service-action>p:first-child{font-size:17px;line-height:1.4;letter-spacing:-.015em}
.service-action .action{display:flex;min-height:50px;width:100%;padding:10px 14px;margin:18px 0 0;background:#153f59;color:#edf2ed;border:0;gap:16px;font-size:14px;font-weight:650}
.service-action .action:hover{text-decoration:underline;text-underline-offset:4px}
.service-action .action:focus-visible{outline-color:#123e58;outline-offset:4px}
.service-action .disclosure{font-size:10px;line-height:1.4;margin:12px 0 0;max-width:none;color:#123e58}
@keyframes perto-arrive{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(min-width:701px) and (max-width:1050px){.title-plane{top:14%;width:62%}.hero-mini .scene-title{font-size:8.2vw}.service-action{width:300px;padding:18px}.service-action>p:first-child{font-size:16px}}
@media(max-width:700px){
 .hero-mini{min-height:max(720px,calc(100svh - 80px));padding:22px 20px;background:#b6bead}
 .hero-mini .hero-top .eyebrow{font-size:10px;max-width:14ch}.hero-mini .hero-note{font-size:10px;line-height:1.3;padding:7px 9px;max-width:17ch}
 .title-plane{top:88px;left:24px;width:calc(100% - 48px)}
 .hero-mini .scene-title{font-size:clamp(36px,12.8vw,84px);line-height:1.02;letter-spacing:-.055em;transform:none;text-shadow:none}
 .diorama{inset:168px 0 222px}.diorama img{object-fit:cover;object-position:82% 50%}
 .service-action{left:20px;bottom:20px;width:calc(100% - 40px);padding:18px}
 .service-action>p:first-child{font-size:16px;line-height:1.35}.service-action .action{min-height:48px;margin-top:14px;font-size:14px}.service-action .disclosure{font-size:10px;margin-top:10px}
}
@media(prefers-reduced-motion:reduce){.scene-arrival{animation:none!important;opacity:1;transform:none}.scene-assembly{transform:none!important;will-change:auto}}

/* Occlusion: the same raster is composited above the live title only inside the house silhouette. */
.title-plane{z-index:1}
.diorama-foreground{z-index:2}
.diorama-foreground img{mask-image:url("assets/perto-house-mask.svg");mask-size:contain;mask-position:right center;mask-repeat:no-repeat;-webkit-mask-image:url("assets/perto-house-mask.svg");-webkit-mask-size:contain;-webkit-mask-position:right center;-webkit-mask-repeat:no-repeat}
@media(max-width:700px){.diorama-foreground img{mask-size:cover;mask-position:82% 50%;-webkit-mask-size:cover;-webkit-mask-position:82% 50%}}