:root { --red:#b41437; --red-dark:#95102d; --ink:#161923; --muted:#3d4049; --canvas:#fcfcfc; --notice:#fff3f4; }
* { box-sizing:border-box; } html { background:var(--canvas); } body { margin:0; color:var(--ink); background:var(--canvas); font-family:Arial,Helvetica,sans-serif; line-height:1.45; } a { color:inherit; } a:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
.homepage { position:relative; display:flex; min-height:100svh; overflow:hidden; background:var(--canvas); }
.content { position:relative; z-index:2; display:flex; flex-direction:column; width:61%; min-height:100svh; padding:clamp(3rem,7.4vw,7.4rem) 4rem clamp(2.5rem,5vw,5rem) clamp(2rem,8.35vw,8rem); }
.intro { width:min(100%,39rem); margin-top:clamp(5rem,7vw,7rem); } .brand-logo { display:block; width:min(36rem,100%); height:auto; } h1 { margin:clamp(2.6rem,4.2vw,4rem) 0 2.25rem; color:var(--red); font-size:clamp(2rem,2.65vw,2.65rem); line-height:1.08; letter-spacing:-.04em; }
.description { max-width:38rem; font-size:clamp(1.1rem,1.58vw,1.6rem); letter-spacing:-.022em; } .description p { margin:0 0 1.35rem; }
.renewal-notice { display:flex; align-items:center; gap:1.35rem; max-width:38rem; margin-top:2.35rem; padding:1.25rem 1.55rem; border-radius:.7rem; background:var(--notice); } .renewal-notice p { margin:0; color:var(--muted); font-size:clamp(1rem,1.42vw,1.38rem); } .renewal-notice strong { color:var(--red); } .notice-icon { flex:0 0 3.25rem; width:3.25rem; height:3.25rem; fill:none; stroke:var(--red); stroke-linecap:round; stroke-linejoin:round; stroke-width:2.6; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:1.6rem; min-width:20.5rem; margin-top:2rem; padding:1.18rem 1.7rem; border-radius:.55rem; color:#fff; background:var(--red); box-shadow:0 .8rem 1.7rem rgba(180,20,55,.16); font-size:1.25rem; font-weight:700; text-decoration:none; transition:background-color .18s ease,transform .18s ease; } .primary-button span { font-size:1.9rem; line-height:.7; } .primary-button:hover { background:var(--red-dark); transform:translateY(-2px); }
.site-footer { position:absolute; z-index:3; bottom:.75rem; left:clamp(2rem,8.35vw,8rem); width:min(32.5rem,42%); padding-top:1.75rem; border-top:1px solid #d9dadd; color:#50525a; font-size:1rem; }
.architecture-image { position:absolute; inset:0 0 0 auto; width:53%; background:url('/assets/images/building.webp') center center / cover no-repeat; } .architecture-image::before { position:absolute; inset:0 auto 0 -32%; width:55%; background:var(--canvas); clip-path:polygon(0 0,100% 0,0 100%); content:''; } .architecture-image::after { position:absolute; right:-5%; bottom:-9%; width:105%; height:42%; background:rgba(180,20,55,.91); clip-path:polygon(100% 0,100% 100%,0 100%); content:''; }
.contact-card { position:absolute; z-index:3; top:17.8%; right:clamp(2rem,9.8vw,9.8rem); width:min(26.5rem,29vw); padding:2.5rem 2.9rem 2.7rem; border-radius:1rem; background:rgba(255,255,255,.97); box-shadow:0 1.3rem 2.8rem rgba(31,34,42,.12); } .contact-accent { display:block; width:2.7rem; height:.32rem; margin-bottom:1.35rem; border-radius:99px; background:var(--red); } .contact-card h2 { margin:0 0 1.7rem; font-size:clamp(1.7rem,2.1vw,2.35rem); letter-spacing:-.04em; } .contact-card address { font-size:clamp(1rem,1.37vw,1.34rem); font-style:normal; } .contact-card p { display:flex; align-items:flex-start; gap:1.2rem; margin:0 0 1.25rem; } .contact-card p:last-child { margin-bottom:0; } .contact-card svg { flex:0 0 1.75rem; width:1.75rem; height:1.75rem; margin-top:.1rem; fill:none; stroke:var(--red); stroke-linecap:round; stroke-linejoin:round; stroke-width:1.9; } .contact-card a { text-underline-offset:.18em; }
@media (max-width:72rem) { .content { width:66%; padding-right:2.5rem; } .architecture-image { width:48%; } .contact-card { right:2.5rem; width:min(24rem,35vw); padding:2rem; } }
@media (max-width:56rem) { .homepage { display:block; overflow:visible; } .content { display:block; width:100%; min-height:0; padding:2rem 1.5rem 0; } .intro { margin-top:0; } .brand-logo { width:min(34rem,100%); } h1 { margin:2.6rem 0 1.8rem; font-size:clamp(1.9rem,8.6vw,2.65rem); } .description { font-size:1.12rem; } .renewal-notice { margin-top:2rem; padding:1.15rem; } .primary-button { width:100%; min-width:0; margin-top:1.5rem; } .architecture-image { position:relative; width:100%; height:min(84vw,34rem); margin-top:3rem; background-position:68% center; } .architecture-image::before { display:none; } .architecture-image::after { right:-12%; bottom:-12%; width:105%; height:34%; } .contact-card { position:relative; top:auto; right:auto; width:calc(100% - 3rem); margin:-3.8rem auto 0; padding:1.8rem 1.55rem; } .site-footer { position:relative; bottom:auto; left:auto; width:calc(100% - 3rem); margin:3rem auto 1.8rem; font-size:.92rem; } }
@media (max-width:28rem) { .content { padding-inline:1.15rem; } .renewal-notice { align-items:flex-start; gap:.85rem; } .notice-icon { flex-basis:2.7rem; width:2.7rem; height:2.7rem; } .contact-card { width:calc(100% - 2.3rem); } }