@charset "UTF-8";
/* =====================================================================
   WordPress additions. The design's stylesheet (styles.css) is untouched;
   everything WordPress needs on top of it lives here.

   This file loads after styles.css, so a same-specificity rule here beats a
   media-query rule there. Each component's base rule and its responsive
   overrides are kept together below, in cascade order.
   ===================================================================== */

/* WordPress prints width/height attributes on images; without height:auto every
   scaled image stretches. Class-based design rules (height:100% for covers) still win. */
img{max-width:100%;height:auto}

/* Skip link */
.sa-skip:focus{position:fixed;left:1rem;top:1rem;z-index:100;width:auto;height:auto;clip:auto;padding:.7rem 1rem;background:var(--paper);box-shadow:0 10px 30px -18px rgba(29,28,33,.4)}

/* Admin bar: keep the sticky header below it (it is fixed only above 600px) */
.admin-bar .site-header{top:calc(32px + env(safe-area-inset-top,0px))}
@media (max-width:782px){.admin-bar .site-header{top:calc(46px + env(safe-area-inset-top,0px))}}
@media (max-width:600px){.admin-bar .site-header{top:env(safe-area-inset-top,0px)}}

/* Logo fallback when no logo image is set */
.sa-logo-text{position:absolute;left:0;top:50%;translate:0 -50%;font-family:var(--display);font-size:1.35rem;white-space:nowrap}
.footer-brand .sa-logo-text{position:static;translate:none}

/* Mega menu foot icons (the design sized these inline) and a blank circle for a
   treatment with no featured image */
.nav-menu .sa-mega-ic{width:.9rem;height:.9rem}
.sa-circle-empty{display:block;flex:none;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--blush)}
.mega-item .sa-circle-empty{width:5.5rem;height:5.5rem}

/* Floating WhatsApp / quick-contact buttons. The design's ".fab" class is renamed
   ".sa-fab" because Font Awesome uses .fab for brand icons and would swallow the
   buttons. These mirror the design's .fab rules exactly. */
.sa-fab{width:3.3rem;height:3.3rem;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 .6rem 1.4rem rgba(28,26,23,.18);transition:transform .18s ease,box-shadow .18s ease}
.sa-fab:hover,.sa-fab:focus-visible{transform:translateY(-.16rem) scale(1.04);box-shadow:0 .85rem 2rem rgba(28,26,23,.24)}
.sa-fab svg{width:1.35rem;height:1.35rem}

/* ---------- Section settings (background / padding / container) ----------
   :is() takes the specificity of its element argument, so these beat the layouts'
   own single-class backgrounds (.about, .clinic, .trust…) without !important. */
:is(section,div).sa-bg-frost{background:var(--frost)}
:is(section,div).sa-bg-mist{background:var(--mist)}
:is(section,div).sa-bg-pewter{background:var(--pewter)}
:is(section,div).sa-bg-paper{background:var(--paper)}
section.sa-pt-none{padding-top:0}
section.sa-pt-small{padding-top:clamp(2.5rem,2rem + 2vw,3.5rem)}
section.sa-pt-large{padding-top:clamp(5.5rem,4rem + 5vw,8.5rem)}
section.sa-pb-none{padding-bottom:0}
section.sa-pb-small{padding-bottom:clamp(2.5rem,2rem + 2vw,3.5rem)}
section.sa-pb-large{padding-bottom:clamp(5.5rem,4rem + 5vw,8.5rem)}
.wrap.sa-wrap-narrow{max-width:calc(52rem + 40px)}

/* ---------- Editor-only notices and image placeholders ---------- */
.sa-editor-notice{margin-block:1rem;padding:1rem 1.25rem;border:1px dashed var(--rose);background:var(--rose-mist);color:var(--ink);font-size:.9rem}
.sa-placeholder{display:grid;place-items:center;width:100%;height:100%;min-height:8rem;background:repeating-linear-gradient(135deg,var(--mist) 0 12px,var(--pewter) 12px 24px);color:var(--muted);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.sa-placeholder span{background:var(--paper);padding:.35rem .7rem}
.hero-image-wrap .sa-placeholder,.compare .sa-placeholder,.clinic-media .sa-placeholder,.split-media .sa-placeholder,.about-media .sa-placeholder{position:absolute;inset:0;min-height:0}

/* ---------- Rich-text wrappers ----------
   WYSIWYG fields output their own <p>s inside a wrapper, so the design's
   child-combinator rules (.t-intro-copy > p etc.) are mirrored here. */
.sa-rich{display:grid;gap:1.1rem;color:var(--ink-soft)}
.sa-rich a{color:var(--rose);border-bottom:1px solid var(--rose-line)}
.sa-rich ul{margin:0;padding-left:1.2rem;display:grid;gap:.4rem}
.t-intro-copy .sa-rich{gap:1.2rem;max-width:36rem}
.split-body .sa-rich{gap:1.2rem;max-width:38rem}
.clinic-content .sa-rich{gap:1.3rem}
.more-head .sa-rich{justify-items:center}

/* Long-form "read more" copy: Heading 4 and lists match the design's aftercare block */
.more-body h4{font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep);margin:.6rem 0 0}
.more-body ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.more-body ul li{position:relative;padding-left:1.4rem}
.more-body ul li::before{content:"";position:absolute;left:.2rem;top:.68em;width:.42rem;height:.42rem;border-radius:50%;background:var(--rose)}
.more-body ol{margin:0;padding-left:1.4rem;display:grid;gap:.5rem}
.more-body a{color:var(--rose);border-bottom:1px solid var(--rose-line)}

/* FAQ answers come from the editor, so they can have several paragraphs and lists */
.faq-a > div > * + *{margin-top:.8rem}
.faq-a ul,.faq-a ol{padding-left:1.2rem;margin-bottom:0}
.faq-a a{color:var(--rose);border-bottom:1px solid var(--rose-line)}

/* ---------- Replacements for the design's inline styles ---------- */
.sa-plain-list{list-style:none;padding:0}
.final-cta-text{color:var(--ink-soft);max-width:36rem}
.checklist.one-col{grid-template-columns:1fr}
.philosophy .sa-quote{margin-top:1rem}
.sa-form-heading{margin-top:.6rem}
.sa-panel-image{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:40% 30%;margin:-.2rem 0 .4rem}
.sa-panel-link{justify-self:start;margin-top:.4rem}
.sa-col-image img{width:100%;aspect-ratio:4/3;object-fit:cover}
.two-col.sa-align-center{align-items:center}
.sa-results-carousel .track{justify-content:center}
.sa-lb-steps{display:flex;gap:.6rem;margin-top:.6rem}
.sa-map-media{min-height:28rem}
.sa-map-fill{position:absolute;inset:0;border:0}

/* Static (non-slider) result card for photo-set results */
.compare.sa-static{cursor:default}

/* The trust/logo marquees respect reduced motion: show a static, scrollable row */
@media (prefers-reduced-motion:reduce){
  .trust-track,.logo-track{animation:none!important}
  .trust,.logo-marquee{overflow-x:auto}
}

/* ---------- Gravity Forms inside the design's form card ----------
   Gravity Forms prints its CSS-API variables in an inline <style> scoped to
   #gform_wrapper_{id}. An ID selector cannot be out-specified from a stylesheet,
   so those variables are overridden with !important. Everything below them is
   ordinary specificity. */
.form-card .gform_wrapper.gform-theme{
  --gf-color-primary:var(--rose)!important;
  --gf-color-primary-rgb:var(--rose-rgb)!important;
  --gf-color-primary-darker:var(--rose-deep)!important;
  --gf-color-primary-contrast:#fff!important;
  --gf-ctrl-bg-color:var(--frost)!important;
  --gf-ctrl-bg-color-hover:var(--frost)!important;
  --gf-ctrl-bg-color-focus:var(--paper)!important;
  --gf-ctrl-border-color:var(--line)!important;
  --gf-ctrl-border-color-hover:#c4c2ca!important;
  --gf-ctrl-border-color-focus:var(--rose)!important;
  --gf-ctrl-radius:0!important;
  --gf-radius:0!important;
  --gf-ctrl-label-color-primary:var(--ink)!important;
  --gf-ctrl-label-color-secondary:var(--muted)!important;
  --gf-ctrl-color:var(--ink)!important;
  --gf-ctrl-font-family:var(--body)!important;
  --gf-font-family-base:var(--body)!important;
  --gf-ctrl-btn-bg-color-primary:var(--charcoal)!important;
  --gf-ctrl-btn-bg-color-hover-primary:var(--rose-deep)!important;
  --gf-ctrl-btn-radius:999px!important;
}
.form-card .gform_wrapper{margin:0}
.form-card .gform_wrapper .gform_heading{display:none}
.form-card .gform_wrapper .gfield_label,.form-card .gform_wrapper legend.gfield_label{font-size:.8rem;font-weight:500;letter-spacing:.02em;margin-bottom:.45rem}
/* The design marks nothing as required; missing fields are flagged on submit instead */
.form-card .gform_wrapper .gfield_required{display:none}
.form-card .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]),
.form-card .gform_wrapper select,
.form-card .gform_wrapper textarea{width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:var(--frost);border:1px solid var(--line);padding:.85rem 1rem;border-radius:0;box-shadow:none;transition:border-color .18s ease,background-color .18s ease,box-shadow .2s ease;min-height:3.1rem}
.form-card .gform_wrapper select{-webkit-appearance:none;appearance:none;padding-right:2.6rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376737D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1rem}
.form-card .gform_wrapper textarea{min-height:9rem;resize:vertical}
.form-card .gform_wrapper input:not([type=radio]):not([type=checkbox]):focus,
.form-card .gform_wrapper select:focus,
.form-card .gform_wrapper textarea:focus{outline:none;background-color:var(--paper);border-color:var(--rose);box-shadow:0 0 0 3px rgba(var(--rose-rgb),.15)}
/* Radio choices as the design's square-cornered, inline "seg" buttons.
   Gravity Forms' own stylesheet loads after this file and stacks choices in a
   column with a same-specificity rule, so these selectors carry an extra .gfield
   to win on specificity rather than load order. */
.form-card .gform_wrapper .gfield .gfield_radio{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}
.form-card .gform_wrapper .gfield .gfield_radio .gchoice{position:relative;display:block;margin:0;width:auto}
.form-card .gform_wrapper .gfield .gfield_radio input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.form-card .gform_wrapper .gfield .gfield_radio label{display:inline-flex;align-items:center;margin:0;padding:.6rem 1rem;border:1px solid var(--line);border-radius:0;font-size:.88rem;line-height:1.6;color:var(--ink-soft);background:var(--frost);cursor:pointer;transition:background-color .18s,border-color .18s,color .18s}
.form-card .gform_wrapper .gfield .gfield_radio label::before,.form-card .gform_wrapper .gfield .gfield_radio label::after{display:none}
.form-card .gform_wrapper .gfield .gfield_radio input:checked + label{background:var(--rose);border-color:var(--rose);color:#fff}
.form-card .gform_wrapper .gfield .gfield_radio input:focus-visible + label{outline:2px solid var(--rose);outline-offset:2px}
.form-card .gform_wrapper .gfield_consent_label,.form-card .gform_wrapper .gfield--type-consent label{font-size:.85rem;color:var(--ink-soft)}
.form-card .gform_wrapper .gfield--type-consent a{color:var(--rose);border-bottom:1px solid var(--rose-line)}
.form-card .gform_wrapper input[type=checkbox]{accent-color:var(--rose);width:1.15rem;height:1.15rem}
.form-card .gform_wrapper .gfield_description{font-size:.78rem;color:var(--muted)}
.form-card .gform_wrapper .gfield_validation_message,.form-card .gform_wrapper .validation_message{font-size:.78rem;color:#9E3E48;background:none;border:0;padding:.3rem 0 0}
.form-card .gform_wrapper .gform_validation_errors{border-radius:0;box-shadow:none}
.form-card .gform_wrapper .gform_footer{display:flex;margin-top:1.4rem;padding:0;justify-content:flex-end}
.form-card .gform_wrapper .gform_footer .gform_button,
.form-card .gform_wrapper .gform_footer input[type=submit],
.form-card .gform_wrapper .gform_footer button{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:0 2rem;border:0;border-radius:999px;background:var(--charcoal);color:#fff;font:inherit;font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background-color .18s ease,transform .18s ease,box-shadow .22s ease}
.form-card .gform_wrapper .gform_footer .gform_button:hover,
.form-card .gform_wrapper .gform_footer input[type=submit]:hover,
.form-card .gform_wrapper .gform_footer button:hover{background:var(--rose-deep);transform:translateY(-.15rem);box-shadow:0 .8rem 1.6rem -0.8rem rgba(188,58,97,.5)}
.form-card .gform_confirmation_message{display:grid;gap:1rem;justify-items:center;text-align:center;padding:2rem 1rem;color:var(--ink-soft)}
@media (max-width:560px){.form-card .gform_wrapper .gform_footer .gform_button{width:100%}}

/* ---------- Fallback content, listings, pagination ---------- */
.sa-prose{max-width:46rem;margin:0 auto;display:grid;gap:1.1rem;color:var(--ink-soft)}
.sa-prose.is-wide{max-width:none}
.sa-prose h2,.sa-prose h3{color:var(--ink);margin-top:.8rem}
.sa-prose h3{font-size:1.35rem}
.sa-prose a{color:var(--rose);border-bottom:1px solid var(--rose-line)}
.sa-prose ul,.sa-prose ol{margin:0;padding-left:1.3rem;display:grid;gap:.4rem}
.sa-post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.sa-pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem;margin-top:2.5rem}
.sa-pagination .page-numbers{min-width:2.6rem;height:2.6rem;display:grid;place-items:center;padding:0 .7rem;border-radius:999px;background:var(--paper);border:1px solid var(--line-soft);font-size:.85rem}
.sa-pagination .page-numbers.current{background:var(--rose);border-color:var(--rose);color:#fff}
.sa-pagination .page-numbers svg{width:.9rem;height:.9rem}
@media (max-width:1040px){.sa-post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.sa-post-grid{grid-template-columns:1fr}}

/* WordPress core alignment / caption classes inside editor content */
.alignleft{float:left;margin:0 1.5rem 1rem 0}
.alignright{float:right;margin:0 0 1rem 1.5rem}
.aligncenter{margin-inline:auto}
.wp-caption-text,.wp-element-caption{font-size:.8rem;color:var(--muted);margin-top:.4rem}