:root { --blue:#012f56; --logo-blue:#062e75; --orange:#f77d2b; --cream:#fff4f0; --header:65px; --logo-left:clamp(20px,5vw,76px); --logo-width:150px; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { overflow:hidden; background:var(--cream); color:var(--blue); font-family:"Sora",Arial,sans-serif; }
button, a { color:inherit; font:inherit; }
a { text-decoration:none; }
.page-shell { min-height:100svh; }
.site-header { width:100vw; height:var(--header); padding:0 clamp(20px,5vw,76px); display:flex; align-items:center; justify-content:space-between; background:var(--cream); position:relative; z-index:5; }
.site-header::before, .site-header::after { content:""; position:absolute; top:60px; height:5px; background:var(--logo-blue); z-index:0; }
.site-header::before { left:0; width:var(--logo-left); }
.site-header::after { left:calc(var(--logo-left) + var(--logo-width)); right:0; }
.brand { position:absolute; left:var(--logo-left); top:18px; width:var(--logo-width); display:block; z-index:2; background:transparent; }
.brand img { width:100%; height:auto; display:block; }
.language { position:fixed; right:clamp(20px,5vw,76px); top:28px; z-index:20; display:block; border:0; background:transparent; padding:8px 10px; cursor:pointer; font-size:19px; font-weight:800; }
.hero { width:100vw; height:calc(100svh - var(--header)); min-height:540px; position:relative; overflow:hidden; isolation:isolate; }
.hero-image { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 43%; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:rgba(211,216,223,.1); }
.tiles { position:absolute; inset:0; pointer-events:none; }
.tile { position:absolute; display:block; background:var(--blue); }
.tile-a { display:none; }
.tile-b { left:50%; top:0; width:25%; height:11%; }
.tile-c { left:0; top:11%; width:12.5%; height:17%; }
.tile-d { right:0; top:11%; width:25%; height:11%; }
.tile-e { left:0; top:28%; width:25%; height:11%; }
.tile-f { right:6.25%; top:22%; width:12.5%; height:6%; }
h1 { position:absolute; left:31.25%; top:40%; margin:0; width:56.25%; padding:clamp(26px,4vw,62px); background:var(--orange); color:#cad5ff; font-size:clamp(58px,8.2vw,138px); font-weight:800; line-height:.88; letter-spacing:-.075em; }
h1::after { content:""; position:absolute; left:0; bottom:-8vh; width:12.5%; height:8vh; background:var(--orange); }
@media (max-width:700px) {
  :root { --header:65px; --logo-left:20px; }
  .site-header { padding:0 20px; }
  .site-header::after { height:5px; top:60px; }
  .brand { left:20px; top:18px; width:150px; }
  .language { right:12px; top:24px; }
  .hero-image { object-position:54% center; }
  .tile-a { width:42%; height:10%; }
  .tile-b { left:72%; width:28%; height:10%; }
  .tile-c { top:10%; width:18%; height:22%; }
  .tile-d { top:20%; width:30%; height:10%; }
  .tile-e { top:32%; width:32%; height:9%; }
  .tile-f { display:none; }
  h1 { left:8%; top:43%; width:84%; padding:30px 24px 35px; overflow-wrap:anywhere; font-size:clamp(38px,10.5vw,50px); line-height:.96; }
  h1::after { bottom:-52px; width:22%; height:52px; }
}