/* ==========================================================================
   V4U Dental Care & Implant Centre — stylesheet
   Matches the original site's look (light Roboto type, red/cyan accents, navy bars).
   1 Tokens · 2 Base · 3 Header & nav · 4 Hero & page banners · 5 Shared blocks
   6 Home · 7 Treatment pages · 8 Articles & stories · 9 Appointment wizard
   10 Contact footer · 11 Utilities
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --navy: #25247b;
  --red: #c4161b;
  --red-dark: #a01015;
  --cyan: #00bcd5;
  --blue: #003784;
  --ink: #333c4e;
  --text: #7e8890;
  --band: #f2eeee;
  --gray: #f7f7f7;
  --line: #e2e2e2;
  --white: #fff;
  --orange: #e9492d;
  --wrap: 1170px;
  --header-h: 120px;
  --font: "Roboto", Arial, Helvetica, sans-serif;
  --font-ui: "Montserrat", "Roboto", Arial, sans-serif;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 300 17px/1.75 var(--font); color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--red); }
h1, h2, h3, h4 { margin: 0 0 .5em; font-family: var(--font); font-weight: 300; color: var(--ink); line-height: 1.2; }
p { margin: 0 0 1.1em; }
ul { padding-left: 1.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.skip-link { position: absolute; left: 10px; top: -60px; z-index: 300; background: var(--navy); color: #fff; padding: 10px 16px; }
.skip-link:focus { top: 0; color: #fff; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
strong, b { font-weight: 700; }

/* 3. Header & navigation ---------------------------------------------------- */
:root { --nav-bg: #333c4e; }
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255, 255, 255, .7); transition: background .25s, box-shadow .25s; }
.site-header .wrap { display: flex; align-items: flex-start; justify-content: space-between; height: var(--header-h); max-width: none; padding: 0 59px; }
.logo { display: block; margin: 10px 0; flex: none; }
.logo img { display: block; height: 130px; width: auto; transition: height .25s; }
.site-header.is-fixed { position: fixed; background: rgba(255, 255, 255, .96); box-shadow: 0 2px 14px rgba(0, 0, 0, .14); animation: slideDown .3s ease; --header-h: 100px; }
.site-header.is-fixed .logo { margin: 8px 0; } .site-header.is-fixed .logo img { height: 84px; }
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: none; } }
.nav-toggle { display: inline-grid; place-items: center; width: 46px; height: 46px; background: none; border: 0; padding: 0; cursor: pointer; align-self: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 24px; height: 3px; background: #3bafbf; border-radius: 1px; transition: transform .25s, background .25s; }
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -8px; } .nav-toggle span::after { top: 8px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); }

/* mobile: dark slide-in menu, like the original mobile menu */
.main-nav { position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); background: var(--nav-bg); padding: 84px 0 30px; clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path .3s ease, visibility .3s; overflow-y: auto; z-index: 120; box-shadow: -8px 0 30px rgba(0, 0, 0, .3); }
.main-nav.is-open { clip-path: inset(0); visibility: visible; }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul > li { border-top: 1px solid rgba(255, 255, 255, .16); display: flex; flex-wrap: wrap; align-items: center; }
.main-nav a { display: flex; align-items: center; flex: 1 1 auto; min-height: 55px; padding: 0 12px 0 30px; font: 400 14px/1.2 var(--font); text-transform: uppercase; color: #fff; }
.main-nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.main-nav .sub-toggle { flex: none; width: 56px; min-height: 55px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: #fff; }
.main-nav .sub { display: none; flex: 0 0 100%; }
.main-nav .sub.is-open { display: block; }
.main-nav .sub a { padding-left: 42px; min-height: 48px; font-weight: 300; border-top: 1px solid rgba(255, 255, 255, .1); }
.main-nav .chev { width: 14px; height: 14px; transition: transform .2s; }
.sub-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.btn-appt { /* plain row on mobile, gradient button on desktop */ }
.nav-backdrop { position: fixed; inset: 0; background: rgba(10, 15, 40, .5); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 99; }
.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
@media (max-width: 1099px) {
  :root { --header-h: 130px; }
  .site-header { background: var(--nav-bg); }
  .site-header .wrap { padding: 0 30px; align-items: center; }
  .logo { margin: 0; background: #fff; padding: 5px 8px; border-radius: 3px; } .logo img { height: 84px; }
  .site-header.is-fixed { background: var(--nav-bg); --header-h: 90px; } .site-header.is-fixed .logo { margin: 0; } .site-header.is-fixed .logo img { height: 56px; }
}
@media (min-width: 1100px) {
  :root { --header-h: 150px; }
  .nav-toggle, .nav-backdrop, .main-nav .sub-toggle { display: none; }
  .main-nav { position: static; inset: auto; width: auto; padding: 0; clip-path: none; visibility: visible; box-shadow: none; overflow: visible; background: none; }
  .main-nav > ul { display: flex; align-items: stretch; height: calc(var(--header-h) - 35px); }
  .main-nav > ul > li { position: relative; display: flex; align-items: center; border: 0; padding-right: 25px; }
  .main-nav > ul > li > a { flex: none; min-height: 0; padding: 0; font: 400 14px/14px var(--font-ui); letter-spacing: 1px; color: #23282d; background: none; white-space: nowrap; }
  .main-nav > ul > li > a:hover, .main-nav > ul > li:hover > a, .main-nav > ul > li:focus-within > a { color: var(--navy); background: none; }
  .main-nav > ul > li > a.btn-appt { padding: 13px 29px; font: 400 14px/17px var(--font-ui); letter-spacing: 2px; color: #105378; background: linear-gradient(#90c9e8, #5aabd6); border-radius: 2px; transition: filter .2s; }
  .main-nav > ul > li > a.btn-appt:hover { filter: brightness(1.06); color: #105378; }
  .main-nav .sub { display: block; position: absolute; top: 100%; left: 0; width: 310px; padding: 0; background: #343434; border-top: 2px solid var(--navy); box-shadow: 1px 1px 30px rgba(0, 0, 0, .06); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }
  .main-nav .has-sub:hover > .sub, .main-nav .has-sub:focus-within > .sub, .main-nav .sub.is-open { opacity: 1; visibility: visible; transform: none; }
  .main-nav .sub a { display: block; flex: none; min-height: 0; padding: 10px 20px; font: 300 14px/17.5px var(--font); letter-spacing: normal; color: #fff; border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .58); }
  .main-nav .sub li:last-child a { border-bottom: 0; }
  .main-nav .sub a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
}
}

/* 4. Hero & page banners ---------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: #e9f1f8; }
.hero-slides { position: relative; height: clamp(560px, 52vw, 700px); }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .7) 36%, rgba(255, 255, 255, .1) 70%, transparent 100%); }
.hero-copy { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-top: var(--header-h); }
.hero-copy > div { width: min(100%, 540px); }
.hero-sub { display: block; font: 500 14px/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.hero-title { font-size: clamp(2.2rem, 5.4vw, 4.4rem); line-height: 1.05; margin-bottom: 18px; color: #111; }
.hero-title em { font-style: normal; color: var(--cyan); }
.hero p { font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--ink); max-width: 44ch; }
.btn-red { display: inline-block; padding: 17px 36px; font: 500 15px/1.2 var(--font-ui); letter-spacing: .1em; color: #fff; background: var(--red); border: 0; cursor: pointer; transition: background .2s; text-align: center; }
.btn-red:hover { background: var(--red-dark); color: #fff; }
.btn-blue { display: inline-block; padding: 12px 34px; font: 500 12px/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #12395c; background: linear-gradient(#a8dbf5, #62aedc); border: 1px solid #3f86b0; cursor: pointer; }
.btn-blue:hover { filter: brightness(1.07); color: #12395c; }
.btn-line { display: inline-block; padding: 13px 28px; font: 500 14px/1.2 var(--font-ui); letter-spacing: .08em; color: var(--navy); border: 2px solid var(--navy); margin-left: 10px; }
.btn-line:hover { background: var(--navy); color: #fff; }
.hero-ctrl { position: absolute; z-index: 5; top: 55%; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .85); color: var(--navy); display: none; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.hero-ctrl svg { width: 20px; height: 20px; }
.hero-prev { left: 18px; } .hero-next { right: 18px; }
.hero-dots { position: absolute; z-index: 5; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; gap: 10px; }
.hero-dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 2px solid var(--navy); background: transparent; cursor: pointer; }
.hero-dots button[aria-current="true"] { background: var(--navy); }
@media (min-width: 900px) { .hero-ctrl { display: grid; } }
@media (max-width: 760px) {
  .hero-slides { height: 600px; }
  .hero-slide::after { background: linear-gradient(0deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .93) 48%, rgba(255, 255, 255, .5) 68%, transparent 90%); }
  .hero-slide > img { object-position: 24% top; }
  .hero-copy { align-items: flex-end; justify-content: flex-start; padding-bottom: 70px; }
}

.banner { position: relative; background: #dfe8ef center / cover no-repeat; min-height: clamp(380px, 40vw, 520px); display: flex; align-items: center; padding: calc(var(--header-h) + 20px) 0 40px; }
.banner--center { text-align: center; }
.banner h1 { overflow-wrap: break-word; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02; margin-bottom: 14px; color: #111; font-weight: 300; }
.banner h1 em { display: block; font-style: normal; color: var(--cyan); }
.banner h1 .red { color: var(--red); font-style: normal; }
.banner .sub { font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-style: italic; font-weight: 500; color: var(--ink); margin: 0; line-height: 1.3; }
.banner .sub--plain { font-style: normal; font-weight: 400; color: #fff; font-size: clamp(1.1rem, 1.8vw, 1.5rem); max-width: 40ch; margin-inline: auto; }
.banner--right .wrap { display: flex; justify-content: flex-end; }
.banner--right .banner-copy { width: min(100%, 560px); }
.banner--dark::before { content: ""; position: absolute; inset: 0; background: rgba(45, 58, 80, .55); }
.banner--dark .wrap { position: relative; }
.banner--dark h1 { color: #fff; }
.banner--dark h1 em { color: #36d1e6; }
@media (max-width: 760px) { .banner h1 { font-size: 2.6rem; } .banner .sub { font-size: 1.25rem; } }

.cta-bar { background: var(--navy); color: #fff; padding: 30px 0; }
.cta-bar .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.cta-bar h2 { margin: 0; color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.9rem); font-weight: 300; }
.cta-bar .btn-red { white-space: nowrap; }
@media (max-width: 760px) { .cta-bar .btn-red { width: 100%; } }

/* 5. Shared blocks ---------------------------------------------------------- */
.section { padding: clamp(44px, 6vw, 80px) 0; }
.section--gray { background: var(--gray); }
.section--band { background: var(--band); }
.sec-title { text-align: center; font-size: clamp(2rem, 4vw, 2.9rem); color: #111; margin: 0 0 18px; font-weight: 300; }
.sec-title strong, .sec-h strong { color: var(--red); font-weight: 700; }
.sep { display: block; width: 196px; height: 2px; background: #c9c9c9; margin: 0 auto 44px; }
.sep--left { margin-left: 0; }
.sec-sub { text-align: center; font-size: clamp(1.4rem, 3vw, 2.2rem); color: #7d8791; text-transform: uppercase; font-weight: 300; margin: -14px 0 44px; letter-spacing: .01em; }
.grid { display: grid; gap: 30px; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.read-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: #111; font-size: 15px; }
.read-more::after { content: "›"; font-size: 18px; line-height: 1; }
.read-more:hover { color: var(--red); }

/* value cards */
.v-card { background: #fff; border: 1px solid #e3e3e3; padding: 22px 22px 26px; text-align: center; display: flex; flex-direction: column; }
.v-card img { width: 100%; max-width: 230px; margin: 0 auto 18px; aspect-ratio: 3 / 2; object-fit: cover; }
.v-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 12px; }
.v-card p { font-size: 15.5px; line-height: 1.6; color: #838b93; }
.v-card p.red { color: #e00; font-weight: 400; margin-bottom: 0; }
.v-card .read-more { margin-top: auto; justify-content: center; padding-top: 10px; }

/* 6. Home ------------------------------------------------------------------ */
/* success stories */
.story { background: #fff; border: 1px solid #e3e3e3; padding: 8px; display: flex; flex-direction: column; }
.compare { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; cursor: ew-resize; background: #eee; }
.compare img { width: 100%; aspect-ratio: 262 / 232; object-fit: cover; pointer-events: none; }
.compare .after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.compare .after img { height: 100%; }
.compare .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: rgba(255, 255, 255, .95); }
.compare .handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 3px solid #fff; background: rgba(0, 0, 0, .25); color: #fff; display: grid; place-items: center; font-size: 16px; letter-spacing: 1px; line-height: 1; }
.compare .tag { position: absolute; bottom: 8px; padding: 2px 10px; font: 600 10px/1.6 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(37, 36, 123, .88); z-index: 2; }
.compare .tag.b { left: 8px; } .compare .tag.a { right: 8px; background: rgba(196, 22, 27, .92); }
.story h3 { font-size: 21px; font-weight: 400; color: #333c4e; margin: 14px 8px 6px; }
.story p { margin: 0 8px 6px; font-size: 15.5px; line-height: 1.55; color: #838b93; }
.story .more-btn { margin: 4px 8px 10px; align-self: flex-start; padding: 0; background: none; border: 0; cursor: pointer; font-weight: 400; color: var(--navy); font-size: 15px; }
.story .more-btn:hover { color: var(--red); text-decoration: underline; }
dialog.modal { width: min(92vw, 560px); padding: 0; border: 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
dialog.modal::backdrop { background: rgba(10, 15, 40, .65); }
.modal h3 { margin: 0; padding: 18px 54px 18px 24px; background: var(--navy); color: #fff; font-size: 20px; font-weight: 400; }
.modal .m-body { padding: 24px; }
.modal .m-body .compare { max-width: 380px; margin: 0 auto 18px; }
.modal .m-body p { color: #555; font-size: 16px; }
.modal .x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; font-size: 28px; line-height: 1; background: none; border: 0; color: #fff; cursor: pointer; }
.modal .m-foot { padding: 0 24px 22px; }

/* treatments (icons around the tooth) */
.t-wrap { display: grid; gap: 28px; align-items: center; }
.t-col { display: grid; gap: 26px; }
.t-item { display: flex; gap: 18px; align-items: center; }
.t-item img { width: 76px; height: 76px; flex: none; }
.t-item h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: #2a3350; }
.t-item h3 a { color: inherit; } .t-item h3 a:hover { color: var(--red); }
.t-item p { margin: 0; font-size: 15px; line-height: 1.45; color: #6f7a83; }
.t-center { display: none; text-align: center; }
.t-center img { margin: 0 auto; max-height: 420px; width: auto; }
@media (min-width: 900px) {
  .t-wrap { grid-template-columns: 1fr 280px 1fr; gap: 20px; }
  .t-center { display: block; }
  .t-col--r .t-item { flex-direction: row-reverse; text-align: right; }
}

/* team */
.team { text-align: left; }
.team img { width: 210px; height: 210px; object-fit: cover; margin: 0 auto; }
.team .box { background: #fff; padding: 26px 28px 28px; margin-top: -2px; }
.team h3 { font: 400 17px/1.4 var(--font); letter-spacing: .06em; color: #333; margin: 0 0 8px; }
.team .deg { letter-spacing: .06em; color: #444; margin: 0 0 16px; font-size: 17px; }
.team p { font-size: 15.5px; color: #838b93; margin-bottom: 16px; }
.social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.social a { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; }
.social svg { width: 15px; height: 15px; fill: currentColor; }
.social .fb { background: #3b5998; } .social .tw { background: #000; } .social .ig { background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888); }

/* gallery strip */
.g-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.g-strip a { display: block; width: 128px; border: 1px solid #e6e6e6; }
.g-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.center { text-align: center; margin-top: 34px; }

/* news cards */
.n-card { background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .12); border: 4px solid #f1f1f1; display: flex; flex-direction: column; }
.n-card .ph { aspect-ratio: 16 / 11; overflow: hidden; background: #e9eef3; }
.n-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.n-card .b { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.n-card h3 { font-size: 22px; font-weight: 300; text-transform: uppercase; color: #222; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #e0e0e0; line-height: 1.3; }
.n-card p { font-size: 15.5px; line-height: 1.6; color: #838b93; }
.n-card .read-more { margin-top: auto; }

/* testimonials */
.testi { position: relative; background: #3a4a63 center / cover no-repeat fixed; color: #fff; text-align: center; padding: clamp(50px, 7vw, 90px) 0; isolation: isolate; }
.testi::before { content: ""; position: absolute; inset: 0; background: rgba(27, 40, 68, .6); z-index: -1; }
.testi h2 { color: #fff; font-weight: 700; font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 18px; }
.testi .sep { background: #fff; margin-bottom: 36px; }
.testi-track { max-width: 820px; margin: 0 auto; position: relative; min-height: 260px; }
.testi-item { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; display: flex; flex-direction: column; align-items: center; margin: 0; }
.testi-item.is-active { opacity: 1; visibility: visible; position: relative; }
.testi-item img { width: 104px; height: 104px; border-radius: 50%; margin-bottom: 20px; }
.testi-item blockquote { margin: 0 0 16px; font-style: italic; font-size: clamp(1rem, 1.7vw, 1.2rem); letter-spacing: .06em; line-height: 1.8; font-weight: 300; }
.testi-item cite { font-style: normal; font-weight: 500; letter-spacing: .08em; }
.testi-dots { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.testi-dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: transparent; cursor: pointer; }
.testi-dots button[aria-current="true"] { background: #fff; }
@media (max-width: 900px) { .testi { background-attachment: scroll; } }

/* 7. Treatment / content pages --------------------------------------------- */
.lead-row { display: grid; gap: 34px; align-items: center; padding: 60px 0; }
.lead-row .lead p { font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 2; letter-spacing: .05em; color: #6f7a83; }
.lead-row img { width: 100%; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
@media (min-width: 900px) { .lead-row { grid-template-columns: 1fr 1fr; gap: 56px; } }
.t-sec { padding: 46px 0 40px; }
.t-sec--band { background: var(--band); }
.sec-h { font-size: clamp(1.9rem, 3.8vw, 2.9rem); color: #111; font-weight: 300; margin: 0 0 14px; }
.t-sec .sep { margin: 0 0 24px; }
.t-sec p, .t-sec li { font-size: 17px; line-height: 1.7; color: #7e8890; }
.t-sec h3, .t-sec h4 { color: var(--ink); font-weight: 500; margin-top: 1.2em; }
.t-sec .cols { display: grid; gap: 30px; align-items: start; }
@media (min-width: 800px) { .t-sec .cols { grid-template-columns: 300px 1fr; } }
.t-sec img { box-shadow: 0 4px 16px rgba(0, 0, 0, .1); max-width: 100%; height: auto; }
.t-sec--toggles { padding: 14px 0 10px; background: #fff; }
.accordion details { border-bottom: 1px solid #dcdcdc; }
.accordion summary { display: flex; align-items: center; gap: 18px; cursor: pointer; list-style: none; padding: 17px 2px; font: 300 clamp(1.05rem, 1.9vw, 1.45rem)/1.4 var(--font); letter-spacing: .05em; color: #333c4e; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before { content: "+"; flex: none; width: 19px; height: 19px; display: grid; place-items: center; background: #333c4e; color: #fff; font-weight: 700; font-size: 15px; line-height: 1; }
.accordion details[open] > summary::before { content: "−"; background: var(--red); }
.accordion .answer { padding: 4px 0 22px 37px; }
.accordion .answer img { margin: 12px 0; max-height: 360px; width: auto; }
.accordion .answer p, .accordion .answer li { color: #7e8890; }
.checklist { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 8px; }
.checklist li { position: relative; padding-left: 28px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 14px; background: var(--cyan); border-radius: 2px; }
.checklist p { margin: 0; }
.expand-bar { display: flex; justify-content: flex-end; padding: 14px 0 0; }
.expand-bar button { background: none; border: 0; cursor: pointer; color: var(--navy); font: 500 13px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.expand-bar button:hover { color: var(--red); }

/* department cards */
.d-card { background: #fff; border: 1px solid #e3e3e3; display: flex; flex-direction: column; }
.d-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.d-card .b { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.d-card h3 { font-size: 26px; font-weight: 400; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .02em; }
.d-card p { font-size: 16px; line-height: 1.65; }
.d-card .read-more { margin-top: auto; }
.intro { max-width: 760px; margin: 0 auto; text-align: center; }
.intro img { width: 72px; margin: 0 auto 14px; }
.intro h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); color: #333c4e; }
.intro p { font-size: 18px; line-height: 1.9; letter-spacing: .03em; color: #6f7a83; }
.fig-list { display: grid; gap: 14px; margin: 0 0 1em; padding: 0; list-style: none; }
.fig-list li { padding-left: 28px; position: relative; }
.fig-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 14px; background: var(--cyan); border-radius: 2px; }
.photo-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 24px 0; }
.photo-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* 8. Articles & stories ---------------------------------------------------- */
.art-banner { background-size: cover; background-position: center; min-height: clamp(380px, 44vw, 540px); display: grid; place-items: center; padding: calc(var(--header-h) + 20px) 20px 40px; }
.art-banner h1 { margin: 0; padding: 18px 40px; background: rgba(0, 0, 0, .62); color: #fff; font-size: clamp(2rem, 5.2vw, 4rem); font-weight: 300; text-align: center; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 56px 0 70px; }
@media (min-width: 980px) { .post-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 64px; } }
.post-body p { font-size: 17px; line-height: 1.8; color: #7e8890; }
.post-body .lead { font-size: 18px; }
.side-box { margin-bottom: 38px; }
.side-box h4 { font: 300 16px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #333c4e; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 2px solid var(--cyan); }
.side-testi { text-align: center; position: relative; min-height: 330px; }
.side-testi .testi-item { color: #333; }
.side-testi .testi-item img { width: 100px; height: 100px; }
.side-testi blockquote { font-size: 15.5px; letter-spacing: .08em; line-height: 1.9; color: #444; }
.side-testi cite { color: #111; }
.side-testi .testi-dots button { border-color: #333; } .side-testi .testi-dots button[aria-current="true"] { background: #333; }
.hours { width: 100%; border-collapse: collapse; font-size: 16px; }
.hours td { padding: 10px 6px; border-bottom: 1px solid #e6e6e6; color: #666; vertical-align: top; }
.hours td:last-child { text-align: right; }
.side-box .map iframe { width: 100%; height: 240px; border: 0; }
.mini-list { list-style: none; padding: 0; margin: 0; }
.mini-list li { padding: 9px 0; border-bottom: 1px solid #eee; }
.mini-list a { color: #333c4e; font-size: 16px; }
.mini-list a:hover { color: var(--red); }
.post-cta { margin-top: 32px; padding: 26px; background: var(--gray); border-left: 4px solid var(--red); }
.post-cta h3 { font-size: 24px; margin-bottom: 8px; }
.compare-wrap { max-width: 520px; margin: 0 0 28px; }
.compare-wrap .compare img { aspect-ratio: 262 / 232; }

/* 9. Appointment wizard ---------------------------------------------------- */
.apt-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.apt-main { padding: 60px 20px 70px; }
.apt-side { background: var(--gray); padding: 56px 20px; }
@media (min-width: 1000px) { .apt-layout { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); } .apt-main { padding: 70px 56px 80px max(20px, calc((100vw - var(--wrap)) / 2 + 20px)); } .apt-side { padding: 70px max(20px, calc((100vw - var(--wrap)) / 2 + 20px)) 80px 56px; } }
.apt-main h2 { font-size: clamp(2rem, 4vw, 3.1rem); color: #333c4e; font-weight: 400; }
.apt-main > p { font-size: 20px; line-height: 2; letter-spacing: .05em; color: #6f7a83; max-width: 560px; }
/* Booking widget (same look as the old Booking Ultra Pro form) */
.bup { margin-top: 36px; border: 1px solid #e2e2e2; background: #fff; max-width: 640px; padding: 8px 8px 14px; color: var(--text); font: 300 17px/1.25 var(--font); }
.bup *, .bup *::before, .bup *::after { box-sizing: border-box; }
.bup-filter-header { background: #f9f9f9; padding: 15px 10px 20px; }
.bup-book-steps-cont { display: flex; margin: 0 0 12px 10px; }
.bup-steps { position: relative; flex: 1 1 0; min-width: 0; height: 62px; }
.bup-cart-step-line-inactive { position: absolute; left: 20px; right: 0; top: 17px; height: 2px; background: #bbb; }
.bup-steps:last-child .bup-cart-step-line-inactive { right: -4px; }
.bup-move-steps { position: relative; z-index: 1; width: 35px; height: 35px; border-radius: 50%; text-align: center; font: 300 17px/35px var(--font); }
.bup-cart-step-inactive { background: #fff; border: 1px solid #bbb; color: #bbb; }
.bup-cart-step-active { background: #e55237; color: #fff; }
.bup-cart-step-text-active, .bup-cart-step-text-inactive { font: 300 16px/20px var(--font); margin: 4px 0 0 -8px; white-space: nowrap; }
.bup-cart-step-text-active { color: var(--text); } .bup-cart-step-text-inactive { color: #c5c5c5; }
.bup-book-info-cont { display: flex; gap: 5px; }
.bup-book-info-block1 { flex: 1 1 0; min-width: 0; }
.bup-book-info-block1 label { display: block; margin: 0 0 5px; color: #666; font: 300 17px/1.25 var(--font); }
.bup select, .bup-book-info-block1 input, .bup-input { width: 100%; height: 40px; padding: 5px; border: 1px solid #ccc; border-radius: 6px; background: #fff; color: #444; font: 14px var(--font); }
.bup-book-info-block1 input { font-size: 16px; color: #aaa9a9; cursor: pointer; }
.bup select:focus, .bup-input:focus, .bup-book-info-block1 input:focus { outline: none; border-color: #e96c56; }
.bup-nav-search-options-bar { text-align: right; margin: 10px 0 5px; padding: 5px; min-height: 50px; }
.bup-button-submit { height: 32px; padding: 0 12px; border: 0; background: #e96c56; color: #f4f4f4; font: 12px/32px Arial, sans-serif; text-transform: uppercase; cursor: pointer; }
.bup-button-submit:hover { background: #e55237; }
.bup-book-info-text { margin: 5px 0; }
.bup-book-info-text p { margin: 0 0 12px; }
.bup-selected-staff-booking-info { margin: 15px 0; padding: 10px 5px; color: #777; }
.bup-selected-staff-booking-info strong { font-weight: 700; color: #666; }
.bup-time-slots-divisor { margin: 15px 0; }
.bup-time-slots-divisor h3 { margin: 10px 0; font: 300 22px/48px var(--font); letter-spacing: 1px; text-align: center; color: #333c4e; }
.bup-time-slots-available-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.bup-btn-book-app-li { display: inline-block; vertical-align: top; width: calc(25% - 4px); min-width: 118px; margin: 5px 2px; padding: 0 0 4px; border: 1px solid #f3f3f3; color: #888; font: 300 14px/1.5 "Open Sans", Roboto, sans-serif; }
.bup-timeslot-time { padding: 2px; text-align: center; font: 600 15px/27px "Open Sans", Roboto, sans-serif; color: #555; }
.bup-timeslot-time svg { width: 14px; height: 14px; vertical-align: -2px; }
.bup-timeslot-count { padding: 4px 0 8px; text-align: center; font-size: 12px; color: #888; }
.bup-timeslot-people { display: block; }
.bup-btn-book-app { display: block; width: 100%; min-height: 68px; padding: 2px 6px; border: 0; background: #e55237; color: #fff; font: 11px/32px Arial, sans-serif; text-transform: uppercase; cursor: pointer; }
.bup-btn-book-app:hover { background: #d4452a; }
.bup-unavailable-slot { text-align: center; color: #555; font-weight: 500; font-size: 16px; }
.bup-wait { color: #777; } .bup-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid #ccc; border-top-color: #e55237; border-radius: 50%; vertical-align: -2px; animation: bup-spin .8s linear infinite; }
@keyframes bup-spin { to { transform: rotate(360deg); } }
.bup-offline { background: #fdf3f1; border-left: 4px solid #e55237; padding: 12px 16px; color: #555; }
.bup-offline a { color: var(--red); text-decoration: underline; }
.bup-field { margin: 4px 0; }
.bup-profile-separator { margin: 15px 0 30px; padding: 0 0 10px; border-bottom: 1px solid #ddd; font: 700 14px/17.5px var(--font); text-transform: uppercase; color: #333; }
.bup-profile-field { display: flex; align-items: flex-start; gap: 0; margin-top: 10px; min-height: 50px; }
.bup-field-type { flex: 0 0 185px; display: flex; align-items: center; gap: 14px; padding-top: 12px; color: #666; font-size: 14px; }
.bup-field-type i { display: inline-block; width: 26px; height: 26px; line-height: 26px; color: #666; text-align: center; } .bup-field-type i svg { width: 16px; height: 16px; vertical-align: -3px; }
.bup-field-type span { font: 300 14px/1.25 var(--font); color: #777; }
.bup-field-value { flex: 1 1 auto; min-width: 0; max-width: 407px; }
.bup-field-value .bup-input { height: 50px; }
.bup-input-text-area { height: 100px !important; resize: vertical; }
.xoouserultra-help { font: 300 14px/1.5 var(--font); color: #777; margin-top: 2px; }
.bup-err { display: inline-block; margin: 6px 0 2px; padding: 2px 8px; background: #ee0101; color: #fff; font: 700 10px/1.7 Arial, sans-serif; border-radius: 3px; box-shadow: 0 0 4px rgba(0, 0, 0, .25); }
.bup-profile-field-ppd { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: flex-start; }
.bup-total-qty, .bup-total-detail { padding: 0 5px; margin-right: 10px; }
.bup-total-qty h4, .bup-total-detail h4 { margin: 0 0 8px; font: 300 16px/32px var(--font); letter-spacing: 1px; color: #333c4e; } .bup-total-detail h4 { font-size: 18px; }
.bup-total-qty p, .bup-total-detail p { margin: 0 0 20px; }
.bup-pay { display: block; min-height: 0; margin-top: 8px; }
.bup-pay-opt { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #777; cursor: pointer; }
.bup-pay-opt input { margin-top: 3px; accent-color: #e55237; }
.paypal-logo { display: block; margin-top: 8px; height: auto; }
.bup-button-submit-changes { height: 34px; padding: 0 12px; border: 1px solid #8a8a8a; background: #ddd; color: #000; font: 12px/32px Arial, sans-serif; text-transform: uppercase; cursor: pointer; }
.bup-button-submit-changes:hover { background: #cfcfcf; } .bup-button-submit-changes:disabled { opacity: .6; cursor: wait; }
#bup-message-submit-booking-conf { margin-left: 10px; font-size: 14px; color: #777; }
.bup .iti, .bup .intl-tel-input { width: 227px; max-width: 100%; display: block; } .bup .intl-tel-input input { padding-left: 52px !important; }
.hp { position: absolute; left: -5000px; }
@media (max-width: 560px) {
  .bup-book-info-cont { flex-direction: column; gap: 10px; }
  .bup-book-steps-cont { margin-left: 0; } .bup-cart-step-text-active, .bup-cart-step-text-inactive { font-size: 12px; margin-left: -4px; white-space: normal; max-width: 70px; }
  .bup-profile-field { flex-direction: column; } .bup-field-type { flex: none; padding-top: 6px; margin-bottom: 4px; }
  .bup-field-value { width: 100%; max-width: none; }
  .bup-btn-book-app-li { width: calc(50% - 4px); }
}
/* thank-you page */
.thanks-banner { min-height: 600px; display: grid; align-items: center; }
.thanks-box { max-width: 702px; margin: 0 auto; padding: 24px 30px 34px; background: rgba(60, 60, 60, .72); color: #fff; text-align: center; }
.thanks-box h1 { margin: 0; color: #fff; font-weight: 300; font-size: clamp(3rem, 8vw, 6.5rem); line-height: 1.1; }
.thanks-box p { margin: 8px 0 0; font-size: clamp(1.2rem, 2.4vw, 1.75rem); color: #fff; }
/* sidebar: "Our values" toggles */
.val-acc details { border-bottom: 1px solid #e6e6e6; padding: 12px 0; }
.val-acc summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px; font: 400 15px/1.4 var(--font); letter-spacing: .08em; color: #333c4e; }
.val-acc summary::-webkit-details-marker { display: none; }
.val-acc summary::before { content: "+"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; background: #333; color: #fff; font: 500 16px/1 Arial, sans-serif; }
.val-acc details[open] summary::before { content: "\2212"; background: var(--cyan); }
.val-acc p { margin: 10px 0 0; color: #7e8890; font-size: 16px; line-height: 1.5; }
.apt-side h4 { font: 300 17px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #333c4e; margin: 0 0 22px; padding-bottom: 12px; position: relative; }
.apt-side h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--cyan); }
.contact-list { list-style: none; padding: 0; margin: 0 0 44px; display: grid; gap: 16px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; color: #6f7a83; line-height: 1.6; }
.contact-list .ic { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #333; color: #fff; display: grid; place-items: center; }
.contact-list .ic svg { width: 14px; height: 14px; }
.contact-list a { color: #6f7a83; }
.contact-list a:hover { color: var(--red); }

/* 10. Contact footer -------------------------------------------------------- */
.map-full iframe { width: 100%; height: 360px; border: 0; display: block; filter: grayscale(.15); }
.info-boxes { padding: 24px 0 0; }
.info-boxes .grid { gap: 24px; }
.info-box { background: #d9d9d9; text-align: center; padding: 34px 20px 34px; min-height: 270px; }
.info-box .ic { width: 38px; height: 38px; margin: 0 auto 16px; border-radius: 50%; background: #222; color: #fff; display: grid; place-items: center; }
.info-box .ic svg { width: 18px; height: 18px; }
.info-box h3 { font: 300 20px/1.2 var(--font); letter-spacing: .02em; text-transform: uppercase; color: #333c4e; margin-bottom: 16px; }
.info-box p { font-size: 16px; line-height: 1.5; color: #6f7a83; margin-bottom: 10px; }
.info-box a { color: #222; }
.info-box a:hover { color: var(--red); }
.blue-band { background: var(--blue); color: #fff; text-align: center; padding: 38px 0; }
.blue-band p { margin: 0 0 14px; font-size: clamp(1.2rem, 2.4vw, 1.8rem); font-weight: 300; }
.copy { background: var(--gray); font-size: 14px; color: #6f7a83; padding: 22px 0; }
.copy .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
.copy a { color: #333; }
.copy .social { gap: 14px; }
.copy .social a { width: auto; height: auto; background: none; }
.copy .social a.fb { color: #3b5998; } .copy .social a.tw { color: #000; } .copy .social a.li { color: #0077b5; } .copy .social a.ig { color: #c13584; } .copy .social a.pi { color: #bd081c; } .copy .social a.pp { color: #003087; }
.copy .social a:hover { opacity: .7; }
.copy .social svg { width: 16px; height: 16px; }

/* floating actions + lightbox */
.fab { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: grid; gap: 10px; }
.fab a, .to-top { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); border: 0; cursor: pointer; }
.fab .call { background: var(--red); } .fab .wa { background: #25d366; }
.fab svg, .to-top svg { width: 23px; height: 23px; }
.fab a:hover, .to-top:hover { color: #fff; filter: brightness(1.1); }
.to-top { position: fixed; left: 16px; bottom: 16px; z-index: 90; background: var(--navy); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.to-top.is-visible { opacity: 1; visibility: visible; }
@media (min-width: 1100px) { .fab .call { display: none; } }
.lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(8, 12, 36, .93); display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.is-open { display: flex; }
.lightbox figure { margin: 0; max-width: min(1100px, 100%); }
.lightbox img { max-height: 80vh; width: auto; margin: 0 auto; }
.lightbox figcaption { color: #fff; text-align: center; margin-top: 12px; }
.lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lb-btn:hover { background: rgba(255, 255, 255, .3); }
.lb-close { top: 18px; right: 18px; } .lb-prev { left: 14px; top: 50%; } .lb-next { right: 14px; top: 50%; }

/* 11. Utilities & motion --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }
@media print { .site-header, .fab, .to-top, .cta-bar, .blue-band, .copy { display: none !important; } .accordion details > * { display: block !important; } }