:root { color-scheme:light; --blue:#11457e; --red:#d7141a; --white:#fff; --ink:#17344e; }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--white); color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
    button,a { -webkit-tap-highlight-color:transparent; }
    button { font:inherit; cursor:pointer; }
    button:focus-visible,a:focus-visible { outline:3px solid var(--blue); outline-offset:6px; }
    .page { position:relative; min-height:100svh; overflow:hidden; display:flex; flex-direction:column; }
    .decor { pointer-events:none; position:absolute; inset:0; overflow:hidden; z-index:0; }
    .grid { position:absolute; width:340px; height:340px; background-image:linear-gradient(#11457e0a 1px,transparent 1px),linear-gradient(90deg,#11457e0a 1px,transparent 1px); background-size:68px 68px; mask-image:radial-gradient(ellipse,black,transparent 70%); }
    .grid-a { top:8%; left:-120px; transform:rotate(-12deg); }
    .grid-b { right:-95px; bottom:-60px; transform:rotate(12deg); }
    .glyph { position:absolute; width:clamp(5rem,13vw,10rem); height:auto; opacity:.055; user-select:none; animation:knightWalk 18s ease-in-out infinite; }
    .glyph-a { left:5%; bottom:15%; }
    .glyph-b { right:5%; top:19%; opacity:.045; animation-delay:-9s; }
    header,main,footer { position:relative; z-index:1; }
    header { padding:26px clamp(22px,5vw,80px); display:flex; justify-content:space-between; align-items:center; gap:18px; }
    .eyebrow { margin:0; font-size:.875rem; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
    main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:15px 24px 55px; }
    h1 { width:min(960px,92vw); margin:0 0 -4px; line-height:0; animation:logoIn 1s cubic-bezier(.16,1,.3,1) both; }
    .logo { mix-blend-mode:multiply; display:block; width:100%; height:auto; animation:floatLogo 9s ease-in-out 1.5s infinite; }
    .intro-copy { max-width:560px; animation:riseIn .8s ease-out .4s both; }
    h2 { color:var(--blue); margin:0 0 14px; font-size:clamp(1.6rem,3.2vw,2.55rem); letter-spacing:-.045em; font-weight:650; line-height:1.16; }
    .accent { color:var(--red); }
    .description { margin:0 auto; max-width:470px; font-size:1.0625rem; line-height:1.75; color:#3f5469; }
    .actions { margin-top:30px; animation:riseIn .8s ease-out .65s both; }
    .contact-button { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:58px; padding:14px 26px; border:0; border-radius:16px; background:var(--blue); color:white; font-weight:650; font-size:1.0625rem; transition:transform .2s,background .2s,box-shadow .2s; box-shadow:0 6px 20px #11457e15; }
    .contact-button:hover { background:#0b3767; transform:translateY(-3px); box-shadow:0 9px 25px #11457e25; }
    .contact-button:active { transform:translateY(0); }
    .hint { margin:13px 0 0; font-size:.875rem; line-height:1.5; color:#607285; }
    footer { padding:20px clamp(22px,5vw,80px) 26px; display:flex; justify-content:space-between; gap:18px; align-items:center; font-size:.875rem; color:#607285; }
    .footer-name { color:var(--blue); font-weight:600; }
    .heart { color:var(--red); }
    dialog { width:min(470px,calc(100vw - 40px)); border:1px solid #11457e1a; border-radius:25px; padding:36px; background:white; color:var(--ink); box-shadow:0 24px 100px #11457e25; }
    dialog::backdrop { background:#0b254566; backdrop-filter:blur(6px); }
    dialog[open] { animation:dialogIn .3s cubic-bezier(.16,1,.3,1) both; }
    .dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
    .dialog-kicker { color:var(--red); font-size:.875rem; font-weight:700; margin:0 0 12px; }
    .dialog-title { margin:0; color:var(--blue); font-size:1.8rem; line-height:1.25; letter-spacing:-.035em; }
    .close { display:grid; place-items:center; border:1px solid #11457e22; border-radius:50%; background:white; color:var(--blue); width:40px; height:40px; flex-shrink:0; font-size:1.4rem; }
    .close:hover { background:#11457e09; }
    .contact-content { margin:24px 0 0; line-height:1.7; font-size:1rem; }
    .contact-content p { margin:0; }
    .contact-list { display:grid; gap:18px; margin:0; }
    .contact-item dd { margin:0; color:var(--blue); font-weight:600; }
    .contact-item { display:grid; gap:3px; }
    .contact-label { color:#607285; font-size:.875rem; }
    .contact-item a { color:var(--blue); font-size:1.0625rem; font-weight:600; text-decoration-thickness:1px; text-underline-offset:4px; overflow-wrap:anywhere; }
    .dialog-bottom { margin:0; padding-top:20px; border-top:1px solid #11457e17; color:#607285; font-size:.875rem; }
    .paused *, .paused *::before, .paused *::after { animation:none !important; }
    .paused h1,.paused .intro-copy,.paused .actions { animation:none; opacity:1; transform:none; clip-path:none; }
    @keyframes logoIn { from { opacity:0; transform:translateY(18px) scale(.97); clip-path:inset(0 100% 0 0); } to { opacity:1; transform:none; clip-path:inset(0); } }
    @keyframes riseIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
    @keyframes floatLogo { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
    @keyframes knightWalk { 0%,15%,100% { transform:translate(0,0) rotate(-8deg); } 35%,55% { transform:translate(34px,-52px) rotate(2deg); } 75% { transform:translate(68px,-16px) rotate(6deg); } }
    @keyframes smallJump { 50% { transform:translateY(-6px) rotate(-9deg); } }
    @keyframes dialogIn { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:none; } }
    @media(max-width:600px) { header { padding:20px; } .eyebrow { font-size:.75rem; letter-spacing:.08em; } main { padding:30px 22px 45px; } h1 { width:100vw; max-width:none; margin:0 0 18px; } h2 { max-width:300px; margin-inline:auto; } .description { max-width:330px; font-size:1rem; } footer { padding:20px; align-items:flex-start; font-size:.8125rem; } .footer-note { max-width:150px; text-align:right; } .glyph-a { left:-35px; bottom:12%; } .glyph-b { right:-25px; top:14%; } dialog { padding:26px; } }
    @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }
/* CANVAS INTRO */
.intro-pending .page { opacity:0; }
.intro-running { overflow:hidden; }
.cinematic[hidden] { display:none !important; }
.cinematic { position:fixed; inset:0; z-index:100; background:var(--blue); color:white; overflow:hidden; display:grid; place-items:center; }
#intro-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .25s; }
.cinematic.ready #intro-canvas { opacity:1; }
.intro-skip { position:absolute; z-index:10; top:max(24px,env(safe-area-inset-top)); right:clamp(20px,4vw,60px); background:transparent; border:1px solid #ffffff66; color:white; border-radius:30px; padding:11px 18px; min-height:44px; font-size:.875rem; transition:background .2s,color .3s,border-color .3s; }
.intro-skip:hover { background:#ffffff18; }
.intro-skip:focus-visible { outline-color:white; }
.cinematic.light .intro-skip:focus-visible { outline-color:var(--blue); }
.cinematic.light .intro-skip { color:var(--blue); border-color:#11457e33; background:#ffffffcc; }
.preloader { position:absolute; z-index:2; display:grid; justify-items:center; gap:24px; transition:opacity .3s,transform .3s; }
.preloader-symbol { position:relative; width:90px; height:90px; display:grid; place-items:center; }
.loader-ring { position:absolute; inset:0; border:1px solid #ffffff30; border-top:2px solid white; border-right:2px solid var(--red); border-radius:50%; animation:loaderSpin 1.2s linear infinite; }
.loader-knight { font-family:Georgia,"Times New Roman",serif; font-size:3.7rem; line-height:1; animation:loaderBreath 1s ease-in-out infinite; }
.loader-caption { font-size:.875rem; letter-spacing:.1em; margin:0; }
.cinematic.ready .preloader { opacity:0; transform:scale(.85); pointer-events:none; }
.cinematic.leaving { animation:introLeave .65s ease both; pointer-events:none; }
.cinematic.leaving .intro-skip { opacity:0; }
.page { transition:opacity .6s; }
.intro-running .page { pointer-events:none; }
.intro-running h1,.intro-running .intro-copy,.intro-running .actions { animation:none; opacity:1; }
.intro-running .logo { animation:none; }
.page.arrived h1 { animation:none; opacity:1; transform:none; }
.page.arrived .intro-copy { animation:riseIn .8s ease .18s both; }
.page.arrived .actions { animation:riseIn .8s ease .32s both; }
.replay { background:transparent; color:var(--blue); border:0; border-bottom:1px solid #11457e33; padding:6px 0; font-size:.875rem; min-height:35px; }
.replay:hover { border-color:var(--red); color:var(--red); }
.replay[hidden] { display:none !important; }
@keyframes loaderSpin { to { transform:rotate(360deg); } }
@keyframes loaderBreath { 50% { transform:translateY(-3px); } }
@keyframes introLeave { to { opacity:0; } }
@media(max-width:600px) { footer { flex-wrap:wrap; } .replay { order:3; flex-basis:100%; width:max-content; text-align:left; border-bottom:0; text-decoration:underline; text-underline-offset:4px; } }
@media(prefers-reduced-motion:reduce) { .intro-pending .page { opacity:1; } .cinematic { display:none !important; } .replay { display:none; } }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }