/* Pages created in the admin panel (site/generic.blade.php). Fluid layout; header/footer come from style.css. */
.gp.page { gap: 0; align-items: stretch; }   /* two classes: responsive.css also sets a gap on .page */
.gp-hero { padding: clamp(48px, 7vw, 110px) 0; background: linear-gradient(135deg, var(--c-navy) 0%, #15153d 100%); color: var(--c-white); }
.gp-hero__inner { padding-inline: clamp(20px, 4vw, 60px); }
.gp-hero .breadcrumb { margin: 0 0 14px; font-size: 15px; opacity: .8; color: var(--c-white); }
.gp-hero .breadcrumb a { color: inherit; }
.gp-hero__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.4vw, 68px); line-height: 1.12; }

.gp-body { padding: clamp(40px, 6vw, 100px) 0; background: var(--c-white); }
.gp-body__inner { padding-inline: clamp(20px, 4vw, 60px); }
.gp-figure { max-width: 980px; margin: 0 auto clamp(28px, 4vw, 56px); }
.gp-figure img { display: block; width: 100%; height: auto; border-radius: 12px; }

.gp-prose { max-width: 820px; margin-inline: auto; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.8; color: var(--c-dark-gray); overflow-wrap: anywhere; }
.gp-prose > :first-child { margin-top: 0; }
.gp-prose h2, .gp-prose h3, .gp-prose h4 { margin: 1.8em 0 .6em; font-family: var(--font-display); font-weight: 400; line-height: 1.25; color: var(--c-ink); }
.gp-prose h2 { font-size: clamp(26px, 2.4vw, 38px); }
.gp-prose h3 { font-size: clamp(22px, 1.9vw, 30px); }
.gp-prose h4 { font-size: clamp(19px, 1.5vw, 24px); }
.gp-prose p { margin: 0 0 1.15em; }
.gp-prose a { color: var(--c-red); text-decoration: underline; text-underline-offset: 3px; }
.gp-prose ul, .gp-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.gp-prose li { margin-bottom: .4em; }
.gp-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.gp-prose blockquote { margin: 1.6em 0; padding: .4em 0 .4em 1.2em; border-left: 4px solid var(--c-red); color: var(--c-ink); font-style: italic; }
.gp-prose table { width: 100%; margin: 0 0 1.4em; border-collapse: collapse; font-size: .94em; display: block; overflow-x: auto; }
.gp-prose th, .gp-prose td { padding: 10px 14px; border: 1px solid var(--c-border-gray); text-align: left; }
.gp-prose th { background: var(--c-off-white); }
.gp-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--c-border-gray); }

/* ---------- Shared header + footer: fluid overrides (same approach as the About page) ---------- */
.page-generic { --gx: clamp(20px, 4vw, 60px); }
.page-generic .topbar { height: auto; min-height: 84px; }
.page-generic .topbar__inner,
.page-generic .subnav__list { width: 100%; max-width: 1920px; padding-inline: var(--gx); }
.page-generic .topbar__inner { padding-block: 10px; }
.page-generic .logo img { width: clamp(150px, 20vw, 297px); height: auto; }
.page-generic .menu-drawer__top, .page-generic .menu-drawer__bottom { margin-inline: 24px; }
.page-generic .menu-drawer__grid { padding-inline: 24px; }
.page-generic .site-footer__inner { padding-inline: var(--gx); }
.page-generic .footer-brand__about img { max-width: 100%; height: auto; }
.page-generic .office__info p { width: auto; }
.page-generic .gp-hero__inner, .page-generic .gp-body__inner { max-width: 1920px; }

@media (max-width: 1500px) {
    .page-generic .subnav__list { gap: 16px; }
    .page-generic .subnav__btn { font-size: 15px; white-space: nowrap; }
}
@media (max-width: 1280px) {
    .page-generic .site-footer__top { flex-direction: column; gap: 40px; }
    .page-generic .footer-brand { width: 100%; }
    .page-generic .footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding-left: 0; }
    .page-generic .footer-links .v-line { display: none; }
    .page-generic .footer-col { width: auto; }
}
@media (max-width: 1180px) {
    .page-generic .subnav { display: none; }
    .page-generic .offices { flex-direction: column; gap: 20px; }
}
@media (max-width: 720px) {
    .page-generic .bottom-bar { flex-direction: column; gap: 12px; text-align: center; }
    .page-generic .bottom-bar__links { flex-wrap: wrap; justify-content: center; }
    .page-generic .office__phone { font-size: 17px; }
}
@media (max-width: 640px) {
    .page-generic .menu-toggle { width: auto; font-size: 18px; }
}
@media (max-width: 560px) {
    .page-generic .btn--header { display: none; }
    .page-generic .topbar__inner { justify-content: space-between; }
    .page-generic .menu-drawer__grid { grid-template-columns: 1fr; }
}

/* ---------- 404 and thank-you pages (site/message.blade.php) ---------- */
.msg-hero { display: grid; place-items: center; min-height: clamp(380px, 52vh, 620px); padding: clamp(56px, 8vw, 120px) 0; text-align: center; color: var(--c-white); background: radial-gradient(circle at 80% 0%, rgba(196, 32, 48, .35) 0%, transparent 45%), linear-gradient(135deg, var(--c-navy) 0%, #15153d 100%); }
.msg-hero__inner { width: min(100%, var(--container)); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-inline: clamp(20px, 4vw, 60px); }
.msg-code { font-family: var(--font-display); font-weight: 400; font-size: clamp(88px, 14vw, 220px); line-height: 1; letter-spacing: .04em; color: transparent; -webkit-text-stroke: 2px var(--c-red); text-shadow: 0 0 60px rgba(196, 32, 48, .35); }
.msg-icon { display: grid; place-items: center; width: clamp(76px, 8vw, 104px); height: clamp(76px, 8vw, 104px); color: #fff; background: #138a5b; border-radius: 50%; box-shadow: 0 0 0 12px rgba(19, 138, 91, .2); animation: msg-pop .55s cubic-bezier(.22, .8, .24, 1); }
.msg-icon svg { stroke-dasharray: 30; stroke-dashoffset: 30; animation: msg-draw .5s .3s ease forwards; }
.msg-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 60px); line-height: 1.15; }
.msg-text { max-width: 640px; margin: 0; font-size: clamp(16px, 1.2vw, 20px); line-height: 1.7; color: #d4d6ea; }
.msg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 14px; }
.msg-links { padding: clamp(36px, 5vw, 72px) 0; background: var(--c-white); }
.msg-links__inner { width: min(100%, var(--container)); box-sizing: border-box; padding-inline: clamp(20px, 4vw, 60px); text-align: center; }
.msg-links h2 { margin: 0 0 22px; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2vw, 32px); color: var(--c-ink); }
.msg-links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.msg-links a { display: inline-block; padding: 10px 20px; font-weight: 500; color: var(--c-ink); border: 1px solid var(--c-border-gray); border-radius: 100px; transition: color .2s, border-color .2s, background .2s; }
.msg-links a:hover { color: var(--c-white); background: var(--c-red); border-color: var(--c-red); }
/* thank-you page: plain black hero like the other inner pages, one icon, one heading, three short steps */
.msg-hero--thanks { min-height: 0; padding: clamp(64px, 8vw, 112px) 0 clamp(64px, 8vw, 104px); background: var(--c-black); border-bottom: 1px solid #1f1f24; }
.msg-hero--thanks .msg-hero__inner { gap: 0; }
.msg-hero--thanks .msg-icon { width: 84px; height: 84px; background: #138a5b; box-shadow: none; }
.msg-hero--thanks .msg-icon svg { width: 38px; height: 38px; }
.msg-hero--thanks .msg-title { margin-top: 32px; max-width: 900px; font-size: clamp(34px, 4.2vw, 64px); }
.msg-hero--thanks .msg-text { margin-top: 20px; color: #c9c9d2; }
.msg-hero--thanks .msg-actions { margin-top: 36px; }
.msg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: min(100%, 960px); margin: 72px 0 0; padding: 0; list-style: none; text-align: left; }
.msg-steps li { display: flex; flex-direction: column; gap: 8px; padding: 28px 26px; background: #0e0e12; border: 1px solid #26262d; border-radius: 10px; }
.msg-steps__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; color: var(--c-red); border: 1px solid var(--c-red); border-radius: 50%; }
.msg-steps strong { font-size: 18px; font-weight: 600; line-height: 24px; color: #fff; }
.msg-steps li > span:last-child { font-size: 15px; line-height: 23px; color: #a9a9b4; }
@media (max-width: 760px) { .msg-steps { grid-template-columns: 1fr; gap: 12px; margin-top: 48px; } .msg-steps li { padding: 20px; } }
@keyframes msg-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes msg-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .msg-icon, .msg-icon svg { animation: none; stroke-dashoffset: 0; } }

/* The 4-column footer needs ~1450px of width: stack it earlier than responsive.css does (same rule as the About page) */
@media (max-width: 1480px) {
    .page-generic .site-footer__top { flex-direction: column; gap: 40px; }
    .page-generic .footer-brand { width: 100%; }
    .page-generic .footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding-left: 0; }
    .page-generic .footer-links .v-line { display: none; }
    .page-generic .footer-col { width: auto; }
}

/* The header keeps a 16px gap between top bar and menu strip (original design, dark behind it). These pages have a white
   page background, so the gap needs the same black behind it as on the dark pages. */
.page-generic .site-header { background: var(--c-black); }