/* Beta refinements: preserve the original palette and spacious layout. */
.diagram{background-color:#112b40;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:28px 28px;color:#edf4f8;border:1px solid #263e51;padding:24px 24px 26px;min-height:460px}
.diagram-meta{display:flex;justify-content:space-between;width:100%;font:10px/1.5 Arial,sans-serif;letter-spacing:1.7px;color:#a5b9c8;border-bottom:1px solid #ffffff24;padding-bottom:16px;margin-bottom:24px}
.diagram-top{background:none;color:#adc0cf;font:10px/1.7 Arial,sans-serif;letter-spacing:2.3px}
.diagram-top span{color:#f3f6f8;font-family:"Yu Gothic",sans-serif;font-size:16px;letter-spacing:2px;margin-top:5px}
.diagram-line{height:27px;border-color:#7e9aae;position:relative}
.diagram-line:after{content:"";position:absolute;bottom:0;left:-3px;width:5px;height:5px;background:#c3d6e3}
.diagram-center{width:80%;padding:18px 12px 20px;background:#f5f8fa;color:#142b40;border-top:3px solid #89a9bf;font-size:28px;letter-spacing:-.6px;box-shadow:0 12px 30px #00000012}
.diagram-core-label{display:block;font:9px/1.5 Arial,sans-serif;letter-spacing:2.1px;color:#527086;margin-bottom:7px}
.diagram-center small{font-size:12px;letter-spacing:.04em;margin-top:4px}
.diagram-branches{margin-top:38px;gap:8px}
.diagram-branches:before{top:-19px;height:19px;border-color:#6c899e}
.diagram-branches:after{height:38px;top:-38px;border-color:#6c899e}
.diagram-branches>span{background:#18364c;color:#f0f4f7;border:1px solid #4c697e;padding:11px 3px 12px;font-size:14px;line-height:1.8}
.diagram-branches small{display:block;font:8px/1.7 Arial,sans-serif;letter-spacing:.8px;color:#a8c0d1;margin-bottom:3px}
.diagram-bottom{margin-top:22px;padding-top:20px;border-top:1px solid #ffffff26;width:100%;font-size:15px;letter-spacing:1.5px;color:#f0f4f7}
.diagram-caption{color:#9eb6c7;font-size:9px;letter-spacing:1.3px;margin-top:10px}
@media(max-width:700px){.diagram{padding:20px 16px 24px;min-height:440px}.diagram-center{width:84%;font-size:26px}.diagram-branches>span{font-size:12px}.diagram-branches small{font-size:8px;letter-spacing:.3px}.diagram-meta{font-size:9px}.diagram-caption{font-size:8px}}
@media print{.diagram{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
.concept-figure{margin:0 auto;padding-top:56px;padding-bottom:12px;max-width:1080px}
.concept-figure img{display:block;width:100%;height:auto}
.concept-figure figcaption{margin-top:16px;color:#606c76;font-size:14px;letter-spacing:.04em;text-align:right}
@media(max-width:768px){.concept-figure{padding-top:36px;padding-bottom:0}.concept-figure figcaption{font-size:12px;text-align:left;margin-top:12px}}
@media print{.concept-figure{break-inside:avoid}}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;padding:0;white-space:nowrap}
.skip:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:10px 14px;background:#fff;color:#243547;border:1px solid #243547;z-index:1000;white-space:normal}
main:focus{outline:none}
.header nav a{display:inline-flex;align-items:center;min-height:44px}
.contact{background:#f3f5f6;color:#495560;border-top:1px solid #d8dfe3}
.contact h2{color:#3f4b57}
.contact .section-label p,.contact-note{color:#606c76}
.email{color:#243547;font-weight:500;font-size:clamp(20px,2.4vw,32px);border-bottom:1px solid #8998a5;min-height:64px;padding:18px 0;transition:color .15s,border-color .15s}
.email:hover{color:#102030;border-bottom-color:#243547}
.email-copy{display:flex;flex-direction:column;gap:8px;min-width:0}
.email-label{font-family:"Yu Gothic","Meiryo",sans-serif;font-size:16px;font-weight:500}
.email-address{overflow-wrap:anywhere}
.contact-note{font-size:14px;margin-top:16px}
.diagram{background-image:linear-gradient(#edf0f2 1px,transparent 1px),linear-gradient(90deg,#edf0f2 1px,transparent 1px)}
@media(max-width:768px){
 html{scroll-padding-top:150px}
 .wrap{width:calc(100% - 40px)}
 .header{padding:16px 20px 8px;display:block}
 .header .brand{display:inline-block;font-size:23px}
 .header nav{margin-top:10px;justify-content:space-between;gap:4px;font-size:12px;letter-spacing:.5px}
 .header nav a{padding:8px 4px;min-height:44px}
 .header nav .nav-contact{padding-left:10px}
 .nav-contact span{margin-left:4px}
 .section{padding-block:64px}
 .section-grid,.section-heading,.network{display:block}
 .section-label{margin-bottom:28px}
 h2,.contact h2{font-size:clamp(25px,6.5vw,32px);line-height:1.6}
 .service-grid{display:grid;grid-template-columns:1fr}
 .service,.service:nth-child(even){border-left:0;padding:30px 0}
 .service p{max-width:none;line-height:1.95}
 .service .service-tags{font-size:14px}
 .steps{grid-template-columns:1fr;gap:0}
 .steps li,.steps li:nth-child(4){display:grid;grid-template-columns:36px 1fr;gap:6px 14px;padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}
 .steps li>span{grid-row:1/3;padding-top:3px}
 .steps h3{margin:0;font-size:19px}
 .steps p{grid-column:2;font-size:16px;line-height:1.85}
 .steps p br{display:none}
 .email{font-size:clamp(17px,4.7vw,26px);padding:20px 0;gap:12px}
 .email-label{font-size:16px}
 .contact-note{font-size:14px;line-height:1.85}
 .network{margin-top:40px}
 .network .eyebrow{margin-bottom:16px}
 .principles{font-size:14px}
}
@media(max-width:360px){.header nav{font-size:11px;letter-spacing:0;gap:2px}.header nav a{padding-inline:2px}.header nav .nav-contact{padding-left:6px}.nav-contact span{margin-left:2px}}
@media(prefers-reduced-motion:reduce){.email{transition:none}}
@media print{
 .skip,.skip:focus{display:none!important}
 .header{position:static;background:#fff}
 .header nav,.hero-foot>a,.footer>a:last-child{display:none}
 .contact{background:#fff!important;color:#495560!important}
 .contact h2{color:#3f4b57!important}
 .contact .section-label p,.contact-note{color:#606c76!important}
 .email{color:#243547!important;border-color:#8998a5!important}
 .section{padding-block:32px}
 h2,h3{break-after:avoid}
 .service,.steps li,.diagram,.email{break-inside:avoid}
}

.network-figure{max-width:1080px;margin:48px auto 0}.network-figure img{display:block;width:100%;height:auto}.network-figure figcaption{margin-top:16px;color:#606c76;font-size:14px;letter-spacing:.04em;text-align:right}@media(max-width:768px){.network-figure{margin-top:32px}.network-figure figcaption{font-size:12px;text-align:left;margin-top:12px}}@media print{.network-figure{break-inside:avoid}}

/* Decorative concept art stays outside the contact reading area. */
.contact{position:relative;isolation:isolate;overflow:hidden}
.contact::before{content:"";position:absolute;z-index:-1;inset:0 0 0 auto;width:20%;background:url("assets/contact-concept.png") right center / auto 100% no-repeat;opacity:.13;pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 65%)}
.contact .section-grid>div:last-child{padding-right:70px}
@media(max-width:1000px){.contact::before{width:14%;opacity:.09}.contact .section-grid>div:last-child{padding-right:30px}}
@media(max-width:768px){.contact::before{display:none}.contact .section-grid>div:last-child{padding-right:0}}
@media print{.contact::before{display:none}}
.diagram{background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px)}
