/* Phase 9B: editorial public design. Kept separate from the administration. */
/* Shared colors, spacing, radius and width tokens now live in app.css. */
main { overflow: clip; }
h1, h2, h3, h4 { letter-spacing: -.055em; }
h2 em, h1 em { font-style: normal; color: var(--jc-blue); }
.container { width: min(calc(100% - clamp(2rem, 5vw, 6rem)), var(--container)); }
.section-heading { align-items: end; gap: 3rem; }
.section-heading h2 { max-width: 18ch; font-size: clamp(2.75rem, 4.6vw, 5.3rem); }
.section-heading > p { max-width: 22rem; }
.eyebrow { color: var(--jc-blue); letter-spacing: .14em; }
.button { border-radius: 999px; min-height: 54px; padding-inline: 1.55rem; box-shadow: none; }
.button:hover { box-shadow: 0 12px 28px rgb(7 22 63 / 12%); }
.button-gold { background: var(--jc-gold); border-color: var(--jc-gold); box-shadow: none; }
.button-gold:hover { background: var(--jc-gold-light); filter: none; }
.button-outline { border-color: var(--jc-blue); }
.text-link { font-size: .84rem; }
.soft-section { background: var(--jc-off-white-cool); }

/* Calm light navigation replaces the former full-bleed navy opening. */
.site-header, .page-home .site-header:not(.is-scrolled) {
    background: rgb(238 234 225 / 95%);
    border-bottom: 1px solid var(--jc-border);
    backdrop-filter: blur(18px);
}
.page-home .site-header { margin-bottom: 0; }
.page-home .site-header:not(.is-scrolled) .brand,
.page-home .site-header:not(.is-scrolled) .main-nav > a,
.page-home .site-header:not(.is-scrolled) .services-nav > a,
.page-home .site-header:not(.is-scrolled) .header-phone { color: var(--jc-blue-dark); }
.page-home .site-header:not(.is-scrolled) .brand small { color: var(--muted); }
.page-home .site-header:not(.is-scrolled) .brand-logo-dark { display: block; }
.page-home .site-header:not(.is-scrolled) .brand-logo-light { display: none; }
.page-home .site-header:not(.is-scrolled) .mega-toggle,
.page-home .site-header:not(.is-scrolled) .mobile-toggle { background: white; color: var(--jc-blue); border-color: var(--jc-border); }
.page-home .site-header:not(.is-scrolled) .main-nav > a:hover,
.page-home .site-header:not(.is-scrolled) .services-nav > a:hover { color: var(--jc-blue); }
.header-inner { min-height: 88px; }
.site-header.is-scrolled .header-inner { min-height: 72px; }
.header-cta { white-space: nowrap; }
.mega-menu { border-radius: 0 0 1.5rem 1.5rem; background: var(--jc-off-white); }
.mega-service:hover, .mega-service:focus-visible { background: white; }
.mobile-menu { background: var(--jc-off-white); }

/* The hero reads as a headline spread followed by a wide photographic scene. */
.page-home .hero { padding: clamp(2.5rem, 5vw, 5rem) 0 3rem; background: var(--jc-off-white); overflow: visible; }
.page-home .hero::before, .page-home .hero::after { display: none; }
.page-home .hero-grid { display: block; min-height: 0; }
.page-home .hero-copy { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr); column-gap: 5vw; align-items: end; padding-bottom: clamp(2.8rem, 5vw, 5rem); }
.page-home .hero-copy > .eyebrow { grid-column: 1 / -1; color: var(--jc-blue); margin-bottom: clamp(1.6rem, 3vw, 3rem); }
.page-home .hero .eyebrow::before { background: var(--jc-gold); }
.page-home .hero-copy .gold-dot { display: none; }
.page-home .hero h1 { color: var(--jc-blue-dark); max-width: 15ch; font-size: clamp(3.6rem, 6.3vw, 7.5rem); line-height: .99; letter-spacing: -.077em; margin: 0; }
.page-home .hero h1 em { display: block; color: var(--jc-gold-dark); }
.hero-intro { padding-bottom: .3rem; }
.page-home .hero .lead { max-width: 29rem; color: #43506A; font-size: clamp(.98rem, 1.12vw, 1.18rem); line-height: 1.75; margin: 0 0 2rem; }
.page-home .hero .button-group { gap: .75rem; }
.page-home .hero-art { position: relative; padding: 0; margin: 0; width: 100%; max-width: none; }
.page-home .hero-art::before { display: none; }
.page-home .hero-image { aspect-ratio: 2.55; border: 0; border-radius: 1.8rem; box-shadow: none; background: #E7E2D5; }
.page-home .hero-image img { position: static; width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: center 51%; }
.page-home .hero-image::after { background: linear-gradient(0deg, rgb(7 22 63 / 42%), transparent 40%); }
.hero-image-overlay { display: flex; gap: .5rem; position: absolute; left: 2rem; bottom: 3.6rem; z-index: 2; }
.hero-image-overlay span { padding: .6rem .9rem; border: 1px solid rgb(255 255 255 / 70%); border-radius: 999px; color: white; background: rgb(7 22 63 / 72%); backdrop-filter: blur(8px); font-size: .7rem; font-weight: 700; }
.page-home .art-caption { color: var(--muted); text-align: right; margin: .75rem 0 0; }
.hero-scroll { display: inline-flex; align-items: center; gap: .65rem; color: var(--jc-blue); text-transform: uppercase; font-size: .65rem; font-weight: 700; letter-spacing: .17em; }
.hero-scroll span { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--jc-blue); border-radius: 50%; font-size: 1rem; }
.hero-scroll:hover span { background: var(--jc-blue); color: white; }
.expertise-ribbon { background: white; color: var(--jc-blue-dark); border-top: 1px solid var(--jc-border); border-bottom: 1px solid var(--jc-border); }
.expertise-ribbon .container { min-height: 80px; }
.expertise-ribbon b { color: var(--jc-blue); font-size: 1.8rem; }
.expertise-ribbon span { color: var(--jc-gold-dark); }

.home-about { background: var(--jc-off-white-cool); }
.home-about-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(3rem, 8vw, 9rem); }
.home-about-copy h2 { font-size: clamp(2.8rem, 4.7vw, 5.5rem); max-width: 13ch; }
.home-about-copy .lead { margin-bottom: 2rem; }
.home-about-visual { position: relative; margin: 0; }
.home-about-visual img { display: block; width: 100%; aspect-ratio: 1.28; object-fit: cover; border-radius: 1.6rem; }
.home-about-visual figcaption { color: var(--muted); font-size: .72rem; margin-top: .8rem; }
.home-services { background: var(--jc-gray-soft); }
.services-grid-editorial { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.services-grid-editorial > .service-card { grid-column: span 3; }
.services-grid-editorial > .service-card:nth-child(-n+3) { grid-column: span 4; }
.services-grid-editorial > .service-card-accent { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.5fr) auto; align-items: center; gap: 2rem; padding: clamp(2rem, 4vw, 4rem); }
.services-grid-editorial > .service-card-accent .eyebrow,
.services-grid-editorial > .service-card-accent h3,
.services-grid-editorial > .service-card-accent p { margin: 0; }
.services-grid-editorial > .service-card-accent h3 { font-size: clamp(1.7rem, 2.5vw, 3rem); }
.services-grid-editorial > .service-card-accent .button { margin: 0; }
.service-card, .project-card, .news-card { border: 1px solid var(--jc-border); border-radius: 1.35rem; box-shadow: none; }
.service-card::before, .project-card::before, .news-card::before { height: 2px; }
.service-visual .media { aspect-ratio: 1.52; }
.services-grid-editorial > .service-card:nth-child(-n+3) .media { aspect-ratio: 1.46; }
.service-visual > .service-number { font-size: 1.05rem; top: 1.1rem; left: 1.2rem; padding: .42rem .65rem; border-radius: .5rem; background: rgb(7 22 63 / 69%); }
.service-card .card-body { padding: clamp(1.35rem, 2vw, 2rem); }
.service-card .card-body h3 { font-size: clamp(1.2rem, 1.5vw, 1.7rem); }
.service-card .card-body p { font-size: .82rem; }
.service-card .card-body .text-link { margin-top: auto; }

.challenges-section { background: var(--jc-off-white-cool); }
.challenge-showcase { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center; gap: clamp(2rem, 6vw, 7rem); }
.challenge-showcase .challenge-visual { order: 1; min-height: 660px; border-radius: 1.6rem; box-shadow: none; }
.challenge-showcase .challenges { order: 2; }
.challenges details { background: transparent; border-radius: 0; border-left: 0; padding: 0; }
.challenges details[open] { background: transparent; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--jc-border); border-left: 0; }
.challenges summary { min-height: 80px; font-size: clamp(1rem, 1.35vw, 1.3rem); }
.challenges details > div { padding: 0 1rem 1.5rem 2.5rem; }
.challenge-art .media > img { object-position: center; }
.challenge-art p { bottom: 2.5rem; left: 2.5rem; }

.values-section { background: var(--jc-blue-dark); }
.values-section::after { display: none; }
.values-section .container { align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.values-section h2 { font-size: clamp(2.6rem, 4.5vw, 5rem); }
.values-intro { min-width: 0; }
.values-visual { margin: 2.4rem 0 0; max-width: 560px; }
.values-visual img { width: 100%; height: clamp(240px, 28vw, 340px); object-fit: cover; object-position: center 37%; border-radius: 1.2rem; }
.values-visual figcaption { margin-top: .65rem; color: #BAC9E5; font-size: .7rem; }
.values-grid { gap: 0 1rem; }
.values-grid > div { border: 0; border-bottom: 1px solid rgb(255 255 255 / 22%); border-radius: 0; background: transparent; padding: 1.1rem 0; }
.values-grid h3 { font-size: 1.02rem; }
.process-grid li::before { background: var(--jc-off-white); color: var(--jc-blue); }
.process-grid::before { background: linear-gradient(90deg,var(--jc-gold),var(--jc-border) 80%); }
.home-projects, .home-news { background: var(--jc-off-white); }
.empty-state-editorial { display: flex; align-items: center; gap: clamp(2rem, 6vw, 6rem); padding: clamp(2rem, 5vw, 5rem); min-height: 250px; border: 1px solid var(--jc-border); border-radius: 1.5rem; background: white; text-align: left; }
.empty-state-editorial > span { color: var(--jc-gold-dark); font: 400 clamp(4rem, 9vw, 10rem)/1 var(--font-display); }
.empty-state-editorial h3 { font-size: clamp(1.35rem, 2vw, 2.1rem); }
.empty-state-editorial p { color: var(--muted); }
.news-featured { background: white; }
.home-projects .cards-grid, .page-projects .cards-grid, .home-news .news-grid, .page-news .news-grid { gap: 1.25rem; }
.home-projects .cards-grid .project-card:first-child:not(:only-child),
.page-projects .cards-grid .project-card:first-child:not(:only-child) { grid-column: span 2; }
.home-projects .cards-grid .project-card:only-child,
.page-projects .cards-grid .project-card:only-child { grid-column: 1 / -1; }
.home-projects .cards-grid .project-card:first-child .media,
.page-projects .cards-grid .project-card:first-child .media { aspect-ratio: 1.8; }
.news-card .card-body, .project-card .card-body { padding: clamp(1.4rem, 2vw, 2.2rem); }
.news-card .card-body h3, .project-card .card-body h3 { font-size: clamp(1.25rem, 1.6vw, 1.8rem); }
.page-projects .filter-form { background: white; border-color: var(--jc-border); border-radius: 1rem; }
.page-news .category-filters a { border-color: var(--jc-border); }
.cta-section { background: var(--jc-blue); }
.cta-section::before { display: none; }
.cta-section h2 { font-size: clamp(2.8rem, 5vw, 5.5rem); }

/* Interior pages share a quiet masthead, spacious cards and the same palette. */
.page-interior .page-hero, .page-services .page-hero, .page-projects .page-hero,
.page-news .page-hero, .page-contact .page-hero, .page-quote .page-hero {
    padding-top: clamp(3rem, 6vw, 6rem);
    padding-bottom: clamp(3rem, 5vw, 5rem);
}
.page-hero:not(.hero) h1 { max-width: 17ch; font-size: clamp(3.4rem, 6vw, 7rem); line-height: 1.02; }
.page-hero .lead { max-width: 43rem; }
.page-about .page-hero.split { background: white; border-radius: 1.5rem; padding: clamp(2rem, 5vw, 5rem); }
.page-about .hero-art::before { display: none; }
.page-about .hero-image { border-radius: 1.2rem; aspect-ratio: 1.2; box-shadow: none; }
.page-about .hero-image img { position: static; width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
.service-hero { background: white; border-color: var(--jc-border); border-radius: 1.5rem; }
.service-hero .detail-hero-image { border: 0; border-radius: 1.2rem; box-shadow: none; }
.statement-card { border-color: var(--jc-border); border-radius: 1.4rem; box-shadow: none; }
.statement-dark { background: var(--jc-blue); border-color: var(--jc-blue); }
.page-services .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-services .service-visual .media { aspect-ratio: 1.52; }
.project-cover, .article-cover { border: 0; border-radius: 1.4rem; box-shadow: none; }
.project-cover.media-placeholder, .article-cover.media-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; background: radial-gradient(circle at 75% 25%, #274790 0, transparent 45%), linear-gradient(135deg, #07163F, #112B75); }
.project-cover.media-placeholder::before, .article-cover.media-placeholder::before { top: 50%; left: 50%; width: min(45%, 330px); transform: translate(-50%, -50%); border-color: rgb(244 219 99 / 40%); }
.project-cover.media-placeholder > img, .article-cover.media-placeholder > img { width: 96px; height: 118px; margin: 0; align-self: auto; object-fit: contain; }
.project-cover.media-placeholder > span, .article-cover.media-placeholder > span { padding: 0; align-self: auto; color: var(--jc-gold-light); }
.project-story section { background: white; border-color: var(--jc-border); }
.contact-grid, .quote-layout { gap: clamp(1.5rem, 4vw, 4rem); }
.contact-details, .quote-aside { background: var(--jc-blue); border-radius: 1.4rem; box-shadow: none; }
.contact-form { background: white; border-color: var(--jc-border); border-radius: 1.4rem; box-shadow: none; padding: clamp(1.5rem, 3.5vw, 3.5rem); }
.field input, .field textarea, .field select, .search-form input { border-radius: .75rem; }
.category-filters a { background: white; }
.site-footer { background: #07163F; }
.footer-intro h2 { font-size: clamp(2.6rem, 5vw, 5.6rem); }

@media (max-width: 1199px) {
    .page-home .hero-copy { grid-template-columns: 1fr; gap: 1.5rem; }
    .page-home .hero h1 { max-width: 13ch; }
    .hero-intro { max-width: 42rem; }
    .services-grid-editorial > .service-card,
    .services-grid-editorial > .service-card:nth-child(-n+3) { grid-column: span 6; }
    .services-grid-editorial > .service-card-accent { grid-template-columns: 1fr 2fr; }
    .services-grid-editorial > .service-card-accent .button { grid-column: 2; justify-self: start; }
    .challenge-showcase .challenge-visual { min-height: 520px; }
}
@media (max-width: 800px) {
    .page-home .hero { padding-top: 3rem; }
    .page-home .hero h1 { font-size: clamp(3.2rem, 8vw, 5.5rem); }
    .page-home .hero-image { aspect-ratio: 1.55; }
    .home-about-grid, .challenge-showcase { grid-template-columns: 1fr; }
    .values-section .container { grid-template-columns: 1fr; }
    .home-about-copy { max-width: 42rem; }
    .home-about-visual { max-width: 650px; }
    .challenge-showcase .challenge-visual { display: block; order: 1; min-height: 350px; }
    .challenge-showcase .challenges { order: 2; }
    .page-services .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-projects .cards-grid .project-card:first-child:not(:only-child),
    .page-projects .cards-grid .project-card:first-child:not(:only-child) { grid-column: span 2; }
    .services-grid-editorial > .service-card-accent { display: block; }
    .services-grid-editorial > .service-card-accent h3,
    .services-grid-editorial > .service-card-accent p { margin: 1rem 0; }
}
@media (max-width: 540px) {
    :root { --section-space: 4.5rem; }
    .container { width: calc(100% - 2rem); }
    .section-heading h2 { font-size: clamp(2.4rem, 9vw, 3.5rem); }
    .page-home .hero { padding-top: 2.5rem; padding-bottom: 2rem; }
    .page-home .hero-copy { padding-bottom: 2rem; gap: 1.3rem; }
    .page-home .hero-copy > .eyebrow { margin: 0; }
    .page-home .hero h1 { font-size: clamp(2.8rem, 11.3vw, 4.2rem); }
    .page-home .hero .lead { margin-bottom: 1.3rem; }
    .page-home .hero .button-group { display: grid; }
    .page-home .hero .button { width: 100%; }
    .page-home .hero-image { aspect-ratio: 1.05; border-radius: 1rem; }
    .page-home .hero-image img { object-position: 62% center; }
    .hero-image-overlay { left: .75rem; bottom: 2.7rem; gap: .3rem; }
    .hero-image-overlay span { padding: .35rem .5rem; font-size: .57rem; }
    .page-home .art-caption { font-size: .6rem; }
    .hero-scroll { margin-top: .3rem; }
    .expertise-ribbon .container { padding-block: 1rem; min-height: 0; }
    .expertise-ribbon p:last-child { display: none; }
    .home-about-copy h2 { font-size: clamp(2.5rem, 9vw, 3.7rem); }
    .home-about-visual img { border-radius: 1rem; }
    .services-grid-editorial > .service-card,
    .services-grid-editorial > .service-card:nth-child(-n+3) { grid-column: 1 / -1; }
    .services-grid-editorial > .service-card-accent { padding: 2rem; }
    .challenge-showcase .challenge-visual { min-height: 300px; border-radius: 1rem; }
    .challenges summary { min-height: 66px; font-size: .95rem; }
    .empty-state-editorial { display: block; }
    .empty-state-editorial > span { font-size: 4rem; }
    .page-hero:not(.hero) h1 { font-size: clamp(2.65rem, 10vw, 4rem); }
    .page-services .services-grid { grid-template-columns: 1fr; }
    .home-projects .cards-grid .project-card:first-child:not(:only-child),
    .page-projects .cards-grid .project-card:first-child:not(:only-child) { grid-column: auto; }
    .page-about .page-hero.split { padding: 1.5rem; }
    .contact-form { padding: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-image img, .service-card img, .project-card img, .news-card img { transform: none !important; }
}
.cms-preview-banner{background:#112b75;color:#fff;padding:.7rem 1rem;text-align:center}.cms-preview-banner a{color:#f3d85d}
.hero-subtitle{color:#112b75;font-weight:600;font-size:clamp(1rem,1.5vw,1.25rem);margin:.7rem 0 0}