/* Oakville art direction. Shared shell, Project gallery/cards and FAQ remain authoritative. */
.ccl-oakville {
    --ccl-accent-line-color: rgba(114, 87, 68, .34);
    --ccl-accent-line-tail: clamp(.8rem, 1.4vw, 1.15rem);
    background: var(--ccl-color-surface);
}
.ccl-oakville [id] { scroll-margin-top: 7rem; }
.ccl-oakville figure { margin: 0; min-width: 0; }
.ccl-oakville figcaption { margin-top: .65rem; color: var(--ccl-color-muted); font-size: var(--ccl-text-small); }
.ccl-oakville__image { width: 100%; height: 100%; object-fit: cover; }
.ccl-oakville-hero { min-height: max(820px, 96svh); }
.ccl-oakville-hero .ccl-photo-hero__image { object-position: 55% 48%; }
.ccl-oakville-hero .ccl-photo-hero__shade {
    background: linear-gradient(90deg, rgba(0, 0, 0, .67), rgba(0, 0, 0, .22) 70%), linear-gradient(0deg, rgba(0, 0, 0, .4), transparent 70%);
}
.ccl-oakville-hero .ccl-photo-hero__copy { max-width: 46rem; }
.ccl-oakville-hero h1 { max-width: 21ch; font-size: var(--ccl-text-display); }
.ccl-oakville-hero .ccl-photo-hero__copy > p:not(.ccl-eyebrow) { max-width: 53ch; font-size: var(--ccl-text-body); }
.ccl-oakville-hero .ccl-photo-hero__inner { padding-bottom: clamp(6rem, 12vh, 8rem); }
.ccl-oakville-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 6.5rem); align-items: center; }
.ccl-oakville-copy { min-width: 0; max-width: 36rem; }
.ccl-oakville-copy .ccl-editorial-intro__heading { margin-bottom: var(--ccl-space-xl); }
.ccl-oakville-copy h2 { max-width: 21ch; margin-bottom: 0; }
.ccl-oakville-lead { font-size: var(--ccl-text-lead); line-height: var(--ccl-line-lead); }
.ccl-oakville-intro { padding-block: clamp(3rem, 6vw, 5rem); }
.ccl-oakville-intro__media .ccl-oakville__image { aspect-ratio: 4 / 3; height: auto; }
.ccl-oakville-copy > p { max-width: 55ch; }
.ccl-oakville-copy > p + p { margin-top: var(--ccl-space-lg); }
.ccl-oakville-copy > p + .ccl-text-link { margin-top: var(--ccl-space-lg); }
.ccl-oakville-section-head { display: flex; gap: var(--ccl-space-xl) clamp(2rem, 8vw, 7rem); justify-content: space-between; align-items: end; margin-bottom: var(--ccl-space-2xl); }
.ccl-oakville-section-head > div { max-width: 39rem; }
.ccl-oakville-section-head > p { max-width: 38ch; margin: 0; }
.ccl-oakville-section-head h2 { margin-bottom: 0; }
.ccl-oakville-services { background: var(--ccl-color-surface-warm); padding-block: clamp(3rem, 5vw, 4.5rem); }
.ccl-oakville-services__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ccl-space-md); }
.ccl-oakville-service { aspect-ratio: 4 / 3; }
.ccl-oakville-service .ccl-services-card__content { inset: auto var(--ccl-space-lg) var(--ccl-space-lg); }
.ccl-oakville-service h3 { font-size: clamp(1.05rem, 1.35vw, 1.25rem); max-width: 20ch; line-height: 1.2; }
.ccl-oakville-service .ccl-services-card__overlay { inset: 20% 0 0; }
.ccl-oakville-services .ccl-oakville-services__all { margin-top: var(--ccl-space-lg); }
.ccl-oakville-number { color: var(--ccl-color-earth); font-size: var(--ccl-text-small); font-variant-numeric: tabular-nums; }
.ccl-oakville-services__closing { display: flex; align-items: center; justify-content: space-between; gap: var(--ccl-space-xl); margin-top: var(--ccl-space-xl); padding-top: var(--ccl-space-xl); border-top: var(--ccl-border-subtle); }
.ccl-oakville-services__closing p { max-width: 38ch; margin: 0; font-size: var(--ccl-text-lead); }
.ccl-oakville-gallery { padding-bottom: clamp(3rem, 6vw, 5rem); }
.ccl-oakville-gallery .ccl-project-grid-section { padding-top: 0; padding-bottom: var(--ccl-space-xl); }
.ccl-oakville-gallery__footer { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ccl-space-lg); }
.ccl-oakville-gallery__footer > p { margin: 0; color: var(--ccl-color-muted); font-size: var(--ccl-text-small); }
.ccl-oakville-planning { background: var(--ccl-color-canvas); }
.ccl-oakville-planning__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 8vw, 7rem); align-items: start; }
.ccl-oakville-planning__intro h2 { max-width: 20ch; }
.ccl-oakville-planning__intro > p { max-width: 43ch; margin-block: var(--ccl-space-lg) var(--ccl-space-xl); }
.ccl-oakville-planning__intro .ccl-oakville__image { aspect-ratio: 3 / 2; height: auto; }
.ccl-oakville-planning__topics > section { padding-block: var(--ccl-space-xl); border-top: 1px solid var(--ccl-color-border-strong); }
.ccl-oakville-planning__topics > section:first-child { padding-top: var(--ccl-space-lg); }
.ccl-oakville-planning__topics > section p { margin: 0; max-width: 59ch; }
.ccl-oakville-planning__sources { border-top: var(--ccl-border-subtle); padding-top: var(--ccl-space-lg); font-size: var(--ccl-text-small); }
.ccl-oakville-planning__sources p { margin-bottom: .5rem; }
.ccl-oakville-planning__sources a { display: block; width: fit-content; padding-block: .4rem; }
.ccl-oakville-process { background: var(--ccl-color-charcoal); color: var(--ccl-color-white); }
.ccl-oakville-process h2, .ccl-oakville-process h3 { color: inherit; }
.ccl-oakville-process .ccl-eyebrow, .ccl-oakville-process .ccl-oakville-number { color: #d2bfae; }
.ccl-oakville-process .ccl-text-link { color: var(--ccl-color-white); }
.ccl-oakville-process .ccl-text-link:hover { color: var(--ccl-color-cyan); }
.ccl-oakville-process__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ccl-space-xl); list-style: none; margin: 0; padding: 0; }
.ccl-oakville-process__steps li { border-top: 1px solid rgba(255, 255, 255, .3); padding-top: var(--ccl-space-lg); }
.ccl-oakville-process__steps h3 { margin-top: var(--ccl-space-lg); }
.ccl-oakville-process__steps p { margin-bottom: 0; color: rgba(255, 255, 255, .84); }
.ccl-oakville-approach { padding-block: clamp(3rem, 6vw, 5rem); }
.ccl-oakville-approach .ccl-oakville-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.ccl-oakville-approach__media .ccl-oakville__image { aspect-ratio: 4 / 3; height: auto; }
.ccl-oakville-faq { background: var(--ccl-color-canvas); }
/* Native details remain readable without JavaScript; the shared script adds animation. */
.ccl-oakville-faq details[open] .ccl-design-faq__panel { height: auto; opacity: 1; transform: none; }
.ccl-oakville .ccl-project-lightbox figcaption { color: inherit; }

/* Reuse the Design page's neutral service-area composition and footer clearance. */
.ccl-location-inquiry .ccl-location-inquiry__copy > p { margin-bottom: var(--ccl-space-lg); }
.ccl-location-inquiry__copy iframe { display: block; width: 100%; max-width: 100%; border: 0; }

@media (max-width: 1024px) {
    .ccl-oakville-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
    .ccl-oakville-section-head { align-items: start; flex-direction: column; gap: var(--ccl-space-lg); }
    .ccl-oakville-section-head > p { max-width: 60ch; }
    .ccl-oakville-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ccl-space-2xl); }
}
@media (max-width: 820px) {
    .ccl-oakville-hero { min-height: max(720px, 92svh); }
    .ccl-oakville-split, .ccl-oakville-approach .ccl-oakville-split, .ccl-oakville-planning__grid { grid-template-columns: minmax(0, 1fr); }
    .ccl-oakville-intro__media .ccl-oakville__image, .ccl-oakville-approach__media .ccl-oakville__image { aspect-ratio: 4 / 3; }
    .ccl-oakville-copy { max-width: 100%; }
    .ccl-oakville-copy > p { max-width: 65ch; }
    .ccl-oakville-planning__intro figure { max-width: 36rem; }
}
@media (max-width: 600px) {
    .ccl-oakville [id] { scroll-margin-top: 6rem; }
    .ccl-oakville-hero { min-height: 100svh; }
    .ccl-oakville-hero .ccl-photo-hero__inner { padding-block: 10rem 6rem; }
    .ccl-oakville-hero .ccl-photo-hero__copy { padding-left: var(--ccl-space-md); }
    .ccl-oakville-hero .ccl-photo-hero__image { object-position: 55% 50%; }
    .ccl-oakville-hero .ccl-photo-hero__shade { background: rgba(0, 0, 0, .56); }
    .ccl-oakville-services__grid { grid-template-columns: minmax(0, 1fr); }
    .ccl-oakville-service { aspect-ratio: 16 / 10; }
    .ccl-oakville-service h3 { font-size: var(--ccl-text-h4); }
    .ccl-oakville-services__closing, .ccl-oakville-gallery__footer { flex-direction: column; align-items: start; }
    .ccl-oakville-services__closing .ccl-button { align-self: stretch; justify-content: center; }
    .ccl-oakville-process__steps { gap: var(--ccl-space-xl) var(--ccl-space-lg); }
    .ccl-oakville-process__steps p { font-size: var(--ccl-text-small); }
}