/* F002 v1.0.0: A001 2026-09-08 approved layout; base tokens / .button / .container required. */
.contact-cta-section { padding-block: var(--section-padding-standard); background: var(--color-surface-base); }
.contact-cta-section :where(h2, p, figure) { margin: 0px; }
.contact-cta-panel { position: relative; display: grid; overflow: hidden; grid-template-areas: "copy person" "actions person"; grid-template-columns: minmax(0px, 1fr) clamp(18rem, 24vw, 20rem); gap: 1.25rem var(--space-md); align-items: stretch; padding: 3rem 0px 3.5rem 3rem; color: var(--color-surface-base); background-color: var(--color-brand-green-darker); background-image: linear-gradient(135deg, color-mix(in srgb, var(--color-brand-green) 22%, transparent), transparent 50%); border-radius: var(--radius-large); box-shadow: var(--shadow-feature); isolation: isolate; }
.contact-cta-copy, .contact-cta-actions { position: relative; z-index: 2; min-width: 0px; }
.contact-cta-copy { grid-area: copy; align-self: end; }
.contact-cta-person { position: relative; z-index: 1; min-width: 0px; min-height: 0px; grid-area: person; margin: -3rem 0px -3.5rem -2.5rem; background: var(--color-brand-green-darker); }
.contact-cta-person img { position: absolute; inset: 0.4rem 0px auto auto; display: block; width: 110%; max-width: none; height: 110%; object-fit: cover; object-position: left center; }
.contact-cta-chips { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-block-start: 0.625rem; }
.contact-cta-chip { display: inline-flex; min-height: 1.75rem; align-items: center; padding: var(--space-2xs) var(--space-sm); color: var(--color-brand-green-darker); background: var(--color-surface-mint); border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 700; line-height: 1; }
.contact-cta-copy h2 { max-width: none; color: var(--color-surface-base); font-size: clamp(1.5rem, 1.2rem + 0.6vw, 1.875rem); font-weight: 700; line-height: 1.3; letter-spacing: 0.01em; white-space: nowrap; }
.contact-cta-copy p { max-width: none; margin-block-start: var(--space-xs); color: rgba(255, 255, 255, 0.82); font-size: var(--font-size-body); line-height: 1.65; white-space: nowrap; }
.contact-cta-actions { --contact-cta-number-size: clamp(2.125rem, 3vw, 2.625rem); display: grid; grid-template-columns: max-content minmax(0px, 1fr); gap: var(--space-xs) var(--space-sm); align-items: center; width: calc(100% - 2rem); padding: var(--space-sm) var(--space-lg); margin-inline: 0px; color: var(--color-text-primary); background: var(--color-surface-soft); border: 1px solid color-mix(in srgb, var(--color-brand-green-dark) 20%, transparent); border-radius: var(--radius-medium); box-shadow: var(--shadow-large); grid-area: actions; }
.contact-cta-phone { display: grid; justify-items: start; }
.contact-cta-phone__number-row { display: flex; align-items: center; gap: var(--space-xs); }
.contact-cta-phone__number-row img { width: 2.25rem; height: auto; flex: 0 0 auto; }
.contact-cta-phone__label { color: var(--color-brand-green-darker); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; }
.contact-cta-phone a { color: var(--color-brand-green-darker); font-family: Impact, "Arial Narrow", sans-serif; font-size: var(--contact-cta-number-size); font-weight: 700; line-height: 1.25; letter-spacing: 0.025em; text-decoration: none; white-space: nowrap; }
.contact-cta-phone__hours { color: var(--color-text-muted); font-size: 0.8125rem; }
.contact-cta-buttons { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: var(--space-sm); }
.contact-cta-button { --button-border-width: 1px; position: relative; min-height: 3.5rem; gap: var(--space-xs); padding: 0.625rem 2.75rem; font-size: var(--font-size-small); line-height: 1.5; text-align: center; }
.contact-cta-button.button--cta { --button-border-color: transparent; }
.contact-cta-button :is(img, .contact-cta-line-logo) { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; flex: 0 0 auto; object-fit: contain; }
.contact-cta-button span { width: 100%; text-align: center; translate: 0.5rem; }
@media (min-width: 1200px) {
.contact-cta-actions { --contact-cta-number-size: clamp(1.5rem, calc(1.5rem + (100vw - 1200px) / 30), 2rem); }
.contact-cta-phone a { line-height: 1; }

.contact-cta-button { height: calc(var(--contact-cta-number-size) + .75rem); min-height: 0px; padding-block: 0px; line-height: 1.2; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.contact-cta-panel .contact-cta-actions { grid-template-columns: minmax(0px, 1fr); }
}
.contact-cta-button .contact-cta-line-logo { width: 2rem; height: 2rem; }
.contact-cta-button.button--cta img { left: 1rem; }
.contact-cta-line-logo__bubble { fill: currentcolor; }
.contact-cta-line-logo__letters { fill: var(--button-background); }
@media (hover: hover) {
.contact-cta-button.button--line:not(:disabled):not([aria-disabled="true"]):hover .contact-cta-line-logo__letters { fill: var(--color-surface-base); }
}
.contact-cta-button.button--line:not(:disabled):not([aria-disabled="true"]):active .contact-cta-line-logo__letters { fill: var(--color-surface-base); }
.contact-cta-note { grid-column: 1 / -1; color: var(--color-text-muted); font-size: var(--font-size-caption); line-height: 1.5; text-align: center; }
.contact-cta-phone a:hover { transform: translateY(-2px); }
.contact-cta-phone a:focus-visible { outline: 3px solid var(--color-cta-yellow); outline-offset: 4px; }
@media (max-width: 959px) {
.contact-cta-panel { grid-template-columns: minmax(0px, 1fr) minmax(14rem, 0.65fr); gap: var(--space-sm); padding-left: var(--space-xl); }

.contact-cta-actions { grid-template-columns: max-content minmax(0px, 1fr); width: calc(100% - 1rem); margin-inline: 0px; }

.contact-cta-person { margin-left: -2rem; }

.contact-cta-buttons { grid-template-columns: 1fr; }

.contact-cta-copy h2, .contact-cta-copy p { white-space: normal; }
}
@media (max-width: 767px) {
.contact-cta-section { padding-block: var(--section-padding-standard); }

.contact-cta-panel { grid-template-areas: "copy" "person" "actions"; grid-template-columns: 1fr; gap: var(--space-sm); padding: var(--space-lg) var(--space-md); border-radius: var(--radius-large); }

.contact-cta-copy h2 { max-width: none; font-size: 1.75rem; }

.contact-cta-person { width: calc(100% + 2rem); min-height: 12rem; max-height: 12rem; margin: -0.25rem -1rem -0.75rem; }

.contact-cta-person img { inset: 0px; width: 100%; max-width: 100%; height: 100%; object-position: center 18%; }

.contact-cta-actions { grid-template-columns: 1fr; width: auto; padding: var(--space-md); margin-inline: 0px; }

.contact-cta-phone a { font-size: clamp(1.125rem, 6vw, 1.75rem); }

.contact-cta-button { width: 100%; }
}
