/* V7.2 motion: a photographic opening and a clear response to each action. */
:root {
  --motion-reveal: 500ms;
  --motion-image: 900ms;
  --motion-feedback: 200ms;
}
.motion-image-frame { overflow: hidden; }
.motion-image-frame img { transform-origin: center; }
.toggle { transition: transform var(--motion) var(--ease); }
.toggle:active { transform: scale(.98); transition-duration: var(--motion-press); }
.toggle:focus-visible { transform: none; transition: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn svg,
  .home-offers a svg,
  .v5-path-card svg,
  .v5-hero-secondary svg,
  .hero-reviews-link svg,
  .service-showcase-card .card-bottom svg {
    transition: transform var(--motion-feedback) var(--ease);
  }
  .btn:hover svg,
  .home-offers a:hover svg,
  .v5-path-card:hover svg,
  .v5-hero-secondary:hover svg,
  .hero-reviews-link:hover svg,
  .service-showcase-card:hover .card-bottom svg { transform: translateX(3px); }
  .problem-card--photo .problem-photo img {
    transition: transform var(--motion-feedback) var(--ease);
  }
  .problem-card--photo:hover .problem-photo img { transform: scale(1.045); }
  .btn:focus-visible svg,
  .home-offers a:focus-visible svg,
  .v5-path-card:focus-visible svg,
  .v5-hero-secondary:focus-visible svg,
  .hero-reviews-link:focus-visible svg,
  .service-showcase-card:focus-visible .card-bottom svg,
  .problem-card--photo:focus-visible .problem-photo img {
    transform: none;
    transition: none;
  }
}
/* These are instant states when motion is unwanted; the content never relies on JS. */
@media (prefers-reduced-motion: reduce) {
  .toggle, .btn svg, .home-offers svg, .v5-path-card svg,
  .problem-photo img, .motion-image-frame img {
    transform: none !important;
    transition: none !important;
  }
}
@media print {
  .motion-image-frame { overflow: visible; }
}
.motion-keyboard .toggle { transform: none; transition: none; }
.motion-keyboard .btn svg, .motion-keyboard .home-offers svg, .motion-keyboard .v5-path-card svg, .motion-keyboard .problem-photo img { transform: none; transition: none; }
.content-hero > .motion-image-frame, .care-header-photo.motion-image-frame, .offer-visual > .motion-image-frame { border-radius: var(--radius-panel, 16px); }

.v5-hero-media { background: var(--forest); }
/* Owner-requested light effects. Decorative layers never cover controls or price data. */
:root { --motion-ambient: 12000ms; }
.glow-hero { position: relative; isolation: isolate; box-shadow: 0 18px 52px -24px rgb(20 56 46 / .48), 0 0 0 1px rgb(219 237 167 / .65); }
.glow-atmosphere { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.glow-hero .hero-primary, .glow-hero .hero-support { position: relative; z-index: 1; }
.glow-orb { position: absolute; width: 740px; height: 740px; border-radius: 50%; background: radial-gradient(circle, rgb(167 216 100 / .32), rgb(72 140 94 / .13) 40%, transparent 67%); opacity: .7; }
.glow-orb--one { left: -360px; top: -420px; }
.glow-orb--two { left: 14%; bottom: -530px; background: radial-gradient(circle, rgb(219 237 167 / .32), rgb(102 177 129 / .12) 42%, transparent 67%); }
.glow-hero .v5-hero-media { isolation: isolate; }
.glow-hero .v5-hero-media::after { content: ''; position: absolute; inset: 14px; border: 1px solid rgb(219 237 167 / .75); border-radius: 12px; box-shadow: inset 0 0 28px rgb(219 237 167 / .22), 0 0 20px rgb(219 237 167 / .16); pointer-events: none; z-index: 2; }
.glow-photo-light { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; background: linear-gradient(0deg, rgb(20 56 46 / .18), transparent 45%); }
.glow-photo-light::before { content: ''; position: absolute; width: 170%; height: 170%; left: -35%; top: -35%; background: radial-gradient(ellipse at 25% 70%, rgb(219 237 167 / .38), transparent 45%); opacity: .6; }
.glow-control { position: absolute; z-index: 3; right: 24px; bottom: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; min-height: 44px; border: 1px solid rgb(219 237 167 / .6); border-radius: 24px; background: var(--deep); color: var(--paper); font: inherit; font-size: 13px; cursor: pointer; }
.glow-control svg { width: 16px; height: 16px; }
.glow-control:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.glow-action { position: relative; isolation: isolate; box-shadow: 0 7px 24px -10px rgb(111 154 54 / .7); }
.glow-action::after { content: ''; position: absolute; inset: -5px; border: 1px solid rgb(174 205 112 / .7); border-radius: inherit; box-shadow: 0 0 20px rgb(192 225 127 / .35); pointer-events: none; opacity: .3; z-index: -1; }
.glow-hero .v5-btn-primary { box-shadow: 0 0 26px rgb(219 237 167 / .32); }
.glow-card { position: relative; isolation: isolate; overflow: hidden; }
.glow-card > .glow-spot { position: absolute; left: 0; top: 0; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgb(192 221 139 / .52), rgb(219 237 167 / .18) 42%, transparent 68%); pointer-events: none; opacity: 0; z-index: -1; }
.glow-card.glow-engaged { outline: 1px solid rgb(112 154 68 / .65); outline-offset: 5px; }
/* Predetermined light travels on the compositor; no scrolling or layout animation. */
@media (prefers-reduced-motion: no-preference) {
 .glow-ambient-running .glow-orb--one { animation: glow-drift-one var(--motion-ambient) ease-in-out infinite alternate; }
 .glow-ambient-running .glow-orb--two { animation: glow-drift-two var(--motion-ambient) ease-in-out infinite alternate; }
 .glow-ambient-running .glow-photo-light::before { animation: glow-fog-light var(--motion-ambient) ease-in-out infinite alternate; }
 .glow-ambient-running .v5-btn-primary::after { animation: glow-breathe 3200ms ease-in-out infinite; }
 .glow-ambient-running .v5-hero-media::after { animation: glow-rim 6000ms ease-in-out infinite alternate; }
 @keyframes glow-drift-one { from { transform: translate3d(0,0,0); opacity: .5; } to { transform: translate3d(220px,180px,0); opacity: 1; } }
 @keyframes glow-drift-two { from { transform: translate3d(0,0,0); opacity: .45; } to { transform: translate3d(-180px,-150px,0); opacity: .85; } }
 @keyframes glow-fog-light { from { transform: translate3d(-10%,8%,0); opacity: .25; } to { transform: translate3d(18%,-8%,0); opacity: .7; } }
 @keyframes glow-breathe { 0%,100% { opacity: .25; transform: scale(1); } 50% { opacity: .85; transform: scale(1.025,1.09); } }
 @keyframes glow-rim { from { opacity: .35; } to { opacity: 1; } }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
 .glow-card > .glow-spot { transition: opacity var(--motion-feedback) var(--ease); }
 .glow-card.glow-engaged > .glow-spot { opacity: 1; }
 .glow-action::after { transition: opacity var(--motion-feedback) var(--ease), transform var(--motion-feedback) var(--ease); }
 .glow-action:hover::after { opacity: 1; transform: scale(1.025,1.09); }
}
.motion-keyboard .glow-hero *, .motion-keyboard .glow-hero *::after, .motion-keyboard .glow-hero *::before,
.motion-effects-off .glow-hero *, .motion-effects-off .glow-hero *::after, .motion-effects-off .glow-hero *::before { animation: none !important; }
.motion-keyboard .glow-spot, .motion-effects-off .glow-spot { opacity: 0 !important; transition: none; }
.motion-keyboard .glow-action::after, .motion-effects-off .glow-action::after { animation: none !important; transition: none; transform: none; }
.motion-effects-off .glow-atmosphere, .motion-effects-off .glow-photo-light { display: none; }
.motion-effects-off .glow-hero .v5-hero-media::after, .motion-effects-off .glow-action::after { opacity: 0; }
@media (max-width: 650px) {
 .glow-orb { width: 480px; height: 480px; }
 .glow-orb--one { left: -240px; top: -280px; }
 .glow-orb--two { display: none; }
 .glow-control { right: 22px; bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
 .glow-control { display: none; }
 .glow-atmosphere, .glow-photo-light { display: none; }
 .glow-action::after, .glow-spot { transition: none; transform: none; }
}
@media print {
 .glow-atmosphere, .glow-photo-light, .glow-control, .glow-spot, .glow-action::after, .glow-hero .v5-hero-media::after { display: none; }
 .glow-hero, .glow-action { box-shadow: none; }
}
/* A visible next step beside each purchasable price, including mobile table cells. */
.price-request { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; width: fit-content; max-width: 100%; margin-top: 12px; padding: 10px 15px; border: 1px solid var(--forest); border-radius: 24px; background: var(--forest); color: var(--paper); font-size: 13px; font-weight: 550; line-height: 1.4; text-decoration: none; text-align: center; }
.price-request::after { content: ''; width: 7px; height: 7px; flex-shrink: 0; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); margin-inline: 1px 3px; }
.price-request:hover { background: var(--deep); color: var(--paper); }
.price-request:focus-visible { outline: 3px solid var(--forest); outline-offset: 4px; }
.price-table td:has(> .price-request) { vertical-align: top; }
.price-table td > .price-request { display: flex; }
.price-table--responsive .price-cell-value { min-width: 0; }
.contract-pricing .price-request, .discount-example .price-request, .neighbour-example .price-request { background: var(--lime); border-color: var(--lime); color: var(--deep); }
.contract-pricing .price-request:focus-visible, .discount-example .price-request:focus-visible, .neighbour-example .price-request:focus-visible { outline-color: var(--lime); }
.contract-rates dd > .price-request { font-size: 13px; color: var(--deep); }
.v7-city-grid > a { flex-wrap: wrap; align-content: start; }
.v7-city-grid .price-request--within { margin-left: 32px; }
.price-entry-note { grid-column: 1 / -1; margin: 0 0 20px; padding: 18px 22px; background: var(--sage); border-radius: 12px; font-size: 14px; line-height: 1.6; color: var(--ink); }
@media(max-width: 650px) {
 .price-table--responsive td > .price-request { grid-column: 2; justify-self: start; margin-top: 4px; }
 .price-table--responsive td:has(> .price-request) { flex-wrap: wrap; }
 .price-entry-note { padding: 16px; }
}
@media print { .price-request, .price-entry-note { display: none !important; } }
@media(max-width: 380px) {
 .price-table--responsive td > .price-request { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
}
.contract-rates dd strong .money, .contract-rates dd > span .money { display: inline; font: inherit; color: inherit; margin: 0; }
.contract-rates dd > span { white-space: normal; }
.contract-rates > div > .price-request { grid-column: 2; justify-self: start; margin: 0; }
@media(max-width: 650px) { .contract-rates > div > .price-request { grid-column: 1 / -1; justify-self: stretch; width: 100%; } }
