@font-face{font-family:Onest;src:url('/assets/onest-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Onest;src:url('/assets/onest-semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Oswald;src:url('/assets/oswald-bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--paper:#f9ece2;--blue:#082baf;--ink:#090a08;--yellow:#ffce00;--unit:calc(100vw / 1672);--rail:clamp(50px,3.6vw,66px);--rail-inset:clamp(12px,1.05vw,20px);--rail-color:#ef5143;--motion-fast:160ms;--motion-ui:220ms;--motion-ease:cubic-bezier(.22,.7,.2,1)}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;background:var(--paper);color:var(--ink)}
body{font-family:Onest,Arial,sans-serif}
button{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;border-radius:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button[aria-disabled="true"]{cursor:default}
button:focus-visible{outline:3px solid var(--blue);outline-offset:7px}
.hero{position:relative;min-height:100svh;overflow:hidden}
.scene{position:relative;width:100%;height:max(100svh,calc(940 * var(--unit)));container-type:inline-size}
.scenery{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.side-rail{position:fixed;z-index:5;left:var(--rail-inset);top:var(--rail-inset);bottom:var(--rail-inset);width:var(--rail);background:var(--rail-color)}
.brand{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:68%;height:auto;filter:brightness(0);pointer-events:none}
.menu-toggle{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;touch-action:manipulation}
.menu-toggle span{display:block;width:26px;height:4px;background:var(--ink);transition:transform var(--motion-ui) var(--motion-ease)}
.menu-toggle:not(.menu-close):hover span:first-child{transform:translateX(2px)}
.menu-toggle:not(.menu-close):hover span:last-child{transform:translateX(-2px)}
.menu-toggle:focus-visible{outline-color:var(--ink);outline-offset:-6px}
.rail-caption{position:absolute;left:50%;bottom:20px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-family:Oswald,Arial,sans-serif;font-size:clamp(12px,.9vw,16px);font-weight:700;line-height:1;color:var(--ink);pointer-events:none}
.messengers{position:absolute;z-index:4;top:calc(3.5% + 3 * var(--unit));right:25%;display:flex;gap:calc(12 * var(--unit))}
.messenger{border:0;background:transparent;padding:0;width:calc(48 * var(--unit));height:calc(48 * var(--unit));transition:transform var(--motion-ui) var(--motion-ease)}
.messenger img{display:block;width:100%;height:100%}
.messenger:is(:hover,:focus-visible){transform:translateY(-2px)}
.cases-button{position:absolute;z-index:4;right:4%;top:3.5%;width:14%;height:calc(54 * var(--unit));padding:0;border:calc(2 * var(--unit)) solid #0736ae;background:transparent;font-size:calc(26 * var(--unit));font-weight:600;transition:background-color 220ms ease,color 220ms ease}
.cases-button:is(:hover,:focus-visible,:active){background:#0736ae;color:white}
.hero-copy{position:static;z-index:3}
.intro{position:absolute;z-index:3;left:14.23%;top:19.18%;font-size:calc(36 * var(--unit));line-height:1.055;font-weight:400;letter-spacing:calc(-.65 * var(--unit));margin:0}
h1{position:absolute;z-index:3;left:14.35%;top:32.95%;margin:0;font-family:Oswald,'Arial Narrow',sans-serif;font-size:calc(78 * var(--unit));font-weight:700;line-height:1.07;-webkit-text-stroke:calc(.45 * var(--unit)) var(--ink);letter-spacing:calc(-.7 * var(--unit));white-space:nowrap}
h1 > .headline-line{display:block;transform:scaleX(.818);transform-origin:left center;width:122.25%}
.description{position:absolute;z-index:3;left:14.3%;top:54.1%;font-size:calc(29 * var(--unit));line-height:1.11;letter-spacing:calc(-.25 * var(--unit));font-weight:400;margin:0}
.strategy-button{position:absolute;z-index:3;left:14.17%;top:69.82%;isolation:isolate;display:block;width:calc(440 * var(--unit));height:calc(76 * var(--unit));margin-top:0;padding:0;border:0;background:transparent;font-size:calc(36 * var(--unit));font-weight:600;white-space:nowrap}
.strategy-button .button-backplate{position:absolute;z-index:-2;left:calc(219 * var(--unit));right:calc(-14 * var(--unit));top:calc(-16 * var(--unit));bottom:calc(15 * var(--unit));background:#ffce00;transition:transform var(--motion-ui) var(--motion-ease)}
.strategy-button .button-face{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;border:calc(4 * var(--unit)) solid #0b0c09;background:var(--paper)}
.strategy-button:is(:hover,:focus-visible) .button-backplate{transform:translate(calc(-10 * var(--unit)),calc(10 * var(--unit)))}
.strategy-button:active .button-backplate{transform:translate(calc(-12 * var(--unit)),calc(12 * var(--unit)))}
.strategy-button:active .button-face{transform:translate(1px,1px)}
.architecture{display:grid;align-items:center;position:absolute;z-index:2;left:65.4%;top:15.5%;width:34.6%;height:60.5%;pointer-events:none}
.architecture-image{display:block;width:100%;height:auto;max-width:100%}
html[data-motion="reduced"] *,html[data-motion="reduced"] *:before,html[data-motion="reduced"] *:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
html[data-motion="reduced"] .messenger:is(:hover,:focus-visible),html[data-motion="reduced"] .menu-toggle:not(.menu-close):hover span,html[data-motion="reduced"] .strategy-button:is(:hover,:focus-visible,:active) .button-backplate,html[data-motion="reduced"] .strategy-button:active .button-face{transform:none;translate:none}
@media(max-width:1023px) and (min-width:701px){
  .scene{height:max(100svh,calc(940 * var(--unit)))}
  .messenger{min-width:32px;min-height:32px}
}
@media(max-width:700px){
  :root{--rail:42px;--rail-inset:8px;--unit:calc((100vw - 48px) / 550)}
  .scene{min-height:800px;height:100svh}
  .scenery{width:149%;height:100%;left:-19%}
  .green-plane{transform:translateY(450px)}
  .corner-shape{display:none}
  .brand{top:14px;width:29px}
  .menu-toggle span{width:24px;height:4px}
  .rail-caption{font-size:12px;bottom:18px}
  .messengers{top:23px;left:68px;right:auto;gap:8px}
  .messenger{width:36px;height:36px}
  .cases-button{top:24px;left:auto;right:16px;width:132px;height:36px;font-size:17px;border-width:1.5px;background:#ffce00}
  .hero-copy{position:absolute;z-index:3;left:76px;top:135px;right:20px;width:auto}
  .intro{position:static;font-size:clamp(20px,4.9vw,30px);line-height:1.17;letter-spacing:-.4px}
  .desktop-break{display:none}
  h1{position:static;font-size:clamp(39px,8.9vw,64px);line-height:1.08;letter-spacing:-.5px;margin-top:28px}
  h1 > .headline-line{width:145%;transform:scaleX(.70)}
  .description{position:static;font-size:clamp(17px,3.8vw,23px);line-height:1.2;margin-top:22px;max-width:440px}
  .strategy-button{position:relative;left:auto;top:auto;width:min(100%,350px);height:58px;margin-top:30px;font-size:clamp(20px,4.8vw,29px)}
  .strategy-button .button-face{border-width:2px}
  .strategy-button .button-backplate{left:45%;right:-9px;top:-10px;bottom:10px}
  .architecture{top:auto;bottom:45px;left:auto;right:-8px;width:64%;height:auto;aspect-ratio:610/600}
}
@media(max-width:380px){
  .messengers{left:62px;gap:4px}
  .messenger{width:30px;height:36px}
  .cases-button{right:12px;width:112px;font-size:15px}
  .hero-copy{left:66px;right:16px}
  h1{font-size:38px}
  h1 > .headline-line{transform:scaleX(.65);width:154%}
  .strategy-button{font-size:19px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.messenger:is(:hover,:focus-visible),.menu-toggle:not(.menu-close):hover span,.strategy-button:is(:hover,:focus-visible,:active) .button-backplate,.strategy-button:active .button-face{transform:none;translate:none}}

/* The existing type compression stays on the outer line; motion uses its child. */
h1 > .headline-line{overflow:clip;padding-block:.1em;margin-block:-.1em}
.headline-text{display:block}
a.strategy-button,a.cases-button,a.messenger{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
a.cases-button{display:flex;align-items:center;justify-content:center}
a.messenger{display:block}
a:is(.strategy-button,.cases-button,.messenger):focus-visible{outline:3px solid var(--blue);outline-offset:7px}
.cases-button:active{background:#041c68;color:#fff;border-color:#041c68}
.messenger{transition:transform var(--motion-ui) var(--motion-ease),opacity var(--motion-fast) ease}
.messenger:active{transform:translateY(0);opacity:.72}
.side-rail{transition:background-color 220ms ease}
body:is([data-section="cooperation"],[data-section="strategies"],[data-section="cases"]) .side-rail{background:#ef5143}
body:is([data-section="cooperation"],[data-section="strategies"],[data-section="cases"]) .side-rail .brand{filter:brightness(0)}
body:is([data-section="cooperation"],[data-section="strategies"],[data-section="cases"]) .side-rail .rail-caption{color:#0a0a0a}
body:is([data-section="cooperation"],[data-section="strategies"],[data-section="cases"]) .side-rail .menu-toggle span{background:#0a0a0a}
body:is([data-section="cooperation"],[data-section="strategies"],[data-section="cases"]) .side-rail .menu-toggle:focus-visible{outline-color:#0a0a0a}

h1{display:grid}

.messenger img{object-fit:contain}

/* Use only the loaded project font weights; no synthetic bold/italic. */
body{font-synthesis:none}