.interior-page { background: #f7fbfe; }
.interior-page main { position: relative; overflow: hidden; }
.page-atmosphere { position: absolute; inset: 0 0 auto; height: min(900px, 110vh); pointer-events: none; background: radial-gradient(circle at 78% 25%, rgba(105,190,228,.24), transparent 40%), linear-gradient(180deg,#f8fcff,#eef8fd 75%,#f7fbfe); }
.page-opening { position: relative; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; min-height: min(730px, calc(100dvh - var(--nav-height))); max-width: 1560px; padding: clamp(70px, 8vw, 118px) clamp(30px, 4vw, 64px) 90px; margin: auto; gap: clamp(30px, 4vw, 72px); }
.page-opening-copy { position: relative; z-index: 1; max-width: 700px; }
.page-brand { display: inline-block; margin: 0 0 28px; padding-bottom: 12px; border-bottom: 3px solid var(--accent); color: var(--accent-deep); font-size: 19px; font-weight: 750; }
.page-opening h1 { max-width: 13em; margin: 0; color: var(--ink); font-size: clamp(44px, 4.7vw, 74px); font-weight: 850; letter-spacing: -.035em; line-height: 1.18; text-wrap: balance; }
.page-intro { max-width: 32em; margin: 30px 0 0; color: var(--ink-soft); font-size: clamp(17px, 1.22vw, 21px); line-height: 1.85; }
.page-opening-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 44px; }
.page-opening-actions .button { min-height: 58px; padding: 0 25px; }
.text-link { color: var(--accent-deep); font-weight: 720; font-size: 17px; text-decoration: underline; text-decoration-color: rgba(5,106,134,.35); text-underline-offset: 7px; }
.text-link:hover { color: var(--ink); }
.page-art { position: relative; min-width: 0; align-self: stretch; overflow: visible; mask-image: radial-gradient(ellipse 78% 78% at 63% 50%, black 52%, transparent 100%); }
.page-art img { position: absolute; width: min(900px, 125%); max-width: none; height: 100%; right: -13%; object-fit: cover; object-position: 65% center; opacity: .86; }
.page-sections { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); max-width: 1420px; margin: auto; padding: 80px 34px 120px; gap: 28px; }
.page-section { grid-column: span 6; min-height: 240px; padding: 38px 0 32px; border-top: 1px solid rgba(10,121,159,.25); }
.page-section:nth-child(3n + 1) { grid-column: 2 / span 5; }
.page-section:nth-child(3n + 2) { grid-column: 8 / span 5; }
.page-section:nth-child(3n) { grid-column: 3 / span 8; }
.page-section h2 { margin: 0 0 22px; font-size: clamp(25px, 2.2vw, 37px); line-height: 1.3; letter-spacing: -.02em; }
.page-section p { max-width: 34em; margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.85; }
.page-closing { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1350px; margin: 0 auto 100px; padding: 45px 50px; border: 1px solid rgba(39,143,181,.16); border-radius: 22px; background: linear-gradient(105deg, rgba(225,247,255,.9), rgba(248,253,255,.96)); }
.page-closing p { margin: 0; font-size: clamp(25px,2.6vw,40px); font-weight: 760; }
.page-closing a { color: var(--accent-deep); font-size: 18px; font-weight: 750; white-space: nowrap; }
.site-footer { display: flex; align-items: center; gap: 26px; padding: 30px max(32px, calc((100vw - 1420px)/2)); border-top: 1px solid rgba(80,151,176,.2); color: var(--ink-soft); }
.site-footer span { color: var(--ink); font-size: 20px; font-weight: 800; }
.site-footer p { flex: 1; margin: 0; }
.site-footer a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 5px; }
.contact-panel { position: relative; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); max-width: 1280px; gap: clamp(32px,7vw,120px); margin: 0 auto 130px; padding: 70px 36px 0; border-top: 1px solid rgba(10,121,159,.2); }
.contact-panel[hidden], .page-sections[hidden], .page-opening-actions[hidden], .page-closing[hidden] { display: none; }
.contact-context h2 { margin: 0 0 24px; font-size: clamp(29px,3vw,44px); line-height: 1.25; }
.contact-context p { color: var(--ink-soft); line-height: 1.8; font-size: 17px; }
.contact-context .contact-note { margin-top: 36px; font-size: 14px; }
.contact-email { display:inline-block; margin-top:8px; color:var(--accent-deep); font-weight:700; text-decoration:underline; text-underline-offset:5px; }
.is-contact .page-opening { grid-template-columns:1fr; min-height:0; padding-block:70px 45px; }
.is-contact .page-art { display:none; }
.is-contact .page-opening-copy { max-width:850px; }
.contact-form { display: grid; gap: 22px; }
.contact-form label { display: grid; gap: 9px; font-weight: 700; }
.contact-form input, .contact-form textarea { width: 100%; min-height: 54px; padding: 15px 17px; border: 1px solid #b8d5e2; border-radius: 12px; outline: none; background: #fff; color: var(--ink); font: inherit; font-weight: 450; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(8,127,158,.14); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #63798a; }
.contact-form button { justify-self: start; min-height: 58px; }
.contact-form button:disabled { opacity: .65; cursor: wait; }
.contact-form .honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-status { min-height: 1.5em; margin: 0; color: var(--accent-deep); }
.form-status.is-error { color: #a13c3c; font-weight: 700; }
@media (max-width: 900px) { .page-opening { grid-template-columns: 1fr; min-height: 0; padding-top: 60px; gap: 20px; } .page-art { height: 350px; } .page-art img { width: 120%; height: 100%; right: -8%; } .contact-panel { grid-template-columns: 1fr; } .page-closing { margin-inline: 24px; } }
@media (max-width: 600px) { .page-opening { padding: 42px 23px 30px; } .page-opening h1 { font-size: clamp(39px,11vw,55px); } .page-intro { margin-top: 21px; } .page-art { height: 260px; } .page-sections { display: block; padding: 25px 24px 65px; } .page-section { min-height: 0; padding: 30px 0 42px; } .page-closing { display: block; padding: 30px; margin-bottom: 60px; } .page-closing a { display: inline-block; margin-top: 25px; } .contact-panel { margin-bottom: 70px; padding: 40px 24px 0; } .site-footer { display: block; padding: 26px 24px; } .site-footer p { margin: 10px 0; } }