/* ============================================================
   topsurgerydoctor.com — site.css
   01 Design reset
   02 Design tokens
   03 Base typography
   04 Bootstrap overrides
   05 Header / navigation / language switcher
   06 Buttons & badges
   07 Sections & layout blocks
   08 Cards, tables, lists
   09 Forms
   10 Footer
   11 Animation & motion utilities
   12 Responsive
   ============================================================ */

/* ===== 01. DESIGN RESET ==================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, picture, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { text-decoration: none; }
p, li { overflow-wrap: break-word; }
a, button, [role="button"], label, summary, input, select, textarea { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Skip link — first focusable element on the page, slides in on focus only. */
.skip-link { position: fixed; left: 12px; top: 12px; z-index: 1100; padding: 10px 18px; border-radius: 8px; background: var(--tsd-teal); color: var(--tsd-white); font-size: 0.9rem; transform: translateY(calc(-100% - 16px)); transition: transform 0.18s ease; }
.skip-link:focus-visible { transform: translateY(0); color: var(--tsd-white); }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }
:focus-visible { outline: 2px solid var(--tsd-teal); outline-offset: 3px; }
.visually-hidden-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1 !important; }
}
/* Scroll-reveal blocks start hidden and are un-hidden by site.js. If JS never
   runs, a <noscript> block in includes/header.php overrides .reveal back to
   opacity:1 so the content is never left blank. */

/* Guard against a Bootstrap-CSS flash. bootstrap.min.css loads asynchronously
   (preload+swap, see includes/header.php) for performance, so there's a window
   on every fresh load where the browser has no rule yet to keep .dropdown-menu
   / .offcanvas closed — they'd render as plain, fully-expanded lists stacked
   inside the header (the ul[class] reset above strips bullets/margin but not
   display). That's very visible on a slow connection, and it's what breaks
   anchor-link navigation specifically: the browser computes the scroll-to-
   fragment position against that inflated pre-Bootstrap layout and lands in
   the wrong place, so the header appears to "not show, then load in" once
   Bootstrap finally arrives and the page snaps back to its real height.
   These mirror Bootstrap's own defaults, so nothing changes once
   bootstrap.min.css finishes loading and takes over. */
.dropdown-menu:not(.show) { display: none; }
.offcanvas:not(.show) { visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; transform: translateX(100%); }

/* ===== 02. DESIGN TOKENS =================================== */
:root {
  --tsd-sand: #FAF8F4;
  --tsd-sand-2: #F5F2EC;
  --tsd-white: #FFFFFF;
  --tsd-line: #E7E2D8;
  --tsd-line-2: #DDD7CB;
  --tsd-ink: #1F3033;
  --tsd-ink-2: #45585B;
  --tsd-ink-3: #55676A;
  --tsd-muted: #7A8A8C;
  --tsd-muted-2: #8A9799;
  --tsd-teal: #2F5F63;
  --tsd-teal-dark: #24484C;
  --tsd-teal-darker: #1B2C2E;
  --tsd-teal-soft: #E8EFEC;
  --tsd-teal-soft-line: #DCE6E2;
  --tsd-teal-tint: #C3D5D1;
  --tsd-clay: #B9714A;
  --tsd-clay-soft: #D8A184;
  --tsd-radius-sm: 10px;
  --tsd-radius: 16px;
  --tsd-radius-lg: 20px;
  --tsd-radius-pill: 999px;
  --tsd-serif: Newsreader, Georgia, "Times New Roman", serif;
  --tsd-sans: Karla, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tsd-mono: "IBM Plex Mono", ui-monospace, monospace;
  --tsd-shadow: 0 18px 40px -18px rgba(31, 48, 51, 0.28);
  --tsd-shadow-sm: 0 10px 24px -14px rgba(31, 48, 51, 0.22);
  --tsd-header-h: 132px;
}

/* ===== 03. BASE TYPOGRAPHY ================================= */
body {
  background: var(--tsd-sand);
  color: var(--tsd-ink);
  font-family: var(--tsd-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1, h2, h3, h4, .font-serif {
  font-family: var(--tsd-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: balance;
  line-height: 1.15;
}
.display-hero { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; }
.display-section { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.display-sub { font-size: clamp(1.4rem, 2vw, 1.85rem); }
.lead-text { font-size: 1.12rem; color: var(--tsd-ink-2); max-width: 34em; }
.body-text { color: var(--tsd-ink-2); }
.body-muted { color: var(--tsd-ink-3); font-size: 0.96rem; }
.fine-print { font-size: 0.82rem; color: var(--tsd-muted); }
.kicker {
  font-family: var(--tsd-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tsd-clay);
  display: inline-block;
}
.kicker-quiet { color: var(--tsd-muted-2); }
.kicker-light { color: var(--tsd-clay-soft); }
.mono { font-family: var(--tsd-mono); }
.mono-label { font-family: var(--tsd-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tsd-muted-2); }
a { color: var(--tsd-teal); transition: color 0.18s ease; }
a:hover, a:focus { color: var(--tsd-clay); }
.link-quiet { color: var(--tsd-ink-2); }
.link-light { color: var(--tsd-teal-tint); }
.link-light:hover { color: var(--tsd-white); }

/* ===== 04. BOOTSTRAP OVERRIDES ============================= */
:root {
  --bs-body-font-family: var(--tsd-sans);
  --bs-body-color: var(--tsd-ink);
  --bs-body-bg: var(--tsd-sand);
  --bs-primary: #2F5F63;
  --bs-primary-rgb: 47, 95, 99;
  --bs-link-color: #2F5F63;
  --bs-link-hover-color: #B9714A;
  --bs-border-color: #E7E2D8;
  --bs-border-radius: 16px;
  --bs-font-sans-serif: var(--tsd-sans);
}
.container, .container-xl { max-width: 1240px; }
.dropdown-menu {
  --bs-dropdown-bg: var(--tsd-white);
  --bs-dropdown-border-color: var(--tsd-line);
  --bs-dropdown-border-radius: 14px;
  --bs-dropdown-link-color: var(--tsd-ink);
  --bs-dropdown-link-hover-bg: #F2F5F3;
  --bs-dropdown-link-hover-color: var(--tsd-teal);
  --bs-dropdown-link-active-bg: #F2F5F3;
  --bs-dropdown-link-active-color: var(--tsd-teal);
  --bs-dropdown-padding-y: 0.4rem;
  --bs-dropdown-item-padding-y: 0.55rem;
  --bs-dropdown-item-padding-x: 0.85rem;
  --bs-dropdown-font-size: 0.93rem;
  box-shadow: var(--tsd-shadow);
  min-width: 15rem;
}
.accordion {
  --bs-accordion-bg: var(--tsd-white);
  --bs-accordion-border-color: var(--tsd-line);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(47, 95, 99, 0.16);
  --bs-accordion-active-bg: #F3F6F5;
  --bs-accordion-active-color: var(--tsd-teal);
  --bs-accordion-btn-color: var(--tsd-ink);
  --bs-accordion-border-radius: 16px;
}
.accordion-button { font-family: var(--tsd-sans); font-weight: 600; font-size: 1.03rem; }
.accordion-body { color: var(--tsd-ink-2); }
.offcanvas { --bs-offcanvas-bg: var(--tsd-sand); --bs-offcanvas-width: 330px; }
.form-control, .form-select {
  border-color: var(--tsd-line-2);
  border-radius: var(--tsd-radius-sm);
  padding: 0.7rem 0.85rem;
  background-color: var(--tsd-white);
}
.form-control:focus, .form-select:focus {
  border-color: var(--tsd-teal);
  box-shadow: 0 0 0 0.2rem rgba(47, 95, 99, 0.16);
}
.form-check-input:checked { background-color: var(--tsd-teal); border-color: var(--tsd-teal); }

/* ===== 05. HEADER / NAV =================================== */
.site-header { position: sticky; top: 0; z-index: 1040; background: rgba(250, 248, 244, 0.93); backdrop-filter: blur(10px); border-bottom: 1px solid var(--tsd-line); }
/* Keeps #anchor targets (pricing#packages, procedures#keyhole, ...) from
   landing underneath the sticky header — without this, the browser scrolls
   the target's top edge to y=0, which puts it right behind --tsd-header-h
   worth of header. Applies to any element an anchor link could point at. */
[id] { scroll-margin-top: calc(var(--tsd-header-h) + 16px); }
.top-bar { background: var(--tsd-teal-dark); color: #DCE7E4; font-size: 0.8rem; letter-spacing: 0.02em; }
.top-bar__inner { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; align-items: center; padding: 8px 0; }
.top-bar__meta { font-family: var(--tsd-mono); font-size: 0.72rem; }
.header-bar { display: flex; align-items: center; gap: 1.5rem; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand__mark { width: 36px; height: 36px; border-radius: 50%; background: var(--tsd-teal); color: var(--tsd-sand); display: grid; place-items: center; font-family: var(--tsd-serif); font-size: 1.02rem; }
.brand__name { font-family: var(--tsd-serif); font-size: 1.18rem; color: var(--tsd-ink); line-height: 1.1; }
.brand__tagline { font-family: var(--tsd-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tsd-muted); }
.main-nav { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.main-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 0.94rem; color: var(--tsd-ink-2); white-space: nowrap;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.main-nav__link:hover, .main-nav__link:focus { color: var(--tsd-teal); background: #F1F3F0; }
.main-nav__link.is-active { color: var(--tsd-ink); box-shadow: inset 0 -2px 0 var(--tsd-clay); border-radius: 8px 8px 0 0; }
.main-nav__link::after { display: none !important; }
.main-nav__caret { font-size: 0.6rem; color: var(--tsd-muted-2); transition: transform 0.2s ease; }
.dropdown.show .main-nav__caret { transform: rotate(180deg); }
.dropdown-menu .dropdown-item { border-radius: 8px; }
.dropdown-item__title { display: block; font-weight: 600; font-size: 0.94rem; }
.dropdown-item__desc { display: block; font-size: 0.8rem; color: var(--tsd-muted); white-space: normal; }
.dropdown-item:hover .dropdown-item__desc { color: var(--tsd-ink-3); }
.header-actions { display: flex; align-items: center; gap: 0.7rem; }
.lang-switch__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--tsd-line-2); border-radius: var(--tsd-radius-pill);
  padding: 7px 13px; font-size: 0.88rem; color: var(--tsd-ink-2);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.lang-switch__toggle:hover { border-color: var(--tsd-teal); color: var(--tsd-teal); }
.lang-switch__flag { font-size: 0.95rem; }
.lang-switch__code { font-family: var(--tsd-mono); font-size: 0.72rem; letter-spacing: 0.08em; }
.lang-switch .dropdown-menu { min-width: 12rem; }
.lang-switch__item { display: flex; align-items: center; gap: 10px; }
.lang-switch__item .lang-switch__code { margin-left: auto; color: var(--tsd-muted-2); }
.nav-toggle { width: 46px; height: 46px; border: 1px solid var(--tsd-line-2); border-radius: 12px; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; margin-left: auto; }
.nav-toggle__bar { display: block; width: 18px; height: 1.5px; background: var(--tsd-ink); }
.offcanvas-nav .offcanvas-header { border-bottom: 1px solid var(--tsd-line); }
.offcanvas-nav .offcanvas-body { display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; }
.offcanvas-nav__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 4px; color: var(--tsd-ink); border-bottom: 1px solid #EFEBE3; font-size: 1rem; }
.offcanvas-nav__link.is-active { color: var(--tsd-teal); font-weight: 600; }
.offcanvas-nav__sub { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 10px 14px; border-left: 1px solid var(--tsd-line); margin: 4px 0 8px 4px; }
.offcanvas-nav__sub a { font-size: 0.92rem; color: var(--tsd-ink-3); padding: 7px 0; }
.offcanvas-nav__sub a:hover { color: var(--tsd-teal); }
.offcanvas-nav__footer { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 22px; }

/* ===== 06. BUTTONS & BADGES =============================== */
.btn-brand, .btn-brand-outline, .btn-brand-light, .btn-brand-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--tsd-radius-pill); padding: 13px 26px;
  font-size: 0.97rem; font-weight: 500; white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn-brand { background: var(--tsd-teal); color: var(--tsd-sand); }
.btn-brand:hover, .btn-brand:focus { background: #234A4E; color: var(--tsd-white); transform: translateY(-1px); }
.btn-brand-outline { border: 1px solid var(--tsd-line-2); color: var(--tsd-teal); }
.btn-brand-outline:hover, .btn-brand-outline:focus { border-color: var(--tsd-teal); color: var(--tsd-teal); background: #F2F5F3; }
.btn-brand-light { background: var(--tsd-sand); color: var(--tsd-teal-dark); }
.btn-brand-light:hover, .btn-brand-light:focus { background: var(--tsd-white); color: var(--tsd-teal-dark); transform: translateY(-1px); }
.btn-brand-ghost { border: 1px solid rgba(255, 255, 255, 0.45); color: var(--tsd-white); }
.btn-brand-ghost:hover, .btn-brand-ghost:focus { border-color: var(--tsd-white); color: var(--tsd-white); background: rgba(255, 255, 255, 0.08); }
.btn-sm-pill { padding: 10px 18px; font-size: 0.88rem; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--tsd-line-2); border-radius: var(--tsd-radius-pill); padding: 6px 13px; font-family: var(--tsd-mono); font-size: 0.72rem; color: var(--tsd-ink-2); }
.chip-teal { border-color: var(--tsd-teal-soft-line); color: var(--tsd-teal); }
.chip-light { border-color: rgba(255, 255, 255, 0.28); color: #D3E1DE; }
.badge-flag { font-family: var(--tsd-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; background: var(--tsd-clay); color: #FFF6F0; border-radius: var(--tsd-radius-pill); padding: 5px 10px; }

/* ===== 07. SECTIONS & LAYOUT ============================== */
.section { padding: 72px 0; }
.section-sm { padding: 48px 0; }
.section-tight { padding: 40px 0 0; }
.section-sand { background: var(--tsd-sand-2); border-top: 1px solid var(--tsd-line); border-bottom: 1px solid var(--tsd-line); }
.section-teal { background: var(--tsd-teal); color: #EAF1EF; }
.section-teal h1, .section-teal h2, .section-teal h3 { color: var(--tsd-white); }
.section-teal p { color: var(--tsd-teal-tint); }
.section-head { max-width: 46em; }
.breadcrumb-mono { font-family: var(--tsd-mono); font-size: 0.72rem; color: var(--tsd-muted-2); display: flex; gap: 9px; padding: 0; margin: 0; }
.breadcrumb-mono a { color: var(--tsd-muted-2); }
.breadcrumb-mono a:hover { color: var(--tsd-teal); }
.hero { padding: 52px 0 24px; }
.panel-soft { background: var(--tsd-teal-soft); border-radius: var(--tsd-radius-lg); padding: 36px 38px; }
.panel-dark { background: var(--tsd-teal-dark); color: #EAF1EF; border-radius: 22px; padding: 42px 44px; }
.panel-dark h2, .panel-dark h3 { color: var(--tsd-white); }
.panel-dark p { color: var(--tsd-teal-tint); }
.cta-band { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--tsd-line); border: 1px solid var(--tsd-line); border-radius: 18px; overflow: hidden; }
.stat-strip__item { background: var(--tsd-sand); padding: 24px; }
.stat-strip__value { font-family: var(--tsd-serif); font-size: 1.9rem; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat-strip__note { font-size: 0.88rem; color: var(--tsd-ink-3); }
.divider-list { display: flex; flex-direction: column; gap: 1px; background: var(--tsd-line); border: 1px solid var(--tsd-line); border-radius: var(--tsd-radius); overflow: hidden; }
.divider-list__item { background: var(--tsd-white); padding: 18px 24px; font-size: 0.96rem; color: var(--tsd-ink-2); }
.divider-list__item strong { color: var(--tsd-ink); }

/* --- image placeholders --- */
.ph { background-image: repeating-linear-gradient(135deg, #EFEBE3 0 6px, #F7F4EE 6px 12px); border: 1px solid var(--tsd-line); border-radius: var(--tsd-radius); display: grid; place-items: center; text-align: center; padding: 18px; }
.ph__label { font-family: var(--tsd-mono); font-size: 0.72rem; color: var(--tsd-muted); line-height: 1.7; }
.ph-4x3 { aspect-ratio: 4 / 3; }
.ph-4x5 { aspect-ratio: 4 / 5; }
.ph-16x10 { aspect-ratio: 16 / 10; }
.ph-1x1 { aspect-ratio: 1; }
.ph-avatar { width: 44px; height: 44px; border-radius: 50%; padding: 0; }
.ph-map { min-height: 380px; }
.ph-on-dark { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 6px, rgba(255,255,255,0.02) 6px 12px); border-color: rgba(255, 255, 255, 0.16); }
.ph-on-dark .ph__label { color: #9DBDB8; }

/* ===== 08. CARDS, TABLES, LISTS =========================== */
.card-soft { background: var(--tsd-white); border: 1px solid var(--tsd-line); border-radius: var(--tsd-radius); padding: 24px 26px; height: 100%; }
.card-soft--pad-lg { padding: 30px 32px; }
.card-teal { background: var(--tsd-teal-soft); border: 1px solid var(--tsd-teal-soft-line); border-radius: var(--tsd-radius); padding: 24px 26px; height: 100%; color: #3C5457; }
.card-teal h3 { color: var(--tsd-ink); }
.card-title-sm { font-size: 1.18rem; }
.card-title-xs { font-family: var(--tsd-sans); font-weight: 600; font-size: 1.03rem; }
.hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--tsd-shadow-sm); border-color: var(--tsd-line-2); }
.check-list { display: flex; flex-direction: column; gap: 10px; font-size: 0.96rem; color: var(--tsd-ink-2); }
.check-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.check-list__mark { color: var(--tsd-teal); }
.check-list__mark--clay { color: var(--tsd-clay); }
.check-list--light { color: #D3E1DE; }
.check-list--light .check-list__mark { color: #9DBDB8; }
.plain-list { display: flex; flex-direction: column; gap: 8px; font-size: 0.94rem; color: var(--tsd-ink-3); }
.table-wrap { overflow-x: auto; border: 1px solid var(--tsd-line); border-radius: var(--tsd-radius); background: var(--tsd-white); }
.table-brand { min-width: 680px; }
.table-brand caption { text-align: left; padding: 18px 24px 0; font-size: 0.8rem; color: var(--tsd-muted); caption-side: top; }
.table-brand th, .table-brand td { padding: 15px 24px; border-bottom: 1px solid #EFEBE3; vertical-align: top; text-align: left; }
.table-brand thead th { font-family: var(--tsd-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tsd-muted-2); font-weight: 400; border-bottom: 1px solid var(--tsd-line); }
.table-brand tbody th { font-weight: 600; font-size: 0.94rem; color: var(--tsd-ink); }
.table-brand tbody td { font-size: 0.94rem; color: var(--tsd-ink-2); font-variant-numeric: tabular-nums; }
.table-brand tbody tr:nth-child(even) { background: #FCFBF8; }
.table-brand tbody tr:last-child th, .table-brand tbody tr:last-child td { border-bottom: 0; }
.price-card { background: var(--tsd-white); border: 1px solid var(--tsd-line); border-radius: var(--tsd-radius-lg); padding: 28px 30px 32px; height: 100%; display: flex; flex-direction: column; }
.price-card--featured { background: var(--tsd-teal-dark); border-color: var(--tsd-teal-dark); color: #EAF1EF; }
.price-card--featured h3 { color: var(--tsd-white); }
.price-card__amount { font-family: var(--tsd-serif); font-size: 2.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.price-card__list { border-top: 1px solid #EFEBE3; padding-top: 20px; margin-top: 22px; }
.price-card--featured .price-card__list { border-top-color: rgba(255, 255, 255, 0.14); }
.review-card { background: var(--tsd-white); border: 1px solid var(--tsd-line); border-radius: var(--tsd-radius); padding: 26px 28px; height: 100%; display: flex; flex-direction: column; }
.review-card__stars { color: var(--tsd-clay); letter-spacing: 2px; font-size: 0.88rem; }
.review-card__quote { font-size: 1.02rem; color: #35494C; line-height: 1.62; margin-top: 14px; }
.review-card__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid #EFEBE3; display: flex; align-items: center; gap: 13px; }
.timeline { display: flex; flex-direction: column; }
.timeline__row { display: grid; grid-template-columns: 92px 1fr; }
.timeline__rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.timeline__num { width: 46px; height: 46px; border-radius: 50%; background: var(--tsd-teal); color: var(--tsd-sand); display: grid; place-items: center; font-family: var(--tsd-mono); font-size: 0.82rem; flex-shrink: 0; }
.timeline__line { flex: 1; width: 1px; background: var(--tsd-line-2); margin: 8px 0; }
.timeline__body { padding-bottom: 48px; }
.timeline__row:last-child .timeline__body { padding-bottom: 0; }
.article-card { background: var(--tsd-white); border: 1px solid var(--tsd-line); border-radius: var(--tsd-radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.article-card__media { border: 0; border-radius: 0; }
.article-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.article-card__title { font-size: 1.3rem; margin-top: 10px; }
.article-card__meta { font-family: var(--tsd-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tsd-muted-2); display: flex; flex-wrap: wrap; gap: 6px 12px; }
.article-card__foot { margin-top: auto; padding-top: 18px; font-size: 0.88rem; }

/* ── Gallery card ──────────────────────────────────────── */
.gallery-card { background: var(--tsd-white); border: 1px solid var(--tsd-line); border-radius: var(--tsd-radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.gallery-card__img-wrap { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tsd-sand-2); }
.gallery-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-card__body { padding: 18px 20px 20px; }
.gallery-card__caption { font-size: 0.9rem; color: var(--tsd-ink-2); margin-top: 6px; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery-filters a { font-family: var(--tsd-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 14px; border: 1px solid var(--tsd-line-2); border-radius: var(--tsd-radius-pill); color: var(--tsd-ink-2); text-decoration: none; }
.gallery-filters a:hover { border-color: var(--tsd-teal); color: var(--tsd-teal); }
.gallery-filters a.is-active { background: var(--tsd-teal); border-color: var(--tsd-teal); color: #fff; }

.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: 1.7rem; margin-top: 2.2rem; }
.prose h3 { font-size: 1.28rem; margin-top: 1.8rem; }
.prose p, .prose li { color: var(--tsd-ink-2); font-size: 1.04rem; }
.prose ul { display: flex; flex-direction: column; gap: 8px; padding-left: 1.1rem; list-style: disc; }
.prose blockquote { border-left: 2px solid var(--tsd-clay); padding-left: 20px; font-family: var(--tsd-serif); font-size: 1.25rem; color: var(--tsd-ink); }
.toc { position: sticky; top: calc(var(--tsd-header-h) + 12px); }
.toc__list { display: flex; flex-direction: column; gap: 4px; }
.toc__link { font-size: 0.88rem; color: var(--tsd-ink-3); padding: 4px 0 4px 12px; border-left: 2px solid transparent; transition: color 0.18s ease, border-color 0.18s ease; }
.toc__link:hover { color: var(--tsd-teal); border-left-color: var(--tsd-teal); }

/* ===== 09. FORMS ========================================== */
.form-panel { background: var(--tsd-white); border: 1px solid var(--tsd-line); border-radius: var(--tsd-radius-lg); padding: 34px 36px; }
.form-label-brand { font-size: 0.88rem; font-weight: 600; color: #35494C; margin-bottom: 6px; display: block; }
.form-hint { font-size: 0.8rem; color: var(--tsd-muted); font-weight: 400; }
.upload-box { background: var(--tsd-sand-2); border: 1px dashed #D9D2C5; border-radius: 14px; padding: 20px 22px; }
.upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; }
.contact-tile { display: block; background: var(--tsd-teal-dark); border-radius: 18px; padding: 26px 28px; color: #EAF1EF; transition: background-color 0.2s ease, transform 0.2s ease; }
.contact-tile:hover { background: #1F3E42; color: #EAF1EF; transform: translateY(-2px); }
.contact-tile__title { font-family: var(--tsd-serif); font-size: 1.5rem; color: var(--tsd-white); margin-top: 8px; }
.form-success { background: var(--tsd-teal-soft); border: 1px solid var(--tsd-teal-soft-line); border-radius: var(--tsd-radius); padding: 22px 24px; color: var(--tsd-teal-dark); }
.form-error { background: #FDF0EC; border: 1px solid #E8C4B4; border-radius: var(--tsd-radius); padding: 22px 24px; color: #8A3A1E; }

/* ===== 10. FOOTER ========================================= */
.site-footer { background: var(--tsd-teal-darker); color: #B9CAC7; }
.site-footer a { color: #B9CAC7; }
.site-footer a:hover { color: var(--tsd-white); }
.site-footer__top { padding: 64px 0 36px; }
.site-footer__title { font-family: var(--tsd-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #7E9491; }
.site-footer__list { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; font-size: 0.94rem; }
.site-footer__brandname { font-family: var(--tsd-serif); font-size: 1.1rem; color: var(--tsd-white); }
.social-row { display: flex; gap: 10px; margin-top: 20px; }
.social-row a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); display: grid; place-items: center; font-size: 0.8rem; transition: border-color 0.2s ease, transform 0.2s ease; }
.social-row a:hover { border-color: var(--tsd-white); transform: translateY(-2px); }
.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 0 40px; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; font-size: 0.8rem; color: #7E9491; }

/* ===== 10b. COOKIE BANNER ================================= */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; background: var(--tsd-teal-darker); border-top: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 -14px 30px -18px rgba(0, 0, 0, 0.4); }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { max-width: 1180px; margin: 0 auto; padding: 18px 24px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.cookie-banner__text { margin: 0; font-size: 0.88rem; color: #C9D8D5; max-width: 62em; }
.cookie-banner__text a { color: var(--tsd-clay-soft); }
.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 575.98px) {
  .cookie-banner__inner { padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn-brand, .cookie-banner__actions .btn-brand-outline { flex: 1; justify-content: center; }
}

/* ===== 10c. WHATSAPP FLOAT ================================= */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 1040;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5); color: #fff; }
.wa-float svg { width: 28px; height: 28px; display: block; }
/* Nudge above the cookie banner while it's showing, so the two never overlap. */
body:has(#cookieBanner:not([hidden])) .wa-float { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 575.98px) {
  .wa-float { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 50px; height: 50px; }
  .wa-float svg { width: 25px; height: 25px; }
  body:has(#cookieBanner:not([hidden])) .wa-float { bottom: calc(128px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== 11. ANIMATION & MOTION ============================= */
@keyframes tsd-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes tsd-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tsd-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; }
.reveal.is-visible { animation: tsd-fade-up 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
.reveal-fade.is-visible { animation-name: tsd-fade-in; }
.reveal-scale.is-visible { animation-name: tsd-scale-in; }
.reveal-d1.is-visible { animation-delay: 0.08s; }
.reveal-d2.is-visible { animation-delay: 0.16s; }
.reveal-d3.is-visible { animation-delay: 0.24s; }
.reveal-d4.is-visible { animation-delay: 0.32s; }
.hover-underline { position: relative; }
.hover-underline::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1.5px; background: var(--tsd-clay); transition: width 0.25s ease; }
.hover-underline:hover::after { width: 100%; }

/* ===== 12. RESPONSIVE ===================================== */
@media (max-width: 1199.98px) {
  .main-nav, .header-actions { display: none !important; }
  .nav-toggle { display: flex; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .panel-dark { padding: 34px 30px; }
}
@media (max-width: 767.98px) {
  body { font-size: 16px; }
  .section { padding: 56px 0; }
  .stat-strip { grid-template-columns: 1fr; }
  .panel-soft { padding: 28px 24px; }
  .form-panel { padding: 26px 22px; }
  .timeline__row { grid-template-columns: 62px 1fr; }
  .timeline__num { width: 40px; height: 40px; font-size: 0.76rem; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .ph-map { min-height: 260px; }
}