/* =========================================================================
   Chiropratique Notre-Dame — site theme (nd2026)
   Standalone (no Bootstrap). Palette keeps the clinic teal; layout rhythm
   is modelled on chiroposturemontreal.com.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --teal:#01b5c7;
  --teal-dark:#018c98;
  --teal-soft:#99cccc;
  --ink:#0b3b41;
  --body:#4a5b5e;
  --band:#eef5f7;
  --line:#dceaee;
  --accent:#ffa030;        /* logo amber */
  --accent-dark:#ed8a0a;
  --lime:#b6c443;          /* logo lime */
  --yellow:#ffed20;        /* logo yellow */
  --white:#fff;
  --radius:14px;
  --shadow:0 6px 28px rgba(11,59,65,.09);
  --shadow-lg:0 16px 44px rgba(11,59,65,.16);
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{overflow-x:clip}
/* The header is sticky, so an anchored target must stop clear of it. */
:target,[id^="c-"]{scroll-margin-top:110px}
body{
  margin:0;font-family:'Poppins',"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.75;color:var(--body);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-dark);text-decoration:none;transition:color .2s}
a:hover{color:var(--teal)}
h1,h2,h3,h4,h5{font-family:'Poppins',sans-serif;color:var(--ink);margin:0 0 .6em;line-height:1.25;font-weight:600}
h1{font-size:clamp(2rem,4.6vw,3.35rem);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.01em}
h3{font-size:1.2rem}
p{margin:0 0 1.15em}
/* Layout lists (menus, card grids, pill rows) carry no list styling. Prose
   lists must keep theirs — see the .prose rules at the end of this file.
   This started life as a blanket `ul{margin:0;padding:0}`, which silently
   removed the bullets from every rich-text block the CMS renders. */
nav ul,.grid ul,.trust ul,.footer-links,.cond-list,.cond-pills,.checks,.mainnav ul{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.section{padding:84px 0}
.section--band{background:var(--band)}
.section--tight{padding:60px 0}

/* ---- section headers ---------------------------------------------------- */
.shead{max-width:760px;margin:0 auto 52px;text-align:center}
.shead--left{margin-left:0;text-align:left}
.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-dark);margin-bottom:.9em;
}
.shead p{font-size:1.03rem;margin-bottom:0}
.rule{width:64px;height:3px;background:var(--teal);border-radius:3px;margin:18px auto 0}
.shead--left .rule{margin-left:0}

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:.55em;padding:14px 30px;border-radius:999px;
  font-weight:600;font-size:.94rem;letter-spacing:.01em;border:2px solid transparent;
  cursor:pointer;transition:all .22s ease;white-space:nowrap;
}
.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn--accent:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 22px rgba(255,160,48,.35)}
.btn--teal{background:var(--teal);border-color:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.btn--ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn--outline{background:transparent;border-color:var(--teal);color:var(--teal-dark)}
.btn--outline:hover{background:var(--teal);color:#fff}
.btn--sm{padding:10px 22px;font-size:.86rem}

/* ---- dev ribbon --------------------------------------------------------- */
.devflag{
  position:fixed;left:0;bottom:0;z-index:999;background:#0b3b41;color:#8fe4ee;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 14px;border-top-right-radius:8px;
}

/* =========================================================================
   HEADER
   ========================================================================= */
.topbar{background:var(--ink);color:#bcd9de;font-size:.82rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:42px}
.topbar a{color:#bcd9de}
.topbar a:hover{color:#fff}
.topbar-info{display:flex;gap:26px;flex-wrap:wrap}
.topbar-info i{color:var(--teal);margin-right:.5em}
.topbar-lang{font-weight:600;letter-spacing:.04em}

.site-header{position:sticky;top:0;z-index:200;background:#fff;box-shadow:0 1px 0 var(--line);transition:box-shadow .25s}
.site-header.is-stuck{box-shadow:0 4px 20px rgba(11,59,65,.10)}
.site-header .wrap{display:flex;align-items:center;gap:18px;min-height:84px}
.brand{display:flex;align-items:center;flex:none}
.brand img{width:58px;height:auto}

.mainnav{margin-left:auto}
.mainnav > ul{display:flex;align-items:center;gap:4px;list-style:none}
.mainnav > ul > li{position:relative}
.mainnav > ul > li > a{
  display:block;padding:12px 12px;font-size:.9rem;font-weight:500;color:var(--ink);border-radius:8px;white-space:nowrap;
}
.mainnav > ul > li > a:hover,.mainnav li.current > a{color:var(--teal-dark);background:var(--band)}
.mainnav .caret{font-size:.62rem;margin-left:.4em;opacity:.6}
.submenu{
  position:absolute;top:100%;left:0;min-width:250px;background:#fff;list-style:none;
  border-radius:12px;box-shadow:var(--shadow-lg);padding:10px;opacity:0;visibility:hidden;
  transform:translateY(10px);transition:all .2s ease;border:1px solid var(--line);
}
.mainnav li:hover > .submenu,.mainnav li:focus-within > .submenu{opacity:1;visibility:visible;transform:translateY(0)}
/* The panel sizes to its longest item rather than to a fixed width: the French
   labels ("Qu'est-ce que SIGMA technologie ?") need ~290px and were wrapping
   onto a second line at the old 250px. nowrap keeps any future label on one
   line too, instead of needing the width bumped again. */
.submenu a{display:block;padding:9px 14px;border-radius:8px;font-size:.88rem;color:var(--body);white-space:nowrap}
.submenu a:hover{background:var(--band);color:var(--teal-dark)}
.header-cta{flex:none;display:flex;align-items:center;gap:10px}
.navtoggle{display:none;background:none;border:0;font-size:1.5rem;color:var(--ink);padding:6px 10px;cursor:pointer}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('/assets/img/img01.jpg') center/cover no-repeat;transform:scale(1.02)}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,59,65,.92) 0%,rgba(11,59,65,.78) 46%,rgba(1,140,152,.55) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:96px;padding-bottom:96px}
.hero-inner{max-width:730px}
.hero .eyebrow{color:#7fdfe9}
.hero h1{color:#fff;margin-bottom:.35em}
.hero h1 em{font-style:normal;color:#7fdfe9}
.hero-lead{font-size:1.1rem;color:#d7ecef;max-width:600px;margin-bottom:2em}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* trust strip under hero */
.trust{background:var(--ink);border-top:1px solid rgba(255,255,255,.08)}
.trust .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:26px;padding-bottom:26px}
.trust .wrap{padding-top:24px;padding-bottom:24px}
.trust-item{display:flex;align-items:center;justify-content:center;gap:11px;padding:2px 10px}
.trust-item > i{font-size:1.2rem;color:var(--teal)}
.trust-item b{font-size:1rem;font-weight:500;color:#fff;line-height:1.3}
.trust-item + .trust-item{border-left:1px solid rgba(255,255,255,.10)}

/* =========================================================================
   INTRO (image + copy)
   ========================================================================= */
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:58px;align-items:center}
.intro-media{position:relative}
.intro-media img{border-radius:var(--radius);box-shadow:var(--shadow-lg)}
/* A second image under the main one — a university or association logo.
   Plainer than the photo: no shadow, capped height, left-aligned under it. */
.intro-logo{margin-top:18px}
.intro-logo img{border-radius:0;box-shadow:none;max-height:150px;width:auto;max-width:100%}
.intro-media-btn{margin-top:20px}
/* A fixed shape for the main image, so the same block on sibling pages — the
   doctor profiles — lines up at one height whatever each photo was cropped to.
   Direct child only: the logo under it keeps its own size. */
.intro-media--portrait > img{aspect-ratio:2/3;object-fit:cover;width:100%}
.intro-media--square > img{aspect-ratio:1;object-fit:cover;width:100%}
.intro-media--landscape > img{aspect-ratio:3/2;object-fit:cover;width:100%}

/* Two blocks marked "half width" share a row. Each is a normal section, so its
   own padding and inner wrap are neutralised and the pair's container supplies
   the page column instead. */
.secpair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.secpair > .section{padding:0}
.secpair > .section > .wrap{max-width:none;width:auto;padding:0}
.secpair > .section + .section{padding-top:0}
/* A block's own heading is an h2 by default. In half a column it is a sub-head,
   so it takes the h3 size the standalone heading blocks used to carry here. */
.secpair .shead{max-width:none;margin-bottom:22px}
.secpair .shead h2{font-size:1.2rem}
/* "Equal halves" — the default leans the extra room towards the text. */
.intro-grid--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.intro-grid--narrow{grid-template-columns:minmax(0,40fr) minmax(0,60fr)}
.intro-grid--thin{grid-template-columns:minmax(0,30fr) minmax(0,70fr)}
/* Consecutive image+text rows are one sequence, not separate bands, so they
   stack tighter than a standalone split would. */
.sec-split + .sec-split{padding-top:0}
/* These variants line content up across sibling pages, so the columns start at
   the top together. Centring (the default) drops a short image column down the
   row — the profile with no logo or button under its photo sat lower than the
   others. */
.intro-grid--narrow,.intro-grid--thin{align-items:start}
.intro-badge{
  position:absolute;right:-18px;bottom:-24px;background:var(--teal);color:#fff;
  border-radius:var(--radius);padding:20px 26px;box-shadow:var(--shadow-lg);max-width:210px;
}
.intro-badge b{display:block;font-size:1.9rem;font-weight:700;line-height:1.1}
.intro-badge--rating{text-align:center;padding:16px 24px 18px;max-width:none}
.intro-badge-stars{display:block;color:#fff;letter-spacing:2px;font-size:.9rem;margin-bottom:2px;opacity:.95}
.intro-badge--rating b{font-size:2.1rem}
.intro-badge--rating a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.intro-badge span{font-size:.82rem;line-height:1.4;display:block;opacity:.92}
.intro-copy h2{margin-bottom:.5em}
.checks{list-style:none;margin:0 0 1.6em}
.checks li{position:relative;padding-left:32px;margin-bottom:.6em;font-size:.97rem}
.checks i{position:absolute;left:0;top:.42em;color:var(--teal);font-size:1rem}
/* A checklist marked "indented" reads as a sub-list of the list above it:
   its items line up under the parent item's text, with a quieter marker. */
.checks--indent{margin-left:32px;margin-bottom:0}
.checks--indent li{margin-bottom:.35em;font-size:.92rem}
.checks--indent i{font-size:.42rem;top:.75em;color:var(--teal-soft)}

/* =========================================================================
   CARD GRIDS
   ========================================================================= */
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{
  background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card-media{aspect-ratio:3/2;overflow:hidden;background:var(--band);flex:none}
.card-media--contain{background:#fff;border-bottom:1px solid var(--line)}
.card-media--product{background:#fff;border-bottom:1px solid var(--line)}
.card-media--contain img{object-fit:contain;padding:22px;transform:none}
.card:hover .card-media--contain img{transform:none}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.05)}
.card-body{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.card-body h3{margin-bottom:.5em}

/* Accented cards — for text-only sets, which are otherwise plain white boxes.
   A teal edge along the top, the site's rule under each title, and a tinted
   footprint that clears on hover so the card lifts into white. */
.card--accent{position:relative;background:linear-gradient(180deg,#f7fbfc,#fff 120px)}
.card--accent::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--teal),var(--teal-soft));
}
.card--accent .card-body{padding-top:30px}
.card--accent .card-body h3{margin-bottom:.55em;font-size:1.12rem;color:var(--ink)}
.card--accent .card-body .rule{width:44px;height:3px;border-radius:2px;background:var(--teal);margin:0 0 1.1em}
.card--accent:hover{background:#fff}
.card--accent:hover::before{background:linear-gradient(90deg,var(--teal-dark),var(--teal))}
.card--accent .prose{color:var(--body)}
.card--accent:target{background:#fff}
.card-body p{font-size:.94rem;margin-bottom:1.2em}
.card-link{margin-top:auto;font-weight:600;font-size:.88rem;color:var(--teal-dark);display:inline-flex;align-items:center;gap:.4em}
.card-link i{transition:transform .2s}
.card:hover .card-link i{transform:translateX(4px)}

/* patient-type cards (5-up, icon led) */
.grid-types{display:flex;flex-wrap:wrap;justify-content:center;gap:26px}
.grid-types > .type-card{flex:0 1 calc(33.333% - 18px);min-width:290px}
.type-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.type-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.type-media{aspect-ratio:3/2;overflow:hidden}
.type-media img{width:100%;height:100%;object-fit:cover}
.type-body{padding:20px 20px 24px}
.type-icon{
  width:46px;height:46px;border-radius:50%;background:var(--band);color:var(--teal-dark);
  display:grid;place-items:center;font-size:1.05rem;margin:-43px 0 14px;border:3px solid #fff;
  position:relative;box-shadow:var(--shadow);background-color:#fff;
}
.type-body h3{font-size:1.02rem;margin-bottom:.45em}
.type-body p{font-size:.89rem;line-height:1.7;margin:0}
.type-body p a{text-decoration:underline;text-underline-offset:2px}

/* =========================================================================
   TEAM
   ========================================================================= */
.grid-team{grid-template-columns:repeat(3,1fr);gap:30px}
.member{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.member:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.member-photo{aspect-ratio:7/9;overflow:hidden;background:var(--band);position:relative;flex:none}
.member-photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
/* The grid already gives every card the same height; making the card and its
   body flex columns lets the button below push to the bottom, so the three
   "Read more" buttons line up however long each biography runs. */
.member{display:flex;flex-direction:column}
.member-body{padding:24px 26px 28px;text-align:left;display:flex;flex-direction:column;flex:1}
/* Without align-self the link would stretch to the full card width now that it
   is a flex item. */
.member-body > .btn{margin-top:auto;align-self:flex-start}
/* margin-top:auto sets the button's position but cannot also set a minimum gap:
   on the tallest card the auto margin collapses to nothing and the button ends
   up flush against the text. The gap therefore belongs to whatever sits above
   it. .member-creds already carries 1.4em; the biography needs it too, because
   `.prose > :last-child` deliberately zeroes its final paragraph's margin. */
.member-body > .prose{margin-bottom:1.4em}
.member-body h3{margin-bottom:.15em;font-size:1.1rem}
.member-role{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:1em}
.member-body p{font-size:.9rem;margin-bottom:1.2em}
.member-creds{margin-bottom:1.4em}
.member-creds li{font-size:.86rem;line-height:1.6;margin-bottom:.5em;padding-left:26px}
.member-creds i{font-size:.8rem;top:.5em}

/* =========================================================================
   CONDITIONS
   ========================================================================= */
.conditions{position:relative;color:#fff;overflow:hidden}
.conditions-bg{position:absolute;inset:0;background:url('/assets/img/Chiro_Montreal_Spinal-Care.jpg') center/cover no-repeat}
.conditions-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,59,65,.96),rgba(1,140,152,.9))}
.conditions .wrap{position:relative;z-index:2}
.conditions h2,.conditions .eyebrow{color:#fff}
.conditions .eyebrow{color:#7fdfe9}
.conditions .rule{background:#7fdfe9}
.cond-list{list-style:none;columns:2;column-gap:44px;margin:0 0 38px}
.cond-list li{break-inside:avoid;padding:11px 0 11px 30px;position:relative;border-bottom:1px solid rgba(255,255,255,.14)}
.cond-list i{position:absolute;left:0;top:1.05em;color:#7fdfe9;font-size:.85rem}
.cond-list a{color:#e2f3f6;font-size:.95rem}
.cond-list a:hover{color:#fff}

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.grid-quotes{grid-template-columns:repeat(3,1fr);gap:26px}
.quote{background:#fff;border-radius:var(--radius);padding:32px 30px;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column}
.quote .fa-quote-left{color:var(--teal-soft);font-size:1.5rem;margin-bottom:14px}
.quote-title{font-weight:600;color:var(--ink);margin-bottom:.4em;font-size:1rem}
.quote p{font-size:.92rem;line-height:1.75;margin-bottom:1.4em}
.quote-by{margin-top:auto;display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.quote-avatar{width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.9rem;flex:none}
.quote-by b{display:block;font-size:.92rem;color:var(--ink);font-weight:600}
.quote-by span{font-size:.78rem;color:#8aa0a4}
.stars{color:var(--accent);font-size:.82rem;letter-spacing:2px;margin-bottom:12px}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq{max-width:860px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden;transition:box-shadow .2s}
.faq-item[open]{box-shadow:var(--shadow)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 56px 20px 24px;font-weight:600;color:var(--ink);
  position:relative;font-size:1rem;line-height:1.5;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'\f107';font-family:FontAwesome;position:absolute;right:24px;top:50%;
  transform:translateY(-50%);color:var(--teal);transition:transform .25s;font-size:1.15rem;
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.faq-item summary:hover{color:var(--teal-dark)}
.faq-body{padding:0 24px 22px;font-size:.94rem}
.faq-body p{margin:0}

/* =========================================================================
   CTA BAND
   ========================================================================= */
.cta{background:linear-gradient(100deg,var(--teal-dark),var(--teal));color:#fff;text-align:center}
.cta h2{color:#fff}
/* The base .eyebrow is teal, which all but disappears on the teal CTA band.
   The mockup patched this with an inline style; a rule works everywhere the
   block is used and survives the page builder, which cannot emit inline CSS. */
.cta .eyebrow{color:#fff}

/* The block offers three styles. Only the full band was ever drawn, so a CTA
   set to "Light" — used for quiet one-line links like "Sigma Instrument" or a
   PDF — was rendering as a loud full-width teal band instead. */
.cta--light{background:none;color:var(--body);text-align:center;padding:36px 0}
.cta--light h2{color:var(--ink)}
.cta--light p{color:var(--body)}
.cta--light .eyebrow{color:var(--teal-dark)}
.cta--light .btn--accent{background:none;color:var(--teal-dark);border:1px solid var(--teal);box-shadow:none}
.cta--light .btn--accent:hover{background:var(--teal);color:#fff}

.cta--primary{background:var(--teal-dark)}
/* Layout is shared by every CTA style; the pale text colour belongs only to
   the ones drawn on teal. Keeping the colour in the shared rule made it beat
   `.cta--light p` on source order (equal specificity), which painted the light
   CTA's text near-white on a white background — invisible. */
.cta p{max-width:620px;margin:0 auto 2em;font-size:1.05rem}
.cta:not(.cta--light) p{color:#dff5f8}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{background:var(--ink);color:#a9c6cb;font-size:.92rem}
.footer-top{padding:70px 0 50px}
.footer-grid{display:grid;grid-template-columns:.7fr 1fr 1.1fr 1.1fr;gap:44px}
.site-footer h4{color:#fff;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.4em}
.site-footer a{color:#a9c6cb}
.site-footer a:hover{color:#7fdfe9}
/* `.site-footer a` outranks `.btn--teal`, which was greying out the button text */
.site-footer .btn--teal,
.site-footer .btn--teal:hover{color:#fff}
.footer-brand img{width:118px;margin-bottom:18px}
.footer-brand p{font-size:.9rem;line-height:1.7}
.footer-links{list-style:none}
.footer-links li{margin-bottom:.6em}
.footer-links i{color:var(--teal);margin-right:.6em;font-size:.8rem}
.hours-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.12)}
.hours-row b{color:#fff;font-weight:500}
.contact-line{display:flex;gap:12px;margin-bottom:1em;align-items:flex-start}
.contact-line i{color:var(--teal);margin-top:.35em}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;font-size:.84rem}
.footer-bottom .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.totop{
  position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;
  background:var(--teal);color:#fff;display:grid;place-items:center;z-index:150;
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:all .25s;
}
.totop.show{opacity:1;visibility:visible}
.totop:hover{background:var(--teal-dark);color:#fff}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:960px){
  .section{padding:64px 0}
  .mainnav{
    position:fixed;inset:0 0 0 auto;width:min(320px,86vw);background:#fff;margin:0;
    transform:translateX(100%);transition:transform .3s ease;padding:86px 18px 30px;
    overflow-y:auto;box-shadow:var(--shadow-lg);z-index:210;
  }
  .mainnav.open{transform:translateX(0)}
  .mainnav > ul{flex-direction:column;align-items:stretch;gap:2px}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 6px 14px;display:none}
  .submenu a{white-space:normal}
  .mainnav li.open > .submenu{display:block}
  .navtoggle{display:block;order:3;margin-left:auto}
  .header-cta .btn{display:none}
  .navscrim{position:fixed;inset:0;background:rgba(11,59,65,.5);z-index:205;opacity:0;visibility:hidden;transition:.25s}
  .navscrim.show{opacity:1;visibility:visible}
  .intro-grid{grid-template-columns:1fr;gap:44px}
  /* A long button label cannot stay on one line at phone width without
     pushing the page sideways, so buttons wrap here. */
  .btn{white-space:normal;text-align:center}
  /* Once stacked, a paired block should be indistinguishable from the same
     block used on its own — the hours on the appointment page should look
     exactly like the hours on the contact page. So the pairing overrides are
     undone here rather than merely collapsed to one column. */
  .secpair{display:block}
  .secpair > .section{padding:30px 0}
  .secpair > .section:first-child{padding-top:0}
  .secpair > .section + .section{padding-top:0}
  .intro-badge{right:16px;bottom:-18px}
  .grid-3,.grid-team,.grid-quotes{grid-template-columns:repeat(2,1fr)}
  .trust .wrap{grid-template-columns:repeat(2,1fr);gap:22px}
  .topbar-info{gap:16px}
}
@media (max-width:700px){
  .section{padding:52px 0}
  .grid-3,.grid-team,.grid-quotes,.grid-2{grid-template-columns:1fr}
  .grid-types > .type-card{flex:0 1 100%}
  .cond-list{columns:1}
  .footer-grid{grid-template-columns:1fr}
  .hero .wrap{padding-top:64px;padding-bottom:64px}
}

/* ---- process steps (replaces the testimonial grid) ---------------------- */
.step{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease;
}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.step-num{
  width:46px;height:46px;border-radius:13px;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:1.15rem;margin-bottom:20px;
  box-shadow:0 8px 18px rgba(1,181,199,.28);
}
.step h3{font-size:1.08rem;margin-bottom:.5em}
.step > p{font-size:.93rem}
.step .checks{margin-bottom:0}
.step .checks li{font-size:.89rem;padding-left:26px;margin-bottom:.45em;line-height:1.6}
.step .checks i{font-size:.82rem;top:.5em}
.step .card-link{margin-top:auto;padding-top:8px}
.step-label{font-weight:600;color:var(--ink);font-size:.9rem;margin:.2em 0 .6em}

/* ---- condition keywords in the services card (SEO + scanability) ------- */
/* Conditions that link through to their entry on the conditions page should
   read as clickable. Colour is left to the rules above, which set it per
   context — soft blue on the dark band, body colour on white. */
.cond-list a,.checks a{text-decoration:underline;text-decoration-color:rgba(127,223,233,.45);text-underline-offset:3px}
.cond-list a:hover,.checks a:hover{text-decoration-color:currentColor}
.cond-pills{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0 0 1.3em}
.cond-pills a{
  display:inline-block;font-size:.78rem;line-height:1.35;padding:5px 11px;border-radius:999px;
  background:var(--band);border:1px solid var(--line);color:var(--body);
}
.cond-pills a:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.cond-pills a{transition:background .2s,border-color .2s,color .2s}
/* Show which card the reader just jumped to. */
.card:target{border-color:var(--teal);box-shadow:0 0 0 3px rgba(1,181,199,.18),var(--shadow-lg)}

/* Checklist set to "Buttons": each linked item becomes a button, matching the
   outlined button a light call-to-action block uses. */
.btn-row{list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0}
.btn-row li{margin:0}
.btn-row .btn{white-space:normal;text-align:center}

/* ---- mobile header ------------------------------------------------------ */
.navclose{display:none;position:absolute;top:18px;right:18px;background:none;border:0;font-size:1.5rem;color:var(--ink);padding:8px 12px;cursor:pointer;line-height:1}
.nav-cta{display:none}
.nav-lang{display:none}   /* desktop keeps the topbar link */
@media (max-width:960px){
  .site-header .wrap{min-height:68px;gap:12px}
  .brand img{width:48px}
  .header-cta{margin-left:auto}          /* the drawer is fixed, so push the toggle right */
  .navtoggle{font-size:1.85rem;padding:10px 6px 10px 14px;line-height:1;color:var(--ink)}
  .navclose{display:block}
  /* First item in the drawer, above the menu — the language choice should not
     be buried, and the French version is the one visitors land on. */
  .nav-lang{
    display:flex;align-items:center;gap:9px;
    margin:0 0 14px;padding:11px 12px;border-radius:8px;
    background:var(--band);color:var(--teal-dark);font-weight:600;font-size:.95rem;
  }
  .nav-lang i{font-size:1rem}
  .nav-lang:hover{background:var(--teal);color:#fff}
  .nav-cta{display:block;margin-top:14px}
  .nav-cta .btn{width:100%;justify-content:center}
  .topbar{font-size:.8rem}
  .topbar .wrap{min-height:38px}
  .topbar-info{gap:18px}
  .tb-addr,.tb-mail{display:none}        /* keep the phone, which is the useful one */
}
@media (max-width:700px){
  .topbar{font-size:.78rem}
  .trust .wrap{grid-template-columns:1fr;gap:0}
  .trust-item{justify-content:flex-start;padding:11px 4px}
  .trust-item + .trust-item{border-left:0;border-top:1px solid rgba(255,255,255,.10)}
  .intro-badge--rating{right:14px;bottom:-16px;padding:12px 20px 14px}
  .intro-badge--rating b{font-size:1.7rem}
}

/* ---- while the mobile drawer is open ------------------------------------
   The dev ribbon (z 999) floated ON TOP of the drawer and the dim layer, and
   the back-to-top button (z 150) showed THROUGH the dim layer as a murky blob.
   Hide both, keep the header crisp above the scrim, and stop the page behind
   from scrolling. */
body.nav-open{overflow:hidden}
body.nav-open .devflag,
body.nav-open .totop{opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:960px){
  .site-header{z-index:206}
  .navscrim{background:rgba(11,59,65,.45)}
}

/* =========================================================================
   INTERIOR PAGES
   The dev mockup was a homepage. Everything below covers what the other 35
   pages need: a title band, long-form prose, tables, forms, and the states
   a design gets judged on once real content lands in it.
   ========================================================================= */

/* ---- tokens the mockup hardcoded, promoted so they can be changed once --- */
:root{
  --teal-pale:#7fdfe9;      /* hero eyebrow / dark-ground accents */
  --teal-mist:#d7ecef;
  --teal-wash:#dff5f8;
  --footer-ink:#a9c6cb;
  --muted:#8aa0a4;
  --danger:#c0392b;
  --success:#2e9e5b;
  --warning:#b6790f;
  --field-h:48px;
  --focus:0 0 0 3px rgba(1,181,199,.35);
  --z-header:200; --z-drawer:210; --z-scrim:205; --z-totop:150;
}

/* ---- interior page title band ------------------------------------------ */
.page-band{
  background:linear-gradient(180deg,var(--band) 0%,#fff 100%);
  border-bottom:1px solid var(--line);
  padding:42px 0 38px;
}
.page-band h1{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:0}
.page-band .crumbs{font-size:.86rem;color:var(--muted);margin:0 0 8px}
.page-band .crumbs a{color:var(--teal-dark)}
.page-band .crumbs a:hover{text-decoration:underline}

/* ---- long-form prose ----------------------------------------------------
   Everything the rich-text editor can emit: p, h3, h4, ul, ol, li, strong,
   em, u, a. Bullets and numbers are restored here after the layout reset. */
/* Body copy runs the full content column, so a text block lines up with the
   images and headings around it instead of stopping ~450px short of them.
   (Was 74ch, a readability measure; the wider column was the design call.)
   .prose--wide is kept because the markup still uses it inside the already
   narrow columns — split layouts, callouts, member bios. */
.prose{max-width:none}
.prose.prose--wide{max-width:none}
.prose p{margin:0 0 1.15em}
.prose h3{font-size:1.32rem;margin:1.9em 0 .55em;color:var(--ink)}
.prose h4{font-size:1.08rem;margin:1.6em 0 .5em;color:var(--ink);font-weight:600}
.prose h3:first-child,.prose h4:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.45em;list-style:revert}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:0 0 .45em}
.prose li::marker{color:var(--teal)}
.prose ul ul,.prose ol ol,.prose ul ol,.prose ol ul{margin:.45em 0 .3em}
.prose a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--teal)}
.prose strong{font-weight:600;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.prose > :last-child{margin-bottom:0}

/* ---- blockquote --------------------------------------------------------- */
.prose blockquote,blockquote.quote-block{
  margin:1.6em 0;padding:4px 0 4px 22px;
  border-left:3px solid var(--teal);
  font-size:1.08rem;font-style:italic;color:var(--ink);
}
blockquote.quote-block cite{display:block;margin-top:.6em;font-size:.88rem;font-style:normal;color:var(--muted)}

/* ---- figures and captions ----------------------------------------------- */
figure{margin:0 0 1.6em}
figure img{border-radius:var(--radius)}
figcaption{margin-top:.6em;font-size:.86rem;color:var(--muted);line-height:1.5}

/* ---- tables -------------------------------------------------------------
   Wrapped in .table-scroll so a wide fee table scrolls itself instead of
   forcing the whole page sideways on a phone. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.6em}
table.data{width:100%;border-collapse:collapse;font-size:.95rem;min-width:420px}
table.data caption{text-align:left;font-size:.86rem;color:var(--muted);padding:0 0 .6em}
table.data th,table.data td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.data thead th{background:var(--band);color:var(--ink);font-weight:600;border-bottom:2px solid var(--teal-soft);white-space:nowrap}
table.data tbody tr:nth-child(even){background:#fbfdfd}
table.data tbody tr:last-child td{border-bottom:0}

/* A two-column price table cannot fit a phone at 420px, and sideways-scrolling
   to read a price is miserable. Below the breakpoint each row becomes a line:
   service on the left, price on the right. Only two-column tables — anything
   wider keeps the scroll, because stacking it would lose the column meaning. */
@media (max-width:700px){
  .table-scroll{overflow-x:visible}
  table.data--2col{min-width:0;display:block}
  table.data--2col thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.data--2col tbody,table.data--2col tr,table.data--2col td{display:block;width:auto}
  table.data--2col tr{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:11px 0;border-bottom:1px solid var(--line);background:none;
  }
  table.data--2col tr:last-child{border-bottom:0}
  table.data--2col td{border:0;padding:0}
  table.data--2col td:first-child{flex:1 1 auto}
  table.data--2col td:last-child{flex:0 0 auto;font-weight:600;color:var(--ink);white-space:nowrap}
}

/* ---- forms --------------------------------------------------------------- */
.field{margin:0 0 18px}
.field label{display:block;font-size:.88rem;font-weight:600;color:var(--ink);margin:0 0 6px}
.field .req{color:var(--danger);margin-left:2px}
.field .hint{display:block;font-size:.82rem;color:var(--muted);margin:5px 0 0}
/* Matched by exclusion rather than by listing every type: an input with no
   type attribute defaults to text but matches none of input[type=...], so it
   would render as a raw browser box beside its styled neighbours. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=range]):not([type=color]):not([type=image]):not([type=hidden]),
select,textarea{
  width:100%;min-height:var(--field-h);padding:11px 14px;
  font:inherit;font-size:.96rem;color:var(--ink);background:#fff;
  border:1px solid #cdd9df;border-radius:10px;
  transition:border-color .16s,box-shadow .16s;
}
textarea{min-height:140px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234a5b5e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px}
input:hover,select:hover,textarea:hover{border-color:#a9bcc6}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal);box-shadow:var(--focus)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger)}
::placeholder{color:#9bb0b5}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:0 0 20px}
legend{padding:0 8px;font-weight:600;color:var(--ink);font-size:.95rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.hp{position:absolute;left:-9999px}            /* honeypot, never shown */
/* First-visit question: radios laid out as readable options, not a cramped row. */
/* The question keeps fieldset/legend semantics for screen readers, but the
   legend is taken off the border: a legend sits ON the fieldset's top border,
   and this label is too long for a phone, so it wrapped across it. The border
   moves to each option instead, which also gives a proper touch target. */
.fv-ask{border:0;padding:0;margin:0 0 20px;min-width:0}
.fv-ask legend{display:block;float:left;width:100%;padding:0;margin:0 0 8px;
  font-size:.88rem;font-weight:600;color:var(--ink);line-height:1.4}
.fv-opt{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  padding:12px 14px;margin:0 0 8px;font-size:.95rem;line-height:1.35;
  border:1px solid #cdd9df;border-radius:10px;background:#fff;
  transition:border-color .16s,background .16s;
}
.fv-opt:last-of-type{margin-bottom:0}
.fv-opt:hover{border-color:var(--teal-soft)}
.fv-opt:has(input:checked){border-color:var(--teal);background:#f5fcfd}
.fv-opt:focus-within{border-color:var(--teal);box-shadow:var(--focus)}
.fv-opt input{width:auto;min-height:0;flex:none;accent-color:var(--teal)}
input[type=file]{padding:9px 12px;background:#fff;cursor:pointer}
input[type=file]::file-selector-button{
  margin-right:12px;padding:7px 14px;border:1px solid var(--teal);border-radius:999px;
  background:none;color:var(--teal-dark);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
}
input[type=file]::file-selector-button:hover{background:var(--teal);color:#fff;border-color:var(--teal)}


/* ---- alerts -------------------------------------------------------------- */
.alert{padding:14px 18px;border-radius:10px;margin:0 0 22px;font-size:.95rem;border-left:4px solid}
.alert p:last-child{margin-bottom:0}
.alert--ok{background:#eef8f1;border-color:var(--success);color:#1d6b3c}
.alert--err{background:#fdeeec;border-color:var(--danger);color:#8d2b20}
.alert--warn{background:#fdf6e6;border-color:#d9a520;color:#7a5a08}
.alert--info{background:var(--teal-wash);border-color:var(--teal);color:#0a5b64}

/* ---- map ----------------------------------------------------------------- */
.map-embed{position:relative;width:100%;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.map-embed iframe{display:block;width:100%;border:0}
.map-embed--sm iframe{height:280px}
.map-embed--md iframe{height:420px}
.map-embed--lg iframe{height:560px}

/* ---- accessibility -------------------------------------------------------
   dev.css had no focus styling at all, which made the mobile drawer a
   keyboard trap. */
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0}
.skip-link:focus{left:0;color:#fff}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .card:hover,.type-card:hover,.member:hover{transform:none}
}

/* ---- print ---------------------------------------------------------------
   Patients print the fees page and the privacy policy. */
@media print{
  .topbar,.site-header,.navscrim,.totop,.cta,.site-footer,.hero-actions,.devflag{display:none!important}
  body{font-size:11.5pt;color:#000;background:#fff}
  .section{padding:14pt 0}
  .wrap{max-width:none;padding:0}
  a{color:#000;text-decoration:underline}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  table.data thead th{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .card,.member,.type-card{break-inside:avoid;box-shadow:none;border:1px solid #ccc}
  h1,h2,h3{break-after:avoid}
}

/* =========================================================================
   BLOCKS
   What the page builder emits. The homepage mockup covered the showcase
   bands (hero, cards, team, FAQ); these are the rest — the plain content
   blocks that make up the other 35 pages.
   ========================================================================= */

/* Consecutive text-ish blocks would otherwise stack 84px of padding between
   every heading and its own paragraph. Collapse the gap between siblings so a
   heading sits WITH the text it introduces. */
.section--tight{padding:30px 0}
.section--tight + .section--tight{padding-top:0}

/* A heading block introduces whatever follows it, so it should sit WITH that
   block. The rule above only collapses the gap between two tight sections, so
   a heading above a full-padding band (steps, cards, gallery) still opened a
   ~130px hole. Sections that paint their own background keep their padding —
   zeroing it there would crop the colour against the heading. */
.sec-heading + .section:not(.section--band):not(.cta):not(.conditions){padding-top:0}

/* An indented sub-list belongs WITH the item it hangs off, so close the gap
   the two separate sections would otherwise leave between them. */
.section:has(+ .sec-subitems){padding-bottom:0}
.section:has(+ .sec-subitems) .checks{margin-bottom:.35em}
.sec-subitems{padding-top:0}
.sec-heading + .sec-text,
.sec-heading + .sec-checklist,
.sec-heading + .sec-table,
.sec-heading + .sec-image{padding-top:0}
.flexpage > .section:first-child{padding-top:52px}
.flexpage > .section:last-child{padding-bottom:72px}

/* block heading */
.blockhead{margin:0 0 18px}
.blockhead--center{text-align:center}
.blockhead--right{text-align:right}
.blockhead h2,.blockhead h3,.blockhead h4{margin:0 0 .4em}
.blockhead .rule{width:56px;height:3px;border-radius:2px;background:var(--teal);margin:0}
.blockhead--center .rule{margin:0 auto}
.blockhead--right .rule{margin-left:auto}
.shead-intro{max-width:680px;margin:14px auto 0;color:var(--body)}
.shead--left{text-align:left;margin-left:0;margin-right:auto}
.shead--left .rule{margin-left:0}

/* spacer / rule */
.sec-spacer{height:56px}
.sec-rule{border:0;border-top:1px solid var(--line);margin:0}

/* callout */
.callout{border-left:4px solid var(--teal);background:var(--teal-wash);border-radius:10px;padding:18px 22px}
.callout--success{border-left-color:var(--success);background:#eef8f1}
.callout--warning{border-left-color:var(--warning);background:#fdf6e6}

/* figures */
.fig{margin:0}
.fig img{border-radius:var(--radius);box-shadow:var(--shadow)}
.fig--center{text-align:center}
.fig--center img{margin:0 auto}
.fig--left img{margin-right:auto}
.fig--right img{margin-left:auto}
.fig-full img{border-radius:0;width:100%;box-shadow:none}
.gallery .fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* A row of logos. No crop box and no upscaling — the source files are small
   (200px wide here), so stretching them to fill a grid cell is what made them
   look smeared. Centred, so five across four columns has no orphan. */
.gallery--logos{display:flex;flex-wrap:wrap;justify-content:center;gap:26px 30px;align-items:center}
/* Grow to the logo's own 200px and no further, shrink to 130px before wrapping —
   so the full set sits on one line on desktop and tablet, and wraps on a phone
   rather than squeezing into a strip. */
.gallery--logos .fig{flex:1 1 130px;min-width:0;max-width:200px}
.gallery--logos .fig img{width:100%;max-width:200px;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0;box-shadow:none;margin:0 auto}
.gallery--logos figcaption{text-align:center}

/* steps as a vertical list (the 3-up card variant is in the mockup styles) */
.steps-list{list-style:none;counter-reset:step;margin:0;padding:0}
.steps-list .step{position:relative;counter-increment:step;padding:0 0 26px 60px;margin:0}
.steps-list .step::before{
  content:counter(step);position:absolute;left:0;top:0;
  width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;
}
.steps-list .step h3{margin:6px 0 .5em}

/* hours + contact details, used by the footer and by their own blocks */
/* min-width:0 so the card can always shrink inside a grid column — a grid item
   defaults to min-content width and will otherwise push past its track. */
.hours{max-width:420px;min-width:0}
.hours--card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:8px 20px;box-shadow:var(--shadow)}
/* The time keeps its own line rather than being clipped; if the pair cannot fit
   side by side it wraps instead of overflowing to the right. */
.section .hours-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;padding:11px 0;border-bottom:1px solid var(--line);min-width:0}
.section .hours-row span{min-width:0;overflow-wrap:anywhere}
.section .hours-row b{white-space:nowrap}
.section .hours-row:last-child{border-bottom:0}
.section .hours-row b{color:var(--ink);font-weight:600}
.contactcard .contact-line{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;color:var(--body)}
.contactcard .contact-line i{color:var(--teal);margin-top:5px;width:18px;flex:none}
.contactcard .btn{margin-top:6px}

/* testimonial stars */
.quote .stars{color:var(--accent);letter-spacing:2px;margin:0 0 8px;font-size:1rem}
.quote-avatar{display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;background:var(--teal-soft);color:var(--ink);
  font-weight:600;font-size:.85rem;flex:none;object-fit:cover}

/* card "learn more" links inside block cards */
.card .card-link,.step .card-link{margin-top:auto}

/* image+text split, image on the right */
.intro-grid--right .intro-media{order:2}
/* Alternating sides is a desktop device. Once the rows stack, every one should
   lead with its photo — otherwise the right-image rows come out text-first and
   the sequence reads inconsistently down a phone. Placed here, after the rule
   it overrides, because the two have equal specificity. */
@media (max-width:700px){ .intro-grid--right .intro-media{order:-1} }

/* A block that renders nothing must not leave an empty band behind. */
.section:empty,.section > .wrap:empty{display:none}

/* document downloads */
.doclist{list-style:none;margin:0;padding:0;max-width:640px}
.doclist li{margin:0 0 10px}
.doclist a{display:flex;align-items:center;gap:14px;padding:15px 18px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  color:var(--ink);font-weight:500;transition:border-color .18s,box-shadow .18s,transform .18s}
.doclist a:hover{border-color:var(--teal);box-shadow:var(--shadow);transform:translateY(-2px)}
.doclist a > span{flex:1}
.doclist .fa-file-pdf-o{color:#d9534f;font-size:1.3rem}
.doclist .dl{color:var(--teal);opacity:.6}

/* form block */
.formwrap{max-width:720px}
/* The intro paragraph's own bottom margin is zeroed by `.prose > :last-child`,
   so without this the first field butts straight against the last line of text —
   on the appointment page that is the phone number running into the first-visit
   question. */
.formwrap > .prose{margin-bottom:30px}
.siteform .btn{margin-top:6px}
@media (max-width:700px){ .form-row{grid-template-columns:1fr} }

/* Shorter hero for interior pages; the home page keeps the full-height one. */
.hero--short .wrap{padding-top:58px;padding-bottom:58px}
.hero--short h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}
/* Centred button under a band of tiles or cards. */
.band-action{text-align:center;margin-top:40px}

/* Marks a link that leaves the site. */
.ext{font-size:.78em;opacity:.7;margin-left:.15em;vertical-align:baseline}