@font-face{font-family:Manrope;src:url(vitrine-manrope.woff2);font-weight:100 900;font-display:swap}
@font-face{font-family:Syne;src:url(vitrine-syne.woff);font-weight:600;font-display:swap}
@font-face{font-family:LatinModern;src:url(lmroman12-regular.otf) format("opentype");font-weight:400;font-display:swap}
:root{color-scheme:dark;--bg:#082235;--head:#0b2538;--surface:#102e42;--ink:#eef4f7;--muted:#bbccd6;--line:#ffffff25;--t:#65bbd1;--o:#f4f6f5;--p:#6d8aa8;--red:#f27f81;--max:1320px}
*{box-sizing:border-box}html,body{margin:0}body{min-height:100svh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:400 16px/1.55 Manrope,Arial,sans-serif}
a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}a,button{transition:background .2s,border-color .2s,color .2s,transform .2s}a:focus-visible,button:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--t);outline-offset:4px}
.skip{position:absolute;top:-6rem;left:1rem;z-index:9;padding:.6rem;background:var(--surface)}.skip:focus{top:1rem}
header,footer{background:var(--head)}header{border-bottom:1px solid var(--line)}.head,.foot{max-width:var(--max);margin:auto;padding:0 clamp(22px,5vw,72px);display:flex;align-items:center;justify-content:space-between}
.head{min-height:74px;gap:28px}.brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0}.brand:hover{filter:brightness(1.15)}
.brand-words{display:grid;gap:5px;font:600 20px/.95 Syne,Arial,sans-serif;letter-spacing:.09em}.brand-services{font:800 9px/1 Manrope,Arial,sans-serif;letter-spacing:.24em;color:var(--red)}
.mark{display:inline-flex;gap:2px;transform:skew(-29deg);margin:0 5px}.mark i{display:block;width:6px;height:23px;background:var(--t)}.mark i:nth-child(2){background:var(--o)}.mark i:nth-child(3){background:var(--p)}
.c1{color:var(--t)}.c2{color:var(--o)}.c3{color:#8daac7}
nav{display:flex;gap:clamp(14px,3vw,42px)}nav a{padding:12px 3px;color:var(--muted);font-size:.87rem;border-bottom:1px solid transparent}nav a:hover,nav a[aria-current=page]{color:var(--ink);border-color:var(--t)}.mobile-nav{display:none}
main{flex:1;display:grid;align-items:center;position:relative;isolation:isolate;background:radial-gradient(ellipse at 90% 0%,#21445755,transparent 65%)}
.wrap{width:100%;max-width:var(--max);margin:auto;padding:clamp(28px,5vh,64px) clamp(22px,5vw,72px)}
.kicker,.meta{font-size:.69rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--t);margin:0 0 10px}
h1,h2,h3,p{margin-top:0}h1,h2{font-family:LatinModern,Georgia,serif;font-weight:400}h1{font-size:clamp(2.9rem,6.1vw,6.1rem);letter-spacing:-.045em;line-height:.95;margin-bottom:19px;text-wrap:balance}
.inner h1{font-size:clamp(2.6rem,4.75vw,4.8rem);margin-bottom:12px}
h2{font-size:clamp(1.45rem,2.55vw,2.38rem);line-height:1.03;margin-bottom:9px;text-wrap:balance}
p{margin-bottom:13px;color:var(--muted)}.lead{font-size:clamp(.96rem,1.42vw,1.14rem);max-width:55ch}
.fuse{width:95px;height:3px;margin:0 0 19px;background:linear-gradient(90deg,var(--t) 0 34%,var(--o) 34% 66%,var(--p) 66%);clip-path:polygon(0 25%,100% 0,96% 100%,0 75%)}
.home{overflow:hidden}.hero-image{position:absolute;z-index:-2;inset:0 0 0 24%;width:76%;height:100%;object-fit:cover;object-position:70% center;filter:brightness(1.14) contrast(1.04)}
.home:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#082235 0%,#082235 28%,#082235ed 39%,#0822356b 58%,#08223509 83%);pointer-events:none}
.hero{max-width:630px}.hero .lead{max-width:42ch}.actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:45px;padding:9px 15px;border:1px solid #88aabb;border-radius:2px;background:#082235c9;color:var(--ink);font-size:.83rem;font-weight:750;cursor:pointer}.btn:hover{background:#1d475d;border-color:var(--t);transform:translateY(-2px)}.textlink{color:var(--muted);font-size:.85rem;padding:8px 0;border-bottom:1px solid var(--line)}.textlink:hover{border-color:var(--t);color:var(--ink)}
.intro{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(14px,5vw,66px);margin-bottom:clamp(20px,4vh,42px)}
.intro p:last-child,.card p:last-child{margin-bottom:0}
.scene{display:block;width:100%;height:clamp(98px,20vh,190px);object-fit:cover;border-radius:2px;border:1px solid var(--line)}
.arch{object-position:50% 52%}.sail{object-position:50% 55%}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.7vw,38px)}
.card{position:relative;border-top:1px solid var(--line);padding-top:14px}
.card:before{content:"";width:30px;height:2px;position:absolute;left:0;top:-1px;background:var(--accent,var(--t))}
.card:nth-child(2){--accent:var(--o)}.card:nth-child(3){--accent:var(--p)}
.card p{font-size:.88rem}.card .meta{color:var(--muted);font-size:.65rem;margin-bottom:8px}
.deliver{display:block;margin-top:9px;color:var(--ink);font-size:.79rem;font-weight:700}
.aside{margin:18px 0 0;font-size:.76rem}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,6vw,76px);align-items:center}
.contact .scene{height:clamp(118px,22vh,220px);object-position:65% 46%;margin-top:17px}.person{color:var(--ink);font-size:.81rem;font-weight:750;margin:8px 0 0}
.contact-box{padding:clamp(14px,3vw,28px);border:1px solid var(--line);background:#102e4277}
label{display:block;color:var(--ink);font-size:.77rem;font-weight:750;margin-bottom:5px}
textarea{display:block;width:100%;min-height:105px;resize:vertical;border:1px solid #688396;border-radius:2px;padding:10px;background:#082235;color:var(--ink);font-size:.82rem;line-height:1.45}
.contact-box .actions{margin-top:12px;gap:9px}.contact-box .btn{min-height:40px}.small{font-size:.76rem}.status{font-size:.75rem;min-height:1.4em;margin:8px 0 0;color:var(--t)}
footer{border-top:1px solid var(--line);color:var(--muted)}.foot{min-height:40px;font-size:.72rem;gap:10px}
@media(max-width:760px){
.head{min-height:56px;padding-inline:19px}.brand{gap:7px}.brand-words{font-size:16px;gap:4px}.brand-services{font-size:8px}.mark i{width:5px;height:20px}.desktop-nav{display:none}
.mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);padding:1px 8px max(2px,env(safe-area-inset-bottom))}
.mobile-nav a{text-align:center;min-height:44px;padding:11px 2px;font-size:.72rem;white-space:nowrap}
.foot{min-height:24px;padding-inline:16px;font-size:.61rem}.wrap{padding:20px 19px}
.home{align-items:start}.home .wrap{padding-top:clamp(25px,8svh,78px);padding-bottom:clamp(110px,26svh,210px)}
.hero-image{inset:auto 0 0;width:100%;height:53%;object-position:68% center}.home:after{background:linear-gradient(180deg,#082235 0%,#082235 41%,#082235b5 59%,#0822350d 92%)}
h1{font-size:clamp(2.45rem,10vw,4.3rem);margin-bottom:12px}.inner h1{font-size:clamp(2.3rem,8.8vw,3.8rem);margin-bottom:7px}
.kicker{font-size:.62rem;margin-bottom:7px}.fuse{margin-bottom:12px}.lead{font-size:.88rem;line-height:1.47;margin-bottom:0}
.actions{margin-top:14px;gap:12px}.btn{min-height:42px;font-size:.75rem;padding:7px 10px}.textlink{font-size:.75rem}
.intro{grid-template-columns:1fr;gap:10px;margin-bottom:12px}.scene{height:clamp(52px,11svh,105px)}.sail{object-position:50% 53%}
.grid{grid-template-columns:1fr;gap:8px}.card{padding-top:7px}.card h2{font-size:1.3rem;margin-bottom:3px}.card p{font-size:.78rem;line-height:1.42;margin-bottom:0}.card .meta{font-size:.59rem;margin-bottom:3px}.deliver{margin-top:3px;font-size:.72rem}
.aside{margin-top:9px;font-size:.69rem}.contact{grid-template-columns:1fr;gap:12px}.contact .scene{height:clamp(78px,13svh,138px);margin-top:11px}.contact-box{padding:11px}.contact-box p{margin-bottom:7px}.contact-box h2{font-size:1.37rem;margin-bottom:5px}.contact-box textarea{min-height:81px}.contact-box .actions{margin-top:8px}.person{margin-top:5px}
}
@media(max-width:760px) and (max-height:700px){.wrap{padding-block:13px}.intro{gap:7px;margin-bottom:8px}.scene{height:49px}.grid{gap:6px}.contact .scene{height:67px}.contact-box textarea{min-height:67px}.contact .kicker{margin-bottom:5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
@media(min-width:761px){.hero-image{object-position:right center}}
@media(max-width:400px) and (max-height:720px){
.head{min-height:51px}.foot{min-height:21px}.wrap{padding:9px 15px}
.inner h1{font-size:clamp(1.85rem,8.9vw,2.28rem);line-height:1;margin-bottom:5px}
.intro{gap:6px;margin-bottom:8px}.intro .fuse,.contact .fuse{margin-bottom:6px}
.inner .lead{font-size:.79rem;line-height:1.36}.scene{height:38px}
.grid{gap:5px}.card{padding-top:5px}.card h2{font-size:1.18rem}.card p{font-size:.75rem;line-height:1.3}.card .meta{line-height:1.25}.deliver{font-size:.68rem;line-height:1.28}
.contact{gap:8px}.contact .scene{height:59px;margin-top:7px}.person{font-size:.74rem}
.contact-box{padding:8px}.contact-box h2{margin-bottom:3px}.contact-box p{margin-bottom:4px}
.contact-box textarea{min-height:57px;height:57px;padding:5px 7px}.contact-box .actions{margin-top:5px}.contact-box .btn{min-height:36px}.contact-box .status{margin-top:4px}
}

/* The hero uses the same wordmark as the header, at a larger scale. */
.home .hero{width:min(53%,620px);max-width:none;text-align:center;display:flex;flex-direction:column;align-items:center}
.home .hero-logo{gap:clamp(17px,1.7vw,27px);margin:0 0 clamp(22px,4.6vh,48px)}
.home .hero-logo .brand-words{font-size:clamp(35px,4.25vw,60px);gap:clamp(7px,1vw,12px)}
.home .hero-logo .brand-services{font-size:clamp(10px,1.15vw,16px);text-align:left}
.home .hero-logo .mark{gap:clamp(3px,.34vw,5px)}
.home .hero-logo .mark i{height:clamp(35px,4.4vw,60px);width:clamp(9px,1.05vw,15px)}
.home .hero h1{font-size:clamp(2rem,3.45vw,3.9rem);line-height:1.03;letter-spacing:-.031em;margin:0}
.home .hero .actions{justify-content:center;margin:clamp(15px,3vh,27px) 0 0}
.home .hero .textlink{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:7px 2px;color:var(--ink);font-size:.81rem}
.home .hero .textlink span{color:var(--t)}
@media(max-width:760px){
 .home .wrap{padding-top:clamp(27px,8svh,80px);padding-bottom:clamp(75px,24svh,200px)}
 .home .hero{width:100%}
 .home .hero-logo{gap:15px;margin-bottom:clamp(18px,4svh,32px)}
 .home .hero-logo .brand-words{font-size:clamp(29px,8vw,43px);gap:7px}
 .home .hero-logo .brand-services{font-size:clamp(9px,2.6vw,11px)}
 .home .hero-logo .mark i{width:8px;height:clamp(30px,8.5vw,42px)}
 .home .hero h1{font-size:clamp(1.95rem,8.6vw,3rem)}
 .home .hero .actions{margin-top:13px}
 .hero-image{height:52%;object-position:80% center}
 .home:after{background:linear-gradient(180deg,#082235 0%,#082235 39%,#082235cd 53%,#08223508 79%)}
}
@media(max-width:400px) and (max-height:720px){
 .home .wrap{padding-top:clamp(20px,5svh,36px);padding-bottom:clamp(62px,20svh,135px)}
}
.head .desktop-nav{margin-left:auto}.locale{min-width:40px;min-height:40px;display:grid;place-items:center;color:var(--muted);font-size:.76rem;font-weight:800;border:1px solid var(--line);letter-spacing:.07em}
.locale:hover,.foot a:hover{color:var(--ink);border-color:var(--t)}.foot a{padding:3px 0;border-bottom:1px solid transparent}.foot a[aria-current=page]{border-color:var(--t)}
.legal{max-width:1000px}.legal section{border-top:1px solid var(--line);padding-top:12px;margin-top:13px;max-width:70ch}
.legal section h2{font-size:1.65rem;margin-bottom:5px}.legal section p{font-size:.88rem;margin-bottom:0}
@media(max-width:760px){.locale{min-height:36px;min-width:36px}.legal section h2{font-size:1.4rem}.legal section p{font-size:.81rem}}
/* Shared lockup: the triband aligns with the wordmark, not the combined two-line block. */
:root{--red:#fd3f42}
.brand,.home .hero-logo{align-items:flex-start;--word:20px;gap:calc(var(--word)*.44)}
.brand-words,.home .hero-logo .brand-words{font-size:var(--word);line-height:1;gap:calc(var(--word)*.19)}
.brand .mark,.home .hero-logo .mark{margin:calc(var(--word)*.145) 2px 0;gap:calc(var(--word)*.10)}
.brand .mark i,.home .hero-logo .mark i{height:calc(var(--word)*.70);width:calc(var(--word)*.25)}
.home .hero-logo{--word:clamp(32px,3.9vw,52px);margin-bottom:clamp(22px,4vh,40px)}
.brand-services,.home .hero-logo .brand-services{font-size:calc(var(--word)*.37);font-weight:750;letter-spacing:.23em}
.home .hero h1{font-size:clamp(1.65rem,2.45vw,2.8rem);line-height:1.10;letter-spacing:-.018em}
.inner h1{font-size:clamp(2rem,3.55vw,3.5rem);letter-spacing:-.025em;line-height:1.04}
h2,.legal section h2{font-size:clamp(1.25rem,2.02vw,1.86rem);letter-spacing:-.015em;line-height:1.10}
p,nav a{font-weight:430}.foot{justify-content:flex-end}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.contact-box .mail-note{margin:7px 0 0;font-size:.73rem}
.legal{max-width:var(--max)}.legal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.legal section{margin:0;max-width:none}.legal section p{line-height:1.48}.legal a{border-bottom:1px solid #a0bdcf66}.legal a:hover{border-color:var(--t)}
@media(max-width:760px){
 .brand{--word:17px}.home .hero-logo{--word:clamp(29px,8vw,39px)}
 .home .hero h1{font-size:clamp(1.57rem,7vw,2.35rem)}
 .inner h1{font-size:clamp(1.8rem,7.25vw,2.5rem)}
 .card h2{font-size:1.2rem}.legal-grid{grid-template-columns:1fr;gap:8px}
 .legal section{padding-top:6px}.legal section h2{font-size:1.13rem;margin-bottom:3px}
 .legal section p{font-size:.76rem;line-height:1.36}
}
@media(max-width:400px) and (max-height:720px){
 .legal .fuse{margin-bottom:7px}
 .legal-grid{gap:6px}
 .legal section{padding-top:5px}
 .legal section p{line-height:1.29}
}

/* Center the descriptor against CYTIZEN itself, excluding the triband. */
.brand .brand-services,.home .hero-logo .brand-services{justify-self:center;text-align:center}