/* Page-level responsive rules for the two site pages.
   Visual values all come from the design-system tokens; this file only handles
   the breakpoints and the small amount of global page chrome. */
body { margin: 0; }
a { color: inherit; }
/* Full-bleed hero: light Areia field left, photography right, white wedge
   and Copacabana rule at the base of the copy column. */
/* Full-bleed hero: light Areia field left, photography right on a diagonal seam. */
.jc-hero { position: relative; overflow-x: clip; display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; }
.jc-hero-copy { container-type: inline-size; position: relative; z-index: 2; min-width: 0; display: flex; align-items: center; padding: 104px max(4vw, 40px) 24px max(28px, calc((100vw - var(--max-width)) / 2 + 28px)); }
.jc-hero-line { white-space: normal; }
.jc-hero-title { font-size: clamp(28px, 8.8cqw, 48px) !important; line-height: 1.1; text-wrap: balance; }


.jc-hero-media { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 50%; background: var(--charcoal); clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
.jc-hero-media img, .jc-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; filter: contrast(1.18) saturate(1.06); transition: opacity var(--motion-reveal) var(--ease-brand); }
/* WaveSplit content slot: min-width 0 lets the column shrink below its min-content width,
   so headings can never overrun the component's clipped content area. */
.jc-split-copy { min-width: 0; max-width: 100%; display: grid; gap: var(--space-5); justify-items: start; }
.jc-split-copy > * { max-width: 100%; }
.jc-split-copy h3 { overflow-wrap: break-word; }
.jc-seq { display: grid; grid-template-columns: repeat(5, 1fr); border-top: var(--border-hairline) solid var(--line-inverse); }
.jc-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); width: min(100%, 700px); margin: 0 0 0 auto; padding: var(--space-7) 0; list-style: none; }
/* Ruled grid — pitch-marking hairlines. Full-height verticals at the container edges,
   horizontals capping each section, and dividers between cells. Structure, not decoration. */
/* Pitch markings: one pair of verticals pinned to the page gutter, the same width top to
   bottom. Dark bands repeat them in the inverse tone at the identical x so the line reads
   as continuous across every colour field. */
.jc-field, .jc-field-invert { position: relative; }
.jc-field::before, .jc-field::after,
.jc-field-invert::before, .jc-field-invert::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 6; width: 1px; background: var(--line); pointer-events: none; }
.jc-field::before, .jc-field-invert::before { left: max(28px, calc((100% - var(--max-width)) / 2)); }
.jc-field::after, .jc-field-invert::after { right: max(28px, calc((100% - var(--max-width)) / 2)); }
.jc-field-invert::before, .jc-field-invert::after { background: var(--line-inverse); z-index: 7; }
/* The hero keeps only its left rule — the right one would cut across the video. */
.jc-hero.jc-field-invert::after { display: none; }
.jc-capped { position: relative; border-top: var(--border-hairline) solid var(--line); }
.jc-capped-last { border-bottom: var(--border-hairline) solid var(--line); }
.jc-cells { display: grid; border-top: var(--border-hairline) solid var(--line); }
.jc-cells > * { padding: var(--space-7) var(--space-6); border-left: var(--border-hairline) solid var(--line); }
.jc-cells-2 > *:nth-child(odd), .jc-cells-3 > *:nth-child(3n+1), .jc-cells-4 > *:nth-child(4n+1) { border-left: 0; padding-left: 0; }
.jc-cells-2 > *:nth-child(n+3), .jc-cells-3 > *:nth-child(n+4), .jc-cells-4 > *:nth-child(n+5) { border-top: var(--border-hairline) solid var(--line); }
.jc-cells-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jc-cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jc-cells-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .jc-cells-4 { grid-template-columns: 1fr 1fr; }
  .jc-cells-3, .jc-cells-2 { grid-template-columns: 1fr; }
  .jc-cells > * { border-left: 0; border-top: var(--border-hairline) solid var(--line); padding-left: 0; }
  .jc-cells > *:first-child { border-top: 0; }
}
.jc-sechead { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-9); align-items: end; margin-bottom: var(--space-11); }
.jc-sechead p:last-child { max-width: 44ch; }
@media (max-width: 900px) { .jc-sechead { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; margin-bottom: var(--space-9); } }
.jc-trust li { display: grid; gap: 8px; align-content: start; }
.jc-trust-figure { display: block; font-family: var(--font-display); font-size: var(--display-sm); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-display); line-height: 1; }
.jc-trust-label { display: block; margin-top: 4px; font-size: var(--text-2xs); line-height: 1.35; }
@media (max-width: 1215px) {
  .jc-trust { grid-template-columns: 1fr 1fr; width: min(100%, 440px); gap: var(--space-5) var(--space-6); }
  .jc-trust-figure { font-size: var(--display-xs); }
}
.jc-subnav { position: sticky; top: 63px; z-index: 25; background: rgba(242,240,230,.96); backdrop-filter: blur(12px); border-bottom: var(--border-hairline) solid var(--line); }
.jc-subnav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 14px var(--gutter); overflow-x: auto; scrollbar-width: none; }
.jc-subnav-inner::-webkit-scrollbar { display: none; }
.jc-subnav-inner a { flex: 0 0 auto; color: var(--charcoal); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; }
.jc-subnav-inner a:hover { color: var(--copacabana); }
.jc-wa-bubble { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--radius-pill); background: #25D366; color: #fff; box-shadow: 0 2px 6px rgba(17,17,17,.14), 0 10px 28px rgba(17,17,17,.18); transition: transform var(--motion-fast) var(--ease-brand); }
.jc-wa-bubble:hover { transform: translateY(-2px); }
.jc-wa-bubble:active { transform: translateY(2px); }
.jc-itin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: var(--space-9); align-items: start; }
.jc-price-sec { background: transparent !important; padding-inline: 0 !important; }
.jc-price-field { width: min(var(--max-width), calc(100% - 56px)); margin: 0 auto; padding: var(--space-9) var(--space-8); background: var(--copacabana); color: var(--areia); }
@media (max-width: 900px) { .jc-price-field { padding: var(--space-8) var(--space-6); } }
.jc-price-layout { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); gap: var(--space-9); align-items: start; margin-top: var(--space-9); }
.jc-price-panel { position: sticky; top: 128px; }
.jc-price-figure { margin: var(--space-4) 0 0; font-family: var(--font-display); font-size: var(--display-lg); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-display); line-height: 1; }
.jc-price-ctas { display: grid; gap: var(--space-4); justify-items: stretch; margin-top: var(--space-7); }
/* Side by side once the panel column is wide enough to hold both labels on one line. */
@media (min-width: 1120px) {
  .jc-price-ctas { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .jc-price-ctas > a, .jc-price-ctas > button { gap: var(--space-3) !important; padding-inline: 12px !important; font-size: var(--text-2xs) !important; letter-spacing: 0.04em !important; white-space: nowrap; }
}
.jc-price-ctas > a, .jc-price-ctas > button { justify-content: center; width: 100%; }
.jc-price-side { display: grid; gap: var(--space-9); }
.jc-price-incl { display: grid; gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.jc-price-incl li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-5); align-items: start; padding-bottom: var(--space-5); border-bottom: var(--border-hairline) solid rgba(246,243,236,.24); }
.jc-price-incl li:last-child { padding-bottom: 0; border-bottom: 0; }
.jc-price-incl svg { margin-top: 1px; }
.jc-price-incl p:first-child { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.jc-price-incl p:last-child { margin: 4px 0 0; font-size: var(--text-2xs); color: var(--paper-80); }
.jc-price-sched { display: grid; gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.jc-price-sched li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-5); align-items: baseline; }
.jc-price-sched li > div { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.jc-price-sched li > div > p:last-child { margin: 0 !important; }
.jc-price-sched span { font-family: var(--font-display); font-size: var(--display-xs); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-display); line-height: 1; color: var(--sol); }
.jc-price-sched p:first-child { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.jc-price-sched p:last-child { margin: 3px 0 0; font-size: var(--text-2xs); color: var(--paper-80); }
@media (max-width: 900px) {
  .jc-price-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .jc-price-panel { position: static; }
}
.jc-itin-media { display: grid; gap: var(--space-4); align-content: start; position: sticky; top: 128px; animation: jcDayIn var(--motion-reveal) var(--ease-brand) both; }
@keyframes jcDayIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.jc-day-media-inline { display: none; }
.jc-days { border-top: var(--border-hairline) solid var(--line); }
.jc-day { border-bottom: var(--border-hairline) solid var(--line); }
.jc-day-head { display: grid; grid-template-columns: 84px minmax(0, 1fr) 32px; gap: var(--space-6); align-items: center; width: 100%; padding: var(--space-6) 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; }
.jc-day-num { font-family: var(--font-display); font-size: var(--display-sm); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-display); line-height: 1; color: var(--copacabana); }
.jc-day.is-open .jc-day-num { color: var(--charcoal); }
.jc-day-title { display: grid; gap: 6px; }
.jc-day-name { font-family: var(--font-display); font-size: var(--display-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); line-height: 1.15; }
.jc-day-teaser { font-size: var(--text-sm); color: var(--text-muted); max-width: 62ch; }
.jc-day-mark { font-family: var(--font-display); font-size: 26px; font-weight: var(--weight-semibold); text-align: right; color: var(--copacabana); }
.jc-day-body { display: block; padding: 0 0 var(--space-8) 84px; animation: jcDayIn var(--motion-standard) var(--ease-brand) both; }
.jc-day-copy { margin: 0; max-width: 52ch; font-size: var(--text-base); }
.jc-day-list { display: grid; gap: 10px; margin: var(--space-7) 0 0; padding: 0; list-style: none; }
.jc-day-list li { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 10px; padding: 9px 0; border-top: var(--border-hairline) solid var(--line); font-size: var(--text-sm); }
.jc-day-list li svg { color: var(--copacabana); }
@media (max-width: 900px) {
  .jc-itin { grid-template-columns: 1fr; }
  .jc-itin > .jc-itin-media { display: none; }
  .jc-day-media-inline { display: block; margin-top: var(--space-7); }
}
.jc-day-media { display: none; }
@media (max-width: 900px) {
  .jc-day-head { grid-template-columns: 54px minmax(0, 1fr) 24px; gap: var(--space-4); }
  .jc-day-num { font-size: var(--display-xs); }
  .jc-day-body { padding-left: 0; }
}
.jc-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-11); align-items: start; }
.jc-faq-cols { grid-template-columns: 1fr 1.6fr; }
.jc-inquiry-cols { grid-template-columns: 1fr 1.3fr; }
.jc-reel-split { display: grid; grid-template-columns: minmax(300px, 0.62fr) 1fr; gap: var(--space-11); align-items: center; }
.jc-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--border-hairline) solid var(--line); }
/* Gallery marquee: two rows drifting left to right, uncropped items at row height. */
.jc-galm { display: grid; gap: var(--space-4); overflow: hidden; }
.jc-galm-row { overflow: hidden; }
.jc-galm-track { display: flex; align-items: center; width: max-content; animation: jcGalDrift linear infinite; }
@keyframes jcGalDrift { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.jc-galm:hover .jc-galm-track, .jc-galm[data-frozen="true"] .jc-galm-track { animation-play-state: paused; }
.jc-galm-cell { flex: 0 0 auto; margin-right: var(--space-4); padding: 0; border: 0; background: none; cursor: pointer; position: relative; line-height: 0; }
.jc-galm-cell img, .jc-galm-cell video { display: block; width: auto; max-width: none; object-fit: contain; transition: opacity var(--motion-fast) var(--ease-brand); }
.jc-galm-cell.is-sm img, .jc-galm-cell.is-sm video { height: 168px; }
.jc-galm-cell.is-md img, .jc-galm-cell.is-md video { height: 232px; }
.jc-galm-cell.is-lg img, .jc-galm-cell.is-lg video { height: 300px; }
.jc-galm-cell:hover img, .jc-galm-cell:hover video { opacity: 0.86; }
.jc-galm-cell.is-sm .jc-gal-tag { display: none; }
.jc-galm-cell .jc-gal-tag { max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .jc-galm-track { animation: none; } .jc-galm-row { overflow-x: auto; } }
/* Lightbox: full item above, thumbnail rail below. */
.jc-lbx { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: 1fr auto; align-content: center; gap: var(--space-5); padding: 56px 24px 20px; background: rgba(17,17,17,.96); }
.jc-lbx-fig { margin: 0; display: grid; align-content: center; justify-items: center; min-height: 0; }
.jc-lbx-fig img, .jc-lbx-fig video { max-height: 62vh; max-width: min(1080px, 100%); width: auto; object-fit: contain; }
.jc-lbx-fig figcaption { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; width: min(1080px, 100%); margin-top: var(--space-4); color: var(--paper-80); font-size: var(--text-2xs); }
.jc-lbx-cap { color: var(--white); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.jc-lbx-rail { display: flex; gap: 8px; overflow-x: auto; justify-content: flex-start; width: min(1080px, 100%); margin: 0 auto; padding-bottom: 4px; }
.jc-lbx-rail button { flex: 0 0 auto; width: 92px; height: 62px; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0.45; transition: opacity var(--motion-fast) var(--ease-brand); }
.jc-lbx-rail button.is-on { opacity: 1; outline: 2px solid var(--sol); outline-offset: 2px; }
.jc-lbx-rail button:hover { opacity: 0.8; }
.jc-lbx-rail img, .jc-lbx-rail video { width: 100%; height: 100%; object-fit: cover; }
.jc-lbx-close { position: absolute; top: 16px; right: 16px; }
.jc-lbx-nav { position: absolute; left: 16px; right: 16px; top: 46%; display: flex; justify-content: space-between; pointer-events: none; }
.jc-lbx-nav button { pointer-events: auto; }
.jc-lbx-close button, .jc-lbx-nav button { min-width: 44px; min-height: 44px; border: var(--border-control) solid var(--paper-24); border-radius: var(--radius-pill); background: rgba(246,243,236,.08); color: var(--white); font-size: 20px; cursor: pointer; }
.jc-gal-tag { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--overlay-caption); color: var(--white); font-size: var(--text-3xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.jc-opp-grid { grid-template-columns: 1.1fr 1fr auto; }
.jc-opp-inline { position: relative; z-index: 5; display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--space-5); align-items: stretch; width: 100%; max-width: 460px; margin: var(--space-5) 0 -100px; padding: var(--space-4); background: var(--white); border-top: var(--border-mark) solid var(--sol); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.jc-opp-thumb { width: 148px; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
@media (max-width: 480px) { .jc-opp-inline { grid-template-columns: 1fr; } .jc-opp-thumb { width: 100%; height: 140px; } }
.jc-cred { display: flex; flex-wrap: wrap; gap: var(--space-7) var(--space-8); }
.jc-cred-label { margin: 0 0 10px; font-size: var(--text-3xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); }
.jc-crests { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.jc-crests img { width: auto; object-fit: contain; }
.jc-mobile-nav { display: none; }

@media (max-width: 1080px) {
  .jc-cols-2 { grid-template-columns: 1fr; gap: var(--space-9); }
  .jc-faq-cols, .jc-inquiry-cols { grid-template-columns: 1fr; }
  .jc-reel-split { grid-template-columns: 1fr; gap: var(--space-9); }
  .jc-reel-stage { width: 100%; max-width: 420px; margin-inline: auto; }
  .jc-cols-4 { grid-template-columns: 1fr 1fr; }
  .jc-seq { grid-template-columns: 1fr 1fr; }
  .jc-opp-grid { grid-template-columns: 1fr auto; gap: var(--space-7) !important; }
}
@media (max-width: 980px) {
  .jc-nav { display: none !important; }
  .jc-back { display: none !important; }
  .jc-mobile-nav { display: block; }
  .jc-head { display: none !important; }
  .jc-subnav { display: none; }
}
@media (max-width: 760px) {
  body { padding-bottom: 74px; }
  .jc-wa-bubble { right: 14px; bottom: 92px; width: 52px; height: 52px; }
  .jc-hero { grid-template-columns: 1fr; min-height: 0; }
  .jc-hero-copy { padding: 116px var(--gutter-mobile) 96px; }
  .jc-hero-media { position: relative; z-index: 0; width: 100%; clip-path: none; min-height: 340px; }
  h1 { font-size: var(--display-xl-m) !important; }
  .jc-d2xl { font-size: var(--display-2xl-m) !important; }
  .jc-dxl { font-size: var(--display-xl-m) !important; }
  .jc-dlg { font-size: var(--display-lg-m) !important; }
  .jc-seq { grid-template-columns: 1fr; }
  .jc-galm-cell.is-sm img, .jc-galm-cell.is-sm video { height: 132px; }
  .jc-galm-cell.is-md img, .jc-galm-cell.is-md video { height: 176px; }
  .jc-galm-cell.is-lg img, .jc-galm-cell.is-lg video { height: 220px; }
  .jc-trust { grid-template-columns: 1fr 1fr; width: 100%; }
  .jc-opp-inline { margin-bottom: 0; }
  .jc-opp:not(.jc-opp-inline) { margin: 0 !important; width: 100% !important; }
  .jc-opp-grid { grid-template-columns: 1fr !important; border-radius: 0 !important; padding: var(--space-6) var(--gutter-mobile) !important; }
  .jc-sticky { display: flex !important; }
  .jc-section, .jc-bleed { padding-top: var(--section-y-mobile) !important; padding-bottom: var(--section-y-mobile) !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
body.motion-off *, body.motion-off *::before, body.motion-off *::after { animation: none !important; transition: none !important; }

/* Squared corners: with the ruled field system every surface is a rectangle. Controls keep
   their pill radius — buttons, tags and chips are the only rounded things in the system. */
img, video, figure, figure > div, .jc-opp-thumb, .jc-opp-inline, .jc-galm-cell,
.jc-cells figure, .jc-cells figure > div { border-radius: 0 !important; }

.jc-programs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 720px) { .jc-programs-2 { grid-template-columns: 1fr; gap: var(--space-10); } }

.jc-program-card { display: grid; gap: var(--space-6); align-content: start; }

.jc-program-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-6); }
.jc-program-meta li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--copacabana); }
#programs { position: relative; }

/* Band colour is inset to the vertical rules rather than bleeding to the viewport edge. */
.jc-band-inset { background-image: linear-gradient(var(--band-color, var(--tropical)), var(--band-color, var(--tropical))); background-repeat: no-repeat; background-position: center top; background-size: calc(100% - 2 * max(28px, (100% - var(--max-width)) / 2)) 100%; }
.jc-band-ink { --band-color: var(--charcoal); }
.jc-meta-paper li { color: var(--areia); }
.jc-cta-row > * { flex: 0 0 auto; }
/* Every DS button centres its label + arrow: the component sets space-between inline. */
a[style*="space-between"], button[style*="space-between"] { justify-content: center !important; }
/* Hero pair stays on one line: labels never wrap, letterspacing tightens as the column narrows. */
.jc-cta-row--hero { flex-wrap: nowrap !important; align-self: stretch; }
.jc-cta-row--hero > * { flex: 1 1 0; justify-content: center !important; gap: var(--space-4) !important; padding-inline: 14px !important; }
@container (max-width: 620px) { .jc-cta-row--hero > * { letter-spacing: 0.04em !important; padding-left: 14px !important; } }
@media (max-width: 720px) { .jc-cta-row { flex-wrap: wrap !important; } }
.jc-band-blue { --band-color: var(--copacabana); }
.jc-tour-collage { display: grid; grid-template-columns: 1fr 22%; gap: var(--space-4); align-items: start; }
.jc-tour-collage-side { display: grid; gap: var(--space-4); margin-top: -44px; }
@media (max-width: 720px) { .jc-tour-collage { grid-template-columns: 1fr; } .jc-tour-collage-side { grid-template-columns: 1fr 1fr 1fr; margin-top: 0; } }
.jc-julio-center { text-align: center; }
.jc-julio-timeline { list-style: none; margin: var(--space-9) 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-6); }
.jc-julio-timeline li { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: var(--border-hairline) solid var(--line); }
.jc-julio-when { font-family: var(--font-display); font-size: var(--display-xs); font-weight: var(--weight-semibold); }
.jc-julio-video { margin: var(--space-9) calc(-1 * var(--grow, 0px)) 0; }

.jc-julio-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--charcoal); }
@media (max-width: 900px) { .jc-julio-timeline { grid-auto-flow: row; } }
.jc-julio-video { position: relative; transform: scale(calc(0.62 + 0.38 * var(--p, 0))); transform-origin: center top; will-change: transform; }
.jc-julio-video-controls { position: absolute; left: 50%; bottom: var(--space-5); transform: translateX(-50%); display: flex; gap: var(--space-3); }
.jc-julio-video-controls button { font: inherit; font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--areia); background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.jc-julio-video-controls button:hover { background: rgba(0,0,0,.75); }

/* tour voices marquee */
.jc-voices { overflow: hidden; margin-top: var(--space-7); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.jc-voices-track { display: flex; gap: var(--space-6); width: max-content; animation: jcVoicesRun 84s linear infinite; }
.jc-voices:hover .jc-voices-track, .jc-voices:focus-within .jc-voices-track { animation-play-state: paused; }
@keyframes jcVoicesRun { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.jc-voice { width: 268px; flex: 0 0 auto; display: grid; gap: var(--space-4); align-content: start; }
.jc-voice-stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--charcoal); border-radius: var(--radius-sm); }
.jc-voice-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.jc-voice-btn { position: absolute; inset: auto auto 12px 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: var(--radius-pill); background: rgba(17,17,17,.78); color: var(--areia); font-family: inherit; font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; transition: background var(--motion-fast) var(--ease-brand); }
.jc-voice-btn:hover { background: var(--copacabana); }
.jc-voice-btn i { display: block; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.jc-voice-btn.is-on i { width: 8px; height: 10px; border-width: 0 3px; border-color: currentColor; }
.jc-voice-quote { margin: 0; font-size: var(--text-sm); line-height: 1.5; text-wrap: pretty; }
.jc-voice-name { margin: 0; font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.jc-voices-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6); margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--border-hairline) solid var(--line); }
@media (max-width: 760px) { .jc-voice { width: 220px; } }

/* upcoming local programs — copy block over image, cards butted with hairline separation */
.jc-upcoming { width: calc(100% + var(--space-6) * 2); margin-inline: calc(var(--space-6) * -1); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; border-top: var(--border-hairline) solid var(--line); }
.jc-up-card:first-child { border-left: var(--border-hairline) solid var(--line); }
.jc-up-card { display: grid; grid-template-rows: 1fr auto; background: var(--white); border-right: var(--border-hairline) solid var(--line); border-bottom: var(--border-hairline) solid var(--line); }
.jc-up-copy { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-4); justify-items: start; padding: var(--space-7); }
.jc-up-copy > a, .jc-up-copy > button { align-self: end; margin-top: var(--space-3); }
.jc-up-status { margin: 0; font-size: var(--text-3xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--copacabana); }
.jc-up-media { position: relative; }
.jc-up-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.jc-up-badge { position: absolute; top: 0; right: 0; width: 100px; height: 100px; clip-path: polygon(0 0, 100% 0, 100% 100%); background: oklch(0.52 0.19 27); color: var(--white); font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.jc-up-badge i { position: absolute; top: 0; right: 0; width: 100px; text-align: center; font-size: 13px; letter-spacing: 0.03em; transform: translate(17px, 24px) rotate(45deg); font-style: normal; transform-origin: center; }
.jc-up-foot { display: flex; justify-content: flex-start; margin-top: var(--space-8); }
@media (max-width: 980px) { .jc-upcoming { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .jc-upcoming { grid-template-columns: 1fr; } }

/* programs — copy left, program accordion right */
.jc-prog-split { display: grid; grid-template-columns: calc(39% - 90px) minmax(0, 1fr); gap: 0; align-items: stretch; }
.jc-prog-intro { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; align-self: stretch; padding: var(--space-6) var(--space-9) var(--space-6) 0; }
.jc-prog-tracks { margin-right: calc(var(--space-6) * -1); border-left: var(--border-hairline) solid var(--line); }
.jc-prog-track + .jc-prog-track { border-top: var(--border-hairline) solid var(--line); }
.jc-prog-tab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); width: 100%; padding: var(--space-7) calc(var(--space-6) * 2) var(--space-7) var(--space-6); border: 0; background: none; cursor: pointer; text-align: left; font-family: var(--font-display); font-size: var(--display-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); line-height: 1.15; color: var(--text-muted); transition: color var(--motion-fast) var(--ease-brand); }
.jc-prog-tab:hover { color: var(--copacabana); }
.jc-prog-track.is-open .jc-prog-tab { color: var(--charcoal); padding-bottom: var(--space-5); }
.jc-prog-sign { font-size: 24px; line-height: 1; color: var(--copacabana); }
.jc-prog-panel { padding-inline: var(--space-6) calc(var(--space-6) * 2); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: var(--space-7); align-items: start; padding-bottom: var(--space-8); animation: jcDayIn var(--motion-reveal) var(--ease-brand) both; }
.jc-prog-panel-copy { display: grid; gap: var(--space-5); justify-items: start; }
.jc-prog-heading { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.jc-prog-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jc-prog-list li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; font-size: var(--text-sm); }
.jc-prog-list svg { margin-top: 3px; color: var(--copacabana); }
.jc-prog-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); }
@media (max-width: 1080px) {
  .jc-prog-split { grid-template-columns: 1fr; gap: var(--space-9); }
  .jc-prog-intro { padding-right: 0; }
  .jc-prog-tracks { border-left: 0; }
  .jc-prog-tab, .jc-prog-panel { padding-inline: var(--space-6) calc(var(--space-6) * 2); }

}
@media (max-width: 700px) {
  .jc-prog-panel { grid-template-columns: 1fr; }
  .jc-prog-img { aspect-ratio: 3 / 2; }
  .jc-prog-tab { font-size: var(--display-md-m); }
}

.jc-tour-band { position: relative; z-index: 2; width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.jc-tour-band .jc-tour-collage { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.jc-tour-collage-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.jc-tour-tags { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-2); }
.jc-tour-notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-7); }
@media (max-width: 760px) { .jc-tour-notes { grid-template-columns: 1fr; } }

/* Camp date chips. Sun Yellow is the standard chip; the urgent tone is a warm red
   derived from the palette for departures that are close. */
.jc-up-dates { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jc-up-dates li { padding: 5px 12px; border-radius: var(--radius-pill); background: var(--sol); color: var(--charcoal); font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.jc-up-dates.is-urgent li { background: oklch(0.52 0.19 27); color: var(--areia); }
.jc-up-note { margin: 0; font-size: var(--text-3xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: oklch(0.52 0.19 27); }

/* Session rhythm — the closing row of the approach argument. */
.jc-rhythm { margin-top: var(--space-11); padding-top: var(--space-8); border-top: var(--border-hairline) solid var(--line); }
.jc-seq-light { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 0; }
.jc-seq-light li { padding: 0 var(--space-5) 0 0; border-right: var(--border-hairline) solid var(--line); }
.jc-seq-light li:last-child { border-right: 0; }
.jc-seq-light li + li { padding-left: var(--space-5); }
@media (max-width: 900px) { .jc-seq-light { grid-template-columns: 1fr 1fr; gap: var(--space-7); } .jc-seq-light li, .jc-seq-light li + li { padding: 0; border-right: 0; } }

/* College callout — inset note inside the coaches section. */
.jc-college { display: grid; gap: var(--space-4); justify-items: start; padding: var(--space-7); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); }

/* Approach principles — ruled cards, image over copy, butted to the page rules. */
.jc-principles { width: calc(100% + var(--space-6) * 2); margin-inline: calc(var(--space-6) * -1); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--border-hairline) solid var(--line); }
.jc-principle { display: grid; grid-template-rows: auto 1fr; background: var(--white); border-right: var(--border-hairline) solid var(--line); border-bottom: var(--border-hairline) solid var(--line); }
.jc-principle:first-child { border-left: var(--border-hairline) solid var(--line); }
.jc-principle img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.jc-principle-copy { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); }
.jc-principle-num { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: 18px; color: var(--copacabana); }
@media (max-width: 980px) { .jc-principles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .jc-principles { grid-template-columns: 1fr; } }

/* Session rhythm — one lead card with an image, four ruled cards beside it. */
.jc-rhythm-grid { width: calc(100% + var(--space-6) * 2); margin: var(--space-7) 0 0 calc(var(--space-6) * -1); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--border-hairline) solid var(--line); }
.jc-rhythm-grid li { display: grid; grid-template-rows: auto 1fr; background: var(--white); border-right: var(--border-hairline) solid var(--line); border-bottom: var(--border-hairline) solid var(--line); }
.jc-rhythm-grid li:first-child { border-left: var(--border-hairline) solid var(--line); }
.jc-rhythm-lead { grid-column: span 2; grid-row: span 2; }
.jc-rhythm-lead img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.jc-rhythm-copy { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); }
@media (max-width: 980px) { .jc-rhythm-grid { grid-template-columns: 1fr 1fr; } .jc-rhythm-lead { grid-column: span 2; grid-row: auto; } .jc-rhythm-lead img { height: auto; aspect-ratio: 16 / 9; } }
@media (max-width: 620px) { .jc-rhythm-grid { grid-template-columns: 1fr; } .jc-rhythm-lead { grid-column: auto; } }

/* Meet Julio — parent translation beside the pull quote, then the video stage.
   The ball marker follows the pointer over the stage and acts as the play affordance. */
.jc-julio-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--space-9); align-items: start; margin-top: var(--space-9); padding-top: var(--space-8); border-top: var(--border-hairline) solid var(--line); }
@media (max-width: 900px) { .jc-julio-split { grid-template-columns: 1fr; gap: var(--space-6); } }
.jc-julio-stage { position: relative; margin-top: var(--space-9); overflow: hidden; border-radius: var(--radius); background: var(--charcoal); cursor: none; }
.jc-julio-stage video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.jc-ball-cursor { position: absolute; left: var(--bx, 50%); top: var(--by, 50%); display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--radius-pill); background: rgba(17,17,17,.78); color: var(--areia); transform: translate(-50%, -50%); opacity: 0; transition: opacity var(--motion-fast) var(--ease-brand); pointer-events: none; }
.jc-julio-stage:hover .jc-ball-cursor { opacity: 1; }
.jc-ball-cursor em { font-style: normal; font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.jc-julio-toggle { position: absolute; left: var(--space-5); bottom: var(--space-5); padding: 9px 16px; border: 0; border-radius: var(--radius-pill); background: rgba(17,17,17,.78); color: var(--areia); font-family: inherit; font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-label); cursor: pointer; }
.jc-julio-toggle:hover { background: var(--copacabana); }
.jc-julio-stage:not(.is-started) .jc-julio-toggle { opacity: 0; }
@media (hover: none) { .jc-julio-stage { cursor: pointer; } .jc-ball-cursor { display: none; } .jc-julio-stage:not(.is-started) .jc-julio-toggle { opacity: 1; } }

.jc-rhythm-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-7); margin: var(--space-7) 0 0; padding: 0; list-style: none; }
.jc-rhythm-row li { display: grid; gap: var(--space-4); align-content: start; justify-items: start; }
.jc-rhythm-row svg { color: var(--copacabana); }
@media (max-width: 900px) { .jc-rhythm-row { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

/* Meet Julio cycle — timeline tabs advance on a loop and swap the photograph.
   The copy beside it is fixed; only the image and the active tab change. */
.jc-cycle { margin-top: var(--space-9); }
.jc-cycle-body { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-9); align-items: center; margin-top: var(--space-8); min-height: 520px; }
.jc-cycle-copy { display: grid; gap: var(--space-6); align-content: center; }
/* Archive collage — photographs keep their own aspect ratio; the second print overlaps
   the first rather than being cropped to a common frame. */
.jc-cycle-media { position: relative; display: grid; align-content: center; height: 520px; margin: 0; animation: jcDayIn var(--motion-reveal) var(--ease-brand) both; }
.jc-cycle-media img { display: block; width: 100%; max-height: 440px; height: auto; object-fit: contain; object-position: left center; border-radius: var(--radius-sm); }
.jc-cycle-media.is-collage .jc-shot-a { width: 74%; max-height: 400px; }
.jc-cycle-media.is-collage .jc-shot-b { position: absolute; right: 0; bottom: var(--space-7); width: 38%; max-height: 300px; border: 6px solid var(--white); box-shadow: var(--shadow-card); }
.jc-cycle-media figcaption { position: absolute; left: 0; bottom: 0; }
@media (max-width: 620px) { .jc-cycle-media.is-collage .jc-shot-a { width: 82%; } .jc-cycle-media.is-collage .jc-shot-b { width: 44%; } }
.jc-cycle-media figcaption { margin-top: var(--space-4); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); }
@media (max-width: 900px) {
  .jc-cycle-tabs { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .jc-cycle-body { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* The work, up close — testimonial carousel on a charcoal field. */
.jc-voices-band { position: relative; }
.jc-story { width: calc(100% + var(--space-6) * 2); margin-inline: calc(var(--space-6) * -1); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-rows: 460px; background: var(--white); color: var(--charcoal); overflow: hidden; }
.jc-story-copy { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-8); padding: var(--space-8) var(--space-8) var(--space-8) calc(var(--space-8) + var(--space-6)); min-height: 0; overflow: hidden; }
.jc-story-years { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--copacabana); }
.jc-story-quote { margin: 0; font-family: var(--font-display); font-size: var(--display-sm); font-weight: var(--weight-bold); line-height: 1.25; letter-spacing: var(--tracking-display); text-wrap: pretty; align-self: center; }
.jc-story-img { display: block; width: 100%; height: 100%; object-fit: cover; animation: jcDayIn var(--motion-reveal) var(--ease-brand) both; }
.jc-story-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-6); }
.jc-story-rules { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-6); flex: 1 1 320px; margin: 0; padding: 0; list-style: none; }
.jc-story-rules button { display: block; width: 100%; padding: 0; height: 4px; border: 0; background: rgba(246,243,236,.24); cursor: pointer; overflow: hidden; }
.jc-story-rules i { display: block; height: 100%; background: var(--fill, var(--sol)); transform: scaleX(0); transform-origin: left; }
.jc-story-rules li:nth-child(1) { --fill: var(--copacabana); }
.jc-story-rules li:nth-child(2) { --fill: var(--sol); }
.jc-story-rules li:nth-child(3) { --fill: var(--green); }
.jc-story-rules li:nth-child(4) { --fill: #ffffff; }
.jc-story-rules li.is-done i { transform: scaleX(1); }
.jc-story-rules .is-active i { animation: jcCycleFill 7s linear forwards; }
@keyframes jcCycleFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.jc-story-controls { display: flex; gap: var(--space-3); }
.jc-story-controls button { width: 38px; height: 38px; border: var(--border-hairline) solid rgba(246,243,236,.4); border-radius: var(--radius-pill); background: none; color: var(--areia); font-size: var(--text-xs); cursor: pointer; transition: background var(--motion-fast) var(--ease-brand); }
.jc-story-controls button:hover { background: var(--copacabana); border-color: var(--copacabana); }
@media (max-width: 860px) { .jc-story { grid-template-columns: 1fr; grid-template-rows: auto auto; } .jc-story-img { aspect-ratio: 3 / 2; height: auto; } }

/* Timeline rail — one continuous hairline under the content, a tick and label per era. */
.jc-cycle-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; width: calc(100% + var(--space-6) * 2); margin: var(--space-11) 0 0 calc(var(--space-6) * -1); padding: 0; list-style: none; border-bottom: var(--border-hairline) solid var(--line); }
.jc-cycle-rail button { display: grid; gap: var(--space-5); width: 100%; padding: 0; border: 0; background: none; font-family: inherit; text-align: center; color: var(--text-muted); cursor: pointer; transition: color var(--motion-fast) var(--ease-brand); }
.jc-cycle-rail button:hover { color: var(--copacabana); }
.jc-cycle-rail .is-active button { color: var(--copacabana); }
.jc-cycle-when { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-semibold); }
.jc-cycle-tick { position: relative; display: block; height: 2px; margin-bottom: -1px; background: transparent; overflow: hidden; }
.jc-cycle-tick i { position: absolute; inset: 0; display: block; background: var(--copacabana); transform: scaleX(0); transform-origin: left; }
.jc-cycle-rail .is-active .jc-cycle-tick { background: color-mix(in oklab, var(--copacabana) 28%, transparent); }
.jc-cycle-rail .is-active .jc-cycle-tick i { animation: jcCycleFill 5.2s linear forwards; }
@media (max-width: 900px) { .jc-cycle-rail { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--space-5); border-bottom: 0; } .jc-cycle-rail button { text-align: left; gap: var(--space-3); } }
/* Julio video — pause at bottom left, sound at bottom right. */
.jc-vid-btn { position: absolute; bottom: var(--space-5); padding: 9px 16px; border: var(--border-hairline) solid rgba(246,243,236,.4); border-radius: var(--radius-pill); background: rgba(17,17,17,.6); color: var(--areia); font-family: inherit; font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-label); cursor: pointer; }
.jc-vid-btn:hover { background: var(--copacabana); border-color: var(--copacabana); }
.jc-vid-btn.is-left { left: var(--space-5); }
.jc-vid-btn.is-right { right: var(--space-5); }

/* Homepage FAQ — reuses the programs split; questions are quieter than program tabs. */
.jc-faq-tab { font-size: var(--text-lg); padding-block: var(--space-6); }
.jc-prog-track.is-open .jc-faq-tab { padding-bottom: var(--space-4); }
.jc-faq-answer { margin: 0 0 var(--space-6); padding-inline: var(--space-6) calc(var(--space-6) * 2); max-width: 76ch; font-size: var(--text-sm); text-wrap: pretty; animation: jcDayIn var(--motion-standard) var(--ease-brand) both; }

/* Inquiry form — label sits inside the field box, required marked with an asterisk. */
.jc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.jc-fld { display: grid; gap: 4px; padding: 10px 14px 8px; border: var(--border-control) solid var(--line); border-radius: var(--radius-sm); background: var(--white); transition: border-color var(--motion-fast) var(--ease-brand); }
.jc-fld:focus-within { border-color: var(--copacabana); }
.jc-fld-wide { grid-column: 1 / -1; }
.jc-fld > span { font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--text-muted); }
.jc-fld > span b { color: oklch(0.52 0.19 27); }
.jc-fld input, .jc-fld select, .jc-fld textarea { width: 100%; padding: 0; border: 0; background: none; font-family: inherit; font-size: var(--text-sm); color: var(--charcoal); resize: vertical; }
.jc-fld input:focus, .jc-fld select:focus, .jc-fld textarea:focus { outline: none; }
.jc-fld em { font-size: var(--text-2xs); font-style: normal; font-weight: var(--weight-semibold); color: oklch(0.52 0.19 27); }
@media (max-width: 620px) { .jc-form-grid { grid-template-columns: 1fr; } }

/* Language picker */
.jc-lang { position: relative; }
.jc-lang-btn { display: flex; align-items: center; gap: 7px; padding: 6px 4px; border: 0; border-radius: var(--radius-pill); background: none; color: inherit; cursor: pointer; opacity: .85; transition: opacity var(--motion-fast) var(--ease-brand); }
.jc-lang-btn:hover { opacity: 1; }
.jc-lang-caret { font-size: 8px; line-height: 1; }
.jc-lang-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; display: grid; min-width: 190px; margin: 0; padding: 8px; list-style: none; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.jc-lang-menu button { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: none; font-family: inherit; font-size: var(--text-sm); color: var(--charcoal); text-align: left; cursor: pointer; }
.jc-lang-menu button:hover { background: var(--areia-warm); }
.jc-lang-menu em { font-style: normal; color: var(--tropical); font-weight: var(--weight-bold); }

.jc-tour-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin: var(--space-7) 0 0; padding: 0; list-style: none; font-size: var(--text-3xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.jc-tour-facts li { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-pill); background: rgba(255,255,255,.14); }
.jc-tour-facts svg { flex: none; }
.jc-btn-on-blue a, .jc-btn-on-blue button { background: var(--white) !important; color: var(--copacabana) !important; border-color: var(--white) !important; }
.jc-btn-on-blue a:hover, .jc-btn-on-blue button:hover { background: var(--areia) !important; color: var(--copacabana-deep) !important; }
.jc-btn-on-dark a, .jc-btn-on-dark button { background: var(--white) !important; color: var(--copacabana) !important; border-color: var(--white) !important; }
.jc-btn-on-dark a:hover, .jc-btn-on-dark button:hover { background: var(--areia) !important; color: var(--copacabana-deep) !important; }
.jc-tour-crests { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: 12px; }
.jc-tour-crests img { display: block; height: 34px; width: auto; }

/* Closing footer: full-bleed black, players-outline artwork, content at page max width. */
.jc-footer{position:relative;background:#000;color:var(--areia);padding:var(--space-9) max(28px,calc((100% - var(--max-width)) / 2)) var(--space-7);overflow:hidden}
.jc-footer::before{content:"";position:absolute;inset:0;background:url("/jc-soccer-camp/assets/brand/footer-football-linework.png") no-repeat right center;background-size:auto 118%;opacity:.55;pointer-events:none}
.jc-footer-inner{position:relative;z-index:1;max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8);align-items:start}
.jc-footer-tagline{margin:0 0 var(--space-4);max-width:22ch;font-family:var(--font-display);font-size:var(--display-sm);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);line-height:1.12;color:#fff}
.jc-footer-tagline{color:#fff}
.jc-footer-lockups{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.jc-footer-logo{display:flex}
.jc-footer-hair{margin:0 0 var(--space-7);font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--paper-80);line-height:1.4}
.jc-footer-crest{display:flex;padding-left:var(--space-5);border-left:var(--border-hairline) solid rgba(255,255,255,.28)}
.jc-footer-crest img{height:76px;width:auto;display:block}
.jc-footer-mark{margin-top:var(--space-9);display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start}
.jc-footer-social{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-2xs);color:var(--paper-80)}
.jc-footer-social a{color:#fff;text-decoration:none}
.jc-footer-social a:hover{color:var(--sol)}
.jc-footer-nav{display:flex;flex-direction:column;gap:var(--space-4);min-width:180px}
.jc-footer-navhead{margin:0 0 var(--space-3);font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--paper-80)}
.jc-footer-nav a{color:#fff;text-decoration:none;font-size:var(--text-sm);font-weight:var(--weight-medium)}
.jc-footer-nav a:hover{color:var(--sol)}
.jc-footer-note{position:relative;z-index:1;max-width:var(--max-width);margin:var(--space-8) auto 0;padding-top:var(--space-5);border-top:var(--border-hairline) solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:var(--space-5);justify-content:space-between;font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--paper-80)}
.jc-footer-note a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.jc-footer-note a:hover{color:var(--sol)}
@media (max-width:760px){.jc-footer::before{background-size:auto 60%;background-position:right bottom;opacity:.4}.jc-footer-inner{grid-template-columns:1fr}.jc-footer-tagline{color:#fff}
.jc-footer-lockups{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.jc-footer-logo{display:flex}
.jc-footer-hair{margin:0 0 var(--space-7);font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--paper-80);line-height:1.4}
.jc-footer-crest{display:flex;padding-left:var(--space-5);border-left:var(--border-hairline) solid rgba(255,255,255,.28)}
.jc-footer-crest img{height:76px;width:auto;display:block}
.jc-footer-mark{margin-top:var(--space-7)}}

/* Brazil Tours nav feature: crest badge plus emphasised label. */
.jc-nav-feature{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display)}
.jc-nav-feature img{height:26px;width:auto;display:block}
.jc-nav-feature span{border-bottom:2px solid transparent;padding-bottom:2px}
.jc-nav-feature:hover span{border-bottom-color:var(--copacabana)}
.jc-footer-feature{display:flex;align-items:center;gap:8px;margin-top:var(--space-3);color:#fff;text-decoration:none;font-size:var(--text-sm);font-weight:var(--weight-bold)}
.jc-footer-feature img{height:30px;width:auto;display:block}
.jc-footer-feature span{border-bottom:2px solid var(--sol);padding-bottom:2px}

/* 04 / For coaches — heading stacks in the left column, collage on the right. */
.jc-coach-title{margin:0;font-family:var(--font-display);font-size:var(--display-md);font-weight:var(--weight-bold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);max-width:24ch;text-wrap:pretty}
.jc-coach-note{margin:var(--space-5) 0 0;font-size:var(--text-base);max-width:52ch;text-wrap:pretty}
.jc-coach-collage{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-content:start}
.jc-coach-collage img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.jc-coach-collage .jc-coach-wide{grid-column:1 / -1;aspect-ratio:16 / 9}
.jc-coach-collage img:not(.jc-coach-wide){aspect-ratio:1 / 1}
@media (max-width:900px){.jc-coach-collage{gap:var(--space-3)}}

/* Flagship band: collage first, copy second. */
.jc-tour-band .jc-tour-collage{order:-1}

/* Programs accordion auto-advance: progress rule along the open tab. */
.jc-prog-track{position:relative}
.jc-prog-progress{position:absolute;left:0;right:0;top:0;height:3px;background:transparent;overflow:hidden}
.jc-prog-progress i{display:block;height:100%;background:var(--copacabana);transform:scaleX(0);transform-origin:left;animation:jcCycleFill 9s linear forwards}
body.motion-off .jc-prog-progress i{animation:none;transform:scaleX(1)}

/* 01 / Who it is for — fit note beneath the three cards. */
.jc-fit-note{margin:var(--space-8) 0 0;padding-top:var(--space-6);border-top:var(--border-hairline) solid var(--line);max-width:70ch;font-size:var(--text-sm);color:var(--text-muted);text-wrap:pretty}

/* At-a-glance strip: smaller figures, held to the page max width. */
.jc-proof{background:var(--copacabana)}
.jc-proof > div{max-width:var(--max-width);margin:0 auto}
.jc-proof > div > div{padding:var(--space-6) var(--space-7)}
.jc-proof > div > div > p:first-child{font-size:var(--display-sm) !important}
.jc-proof > div > div > p + p{font-size:var(--text-3xs) !important}
@media (max-width:760px){.jc-proof > div{grid-template-columns:1fr 1fr !important}}

/* 03 / What comes home with them — timed tab rail beside a fixed-height image, all inside the page max width. */
.jc-gains-sec{background:var(--white);padding-inline:var(--gutter)}
.jc-gains-wrap{max-width:var(--max-width);margin:0 auto}
.jc-gains-head{padding:var(--section-y) 24px var(--space-8);border-bottom:var(--border-hairline) solid var(--line)}
.jc-gains{display:grid;grid-template-columns:34% minmax(0,1fr);height:620px}
.jc-gains-rail{display:flex;flex-direction:column;min-width:0;border-right:var(--border-hairline) solid var(--line)}
.jc-gn-row{position:relative;min-width:0;background:var(--areia-warm);border-bottom:var(--border-hairline) solid var(--line)}
.jc-gn-row.is-open{flex:1;display:flex;flex-direction:column;justify-content:space-between;background:var(--white)}
.jc-gn-body{margin:0;padding:var(--space-7) var(--space-7) 0 24px;font-size:var(--text-sm);text-wrap:pretty}
.jc-gn-tab{display:flex;align-items:center;gap:10px;width:100%;padding:var(--space-6) var(--space-7) var(--space-6) 24px;border:0;background:none;text-align:left;cursor:pointer;font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);color:var(--text-muted);transition:color var(--motion-fast) var(--ease-brand)}
.jc-gn-row.is-open .jc-gn-tab{color:var(--charcoal)}
.jc-gn-tab:hover{color:var(--charcoal)}
.jc-gn-dot{width:9px;height:9px;background:var(--copacabana);flex:none}
.jc-gn-progress{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden}
.jc-gn-progress i{display:block;height:100%;background:var(--copacabana);transform:scaleX(0);transform-origin:left;animation:jcCycleFill 9s linear forwards}
body.motion-off .jc-gn-progress i{animation:none;transform:scaleX(1)}
.jc-gains-media{position:relative;min-width:0;background:var(--areia-warm)}
.jc-gains-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--motion-reveal) var(--ease-brand)}
.jc-gains-note{margin:0;padding:var(--space-7) 24px var(--section-y);max-width:none;font-size:var(--text-sm);color:var(--text-muted);text-wrap:pretty}
@media (max-width:900px){.jc-gains{grid-template-columns:1fr;height:auto}.jc-gains-rail{border-right:0}.jc-gn-row.is-open{flex:none}.jc-gains-media{min-height:320px;height:320px}.jc-gains-head{padding-top:var(--section-y-mobile)}.jc-gains-note{padding-bottom:var(--section-y-mobile)}}

/* Coaches, teams and college programs — blue CTA band with linked team points. */
.jc-team-points{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:var(--border-hairline) solid var(--line-inverse)}
.jc-team-points > li{border-bottom:var(--border-hairline) solid var(--line-inverse)}
.jc-team-points a{display:block;padding:var(--space-6) 0;color:inherit;text-decoration:none}
.jc-team-points a:hover .jc-team-title{color:var(--sol)}
.jc-team-title{margin:0;font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);transition:color var(--motion-fast) var(--ease-brand)}
.jc-team-body{margin:6px 0 0;font-size:var(--text-sm);color:var(--paper-80)}
.jc-team-note{padding:var(--space-6) 0 0;border-bottom:0 !important;font-size:var(--text-2xs);color:var(--paper-80);text-wrap:pretty}

/* 07 / Led by Julio — centred header inside the page rules, media pair below. */
.jc-julio-head{max-width:78ch;margin:0 auto;text-align:center}
.jc-julio-head h2{max-width:38ch;margin-inline:auto}
.jc-julio-body{display:grid;grid-template-columns:minmax(0,1080px);justify-content:center;margin-top:var(--space-9)}
.jc-julio-collage{display:grid;grid-template-columns:0.8fr 1.15fr 0.8fr;gap:var(--space-4);align-items:start}
.jc-julio-collage-mid{display:grid;gap:var(--space-4)}
@media (max-width:900px){.jc-julio-body{grid-template-columns:1fr}.jc-julio-collage{grid-template-columns:1fr 1fr}.jc-julio-collage-mid{grid-column:1 / -1}}

/* WhatsApp bubble tooltip. */
.jc-wa-bubble{position:fixed}
.jc-wa-bubble::after{content:attr(data-tip);position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);padding:7px 12px;border-radius:var(--radius-pill);background:var(--overlay-caption);color:var(--white);font-size:var(--text-3xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-label);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--motion-fast) var(--ease-brand)}
.jc-wa-bubble:hover::after,.jc-wa-bubble:focus-visible::after{opacity:1}
@media (max-width:760px){.jc-wa-bubble::after{display:none}}