/* =============================================================================
   Services hub (template-services-hub.php), body.ca-svc-hub. A bento index of the five areas of
   practice plus the proof tile. Same language as home.css and tour.css; the frame (header, footer,
   Jost 500/600, tokens --ui-*) comes from ui.css. House tokens only.
   Modern parts all degrade to a plain grid: container queries turn a tile sideways when it is wide
   enough, scroll-driven reveal runs only where supported and motion is welcome, :has() quiets the
   other tiles while one is hovered, view-transition-name hints a cross-page morph.
   ============================================================================= */
body.ca-svc-hub { background: var(--ui-bg); }
html:has(body.ca-svc-hub), body.ca-svc-hub { overflow-x: clip; }
body.ca-svc-hub .sh { display: block; color: var(--ui-ink); background: var(--ui-bg); font-family: 'Jost', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.6; }
body.ca-svc-hub .sh *, body.ca-svc-hub .sh *::before, body.ca-svc-hub .sh *::after { box-sizing: border-box; }
body.ca-svc-hub .sh-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
body.ca-svc-hub .sh h1, body.ca-svc-hub .sh h2, body.ca-svc-hub .sh h3 { font-family: 'Jost', sans-serif; font-style: normal; text-transform: none; letter-spacing: -.005em; color: var(--ui-ink); text-align: left; }

/* Head: title, one line, and an index of the five that jumps to each tile */
body.ca-svc-hub .sh-head { padding: clamp(2rem, 5vw, 3.75rem) 0 clamp(1.25rem, 3vw, 2rem); }
body.ca-svc-hub .sh-h1 { font-weight: 600; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.2rem); line-height: 1.08; margin: 0 0 .75rem; }
body.ca-svc-hub .sh-lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--ui-ink-2); margin: 0 0 1.5rem; }
body.ca-svc-hub .sh-lead a { color: var(--ui-ink); text-decoration: underline; text-decoration-color: var(--ui-accent); text-underline-offset: 4px; }
body.ca-svc-hub .sh-index { display: flex; flex-wrap: wrap; gap: .5rem; }
body.ca-svc-hub .sh-index a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-paper); color: var(--ui-ink); font: 500 15px/1.2 'Jost', sans-serif; text-decoration: none; white-space: nowrap; transition: border-color var(--ca-transition), background var(--ca-transition); }
body.ca-svc-hub .sh-index a span { color: var(--ui-accent); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
body.ca-svc-hub .sh-index a:hover { border-color: var(--ui-ink); }
body.ca-svc-hub .sh-index a:focus-visible, body.ca-svc-hub .sh-tile:focus-visible, body.ca-svc-hub .sh-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* The bento */
body.ca-svc-hub .sh-sec { padding: clamp(1rem, 3vw, 1.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
body.ca-svc-hub .sh-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
body.ca-svc-hub .sh-tile { display: block; container-type: inline-size; text-decoration: none; color: var(--ui-ink); scroll-margin-top: 96px; background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; transition: box-shadow var(--ca-transition), transform var(--ca-transition); }
body.ca-svc-hub .sh-card { display: flex; flex-direction: column; height: 100%; }
body.ca-svc-hub .sh-tile:hover { box-shadow: var(--ui-shadow); transform: translateY(-2px); }
body.ca-svc-hub .sh-tile:hover { color: var(--ui-ink); }
body.ca-svc-hub .sh-media { position: relative; flex: 1 0 auto; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ui-tint); }
body.ca-svc-hub .sh-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transition: transform 600ms ease, filter var(--ca-transition); }
body.ca-svc-hub .sh-tile:hover .sh-media img { transform: scale(1.03); }
body.ca-svc-hub .sh-body { display: flex; flex-direction: column; padding: 1.1rem 1.2rem 1.25rem; }
body.ca-svc-hub .sh-num { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ui-accent); font-variant-numeric: tabular-nums; margin: 0 0 .35rem; }
body.ca-svc-hub .sh-h3 { font-weight: 600; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); line-height: 1.2; margin: 0 0 .45rem; }
body.ca-svc-hub .sh-teaser { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ui-ink); }
body.ca-svc-hub .sh-more-text { margin: .6rem 0 0; font-size: 16px; line-height: 1.55; color: var(--ui-ink-2); }
body.ca-svc-hub .sh-cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .9rem; font-weight: 600; font-size: 16px; color: var(--ui-ink); }
body.ca-svc-hub .sh-arrow { flex: none; color: var(--ui-accent); transition: transform var(--ca-transition); }
body.ca-svc-hub .sh-tile:hover .sh-arrow { transform: translateX(3px); }

/* The feature tile reads larger */
body.ca-svc-hub .sh-feature .sh-h3 { font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem); }
body.ca-svc-hub .sh-feature .sh-media { aspect-ratio: 4 / 3; }

/* The proof tile sits on the tint, so it reads as a different kind of thing from the five */
body.ca-svc-hub .sh-tile.sh-proof { background: var(--ui-tint); }

/* Wide enough tile: photo beside the words instead of above them */
@container (min-width: 520px) {
    body.ca-svc-hub .sh-card { flex-direction: row; }
    body.ca-svc-hub .sh-tile .sh-media { flex: 1.1 1 0; aspect-ratio: auto; min-height: 240px; }
    body.ca-svc-hub .sh-body { flex: 1 1 0; padding: 1.5rem 1.5rem 1.6rem; justify-content: center; }
    body.ca-svc-hub .sh-cta { margin-top: 0; padding-top: 1.1rem; }
}
@container (min-width: 720px) {
    body.ca-svc-hub .sh-tile .sh-media { min-height: 360px; }
    body.ca-svc-hub .sh-body { padding: 2rem; }
}

/* Tablet: two columns, the feature across both, the tall tile down two rows */
@media (min-width: 640px) {
    body.ca-svc-hub .sh-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
    body.ca-svc-hub .sh-t1, body.ca-svc-hub .sh-t5, body.ca-svc-hub .sh-t6 { grid-column: 1 / -1; }
    body.ca-svc-hub .sh-t2 { grid-column: 1; grid-row: 2 / span 2; }
    body.ca-svc-hub .sh-t3 { grid-column: 2; grid-row: 2; }
    body.ca-svc-hub .sh-t4 { grid-column: 2; grid-row: 3; }
    body.ca-svc-hub .sh-tall .sh-media { aspect-ratio: 4 / 5; }
}
/* Desktop: six tracks, feature wide, Exclusive Experiences tall, two halves below */
@media (min-width: 1024px) {
    body.ca-svc-hub .sh-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    body.ca-svc-hub .sh-t1 { grid-column: 1 / 5; grid-row: 1; }
    body.ca-svc-hub .sh-t2 { grid-column: 5 / 7; grid-row: 1 / span 2; }
    body.ca-svc-hub .sh-t3 { grid-column: 1 / 3; grid-row: 2; }
    body.ca-svc-hub .sh-t4 { grid-column: 3 / 5; grid-row: 2; }
    body.ca-svc-hub .sh-t5 { grid-column: 1 / 4; grid-row: 3; }
    body.ca-svc-hub .sh-t6 { grid-column: 4 / 7; grid-row: 3; }
    body.ca-svc-hub .sh-tall .sh-media { aspect-ratio: auto; min-height: 320px; }
}

/* Phones: the index scrolls sideways in one line instead of wrapping into a block */
@media (max-width: 639px) {
    body.ca-svc-hub .sh-index { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; margin: 0 calc(clamp(1.25rem, 5vw, 3rem) * -1); padding: 0 clamp(1.25rem, 5vw, 3rem) .25rem; scrollbar-width: none; }
    body.ca-svc-hub .sh-index::-webkit-scrollbar { display: none; }
}

/* :has(): while one tile is hovered the others step back, photos only, the words stay full strength */
@media (hover: hover) {
    body.ca-svc-hub .sh-bento:has(.sh-tile:hover) .sh-tile:not(:hover) .sh-media img { filter: saturate(.55); }
}

/* Scroll-driven reveal, only where supported and motion is welcome */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        @keyframes sh-rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
        body.ca-svc-hub .sh-tile { animation: sh-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    }
    @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
    body.ca-svc-hub .sh-tile, body.ca-svc-hub .sh-media img, body.ca-svc-hub .sh-arrow { transition: none; }
    body.ca-svc-hub .sh-tile:hover, body.ca-svc-hub .sh-tile:hover .sh-media img { transform: none; }
}

/* Begin */
body.ca-svc-hub .sh-begin { background: var(--ui-tint); padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
body.ca-svc-hub .sh-begin-box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 2rem; }
body.ca-svc-hub .sh-h2 { font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); line-height: 1.15; margin: 0 0 .4rem; }
body.ca-svc-hub .sh-sub { color: var(--ui-ink-2); margin: 0; max-width: 34em; }
body.ca-svc-hub .sh-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
body.ca-svc-hub .sh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.4rem; border-radius: var(--ui-radius-sm); font: 600 16px/1.2 'Jost', sans-serif; text-decoration: none; text-transform: none; letter-spacing: .01em; transition: background var(--ca-transition), border-color var(--ca-transition); }
body.ca-svc-hub .sh-btn-wa { background: var(--wa-green); color: var(--ivory); border: 1px solid var(--wa-green); }
body.ca-svc-hub .sh-btn-wa:hover { background: var(--wa-green-lt); border-color: var(--wa-green-lt); color: var(--ivory); }
body.ca-svc-hub .sh-btn-ghost { background: transparent; color: var(--ui-ink); border: 1px solid color-mix(in srgb, var(--obsidian) 35%, transparent); }
body.ca-svc-hub .sh-btn-ghost:hover { border-color: var(--ui-ink); color: var(--ui-ink); }
@media (max-width: 639px) {
    body.ca-svc-hub .sh-actions { width: 100%; }
    body.ca-svc-hub .sh-actions .sh-btn { flex: 1 1 100%; }
}

/* The customizer prints h1:not(.entry-title):not(.page-title):not(.site-title) { font-size: 24px } inline
   (specificity 0,3,1), and the same for h2. These selectors outrank it so the type scale above holds. */
body.ca-svc-hub main.sh h1.sh-h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.2rem) !important; line-height: 1.08 !important; }
body.ca-svc-hub main.sh h2.sh-h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); }
body.ca-svc-hub main.sh .sh-feature h2.sh-h3 { font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem); }
body.ca-svc-hub main.sh h2.sh-h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); }

/* Flights and hotels (2026-10-10): a band of two text cards under the five, words on tint, no photograph yet */
body.ca-svc-hub .sh-fh-sec { padding-top: 0; }
body.ca-svc-hub .sh-fh { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 760px) { body.ca-svc-hub .sh-fh { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Concrete services on top (2026-10-15): four and more cards run in a row of four on wide screens; the areas follow. */
@media (min-width: 1180px) { body.ca-svc-hub .sh-named .sh-fh { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.ca-svc-hub .sh-named { padding-top: 1rem; }
body.ca-svc-hub .sh-named .sh-fh-card .sh-cta { margin-top: auto; padding-top: 1rem; }
body.ca-svc-hub .sh-fh-card { display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.4rem; text-decoration: none; color: var(--ui-ink); background: var(--ui-tint); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); scroll-margin-top: 96px; transition: box-shadow var(--ca-transition), transform var(--ca-transition); }
body.ca-svc-hub .sh-fh-card:hover { box-shadow: var(--ui-shadow); transform: translateY(-2px); color: var(--ui-ink); }
body.ca-svc-hub .sh-fh-card .sh-h3 { margin: 0 0 .7rem; }
body.ca-svc-hub .sh-fh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
body.ca-svc-hub .sh-fh-list li { position: relative; padding-left: 1.4rem; font-size: 16px; line-height: 1.5; color: var(--ui-ink-2); }
body.ca-svc-hub .sh-fh-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .3rem; border-left: 2px solid var(--ui-accent); border-bottom: 2px solid var(--ui-accent); transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { body.ca-svc-hub .sh-fh-card { transition: none; } body.ca-svc-hub .sh-fh-card:hover { transform: none; } }