/* Freshly written for the rebuild (DECISIONS 9). Nothing here is copied from the old theme or its add-ons:
   sizes, colours and spacing were measured from the saved copy of the live site (DECISIONS 29) and written anew. */

/* Source Sans Pro, self-hosted (SIL Open Font License: fonts/OFL-source-sans-pro.txt) */
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/source-sans-pro-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/source-sans-pro-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Colours seen on the live site */
  --topbar: #86f3fb; --cyan: #8eedf4; --cyan-strong: #00e0f0; --cyan-footer: #6ee1fa;
  --ink: #333; --ink-strong: #323131; --ink-soft: #555; --paper: #fafafa; --header: #f5f5f5; --grey: #e6e6e6; --line: #e3e3e3;
  --dark-1: #292929; --dark-2: #4a4a4a; --accent: #fa5c00; --star: #f5c518; --pink: #dd0055;
  /* Hover text on light backgrounds: the live cyan (#00e0f0) is too pale for text, so a deep teal of the same hue */
  --teal: #006b75;
  /* Type: the live body text is Helvetica; its H1s fall back to the browser serif; Source Sans Pro for labels */
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --serif: "Times New Roman", Times, Georgia, serif;
  --label: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 1170px; --wrap-wide: 1386px;
  --check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.5l5 5L19.5 7"/></svg>');
  --user: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7.5" r="4.5"/><path d="M3.5 21.5a8.5 8.5 0 0 1 17 0"/></g></svg>');
  --ease: .2s ease;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/24px var(--sans); color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.1; margin: 0 0 10px; color: inherit; }
h1 { font: 400 36px/1.1 var(--serif); } h2 { font-size: 30px; } h3 { font-size: 24px; } h4 { font-size: 18px; }
h5 { font-size: 14px; } h6 { font-size: 12px; }
p { margin: 0 0 15px; }
ul, ol { margin: 0 0 15px; padding-left: 22px; }
strong, b { font-weight: 700; }
.lead { font-size: 21px; line-height: 1.4; font-weight: 600; } /* live: 21px semi-bold */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ta-center { text-align: center; } .ta-right { text-align: right; }
[hidden] { display: none !important; }

/* Links: the live site never underlines; links inside running text are underlined here so they can be told apart */
a { color: inherit; text-decoration: none; transition: color var(--ease), background-color var(--ease), border-color var(--ease); }
main a:not(.btn), .review a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
main a:not(.btn):hover, .review a:hover { color: var(--teal); }
.tone-dark a:not(.btn):hover { color: inherit; text-decoration-thickness: 2px; }
/* One focus ring for every control: a white gap and a dark line, visible on light, dark and photo backgrounds */
:focus-visible { outline: 2px solid #111; outline-offset: 2px; box-shadow: 0 0 0 2px #fff; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Buttons: 14px capitals with 1px tracking, 12px by 22px, 4px corners (measured on live) */
.btn { display: inline-block; padding: 12px 22px; border: 1px solid #fff; border-radius: 4px; background: #fff; color: #000;
  font: 400 14px/16.8px var(--sans); letter-spacing: 1px; text-transform: uppercase; text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease); }
.btn:hover { background: var(--cyan-strong); border-color: var(--cyan-strong); color: #000; }
.btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.15); }
.btn .icon { margin-right: 6px; }
.btn-small { padding: 8px 18px; font-size: 10px; line-height: 10px; border-radius: 3px; }
/* On pale bands a white button needs an edge */
.tone-light .btn, .tone-image-light .btn, main .band:not([class*="tone-"]) .btn { border-color: var(--ink-strong); }
/* On cyan bands the cyan hover would vanish, so it turns dark instead */
.bg-8eedf4 .btn:hover, .bg-00e0f0 .btn:hover, .bg-24b8d2 .btn:hover, .bg-50dfc2 .btn:hover { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }
.btn-info { background: #5bc0de; border-color: #46b8da; color: var(--ink-strong); }
.btn-info:hover { background: #39b3d7; border-color: #269abc; color: #000; }
.btn-default { background: #f0f0f0; border-color: #f0f0f0; color: #000; }
.btn-default:hover { background: #dcdcdc; border-color: #dcdcdc; color: #000; }
.btn-danger { background: #c9302c; border-color: #ac2925; color: #fff; }
.btn-danger:hover { background: #a52a26; border-color: #8b221f; color: #fff; }
.btn-warning { background: #f0ad4e; border-color: #eea236; color: #000; }
.btn-warning:hover { background: #ec971f; border-color: #d58512; color: #000; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0; }
.ta-center .button-row, .button-row.ta-center { justify-content: center; }

/* Icons: simple line drawings made for this site replace the old icon fonts (launch-exceptions) */
.icon { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.125em; background: currentColor;
  -webkit-mask: var(--shape, radial-gradient(circle, #000 45%, transparent 50%)) center / contain no-repeat;
  mask: var(--shape, radial-gradient(circle, #000 45%, transparent 50%)) center / contain no-repeat; }
.icon-check { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.5l5 5L19.5 7"/></svg>'); }
.icon-star { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="12.0,2.1 14.6,9.0 22.0,9.4 16.2,14.0 18.2,21.1 12.0,17.0 5.8,21.1 7.8,14.0 2.0,9.4 9.4,9.0"/></svg>'); }
.icon-phone { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.2 2.5h3l1.4 4.6-2.2 1.6a12 12 0 0 0 6.9 6.9l1.6-2.2 4.6 1.4v3a2.6 2.6 0 0 1-2.6 2.6A18.6 18.6 0 0 1 3.6 5.1a2.6 2.6 0 0 1 2.6-2.6z"/></svg>'); }
.icon-phone-square { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><mask id="m"><rect width="24" height="24" fill="white"/><path fill="black" transform="translate(5.3 5.3) scale(.56)" d="M6.2 2.5h3l1.4 4.6-2.2 1.6a12 12 0 0 0 6.9 6.9l1.6-2.2 4.6 1.4v3a2.6 2.6 0 0 1-2.6 2.6A18.6 18.6 0 0 1 3.6 5.1a2.6 2.6 0 0 1 2.6-2.6z"/></mask></defs><rect x="1.5" y="1.5" width="21" height="21" rx="3.5" mask="url(%23m)"/></svg>'); }
.icon-home { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3 2 12h3v9h5.5v-6h3v6H19v-9h3z"/></svg>'); }
.icon-menu, .icon-iconuser-menu2 { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M3.5 6.5h17M3.5 12h17M3.5 17.5h17"/></svg>'); }
.icon-times { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6 6 18"/></svg>'); }
.icon-facebook { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.6 22v-8.3h2.9l.5-3.5h-3.4V8c0-1 .3-1.7 1.8-1.7h1.8V3.2c-.3 0-1.4-.2-2.6-.2-2.6 0-4.4 1.6-4.4 4.5v2.7H7.3v3.5h2.9V22z"/></svg>'); }
.icon-instagram { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4.2"/></g><circle cx="17.4" cy="6.6" r="1.3"/></svg>'); }
.icon-chevron-right { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M9 4.5l7.5 7.5L9 19.5"/></svg>'); }
.icon-plus { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15M4.5 12h15"/></svg>'); }
.icon-iconnavigate2 { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10.4"/><path d="M16.2 7.8 13.6 13.6 7.8 16.2 10.4 10.4z"/><circle cx="12" cy="12" r="1"/><path d="M12 2.6v1.6M12 19.8v1.6M2.6 12h1.6M19.8 12h1.6"/></g></svg>'); }
.icon-iconexplore { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round"><circle cx="6.4" cy="16.4" r="4.2"/><circle cx="17.6" cy="16.4" r="4.2"/><path d="M3 14.2 5.4 5.6a1.6 1.6 0 0 1 1.6-1.2h1.4A1.6 1.6 0 0 1 10 6v8.6M21 14.2 18.6 5.6A1.6 1.6 0 0 0 17 4.4h-1.4A1.6 1.6 0 0 0 14 6v8.6M10 9.6h4M10 13.2h4"/></g></svg>'); }
.icon-iconschedule2 { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round"><rect x="2.8" y="4.4" width="18.4" height="17" rx="1.6"/><path d="M2.8 9.4h18.4M7.4 2.4v4M16.6 2.4v4M10 13.4l1.4-1v6.2M13.6 13.4l1.4-1v6.2"/></g></svg>'); }
.icon-iconask2 { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.4a9.6 9.6 0 1 0 4.6 18l4.4 1.2-1.2-4.2A9.6 9.6 0 0 0 12 2.4z"/><path d="M9.4 9.4a2.7 2.7 0 1 1 3.9 2.4c-.8.4-1.3 1-1.3 1.9v.9"/><circle cx="12" cy="17" r=".5"/></g></svg>'); }
.icon-clock-o { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9.5"/><path d="M12 6.5V12l3.5 2.5"/></g></svg>'); }
.icon-comment { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 4h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-8l-5 4v-4H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/></svg>'); }
.icon-child { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="4.2" r="2.4"/><path fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M5.5 7.5 12 10l6.5-2.5M12 10v5.5M12 15.5l-3.5 6M12 15.5l3.5 6"/></svg>'); }
.icon-street-view { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="4.6" r="2.6"/><path d="M9.2 8.6h5.6a1.6 1.6 0 0 1 1.6 1.6v4.6h-2.2v4.8h-4.4v-4.8H7.6v-4.6a1.6 1.6 0 0 1 1.6-1.6z"/><path fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" d="M7 17.6c-2.4.5-4 1.3-4 2.2 0 1.5 4 2.7 9 2.7s9-1.2 9-2.7c0-.9-1.6-1.7-4-2.2"/></svg>'); }
.icon-picture-o { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4.5" width="19" height="15" rx="2"/><path d="M2.5 16.5 8 11l4.5 4.5 3-3 6 5"/><circle cx="16" cy="9" r="1.6"/></g></svg>'); }
.icon-credit-card { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M6 15h4"/></g></svg>'); }
.icon-clipboard { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 4.5H6.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-13a2 2 0 0 0-2-2h-2"/><rect x="8.5" y="2.5" width="7" height="4" rx="1"/><path d="M8 11.5h8M8 15.5h5.5"/></g></svg>'); }
.icon-calendar-check-o { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="18" height="17" rx="2"/><path d="M3 9.5h18M8 2.5v4M16 2.5v4M8.5 15l2.5 2.5 4.5-4.5"/></g></svg>'); }
.icon-user-md { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7" r="4"/><path d="M4 21.5a8 8 0 0 1 16 0M12 15.5v4M10 17.5h4"/></g></svg>'); }
.icon-youtube-play { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M6 4.5h12a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4v-7a4 4 0 0 1 4-4zm4 3.8v7.4l6-3.7z"/></svg>'); }
.icon-vcard { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><circle cx="8.5" cy="10.5" r="2.2"/><path d="M5 16.5a3.5 3.5 0 0 1 7 0M14.5 9.5h4.5M14.5 13.5h3.5"/></g></svg>'); }
.icon-user { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7.5" r="4.5"/><path d="M3.5 21.5a8.5 8.5 0 0 1 17 0"/></g></svg>'); }
.icon-smile-o { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9.5"/><path d="M8 14a4.6 4.6 0 0 0 8 0M9 9.5h.01M15 9.5h.01"/></g></svg>'); }
.icon-search { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10.5" cy="10.5" r="6.5"/><path d="M15.5 15.5 21 21"/></g></svg>'); }
.icon-pencil { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20l1.2-4.6L16 4.6a2 2 0 0 1 2.8 0l.6.6a2 2 0 0 1 0 2.8L8.6 18.8z"/><path d="M14 6.6l3.4 3.4"/></g></svg>'); }
.icon-line-chart { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M6.5 15.5l4-5 3.5 3 5.5-7"/></g></svg>'); }
.icon-key { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="15.5" r="4.5"/><path d="M11.2 12.3 20 3.5M16.5 7l2.5 2.5M14 9.5l2 2"/></g></svg>'); }
.icon-hourglass-end { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2.5h12M6 21.5h12M7.5 2.5c0 5 4.5 6 4.5 9.5s-4.5 4.5-4.5 9.5M16.5 2.5c0 5-4.5 6-4.5 9.5s4.5 4.5 4.5 9.5"/></g><path d="M8.6 21h6.8L12 17.2z"/></svg>'); }
.icon-heart-o { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 20.5S3.5 15.6 3.5 9.6a4.6 4.6 0 0 1 8.5-2.4 4.6 4.6 0 0 1 8.5 2.4c0 6-8.5 10.9-8.5 10.9z"/></svg>'); }
.icon-file-pdf-o { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2.5H6.5a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V8z"/><path d="M14 2.5V8h5.5M8.5 13h7M8.5 17h5"/></g></svg>'); }
.icon-cloud-download { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5 17.5H7a4.5 4.5 0 0 1-.6-9 6 6 0 0 1 11.5 1.5 4 4 0 0 1-.4 7.5"/><path d="M12 11.5v10M8.5 18l3.5 3.5 3.5-3.5"/></g></svg>'); }
.icon-trash { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 6.5h17M9 6.5v-3h6v3M5.5 6.5l1 14.5h11l1-14.5M10 10.5v7M14 10.5v7"/></g></svg>'); }
.icon-spoon { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="7" rx="3.8" ry="4.8"/><path d="M12 11.8v9.7"/></g></svg>'); }
.icon-signal { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" d="M4.5 20.5v-3M9.5 20.5v-7M14.5 20.5v-11M19.5 20.5v-16"/></svg>'); }
.icon-cutlery { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 2.5v6a2.5 2.5 0 0 0 5 0v-6M8 2.5v19M18 21.5v-19c-2.5 1.5-3.5 5-3.5 9h3.5"/></g></svg>'); }
.icon-coffee { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8.5h12v5.5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5zM16 10h1.5a2.5 2.5 0 0 1 0 5H16M3 21.5h15M8 2.5v3M12 2.5v3"/></g></svg>'); }
.icon-bicycle { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="5.5" cy="16" r="4"/><circle cx="18.5" cy="16" r="4"/><path d="M5.5 16 9.5 8h6l3 8M9.5 8l3.5 8H5.5M8 5.5h3M15.5 8l-1-3h2.5"/></g></svg>'); }
.icon-ban { --shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9.5"/><path d="M5.3 5.3l13.4 13.4"/></g></svg>'); }

/* Top bar: 44px, right-aligned to the page edge as on live */
.topbar { background: var(--topbar); color: var(--ink-strong); font-size: 14px; }
.topbar__inner { display: flex; justify-content: flex-end; align-items: center; gap: 20px; min-height: 44px; max-width: none; padding: 0 15px; }
.topbar__social { display: inline-grid; place-items: center; width: 24px; height: 28px; font-size: 15px; }
.topbar__social:hover, .topbar__phone:hover { color: #000; }
.topbar__phone { font-weight: 500; letter-spacing: .2px; margin-right: 0; }
.topbar .btn-small { border-color: #fff; }
.topbar .btn-small:hover { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }

/* Header: logo at the left edge, menu at the right edge of a wide container, 155px tall */
.site-header { position: relative; z-index: 30; background: var(--header); box-shadow: 0 3px 3px rgba(0,0,0,.05); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: var(--wrap-wide); min-height: 155px; padding: 10px 15px 0; }
.logo { flex: none; } .logo h1 { margin: 0; font-size: 0; line-height: 0; }
.logo img { display: block; width: 296px; }
.main-nav > ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.main-nav li { position: relative; list-style: none; }
.main-nav > ul > li > a { position: relative; display: block; padding: 0 15px; line-height: 90px; color: var(--ink-strong);
  font-size: 15px; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.main-nav > ul > li > a .icon { font-size: 17px; vertical-align: -3px; }
/* Hover: the live site turns the word cyan; here a cyan bar under it keeps the text readable */
.main-nav > ul > li > a::before { content: ""; position: absolute; left: 15px; right: 15px; bottom: 26px; height: 2px; background: var(--cyan-strong);
  transform: scaleX(0); transition: transform var(--ease); }
.main-nav > ul > li:hover > a::before, .main-nav > ul > li:focus-within > a::before { transform: scaleX(1); }
.main-nav > ul > .has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 1px 0 8px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-4px) rotate(45deg); }
.main-nav ul ul { visibility: hidden; opacity: 0; position: absolute; z-index: 40; top: 100%; left: 0; width: 240px; margin: 0; padding: 10px;
  background: #fff; box-shadow: 0 3px 5px rgba(0,0,0,.2); list-style: none; transform: translateY(6px);
  transition: opacity var(--ease), transform var(--ease), visibility 0s linear .2s; }
.main-nav ul ul ul { top: -10px; left: 100%; }
.main-nav ul ul a { display: block; padding: 10px; color: var(--ink); font-size: 16px; line-height: 24px; }
.main-nav ul ul a:hover, .main-nav ul ul a:focus-visible { background: var(--cyan-strong); color: var(--ink); }
.main-nav ul ul a[aria-current] { font-weight: 700; }
.main-nav ul ul .has-children > a::after { content: ""; float: right; width: 6px; height: 6px; margin-top: 9px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.main-nav li:hover > ul, .main-nav li:focus-within > ul { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.menu-toggle { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: 5px; border: 0; border-radius: 4px; background: none;
  color: #1673b8; font-size: 22px; cursor: pointer; }
.menu-toggle:hover { color: var(--ink-strong); }

/* Side panel: white, 300px, the page dimmed behind it (as on live) */
.side-panel { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(300px, 86vw); overflow-y: auto; padding: 58px 20px 28px;
  background: #fff; color: var(--ink); box-shadow: 0 0 0 100vmax rgba(0,0,0,.55), -4px 0 18px rgba(0,0,0,.25); }
.side-panel ul { margin: 0; padding: 0; list-style: none; }
.side-panel__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #eee;
  border-radius: 50%; background: #fff; color: var(--ink-strong); font-size: 14px; cursor: pointer; }
.side-panel__close:hover { border-color: var(--ink-strong); }
.side-panel__menu { display: none; }
.side-panel__menu a { display: block; padding: 11px 4px; border-bottom: 1px solid #eee; color: var(--ink-strong); font-size: 15px; letter-spacing: .3px; text-transform: uppercase; }
.side-panel__menu ul ul a { padding-left: 18px; font-size: 15px; text-transform: none; letter-spacing: 0; }
.side-panel__menu ul ul ul a { padding-left: 32px; }
.side-panel__menu a:hover, .side-panel__menu a[aria-current] { background: #f4f4f4; }
.side-panel__new-patient { padding: 15px; background: #f8f8f8; }
.side-panel__new-patient h3 { margin: 0 0 12px; color: #444; font-size: 21px; line-height: 24px; }
.side-panel__new-patient a { display: block; padding: 14px 4px; border-bottom: 1px solid #e8e8e8; color: var(--ink-strong); font-size: 17px; line-height: 22px; }
.side-panel__new-patient a:hover { color: var(--teal); }

/* Inner pages: the live site shows a dark spacer under the header on phones only */
.spacer-band { height: 64px; background: var(--dark-1); border-bottom: 14px solid var(--dark-2); box-sizing: border-box; }
@media (min-width: 801px) { .spacer-band { display: none; } }
/* Home slideshow: 645px tall with the live caption sizes; one layout for every slide (text left on a soft shade) */
.hero { position: relative; overflow: hidden; background: #111; color: #fff; }
.hero__mobile { display: none; }
.slides { position: relative; height: clamp(420px, 44.8vw, 645px); margin: 0; padding: 0; list-style: none; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.36) 48%, rgba(0,0,0,.14) 100%); }
.slide__text.wrap { position: absolute; z-index: 1; inset: 0; display: flex; flex-wrap: wrap; align-content: center; align-items: flex-start; gap: 0 12px;
  max-width: var(--wrap-wide); margin: 0 auto; padding: 0 90px 0 43px; }
.slide__line { flex: 0 0 100%; margin: 0; padding-right: max(0px, calc(100% - var(--measure, 600px))); }
.slide:nth-child(1) { --measure: 420px; } .slide:nth-child(3) { --measure: 730px; }
.slide__line--2 { order: -1; margin-bottom: 64px; color: var(--cyan); font: 300 57px/60px var(--sans); letter-spacing: -.2px; text-shadow: 0 1px 3px rgba(0,0,0,.25); }
.slide__line--1 { margin-bottom: 40px; font: 400 17px/23px var(--label); text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.slide:nth-child(2) .slide__line--2 { color: #fff; font-size: 34px; line-height: 40px; }
.slide:nth-child(2) .slide__line--1 { color: var(--cyan); font-size: 22px; line-height: 30px; }
.slide .btn { margin-left: 8px; } .slide .btn ~ .btn { margin-left: 0; }
.slides__nav button { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 50px; height: 50px; padding: 0 0 4px;
  border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(0,0,0,.3); color: #fff; font: 300 36px/1 var(--sans);
  cursor: pointer; transform: translateY(-50%); transition: background-color var(--ease), color var(--ease), border-color var(--ease); }
.slides__nav button:hover { background: var(--cyan-strong); border-color: var(--cyan-strong); color: #000; }
.slides__nav button[data-dir="-1"] { left: 20px; } .slides__nav button[data-dir="1"] { right: 20px; }

/* Home icon row: cyan, thin white icons, serif titles (live: 216px tall) */
.icon-row { padding: 55px 0 30px; background: var(--cyan); text-align: center; }
.icon-row__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 30px; }
.icon-row__tile { display: block; padding: 0 10px 4px; color: var(--ink-strong); }
.icon-row__tile .icon { color: #fff; font-size: 42px; transition: transform var(--ease), color var(--ease); }
.icon-row__tile:hover .icon { color: var(--ink-strong); transform: translateY(-3px); }
.icon-row__title { margin: 10px 0 5px; font: 400 23.66px/28px var(--serif); }
.icon-row__tile:hover .icon-row__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.icon-row__line { margin: 0 0 10px; color: #1f5b60; font-size: 14px; line-height: 24px; } /* white on live (1.3:1) */

/* Home bands (live paddings and sizes) */
.t-home main section.band:first-of-type { padding-top: 13px; padding-bottom: 13px; }
.t-home main .bg-fafafa { padding-top: 45px; padding-bottom: 55px; }
.big-title { margin-bottom: 14px; font: 400 60px/65px var(--serif); color: var(--ink); text-align: right; }
.big-title p { margin: 0; } .big-title + * { text-align: right; }
.t-home .bg-fafafa .col:last-child > .el-text:first-child p:first-child::first-line { font-size: 21.33px; line-height: 30px; }
.t-home main .bg-8eedf4 { padding-top: 15px; padding-bottom: 15px; }
.t-home main .bg-8eedf4 p { margin: 0; font-size: 18.67px; line-height: 26px; }
.t-home main .band--image { min-height: 0; padding-top: 40px; padding-bottom: 20px; background-attachment: fixed; background-position: center; }
.t-home main .bg-00e0f0 { align-items: center; padding-top: 25px; padding-bottom: 20px; }
.t-home main .bg-00e0f0 .text-large { margin: 0; font-size: 24px; line-height: 28px; }

/* Content bands made from the old page-builder rows */
main { display: block; background: var(--grey); }
.band { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 30px; padding: 25px max(15px, calc((100% - var(--wrap)) / 2 + 15px)); }
.band:has(.icon-list, .el-image, .el-progressbar, .el-progresscircle, .promobox, form) { padding-top: 40px; padding-bottom: 36px; }
/* Opening photo band of treatment and symptom pages: tall, text on the left (live: about 545px) */
main section.band--image:first-of-type:not(:has(> .col-12)) { min-height: 520px; padding-top: 70px; padding-bottom: 80px; }
.band--image { padding-top: 50px; padding-bottom: 50px; background-size: cover; background-position: center; align-content: center; }
/* Photo bands carrying white text get a shade so the text stays readable over bright parts of the picture */
.band--image.tone-dark { box-shadow: inset 0 0 0 100vmax rgba(0,0,0,.32); }

.tone-dark { color: #fff; } .tone-light, .tone-image-light { color: var(--ink); }
.bg-pattern { background-color: #f1f1f1; } .bg-pattern--dark { background-color: #393939; }
.el > :first-child, .col > :first-child { margin-top: 0; }
.el > :last-child { margin-bottom: 0; } .el + .el { margin-top: 15px; }
/* Contrast: where the live page put white text on a pale or mid-tone colour (1.2:1 to 3:1),
   the text is dark here so it reaches 4.5:1; the band colour itself is unchanged */
.tone-dark:is(.bg-8eedf4, .bg-00e0f0, .bg-24b8d2, .bg-50dfc2, .bg-619dd1, .bg-88a142, .bg-72a344, .bg-8dbe62,
  .bg-ebebeb, .bg-c7c7c7, .bg-c9c9c9, .bg-d6d6d6) { color: #222; }
.band.bg-787878 { background-color: #737373; } /* 4.4:1 with white on live; a shade darker reaches 4.7:1 */
/* Progress bars: 8px, inset track, Bootstrap-style colours as on live */
.progress-info { margin: 0 0 6px; } .progress-title .icon { margin-right: 6px; font-size: 16px; vertical-align: -3px; }
.progress { height: 8px; margin-bottom: 20px; overflow: hidden; border-radius: 4px; background: #f5f5f5; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); }
.progress-bar__fill { height: 100%; background: var(--cyan-strong); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); }
.bar-success { background: #5cb85c; } .bar-info { background: #5bc0de; } .bar-warning { background: #f0ad4e; } .bar-danger { background: #d9534f; }
.progress-circle { --p: 50; display: grid; place-content: center; text-align: center; gap: 4px; width: 200px; max-width: 100%; aspect-ratio: 1; margin: 10px auto; border-radius: 50%;
  background: radial-gradient(closest-side, var(--paper) 88%, transparent 89%), conic-gradient(var(--accent) calc(var(--p) * 1%), #e6e6e6 0); color: var(--ink); }
.progress-circle strong { font-size: 26px; font-weight: 400; } .progress-circle span { font-size: 12px; }
.col { grid-column: span 12; min-width: 0; }
.col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; }
.text-large { font-size: 21.33px; line-height: 1.3; }
/* A large paragraph that is really a title line plus ordinary text (title, blank line, text): only the title line is large, as on live */
p.text-large:has(> br + br) { font-size: 14px; line-height: 24px; }
p.text-large:has(> br + br)::first-line { font-size: 21.33px; line-height: 32px; }
.dropcap > p:first-child::first-letter { float: left; margin: 5px 6px 0 0; font: 700 64px/32px Verdana, var(--sans); } /* live: 64px bold initial */
/* Icon lists: 45px tiles by default; variant classes come from the live pages (left/right/centred, square/circle, size, colour) */
.icon-list { margin: 0; padding: 0; list-style: none; }
.icon-list > li { display: flex; align-items: flex-start; gap: 15px; padding-bottom: 28px; }
.icon-list > li:last-child { padding-bottom: 6px; }
.icon-list__icon { flex: none; display: grid; place-items: center; width: 45px; height: 45px; border-radius: 2px;
  background: var(--tile, var(--accent)); color: var(--tile-ink, #fff); font-size: 15px; }
.icon-list__text { flex: 1; min-width: 0; }
.icon-list__text h4 { margin: 12px 0 8px; font: 400 18px/1.15 var(--label); letter-spacing: .1px; }
.icon-list__body > :last-child { margin-bottom: 0; }
.icon-list--right > li { flex-direction: row-reverse; text-align: right; }
.icon-list--center > li { flex-direction: column; align-items: center; gap: 0; text-align: center; }
.icon-list--center .icon-list__text { width: 100%; } .icon-list--center .icon-list__text h4 { margin-top: 16px; }
.icon-list--32 .icon-list__icon { width: 67px; height: 67px; font-size: 30px; }
.icon-list--48 .icon-list__icon { width: 85px; height: 85px; font-size: 42px; }
.icon-list--circle .icon-list__icon { border-radius: 50%; }
.tile-ffffff { --tile: #fff; --tile-ink: #000; } .tile-fa5c00 { --tile: #fa5c00; } .tile-00a0fc { --tile: #00a0fc; } .tile-46dab5 { --tile: #46dab5; }
.tile-de0909 { --tile: #de0909; } .tile-1ab81d { --tile: #1ab81d; } .tile-8dbe62 { --tile: #8dbe62; } .tile-437fb0 { --tile: #437fb0; }
.tile-5c5c5c { --tile: #5c5c5c; } .tile-6c5f57 { --tile: #6c5f57; } .tile-d96009 { --tile: #d96009; }
.promobox { padding: 14px 16px 6px; border: 1px solid #b8eef3; border-radius: 3px; background: #fff; color: var(--ink); box-shadow: 0 3px 6px rgba(0,0,0,.1); } /* white cards on any band (live) */
.promobox h2 { margin: 0 0 10px; } .promobox > section > .btn:first-child { float: right; margin: 0 0 8px 14px; }
.promobox section::after { content: ""; display: table; clear: both; }
.el-image { margin: 20px 0; } .el-image img { display: block; margin: 0 auto; }
/* Picture treatments carried over from live: thumbnail frame, rounded corners, circle */
.img-frame { padding: 4px; border: 1px solid #ddd; border-radius: 4px; background: #fff; }
.img-rounded { border-radius: 6px; } .img-circle { border-radius: 50%; }

/* Who We Are: framed portrait, then "Meet The Team" set over the city photo with a round portrait (live layout) */
main .band.bg-pattern { padding-top: 50px; padding-bottom: 50px; }
#headingteam { position: relative; z-index: 1; margin-bottom: -140px; padding-top: 0; padding-bottom: 0; background: none; color: #fff; }
#headingteam h1 { margin: 50px 0 10px; font-size: 45px; line-height: 50px; }
#headingteam + .band--image { padding-top: 160px; padding-bottom: 60px; background-position: center; }
#headingteam + .band--image .img-circle { width: 300px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
#headingteam + .band--image .text-large { margin-top: 18px; font-size: 14px; line-height: 24px; }
#headingteam + .band--image .text-large::first-line { font-size: 21.33px; line-height: 34px; }
/* Tables (office hours): white with alternate rows shaded, 40px rows, bold header (live) */
.table { width: 100%; margin: 0 0 20px; border-collapse: collapse; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.table td, .table th { padding: 8px 8px 8px 22px; text-align: left; vertical-align: middle; }
.table th { background: #f9f9f9; font-weight: 700; } .table tr:nth-child(odd) td { background: #f9f9f9; }
.table p { margin: 0; }
/* Helpful-information lists beside tables: roomy numbered links */
.band:has(.el-table) ol li { padding: 6px 0; }
/* /directions: its intro band sits inside another band on the copied page; let it run full width, and keep the map in the content column */
.band:has(> .col-12 > section.band) { display: block; padding: 0; }
.band > .col-12 > section.band { padding-top: 32px; padding-bottom: 32px; }
.band > .col-12 > p:empty { display: none; }
main > #GMapInfoHeader { max-width: var(--wrap); margin: 0 auto; padding: 24px 15px 4px; }
main > iframe { display: block; width: min(100% - 30px, 1140px); margin: 0 auto 40px; border-radius: 4px; }
.el-text iframe { display: block; border-radius: 4px; }
/* Tabs: folder tabs on a white panel (live) */
.tabs__nav { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tabs__nav a { display: block; padding: 10px 15px; border-radius: 4px 4px 0 0; color: var(--ink-strong); font-size: 15.4px; line-height: 22px; text-decoration: none; }
main .tabs__nav a { text-decoration: none; }
.tabs__nav a:hover { background: rgba(255,255,255,.6); color: var(--ink-strong); }
.tabs__nav .active a { background: #fff; font-weight: 700; }
.tabs__panels { padding: 22px 22px 8px; border-radius: 0 4px 4px 4px; background: #fff; }
/* Gradient bands (live page-builder rows) */
.bg-grad-green { background: linear-gradient(#dbffba, #effce2); } .bg-grad-cream { background: linear-gradient(#d6d0c3, #fff8e8); }
/* /education-center: the article list keeps the card look of the shared grid; its inert filter and sort rows are hidden */
.el-text > div:has(> ul > li > div > div > div > a > img) > div:first-child { display: none; }
.el-text:has(> div > ul > li > div > div > div > a > img) > :is(h2, .lead) { text-align: center; }
.el-text > div:has(> ul > li > div > div > div > a > img) > ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 24px 0 10px; padding: 0; list-style: none; }
.el-text > div:has(> ul > li > div > div > div > a > img) > ul > li > div > div { overflow: hidden; border-radius: 5px; background: #555; color: #ddd; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: box-shadow var(--ease), transform var(--ease); }
.el-text > div:has(> ul > li > div > div > div > a > img) > ul > li > div > div:hover { box-shadow: 0 8px 20px rgba(0,0,0,.25); transform: translateY(-2px); }
.el-text > div:has(> ul > li > div > div > div > a > img) img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.el-text > div:has(> ul > li > div > div > div > a > img) h2 { margin: 0; padding: 15px 8px; background: #333; color: #fff; font-size: 18px; font-weight: 500; line-height: 1.2; }
.el-text > div:has(> ul > li > div > div > div > a > img) h2 a { text-decoration: none; }
.el-text > div:has(> ul > li > div > div > div > a > img) h2 + * , .el-text > div:has(> ul > li > div > div > div > a > img) li > div > div > div:nth-child(3) { padding: 10px 10px 14px; font-size: 13px; line-height: 18px; }
.el-text > div:has(> ul > li > div > div > div > a > img) li > div > div > a, .el-text > div:has(> ul > li > div > div > div > a > img) li > div > div > ul { display: none; }
.js .tabs__panel { display: none; } .js .tabs__panel.active { display: block; }
/* Accordion (FAQ): panel rows with a plus/minus marker (live) */
.accordion__item { margin: 0 0 5px; overflow: hidden; border: 1px solid #ddd; border-radius: 3px; background: #fff; }
.accordion__title { margin: 0; font: 400 14px/20px var(--sans); }
main .accordion__title a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 15px; background: #f7f7f7;
  color: var(--ink-strong); text-decoration: none; }
main .accordion__title a:hover { background: #eafafb; color: var(--ink-strong); }
.accordion__title a i { display: none; }
.accordion__title a::after { content: "+"; flex: none; color: #777; font-size: 20px; line-height: 1; }
.accordion__item:has(.accordion__panel.is-open) .accordion__title a::after { content: "\2212"; }
.accordion__body { padding: 14px 16px 2px; border-top: 1px solid #eee; }
.el-divider { height: 0; margin: 22px 0; border-top: 2px solid #a6dcef; }
/* 404 page: the same calm spacing as the thank-you page */
main section.band:only-of-type > .col-12:only-child > .el-text:only-child:has(> h2.ta-center:first-child + p + .button-row) { padding: 60px 0 80px; }
/* /thank-you (page file unchanged): a calm confirmation with a cyan check badge */
main section.band:only-of-type:not([class*="bg-"]):has(> .col-12:only-child > .el-text:only-child > h2.ta-center:first-child) { padding-top: 80px; padding-bottom: 100px; }
main section.band:only-of-type:not([class*="bg-"]) > .col-12:only-child > .el-text:only-child > h2.ta-center:first-child::before { content: ""; display: block;
  width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: var(--check) center / 30px no-repeat, var(--cyan-strong); box-shadow: 0 4px 12px rgba(0,224,240,.35); }
.js .accordion__panel { display: none; } .js .accordion__panel.is-open { display: block; }
/* Forms (styling only; fields, names and validation are fixed by DECISIONS 26-28) */
form[data-live] { display: grid; gap: 18px; max-width: 600px; padding: 26px 28px 30px; border: 1px solid #d6d6d6; border-top: 3px solid var(--cyan-strong);
  border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.form-row label, .form-label { display: block; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 20px; letter-spacing: .2px; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.form-pair label { color: var(--ink-soft); font-size: 12px; font-weight: 400; }
.form-row input, .form-row textarea, .form-row select { display: block; width: 100%; margin-top: 6px; }
input, select, textarea { max-width: 100%; padding: 9px 12px; border: 1px solid #c4c4c4; border-radius: 3px; background: #fff; color: #222;
  font: 400 15px/22px var(--sans); transition: border-color var(--ease), box-shadow var(--ease); }
input:not([type="checkbox"]):not([type="radio"]), select { min-height: 42px; }
textarea { min-height: 130px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #767676; }
input:hover, textarea:hover, select:hover { border-color: #999; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,107,117,.25); border-radius: 3px; }
/* Error colour only after the visitor has interacted with the field (not on an untouched form) */
input:user-invalid, textarea:user-invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
form[data-live] button.btn { justify-self: start; padding: 12px 34px; border-color: #e9b500; background: #e9b500; color: #000; } /* live: golden Submit */
form[data-live] button.btn:hover { border-color: #c99c00; background: #d4a500; }
.hp { display: none; }
iframe { width: 100%; min-height: 450px; border: 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
/* Photo gallery pages: the 15 thumbnails as a tidy grid at their own size, each opening the large picture (launch-exceptions) */
.el-text > ul:has(> li > a > img[src*="/igallery/"]) { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.el-text > ul:has(> li > a > img[src*="/igallery/"]) a { display: block; overflow: hidden; border: 3px solid #fff; border-radius: 4px; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: box-shadow var(--ease), transform var(--ease); }
.el-text > ul:has(> li > a > img[src*="/igallery/"]) a:hover { box-shadow: 0 6px 16px rgba(0,0,0,.25); transform: translateY(-2px); }
.el-text > ul:has(> li > a > img[src*="/igallery/"]) img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Testimonials page: speech bubbles in a reading column, avatar circle and name beneath (live layout; the submission form is not rebuilt) */
.t-testimonials main { padding: 45px 15px 40px; }
.review { max-width: 780px; margin: 0 auto 28px; padding: 0; }
.review__text { position: relative; padding: 16px 22px; border-radius: 4px; background: #fff; color: #1f1f1f; font-style: italic; line-height: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.review__text::after { content: ""; position: absolute; left: 34px; bottom: -10px; border: solid transparent; border-width: 10px 10px 0; border-top-color: #fff; }
.review__text p { margin: 0; }
.review > div:nth-child(2) { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-left: 18px; }
.review > div:nth-child(2) > div:first-child { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #d4d4d4; }
.review > div:nth-child(2) > div:first-child::after, .avatar::after { content: ""; position: absolute; inset: 22% 22% 12%; background: #888;
  -webkit-mask: var(--user) center / contain no-repeat; mask: var(--user) center / contain no-repeat; }
.review__name { font-size: 13px; font-weight: 700; line-height: 18px; } .review__stars, .stars { color: var(--star); font-size: 13px; letter-spacing: 1px; }
.review__photo { display: none; }

/* Card grid and review slider */
/* Card grid ("Can Help" / Education): grey section, pill filters, cards with a dark title bar (live) */
.card-grid { padding: 30px 0 40px; background: #b8b8b8; }
.card-grid > .wrap > .title { margin: 0 0 12px; text-align: center; }
.card-grid > .wrap > p { margin: 0 0 20px; text-align: center; }
.card-grid__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.card-grid__filters button { padding: 5px 18px; border: 0; border-radius: 5px; background: #eee; color: #555; font: 400 12px/24px var(--sans);
  cursor: pointer; transition: background-color var(--ease), color var(--ease); }
.card-grid__filters button:hover { background: #fff; color: #000; }
.card-grid__filters .is-active, .card-grid__filters .is-active:hover { background: var(--ink-strong); color: #fff; }
.card-grid__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.card { overflow: hidden; border-radius: 5px; background: #555; color: #fff; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: box-shadow var(--ease), transform var(--ease); }
.card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.25); transform: translateY(-2px); }
.card > a:first-child { display: block; overflow: hidden; }
.card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s ease; }
.card:hover img { transform: scale(1.04); }
.card h2 { margin: 0; padding: 15px 8px; background: #333; font-size: 18px; font-weight: 500; line-height: 1.2; }
.card h2 a { text-decoration: none; }
.card__text { padding: 10px 10px 14px; color: #ddd; font-size: 13px; line-height: 18px; }
.card__more, .card__tags { display: none; } /* hidden on live too */
/* Testimonial block on 50 pages: Manhattan at dusk behind, avatar column, grey speech bubble (live) */
.reviews { padding: 45px 0 22px; background: #46525f url("/img/sliderimages/wheat-small.jpg") left top / cover no-repeat; }
.reviews__inner { position: relative; }
.review-slide { display: none; grid-template-columns: 115px 1fr; gap: 20px; align-items: start; }
.review-slide.is-active { display: grid; animation: fade-in .6s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .review-slide.is-active { animation: none; } }
.review-slide__who { padding: 10px 6px 8px; border-radius: 6px; background: rgba(0,0,0,.5); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.avatar { position: relative; display: block; width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; background: #e9e9e9; }
.review-slide__text { position: relative; padding: 14px 20px; border-radius: 3px; background: #f5f5f5; color: #1f1f1f; font-size: 14px; font-style: italic; line-height: 21px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.review-slide__text::before { content: ""; position: absolute; top: 26px; left: -10px; border: solid transparent; border-width: 10px 10px 10px 0; border-right-color: #f5f5f5; }
.review-slide__text p { margin: 0; }
.reviews__nav { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.reviews__nav button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%;
  background: rgba(0,0,0,.35); color: #fff; font-size: 10px; cursor: pointer; transition: background-color var(--ease), color var(--ease); }
.reviews__nav button:hover { border-color: var(--cyan-strong); background: var(--cyan-strong); color: #000; }

/* Footer: cyan band, 40px padding; the live white "Call Us Today" (1.5:1) is dark here for contrast */
.site-footer { background: var(--cyan-footer); color: var(--ink-strong); padding: 40px 0; }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 30px; }
.site-footer__call { display: flex; align-items: center; gap: 10px; padding-left: 15px; font-weight: 600; }
.site-footer__call .icon { color: var(--pink); font-size: 15px; }
.site-footer__call a { font-weight: 700; letter-spacing: .3px; }
.site-footer__call a:hover { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__links { display: flex; flex-direction: row-reverse; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.site-footer__links a { display: block; padding: 10px 15px; border-radius: 3px; }
.site-footer__links a:hover { background: rgba(255,255,255,.55); color: #000; }
.address-band { padding: 26px 15px; background: var(--header); text-align: center; font-size: 14px; }
.address-band p { margin: 0; }

/* The old site changed layout at 800px (menu) and 414px (hero); the menu is tightened in between so it never wraps */
@media (max-width: 1240px) {
  .logo img { width: 250px; }
  .main-nav > ul > li > a { padding: 0 10px; font-size: 14px; letter-spacing: .2px; }
  .main-nav > ul > li > a::before { left: 10px; right: 10px; }
}
@media (max-width: 1020px) {
  .site-header__inner { min-height: 120px; }
  .logo img { width: 200px; }
  .main-nav > ul > li > a { padding: 0 7px; font-size: 13px; letter-spacing: 0; }
  .main-nav > ul > li > a::before { left: 7px; right: 7px; }
  .main-nav > ul > .has-children > a::after { margin-left: 5px; }
}
@media (max-width: 991px) {
  .slide__text.wrap { padding: 0 80px 0 34px; }
  .slide__line--2 { font-size: 44px; line-height: 48px; margin-bottom: 36px; }
  .big-title { font-size: 48px; line-height: 54px; }
  .band { grid-template-columns: 1fr; row-gap: 24px; } .band > .col { grid-column: 1 / -1; } .band > .col:empty { display: none; }
  .card-grid__cards, .el-text > div:has(> ul > li > div > div > div > a > img) > ul { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 800px) {
  .slide__text.wrap { padding: 0 70px 0 76px; }
  .slide__line--2 { font-size: 36px; line-height: 40px; } .slide:nth-child(2) .slide__line--2 { font-size: 26px; line-height: 32px; }
  .slide:nth-child(2) .slide__line--1 { font-size: 18px; line-height: 24px; }
  .t-home main .band--image { background-attachment: scroll; }
  /* Phones crop photos tightly, so text lands on busy parts: a light wash under dark text, a deeper shade under white text */
  .band--image.tone-image-light { box-shadow: inset 0 0 0 100vmax rgba(255,255,255,.72); }
  .band--image.tone-dark { box-shadow: inset 0 0 0 100vmax rgba(0,0,0,.5); }
  .topbar__inner { min-height: 54px; justify-content: center; }
  .site-header__inner { min-height: 90px; padding: 0 10px 0 15px; } .logo img { width: 180px; }
  .menu-toggle { font-size: 26px; }
  .site-footer__inner { flex-direction: column; justify-content: center; }
  .site-footer__call { padding-left: 0; } .site-footer__links { flex-direction: row; justify-content: center; }
  .main-nav, .side-panel__new-patient { display: none; } .side-panel__menu { display: block; }
  .icon-row { padding: 40px 0 20px; } .icon-row__inner { grid-template-columns: repeat(2, 1fr); row-gap: 26px; column-gap: 10px; }
  .icon-row__line { font-size: 13px; line-height: 20px; }
  .icon-list--right > li { flex-direction: row; text-align: left; }
  .lead { font-size: 17px; line-height: 1.45; } p.text-large:has(> br + br)::first-line { font-size: 18px; } .card h2 { font-size: 16px; padding: 12px 6px; }
  main section.band--image:first-of-type:not(:has(> .col-12)) { min-height: 0; padding-top: 50px; padding-bottom: 60px; }
  .review-slide { grid-template-columns: 1fr; gap: 16px; } .review-slide__who { justify-self: center; min-width: 130px; }
  .review-slide__text::before { top: -10px; left: 50%; margin-left: -10px; border-width: 0 10px 10px; border-color: transparent transparent #f5f5f5; }
}
@media (max-width: 414px) {
  .hero__mobile { display: block; min-height: 350px; padding: 40px 20px; text-align: center;
    background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url("/img/sliderimages/officepic0.jpg") center / cover; }
  .hero__mobile h1 { margin: 0 0 6px; font: 400 36px/50px var(--serif); }
  .hero__mobile p { margin: 0 0 20px; font: 300 18px/25px var(--sans); }
  .slides, .slides__nav { display: none; }
  h1 { font-size: 28px; } h2 { font-size: 24px; }
}