/* ---------------------------------------------------------------------------
 * Contact page, ported verbatim from the approved live implementation:
 *   SubAccounts/Coronation Physiotherapy/05 - GoHighLevel (GHL)/Sites/Websites/
 *   Contact-body-2026-09-09.html  (v2 verified live 2026-09-16)
 *
 * This is the shipped .cpcontact stylesheet, not a reinterpretation. Two
 * changes only, both required by the platform:
 *   1. the @font-face block is dropped, because the theme already self-hosts
 *      Bricolage Grotesque and Hanken Grotesk as variable fonts with
 *      metric-matched fallbacks, and loading them twice from a CDN would undo
 *      the CLS work;
 *   2. --display and --body point at those self-hosted stacks.
 *
 * Everything else, including the hero aurora, the dark book band, the card
 * treatments, the portal card and the breakpoints, is the live file's own CSS.
 * ------------------------------------------------------------------------- */

/* ===== Coronation Physiotherapy contact page (body-only, scoped .cpcontact) ===== */
.cpcontact{
  --crimson:#C41E3A; --crimson-deep:#9E1729; --crimson-ink:#7E0F22;
  --ink:#1A1A1A; --slate:#55606E; --paper:#FBF7F4; --sand:#F3E9E6; --mist:#F7EFEC;
  --line:rgba(26,26,26,.12); --white:#fff; --charcoal:#1B1F26;
  --display:"Bricolage Grotesque","Bricolage Fallback",-apple-system,Helvetica,Arial,sans-serif; --body:"Hanken Grotesk","Hanken Fallback",system-ui,Arial,sans-serif;
  --wrap:1200px; --r:18px; --shadow:0 24px 60px rgba(126,15,34,.16); --shadow-sm:0 10px 30px rgba(26,26,26,.10);
  font-family:var(--body); color:var(--ink); background:var(--paper); line-height:1.6;
  font-size:17px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position:relative; overflow-x:clip;
}
.cpcontact *{box-sizing:border-box; margin:0; padding:0}
.cpcontact img{max-width:100%; display:block}
.cpcontact h1,.cpcontact h2,.cpcontact h3{font-family:var(--display); line-height:1.06; letter-spacing:-.02em; color:var(--ink); font-weight:800; text-wrap:balance}
.cpcontact p{color:var(--slate); text-wrap:pretty}
.cpcontact a{color:var(--crimson-deep); text-decoration:none}
.cpcontact .wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.cpcontact section{position:relative}
.cpcontact .eyebrow{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--crimson); display:inline-flex; align-items:center; gap:9px}
.cpcontact .eyebrow::before{content:""; width:26px; height:2px; background:var(--crimson); display:inline-block; border-radius:2px}
.cpcontact .kicker{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--crimson)}

/* reveal (transform-only: content is ALWAYS visible, never opacity:0) */
.cpcontact .reveal{transform:translateY(30px); transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cpcontact .reveal.in{transform:none}
.cpcontact .reveal.d1{transition-delay:.08s}.cpcontact .reveal.d2{transition-delay:.16s}.cpcontact .reveal.d3{transition-delay:.24s}

/* buttons */
.cpcontact .btn-book{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:11px; background:var(--crimson); color:#fff; font-family:var(--display); font-weight:700; font-size:17px; padding:17px 30px; border-radius:14px; border:0; cursor:pointer; box-shadow:0 14px 30px rgba(196,30,58,.34); transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s, box-shadow .3s}
.cpcontact .btn-book svg{width:19px;height:19px; position:relative; z-index:1}
.cpcontact .btn-book span{position:relative; z-index:1}
.cpcontact .btn-book::after{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg); transition:left .6s}
.cpcontact .btn-book:hover{background:var(--crimson-deep); transform:translateY(-3px); box-shadow:0 22px 44px rgba(196,30,58,.46)}
.cpcontact .btn-book:hover::after{left:130%}
.cpcontact .btn-book:focus-visible{outline:3px solid var(--crimson-ink); outline-offset:3px}
.cpcontact .calllink{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); padding:15px 22px; border-radius:14px; border:1.5px solid var(--line); transition:border-color .3s, color .3s, background .3s, transform .3s}
.cpcontact .calllink svg{width:18px;height:18px; color:var(--crimson)}
.cpcontact .calllink:hover{border-color:var(--crimson); color:var(--crimson-deep); background:#fff; transform:translateY(-2px)}
.cpcontact .calllink:focus-visible{outline:3px solid var(--crimson); outline-offset:2px}

/* HERO (compact) */
.cpcontact .hero{position:relative; min-height:440px; display:flex; align-items:center; padding:112px 0 74px; overflow:hidden; background:#241014}
.cpcontact .hero__aurora{position:absolute; inset:0; z-index:1; overflow:hidden; mix-blend-mode:screen; opacity:.92}
.cpcontact .hero__aurora .blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55}
.cpcontact .hero__aurora .b1{width:52vw; height:52vw; left:-12vw; top:-18vw; background:radial-gradient(circle at 40% 40%, #ff3b57, transparent 62%); animation:cpc-drift1 17s ease-in-out infinite}
.cpcontact .hero__aurora .b2{width:44vw; height:44vw; right:-10vw; top:4vw; background:radial-gradient(circle at 50% 50%, #ff6a7f, transparent 60%); animation:cpc-drift2 21s ease-in-out infinite}
.cpcontact .hero__aurora .b3{width:38vw; height:38vw; left:30vw; bottom:-20vw; background:radial-gradient(circle at 50% 50%, #a3122a, transparent 62%); animation:cpc-drift3 24s ease-in-out infinite}
@keyframes cpc-drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,5vw) scale(1.12)}}
@keyframes cpc-drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,6vw) scale(1.15)}}
@keyframes cpc-drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-6vw) scale(1.1)}}
.cpcontact .hero__scrim{position:absolute; inset:0; z-index:2; background:linear-gradient(102deg, rgba(24,8,11,.9) 0%, rgba(52,14,22,.78) 40%, rgba(126,15,34,.4) 74%, rgba(126,15,34,.12) 100%)}
.cpcontact .hero__scrim::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 14% 26%, rgba(0,0,0,.34), transparent 60%)}
.cpcontact .hero .wrap{position:relative; z-index:3; width:100%}
.cpcontact .hero__inner{max-width:760px}
.cpcontact .hero .eyebrow{color:#ffb3c0}
.cpcontact .hero .eyebrow::before{background:#ffb3c0}
.cpcontact .hero h1{color:#fff; font-size:clamp(34px,5vw,58px); margin:16px 0 18px; text-shadow:0 2px 30px rgba(0,0,0,.3)}
.cpcontact .hero h1 .accent{color:#ffd7dd}
.cpcontact .hero__sub{color:#f4e4e6; font-size:clamp(17px,1.6vw,20px); max-width:58ch; margin-bottom:26px; opacity:0; animation:cpc-fadeUp .7s .35s ease both}
.cpcontact .hero__cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center; opacity:0; animation:cpc-fadeUp .7s .48s ease both}
@keyframes cpc-fadeUp{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.cpcontact .hero .calllink{color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06)}
.cpcontact .hero .calllink svg{color:#ffb3c0}
.cpcontact .hero .calllink:hover{background:#fff; color:var(--crimson-deep); border-color:#fff}
.cpcontact .hero .calllink:hover svg{color:var(--crimson)}
.cpcontact .trustchips{display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:26px; opacity:0; animation:cpc-fadeUp .7s .6s ease both}
.cpcontact .chip{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#fff; background:rgba(18,6,9,.4); border:1px solid rgba(255,255,255,.28); padding:8px 14px; border-radius:999px; backdrop-filter:blur(5px)}
.cpcontact .chip svg{width:15px;height:15px; color:#ffc9d1}
.cpcontact .stars{display:inline-flex; gap:2px; line-height:0; vertical-align:middle; color:#ffd7dd}
.cpcontact .stars .star{width:15px; height:15px}

/* BOOK / CONTACT */
.cpcontact .book{background:var(--charcoal); color:#fff; padding:88px 0}
.cpcontact .sec-head{max-width:64ch}
.cpcontact .book .sec-head h2{color:#fff; font-size:clamp(28px,3.4vw,42px); margin:16px 0 12px}
.cpcontact .book .sec-head p{color:#d6cfd0; font-size:18px}
.cpcontact .book .eyebrow{color:#ffb3c0}.cpcontact .book .eyebrow::before{background:#ffb3c0}
.cpcontact .book .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:32px; margin-top:38px; align-items:start}
/* min-height raised from the live file's 600 to the height the embed
   actually settles at, measured per breakpoint on the deployed page.
   600 let the frame grow on load and pushed contact CLS to 0.22. */
.cpcontact .formcard{background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); min-height:720px}
.cpcontact .formcard iframe{width:100%; min-height:720px; border:0; display:block; background:#fff}
@media (max-width:600px){ .cpcontact .formcard,.cpcontact .formcard iframe{min-height:800px} }
@media (min-width:601px) and (max-width:900px){ .cpcontact .formcard,.cpcontact .formcard iframe{min-height:700px} }
.cpcontact .formcta{padding:42px 36px; display:flex; flex-direction:column; justify-content:center; gap:14px; height:100%; min-height:600px}
.cpcontact .formcta .kicker{color:var(--crimson)}
.cpcontact .formcta h3{font-size:27px; color:var(--ink)}
.cpcontact .formcta p{font-size:15.5px; color:var(--slate); max-width:42ch; line-height:1.6}
.cpcontact .formcta .btn-book{align-self:flex-start; margin-top:8px}
.cpcontact .formcta .formcall{color:var(--crimson-deep); font-weight:700; font-size:14.5px}
.cpcontact .formcta .formcall:hover{text-decoration:underline}
.cpcontact .infocard{display:grid; gap:16px}
.cpcontact .nap{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); border-radius:16px; padding:24px}
.cpcontact .nap h3{color:#fff; font-size:18px; margin-bottom:14px}
.cpcontact .nap .line{display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.09); color:#e7e0e1; font-size:15px}
.cpcontact .nap .line:last-child{border-bottom:0}
.cpcontact .nap .line svg{width:19px;height:19px;color:#ffb3c0;flex:none;margin-top:2px}
.cpcontact .nap a{color:#fff; font-weight:700}
.cpcontact .nap .hrs span{display:block}
.cpcontact .nap .closed{color:#e6a9b3}
.cpcontact .mapwrap{display:flex; align-items:center; gap:16px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(120deg,rgba(196,30,58,.2),rgba(255,255,255,.05)); padding:20px 22px; transition:border-color .3s, background .3s, transform .3s}
.cpcontact .mapwrap:hover{border-color:rgba(255,179,192,.5); transform:translateY(-3px); background:linear-gradient(120deg,rgba(196,30,58,.3),rgba(255,255,255,.06))}
.cpcontact .mapwrap .pin{flex:none; width:46px; height:46px; border-radius:12px; background:var(--crimson); color:#fff; display:flex; align-items:center; justify-content:center}
.cpcontact .mapwrap .pin svg{width:22px; height:22px}
.cpcontact .mapwrap .mtxt{display:flex; flex-direction:column; line-height:1.35}
.cpcontact .mapwrap .mtxt strong{color:#fff; font-family:var(--display); font-size:15.5px}
.cpcontact .mapwrap .mtxt span{color:#d6cfd0; font-size:13.5px}
.cpcontact .mapwrap .mcta{margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:#ffb3c0; font-weight:700; font-size:14px; white-space:nowrap}
.cpcontact .mapwrap .mcta svg{width:16px; height:16px}
.cpcontact .mapwrap:focus-visible{outline:3px solid #ffb3c0; outline-offset:3px}

/* CURRENT CLIENT card: the one light object in a dark column, so a returning patient sees it first */
.cpcontact .portalcard{position:relative; overflow:hidden; display:flex; align-items:center; gap:16px; border-radius:16px; border:1px solid rgba(196,30,58,.26); background:linear-gradient(150deg,#FFFFFF 0%,#FDF3F1 100%); padding:20px 22px; box-shadow:0 18px 44px rgba(0,0,0,.34); transition:transform .3s, box-shadow .3s, border-color .3s}
.cpcontact .portalcard::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0; background:var(--crimson)}
.cpcontact .portalcard:hover{transform:translateY(-3px); box-shadow:0 26px 56px rgba(0,0,0,.42); border-color:rgba(196,30,58,.5)}
.cpcontact .portalcard:focus-visible{outline:3px solid #ffb3c0; outline-offset:3px}
.cpcontact .portalcard .pin{flex:none; width:46px; height:46px; border-radius:12px; background:var(--crimson); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(196,30,58,.32)}
.cpcontact .portalcard .pin svg{width:22px; height:22px}
.cpcontact .portalcard .mtxt{display:flex; flex-direction:column; line-height:1.35; min-width:0}
.cpcontact .portalcard .mtxt strong{color:var(--ink); font-family:var(--display); font-size:16.5px; letter-spacing:-.01em}
.cpcontact .portalcard .psub{color:var(--slate); font-size:13.5px; margin-top:2px}
.cpcontact .portalcard .pbtn{margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:8px; background:var(--crimson); color:#fff; font-family:var(--display); font-weight:700; font-size:14.5px; padding:14px 20px; border-radius:12px; box-shadow:0 10px 22px rgba(196,30,58,.34); transition:background .3s, transform .3s, box-shadow .3s}
.cpcontact .portalcard .pbtn svg{width:16px; height:16px; transition:transform .3s}
.cpcontact .portalcard:hover .pbtn{background:var(--crimson-deep); box-shadow:0 14px 28px rgba(196,30,58,.46)}
.cpcontact .portalcard:hover .pbtn svg{transform:translateX(3px)}
.cpcontact .portalcard .plabel{display:block; font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--crimson); margin-bottom:3px}

.cpcontact .btn-call{display:inline-flex; align-items:center; justify-content:center; gap:11px; width:100%; background:var(--crimson-deep); color:#fff; font-family:var(--display); font-weight:700; font-size:17px; padding:17px 30px; border-radius:14px; border:0; cursor:pointer; transition:transform .3s, background .3s; box-shadow:0 14px 30px rgba(158,23,41,.3)}
.cpcontact .btn-call svg{width:19px; height:19px}
.cpcontact .btn-call:hover{background:var(--crimson); transform:translateY(-3px)}
.cpcontact .btn-call:focus-visible{outline:3px solid var(--crimson-ink); outline-offset:3px}

/* STEPS band */
.cpcontact .next{background:linear-gradient(180deg,var(--mist),var(--paper)); padding:84px 0}
.cpcontact .next .sec-head{max-width:64ch}
.cpcontact .next .sec-head h2{font-size:clamp(28px,3.4vw,42px); margin:16px 0 12px}
.cpcontact .next .sec-head p{font-size:18px}
.cpcontact .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
.cpcontact .step{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px 24px; transition:transform .35s, box-shadow .35s, border-color .35s}
.cpcontact .step:hover,.cpcontact .step.fx.on{transform:translateY(-6px); box-shadow:var(--shadow-sm); border-color:rgba(196,30,58,.35)}
.cpcontact .step .n{width:48px;height:48px; border-radius:12px; background:var(--sand); color:var(--crimson); font-family:var(--display); font-weight:800; font-size:20px; display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.cpcontact .step h3{font-size:19px; margin-bottom:8px}
.cpcontact .step p{font-size:14.5px}

/* FAQ (compact) */
.cpcontact .faq{background:var(--paper); padding:84px 0}
.cpcontact .faq .sec-head{text-align:center; margin:0 auto}
.cpcontact .faq .sec-head h2{font-size:clamp(28px,3.4vw,42px); margin:16px 0 8px}
.cpcontact .faq-list{max-width:860px; margin:40px auto 0; display:grid; gap:12px}
.cpcontact .qa{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 24px; transition:box-shadow .3s, border-color .3s, transform .3s}
.cpcontact .qa:hover,.cpcontact .qa.fx.on{box-shadow:var(--shadow-sm); border-color:rgba(196,30,58,.35); transform:translateY(-3px)}
.cpcontact .qa .q{font-family:var(--display); font-weight:700; font-size:17px; color:var(--ink); margin:0 0 9px; display:flex; gap:12px; align-items:center}
.cpcontact .qa .q::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--crimson)}
.cpcontact .qa .ans p{font-size:15px; line-height:1.62; color:var(--slate)}

/* mobile sticky CTA */
.cpcontact .stickybar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; gap:10px; padding:11px 14px calc(11px + env(safe-area-inset-bottom)); background:rgba(24,16,18,.94); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.12); box-shadow:0 -8px 26px rgba(0,0,0,.3)}
.cpcontact .stickybar .btn-book{flex:1; justify-content:center; padding:15px}
.cpcontact .stickybar .scall{flex:none; width:54px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#fff}
.cpcontact .stickybar .scall svg{width:22px;height:22px}

/* responsive */
@media (max-width:1000px){
  .cpcontact .book .grid{grid-template-columns:1fr; gap:26px}
  .cpcontact .steps{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cpcontact{font-size:16px}
  .cpcontact .book,.cpcontact .next,.cpcontact .faq{padding:60px 0}
  .cpcontact .hero{min-height:auto; padding:100px 0 60px}
  .cpcontact .infocard .btn-call{display:none}
  .cpcontact .stickybar{display:flex}
  .cpcontact .book{padding-bottom:96px}
  .cpcontact .hero__cta .calllink{display:none}
  /* the portal card stays on mobile: current clients need it on a phone */
  .cpcontact .portalcard{flex-wrap:wrap; gap:14px}
  .cpcontact .portalcard .pbtn{margin-left:0; width:100%; justify-content:center; padding:14px}
}
@media (prefers-reduced-motion:reduce){
  .cpcontact *,.cpcontact *::before,.cpcontact *::after{animation:none!important; transition:none!important}
  .cpcontact .reveal{transform:none!important}
  .cpcontact .hero__sub,.cpcontact .hero__cta,.cpcontact .trustchips{opacity:1!important; transform:none!important}
}

/* ---------------------------------------------------------------------------
 * Scope guard. The theme stylesheet defines .step, .chip, .faq, .hero,
 * .formcard, .portalcard and .eyebrow as its own components. Where the ported
 * live rule does not set a property, the theme's value leaks in: .step is the
 * clear case, where the theme's display:grid / grid-template-columns:auto 1fr
 * turned the live stacked step card into a two column one.
 *
 * These reset only the properties the live file relies on inheriting as
 * defaults. They do not restyle anything the live file sets itself.
 * ------------------------------------------------------------------------- */
.cpcontact .step{display:block;grid-template-columns:none;gap:0;align-items:initial}
.cpcontact .chip{margin:0}
.cpcontact .eyebrow{margin:0}
.cpcontact .faq{border:0;background:var(--mist)}

/* ---------------------------------------------------------------------------
 * The clinic strip. Sits in the ported page but is styled to its scope, using
 * the .cpcontact tokens so it reads as part of the same page rather than a
 * bolted-on theme section.
 * ------------------------------------------------------------------------- */
.cpcontact .clinicshots{background:var(--paper);padding:84px 0}
.cpcontact .clinicshots__head{max-width:64ch;margin-bottom:38px}
.cpcontact .clinicshots__head h2{font-size:clamp(28px,3.4vw,42px);margin:16px 0 12px}
.cpcontact .clinicshots__head p{font-size:17px;color:var(--slate);max-width:58ch}
.cpcontact .clinicshots__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cpcontact .clinicshot{
  margin:0;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);
  background:var(--sand);box-shadow:var(--shadow-sm);
  transition:transform .4s,box-shadow .4s,border-color .4s;
}
.cpcontact .clinicshot img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .6s}
.cpcontact .clinicshot:hover,.cpcontact .clinicshot.fx.on{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(196,30,58,.35)}
.cpcontact .clinicshot:hover img,.cpcontact .clinicshot.fx.on img{transform:scale(1.045)}
@media (max-width:1040px){ .cpcontact .clinicshots__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){
  .cpcontact .clinicshots{padding:62px 0}
  .cpcontact .clinicshots__grid{grid-template-columns:1fr;gap:14px}
}