/* Shared card components, loaded on every page (base.njk) so the home
   page, pillars, service pages and /contact use one copy:
   - .pl-action*   big icon buttons (pillar hero row, service pages, home hero)
   - .pl-other*    picture cards: a character on a disc stepping out of the card
   - .ct-now*      the live "Open now / Closed" call card (partials/live-call-card.njk,
                   status by /js/open-status.js), plus its wide band variant
   Moved out of pages.css 2026-10-04 (pages.css can't load on the home page:
   its generic .svc-card rule restyles the home industries cards). */

.ct-now {
  position: relative; display: grid; grid-template-columns: 8.5rem 1fr; align-items: end; gap: 1.25rem;
  padding: 1.4rem 1.5rem 1.4rem .75rem; border-radius: var(--radius-lg); background: var(--navy); color: var(--white); box-shadow: var(--shadow);
}
.ct-now-art { position: relative; height: 10rem; }
.ct-now-art::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 7.5rem; height: 7.5rem; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--cyan-light), var(--cyan-dark)); }
.ct-now-art img { position: absolute; left: 50%; bottom: -.25rem; transform: translateX(-50%); height: 12.5rem; width: auto; max-width: none;
  filter: drop-shadow(0 .6rem .8rem rgba(0,0,0,.35)); }
.ct-now-body { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding-bottom: .25rem; }
.ct-status { margin: 0; display: flex; align-items: flex-start; gap: .6rem; font-family: var(--head); font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
.ct-dot { flex: none; width: .8rem; height: .8rem; margin-top: .3em; border-radius: 50%; background: #8a97ac; }
.ct-status.is-open .ct-dot { background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: ct-pulse 2s ease-out infinite; }
.ct-status.is-closed .ct-dot { background: #f2b544; }
@keyframes ct-pulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,.55); } 70% { box-shadow: 0 0 0 .7rem rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.ct-call { font-size: 1.05rem; white-space: nowrap; }
@media (max-width: 40rem) {
  .ct-now { grid-template-columns: 6.5rem 1fr; padding-left: .5rem; }
  .ct-now-art { height: 8rem; }
  .ct-now-art::before { width: 6rem; height: 6rem; }
  .ct-now-art img { height: 10rem; }
  .ct-call { font-size: .95rem; padding-inline: 1.1rem; }
  .ct-status { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-status.is-open .ct-dot { animation: none; }
}
.ct-now--band { grid-template-columns: 11rem 1fr; padding: 1.75rem 2.25rem 1.75rem 1rem; }
.ct-now--band .ct-now-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; row-gap: .6rem; align-items: center; }
.ct-now--band .ct-now-body > :not(.ct-now-buttons) { grid-column: 1; }
.ct-now--band .ct-now-buttons { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-items: stretch; }
.ct-now--band .ct-now-art { height: 9rem; }
.ct-now--band .ct-now-art::before { width: 9rem; height: 9rem; }
.ct-now--band .ct-now-art img { height: 14rem; }
.ct-now-heading { margin: 0; color: var(--white); font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.ct-now-text { margin: 0; color: #c9d3e3; max-width: 52ch; }
.ct-now-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.ct-quote { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.45); }
.ct-quote:hover, .ct-quote:focus-visible { border-color: var(--white); color: var(--white); }
.pl-action {
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 2px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none;
  transition: border-color var(--t-1) var(--e-out), transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out);
}
.pl-action:hover, .pl-action:focus-visible { border-color: var(--cyan); transform: translateY(var(--lift)); box-shadow: var(--shadow); }
.pl-action:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.pl-action-icon { flex: none; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; color: var(--white);
  background: radial-gradient(circle at 35% 30%, var(--cyan-light), var(--cyan-dark)); }
.pl-action-icon svg { width: 1.4rem; height: 1.4rem; }
.pl-action-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pl-action-label { font-family: var(--head); font-weight: 800; font-size: 1.08rem; color: var(--navy); }
.pl-action-hint { font-size: .84rem; color: var(--muted); }
.pl-other {
  display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 0 .5rem 1rem; border: 2px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--soft-2), var(--white) 60%); text-decoration: none; text-align: center;
  transition: border-color var(--t-1) var(--e-out), transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out);
}
.pl-other:hover, .pl-other:focus-visible { border-color: var(--cyan); transform: translateY(var(--lift)); box-shadow: var(--shadow-sm); }
.pl-other:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.pl-other-art { position: relative; display: block; width: 100%; height: 5.5rem; margin-top: -2rem; }
.pl-other-art::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 4.5rem; height: 4.5rem; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--cyan-light), var(--cyan-dark)); opacity: .9; }
.pl-other-art img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 7rem; width: auto; max-width: none;
  filter: drop-shadow(0 .4rem .5rem rgba(18,23,42,.2)); transition: transform var(--t-3) var(--e-spring); }
.pl-other:hover .pl-other-art img { transform: translateX(-50%) translateY(-.3rem) scale(1.04); }
.pl-other-name { font-family: var(--head); font-weight: 800; font-size: .95rem; line-height: 1.2; color: var(--navy); }
@media (max-width: 40rem) {
  .pl-action { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .9rem; }
  .pl-action-icon { width: 2.5rem; height: 2.5rem; }
  .ct-now--band { grid-template-columns: minmax(0, 1fr); padding: 1.4rem 1.25rem; margin-top: 1.5rem; }
  .ct-now--band .ct-now-art { position: absolute; right: .9rem; top: -4.5rem; width: 6rem; height: 6.5rem; }
  .ct-now--band .ct-now-art::before { width: 5.5rem; height: 5.5rem; }
  .ct-now--band .ct-now-art img { height: 9rem; }
  .ct-now--band .ct-now-body { display: flex; }
  .ct-now--band .ct-now-heading { padding-right: 6rem; }
  .ct-now--band .ct-now-buttons { flex-direction: row; }
}

/* Office list (partials/office-list.njk): suburb, street in small type. */
.office-list { display: flex; flex-wrap: wrap; gap: .35rem 1.75rem; }
.office { display: flex; flex-direction: column; }
.office-street { font-size: .8rem; color: var(--muted); }

/* ===== Motion pack (2026-10-05, from the July site-wide mockup) =====
   Small, occasional movement so the site feels alive. Always on, per the
   owner's 2026-09-23 decision (see main.js MOTION_OFF). Timings: ambient
   loops keep their own long cycles; hovers use the --t tokens. */

/* 1) Top-bar phone gives a little ring every ~7 seconds. */
.topbar :is(.tb-phone-pc, .tb-phone-mob) svg { transform-origin: 50% 15%; animation: tbRing 7s ease-in-out infinite; }
@keyframes tbRing {
  0%, 78%, 100% { transform: rotate(0); }
  82% { transform: rotate(14deg); } 86% { transform: rotate(-12deg); }
  90% { transform: rotate(8deg); } 94% { transform: rotate(-5deg); }
}

/* 2) Primary buttons: a soft sheen sweeps across now and then. Each button
   gets a slightly different start so a row of them doesn't flash in sync. */
.btn.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn.btn-primary::after {
  content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; width: 34%; left: -60%;
  transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  animation: btnSheen 6.5s var(--e-in-out) infinite; animation-delay: var(--sheen-delay, 1.2s);
}
.btn.btn-primary:nth-of-type(2n)::after { --sheen-delay: 3.4s; }
@keyframes btnSheen { 0% { left: -60%; } 16% { left: 130%; } 100% { left: 130%; } }

/* 3) Icons in cards and big buttons give a little wiggle on hover. */
:is(.svc-card:hover .svc-ico, .pain-row:hover .pain-ico, .pl-action:hover .pl-action-icon,
    .sp-action:hover .sp-action-icon, a.ct-method:hover .ct-method-icon) svg { animation: icoWiggle .5s var(--e-out); }
@keyframes icoWiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg) scale(1.08); } 65% { transform: rotate(6deg); } }

/* 4) Step numbers pop once as they scroll into view (js/motion.js adds .pop). */
.flow-step-no, .sv-step-num { transform-origin: 50% 60%; }
.flow-step-no.pop, .sv-step-num.pop { animation: stepPop .55s var(--e-spring) both; }
@keyframes stepPop { 0% { transform: scale(1); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* "We only use your details..." under every form's Send button. */
.form-privacy { margin: .75rem 0 .5rem; font-size: .82rem; color: var(--muted); }
.form-privacy a { color: var(--cyan-text); }