/* Phase 7 visual layer. Public pages only; CMS data and admin styling stay independent. */
.section-heading { margin-bottom: clamp(2rem,4vw,3.6rem); }
.section-heading h2 { max-width: 15ch; }
.eyebrow { letter-spacing: .19em; }
.eyebrow::before { content: ""; display: inline-block; width: 1.5rem; height: 1px; background: var(--jc-gold); flex: 0 0 auto; }
.hero .eyebrow::before, .values-section .eyebrow::before, .cta-section .eyebrow::before, .mega-feature .eyebrow::before { background: var(--jc-gold-light); }
.soft-section { background: linear-gradient(135deg,#F6F8FC,#EEF2F9); }
.button { box-shadow: 0 10px 22px rgb(7 22 63 / 10%); }
.button:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgb(7 22 63 / 18%); }
.button-gold { background: var(--gold-gradient); border-color: #D4B810; box-shadow: 0 12px 28px rgb(212 184 16 / 19%); }
.button-gold:hover { background: var(--gold-gradient); filter: brightness(1.06); }
.button-light { box-shadow: none; }
.button-light:hover { box-shadow: 0 10px 24px rgb(0 0 0 / 12%); }
.button > span[aria-hidden], .text-link > span[aria-hidden], .card-body .text-link > span { display: inline-block; transition: transform var(--transition); }
.button:hover > span[aria-hidden], .text-link:hover > span[aria-hidden], .service-card:hover .card-body .text-link > span, .project-card:hover .card-body .text-link > span, .news-card:hover .card-body .text-link > span { transform: translate(3px,-3px); }
.text-link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .35rem; transition: color var(--transition),text-decoration-color var(--transition); }
.text-link:hover { text-decoration-color: var(--jc-gold); }

/* A dark, continuous opening scene becomes a compact light navigation on scroll. */
.site-header { transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); }
.site-header-static { position: relative; }
.header-phone { color: var(--jc-blue); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.page-home .site-header:not(.is-scrolled) .header-phone { color: white; }
.site-header.is-scrolled { box-shadow: 0 12px 30px rgb(7 22 63 / 9%); }
.brand-logo-light { display: none; }
.page-home .site-header { margin-bottom: -100px; }
.page-home .site-header:not(.is-scrolled) { background: transparent; border-bottom-color: rgb(255 255 255 / 15%); backdrop-filter: none; }
.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 { color: white; }
.page-home .site-header:not(.is-scrolled) .brand small { color: #C7D4EF; }
.page-home .site-header:not(.is-scrolled) .brand-logo-dark { display: none; }
.page-home .site-header:not(.is-scrolled) .brand-logo-light { display: block; }
.page-home .site-header:not(.is-scrolled) .mega-toggle, .page-home .site-header:not(.is-scrolled) .mobile-toggle { background: rgb(255 255 255 / 10%); color: white; border-color: rgb(255 255 255 / 33%); }
.page-home .site-header:not(.is-scrolled) .header-cta { background: var(--gold-gradient); color: var(--jc-blue-dark); }
.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-gold-light); }
.main-nav > a[aria-current="page"]::after, .services-nav > a[aria-current="page"]::after { width: 100%; height: 2px; transform-origin: left; animation: active-line .48s ease-out both; }
.mega-menu { border: 1px solid #D8DFED; border-top: 2px solid var(--jc-gold); border-radius: 0 0 1.2rem 1.2rem; box-shadow: 0 32px 70px rgb(7 22 63 / 19%); background: #fff; animation: mega-in .25s cubic-bezier(.2,.72,.25,1) both; }
.mega-service { border: 1px solid transparent; transition: background var(--transition), border-color var(--transition), transform var(--transition); }
.mega-service:hover, .mega-service:focus-visible { background: #F4F6FB; border-color: #DEE5F1; transform: translateX(3px); }
.mega-thumbnail .media { border-radius: .55rem; }
.mega-feature { background: radial-gradient(circle at 100% 0,rgb(212 184 16 / 14%),transparent 47%),linear-gradient(145deg,#112B75,#07163F); border-radius: .85rem; }
.mobile-menu { background: linear-gradient(160deg,#FFFFFF,#F7F9FD); box-shadow: -20px 0 50px rgb(7 22 63 / 15%); }
.mobile-menu nav > a, .mobile-services summary { transition: color var(--transition), padding-left var(--transition); }
.mobile-menu nav > a:hover, .mobile-services summary:hover { color: var(--jc-blue); padding-left: .4rem; }

/* The main visual uses the approved J-COMMAND composition; headline and CTA stay HTML. */
.page-home .hero { position: relative; isolation: isolate; overflow: hidden; padding-top: calc(100px + clamp(3.8rem,5.6vw,6rem)); padding-bottom: clamp(4.5rem,7vw,7rem); background: radial-gradient(circle at 82% 23%,rgb(212 184 16 / 14%),transparent 34%),radial-gradient(circle at 6% 80%,rgb(65 100 181 / 28%),transparent 40%),linear-gradient(135deg,#07163F 12%,#112B75 76%,#092055); }
.page-home .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(100deg,transparent 0 100px,rgb(255 255 255 / 2%) 101px 102px); mask-image: linear-gradient(90deg,transparent,#000); pointer-events: none; }
.page-home .hero::after { content: ""; position: absolute; width: min(58vw,850px); aspect-ratio: 1; border: 1px solid rgb(212 184 16 / 18%); border-radius: 50%; right: -25vw; top: -28vw; pointer-events: none; }
.page-home .hero-grid { min-height: 640px; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); gap: clamp(2rem,5vw,5rem); position: relative; }
.page-home .hero h1 { font-size: clamp(3.15rem,5.25vw,6.05rem); line-height: 1.06; color: white; letter-spacing: -.06em; max-width: 11.7ch; }
.page-home .hero h1 em { color: var(--jc-gold-light); }
.page-home .hero .eyebrow { color: var(--jc-gold-light); }
.page-home .hero .lead { color: #D2DCF1; font-size: clamp(.94rem,1vw,1.08rem); }
.page-home .hero-note { color: #BECDEB; }
.page-home .hero-note span { background: var(--jc-gold-light); }
.page-home .hero-art::before { inset: -.7rem -.7rem 3.6rem 1.5rem; border-color: rgb(244 219 99 / 75%); }
.page-home .hero-image { border: 1px solid rgb(244 219 99 / 32%); box-shadow: 0 36px 90px rgb(0 0 0 / 33%); }
.page-home .hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 65%,rgb(7 22 63 / 19%)); pointer-events: none; }
.page-home .art-stamp { border-left: 0; border-top: 3px solid var(--jc-gold); border-radius: .75rem; box-shadow: 0 20px 50px rgb(0 0 0 / 22%); }
.page-home .art-caption { color: #BECDEB; }
.expertise-ribbon { background: linear-gradient(90deg,#0A1C4C,#112B75); border-top: 1px solid rgb(244 219 99 / 33%); }
.expertise-ribbon b { color: var(--jc-gold-light); }

/* Editorial cards keep all titles, summaries and links in live HTML. */
.service-card, .project-card, .news-card { position: relative; border-color: #E3E8F1; box-shadow: var(--shadow-soft); transition: transform var(--transition),box-shadow var(--transition),border-color var(--transition); }
.service-card::before, .project-card::before, .news-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; z-index: 3; background: var(--gold-gradient); transform: scaleX(0); transform-origin: left; transition: transform .38s ease; }
.service-card:hover::before, .service-card:focus-within::before, .project-card:hover::before, .project-card:focus-within::before, .news-card:hover::before, .news-card:focus-within::before { transform: scaleX(1); }
.service-visual .media { aspect-ratio: 1.72; background: var(--jc-blue-dark); }
.service-visual .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgb(7 22 63 / 29%),transparent 50%,rgb(7 22 63 / 17%)); pointer-events: none; }
.service-visual > .service-number { font-size: 2.6rem; color: white; text-shadow: 0 4px 16px rgb(0 0 0 / 50%); }
.service-card .card-body { padding: clamp(1.35rem,2vw,1.9rem); }
.service-card .card-body h3 { font-size: clamp(1.12rem,1.25vw,1.42rem); }
.service-card-accent { isolation: isolate; background: radial-gradient(circle at 95% 8%,rgb(212 184 16 / 20%),transparent 40%),linear-gradient(145deg,#112B75,#07163F); border-color: #213B77; }
.service-card-accent::after { content: ""; position: absolute; z-index: -1; width: 18rem; aspect-ratio: 1; border: 1px solid rgb(244 219 99 / 23%); border-radius: 50%; right: -9rem; bottom: -9rem; }
.service-card-accent .eyebrow { color: var(--jc-gold-light); }
.project-card .media, .news-card .media { aspect-ratio: 1.55; }
.project-card .card-body h3, .news-card .card-body h3 { font-size: 1.4rem; }
.news-featured { background: linear-gradient(130deg,#F5F7FC,#FFFFFF); }
.news-featured .media { aspect-ratio: auto; }
.news-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--jc-gold); text-underline-offset: .2em; }
.badge { background: #F7EEBD; color: #594600; border: 1px solid #E9D989; }

.challenges-section { background: linear-gradient(135deg,#F6F8FC,#EDF2FB); }
.challenge-showcase { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.88fr); gap: clamp(2rem,5vw,5rem); align-items: stretch; }
.challenge-showcase .challenges { min-width: 0; }
.challenge-showcase .challenges > .text-link { margin-top: 1.5rem; }
.challenges details { padding: 0 1rem; border-bottom-color: #D4DDEB; border-left: 2px solid transparent; transition: background var(--transition),box-shadow var(--transition),border-color var(--transition); }
.challenges details[open] { background: white; border-left-color: var(--jc-gold); border-bottom-color: transparent; box-shadow: var(--shadow-soft); border-radius: .45rem; }
.challenges summary { min-height: 70px; align-items: center; }
.challenges details[open] summary .service-number { color: var(--jc-gold-dark); }
.challenges details > div { padding-left: 2.1rem; }
.challenge-visual { position: relative; min-height: 485px; overflow: hidden; border-radius: var(--radius); background: var(--jc-blue-dark); box-shadow: var(--shadow); }
.challenge-art { position: absolute; inset: 0; }
.challenge-art .media { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.challenge-art .media > img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.challenge-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 32%,rgb(7 22 63 / 86%)); pointer-events: none; }
.challenge-art p { position: absolute; z-index: 1; bottom: 2rem; left: 2rem; right: 2rem; color: white; font: 700 clamp(1.4rem,2.3vw,2.4rem)/1.15 var(--font-display); margin: 0; }
.challenge-art p span { display: block; margin-bottom: .7rem; color: var(--jc-gold-light); font: 700 .7rem/1.5 var(--font-body); text-transform: uppercase; letter-spacing: .14em; }
.promotion-block { position: relative; isolation: isolate; background: radial-gradient(circle at 88% 10%,rgb(212 184 16 / 22%),transparent 32%),linear-gradient(130deg,#07163F,#112B75); box-shadow: 0 30px 76px rgb(7 22 63 / 19%); }
.promotion-block::after { content: ""; position: absolute; z-index: -1; width: 34rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(244 219 99 / 19%); right: -12rem; top: -16rem; pointer-events: none; }
.promotion-copy .eyebrow { color: var(--jc-gold-light); }
.promotion-prices .price { font-size: clamp(2rem,3.4vw,3.5rem); color: var(--jc-gold-light); }
.promotion-block .media { background: #142E65; }
.promotion-block .media > img { object-fit: cover; }

.values-section { position: relative; overflow: hidden; background: radial-gradient(circle at 0 0,rgb(65 100 181 / 35%),transparent 42%),linear-gradient(140deg,#07163F,#0C245E); }
.values-section::after { content: ""; position: absolute; width: 45rem; aspect-ratio: 1; border: 1px solid rgb(212 184 16 / 17%); border-radius: 50%; right: -25rem; bottom: -30rem; pointer-events: none; }
.values-grid { gap: .7rem; }
.values-grid > div { align-items: flex-start; padding: 1rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: .6rem; background: rgb(255 255 255 / 4%); }
.values-grid .service-number { color: var(--jc-gold-light); }
.process-grid { position: relative; }
.process-grid::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,var(--jc-gold),#DFE4EE 80%); }
.process-grid li { position: relative; border-top: 0; }
.process-grid li::before { background: var(--jc-blue-dark); color: var(--jc-gold-light); border: 1px solid var(--jc-gold); box-shadow: 0 8px 20px rgb(7 22 63 / 16%); }
.reviews-section { background: #F5F7FB; }
.review-card { position: relative; box-shadow: var(--shadow-soft); }
.review-card blockquote::before { content: "“"; display: block; height: 2.2rem; color: var(--jc-gold-dark); font: 700 4rem/.8 var(--font-display); }
.cta-section { background: radial-gradient(circle at 90% 30%,rgb(212 184 16 / 15%),transparent 30%),linear-gradient(120deg,#07163F,#112B75 85%); }
.cta-section::before { width: 900px; height: 900px; top: -550px; right: -200px; }
.cta-actions .button { min-height: 56px; }

/* Consistent interior hero, gallery, forms and focus treatment. */
.page-hero:not(.hero) h1 { font-size: clamp(2.9rem,5vw,5.55rem); }
.service-hero { position: relative; margin-top: 1.5rem; padding: clamp(2rem,4.5vw,5rem); border: 1px solid #E3E9F3; border-radius: 1.3rem; background: radial-gradient(circle at 100% 0,rgb(212 184 16 / 13%),transparent 30%),linear-gradient(130deg,#F9FBFF,#EEF3FB); overflow: hidden; }
.service-hero .eyebrow, .page-hero > .eyebrow { color: var(--jc-gold-dark); }
.service-hero .detail-hero-image { border: 1px solid #DFE5EF; border-radius: .85rem; box-shadow: 0 25px 55px rgb(7 22 63 / 15%); }
.detail-hero-image > img { object-fit: cover; object-position: center 38%; }
.page-about .page-hero.split { padding: clamp(2rem,4vw,4rem); margin-top: 1.5rem; border-radius: 1.3rem; background: #F6F8FC; }
.statement-card { box-shadow: var(--shadow-soft); }
.statement-card h2 { max-width: 14ch; }
.service-offer .statement-card { border-top: 3px solid var(--jc-gold); }
.service-process li span { color: var(--jc-gold-dark); }
.project-cover, .article-cover { box-shadow: var(--shadow); border: 1px solid #DFE5EE; }
.project-story { max-width: 980px; }
.project-story section { display: grid; grid-template-columns: 6rem minmax(0,1fr); gap: 1.5rem; align-items: start; padding: clamp(1.6rem,3vw,2.8rem); margin-bottom: 1rem; border: 1px solid #DAE2EF; border-radius: var(--radius); background: #F7F9FD; }
.project-story section:nth-child(even) { background: #FFFFFF; border-left: 3px solid var(--jc-gold); }
.project-story .story-index { color: var(--jc-gold-dark); font: 700 2.8rem/1 var(--font-display); }
.project-story h2 { margin-bottom: .8rem; }
.project-story p { margin-bottom: 0; }
.gallery-grid figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: #F6F8FC; box-shadow: var(--shadow-soft); }
.gallery-grid .media { border-radius: 0; }
.gallery-grid figcaption { padding: .8rem 1rem; }
.contact-details, .quote-aside { position: relative; overflow: hidden; background: radial-gradient(circle at 90% 0,rgb(212 184 16 / 16%),transparent 35%),linear-gradient(150deg,#112B75,#07163F); box-shadow: var(--shadow); }
.contact-details::before, .quote-aside::before { content: ""; position: absolute; width: 15rem; aspect-ratio: 1; border: 1px solid rgb(244 219 99 / 22%); border-radius: 50%; top: -9rem; right: -8rem; pointer-events: none; }
.contact-form { border-color: #E0E6F0; box-shadow: 0 20px 60px rgb(7 22 63 / 8%); }
.quote-form fieldset + fieldset { border-top-color: #DDE5F1; }
.quote-form legend span { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--jc-blue-dark); color: var(--jc-gold-light); }
.field input, .field textarea, .field select, .search-form input { border-radius: .55rem; border-color: #AAB7CC; transition: border-color var(--transition),box-shadow var(--transition),background var(--transition); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible, .search-form input:focus-visible { border-color: var(--jc-gold-dark); outline: 2px solid var(--jc-gold); outline-offset: 2px; box-shadow: 0 0 0 5px rgb(212 184 16 / 10%); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #6E83B3; }
.faq-item button { transition: color var(--transition); }
.faq-item button:hover, .faq-item button[aria-expanded="true"] { color: var(--jc-blue); }
.search-results article { background: white; box-shadow: var(--shadow-soft); transition: box-shadow var(--transition),transform var(--transition); }
.search-results article:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Footer and fixed controls. */
.site-footer { background: radial-gradient(circle at 90% 10%,rgb(65 100 181 / 20%),transparent 25%),#07163F; }
.footer-intro { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: clamp(3rem,5vw,5.5rem); margin-bottom: clamp(3rem,5vw,5rem); border-bottom: 1px solid rgb(244 219 99 / 40%); }
.footer-intro .eyebrow { color: var(--jc-gold-light); }
.footer-intro h2 { color: white; font-size: clamp(2.2rem,4.5vw,4.6rem); margin-bottom: 0; }
.footer-intro .button { flex: 0 0 auto; }
.footer-grid h2 { text-transform: uppercase; letter-spacing: .12em; color: var(--jc-gold-light); }
.footer-grid a { transition: color var(--transition),transform var(--transition); }
.footer-grid a:hover { transform: translateX(3px); }
.footer-bottom { border-top-color: rgb(244 219 99 / 30%); }
.whatsapp-float { bottom: 1.25rem; right: 1.25rem; background: #0F4D4A; border-color: #89B2A6; box-shadow: 0 14px 34px rgb(7 22 63 / 25%); }
.whatsapp-float:hover { background: #0C3F3C; }
.back-to-top { position: fixed; right: 1.25rem; bottom: 5.3rem; z-index: 20; width: 44px; height: 44px; border: 1px solid #AAB9D8; border-radius: 50%; background: white; color: var(--jc-blue); font-size: 1.25rem; box-shadow: var(--shadow-soft); transition: transform var(--transition),box-shadow var(--transition); }
.back-to-top:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .service-card:hover, .project-card:hover, .news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: #C7D2E8; }
    .service-card:hover .media > img, .project-card:hover .media > img, .news-card:hover .media > img { transform: scale(1.035); }
}
@media (max-width: 1199px) {
    .page-home .site-header { margin-bottom: -88px; }
    .page-home .hero { padding-top: calc(88px + 4rem); }
    .page-home .hero-grid { min-height: 0; }
}
@media (max-width: 800px) {
    .page-home .hero-grid { grid-template-columns: 1fr; }
    .page-home .hero h1 { max-width: 12ch; font-size: clamp(3rem,8vw,5rem); }
    .page-home .hero-art { width: min(100%,620px); }
    .footer-intro { align-items: start; flex-direction: column; }
    .process-grid::before { left: 24px; top: 0; right: auto; bottom: 0; width: 2px; height: auto; background: linear-gradient(var(--jc-gold),#DFE4EE 90%); }
    .process-grid li { padding-left: 4rem; min-height: 9rem; }
    .process-grid li::before { position: absolute; top: 0; left: 0; }
    .service-hero { margin-top: 1rem; }
    .challenge-showcase { grid-template-columns: 1fr; }
    .challenge-visual { display: none; }
}
@media (max-width: 540px) {
    .page-home .site-header { margin-bottom: -78px; }
    .page-home .hero { padding-top: calc(78px + 2.6rem); padding-bottom: 3.8rem; }
    .page-home .hero h1 { font-size: clamp(2.75rem,11vw,4rem); }
    .page-home .hero .button-group { display: grid; grid-template-columns: 1fr; }
    .page-home .hero .button { width: 100%; }
    .page-home .hero-art { margin-top: .5rem; }
    .page-home .art-stamp { bottom: 3.5rem; }
    .service-hero, .page-about .page-hero.split { padding: 1.35rem; }
    .page-hero:not(.hero) h1 { font-size: clamp(2.2rem,8.7vw,3rem); }
    .service-hero .button-group { display: grid; }
    .service-hero .button { width: 100%; }
    .service-visual .media { aspect-ratio: 1.75; }
    .values-grid > div { padding: .85rem; }
    .process-grid { grid-template-columns: 1fr; gap: 0; }
    .process-grid li { min-height: 0; padding-bottom: 1.8rem; }
    .footer-intro h2 { font-size: 2.6rem; }
    .footer-intro .button { width: 100%; }
    .back-to-top { display: none; }
    .project-story section { grid-template-columns: 1fr; gap: .7rem; padding: 1.5rem; }
    .project-story .story-index { font-size: 2rem; }
}