/* ============================================================
   Stakhovsky Tennis — Unified Design System (light editorial)
   Loaded after the main bundle so these tokens win.

   Palette
     Paper  #F7F5EF  hsl(45 33% 95%)   body surface
     Ink    #0E1B2C  hsl(215 52% 11%)  headings / text
     Bronze #A56B2D  hsl(31 57% 41%)   accent / links / CTA
   Rhythm: navy hero band → paper body → navy CTA → navy footer.
   ============================================================ */

:root {
  /* ---- Light body theme ---- */
  --background: 45 33% 95%;          /* paper  */
  --foreground: 215 52% 11%;         /* ink navy */
  --card: 44 40% 97%;                /* lifted paper */
  --card-foreground: 215 52% 11%;
  --popover: 44 40% 97%;
  --popover-foreground: 215 52% 11%;
  --primary: 31 57% 41%;             /* bronze */
  --primary-foreground: 45 40% 96%;
  --secondary: 44 24% 90%;
  --secondary-foreground: 215 52% 11%;
  --muted: 44 24% 91%;
  --muted-foreground: 215 18% 34%;   /* navy-gray, AA on paper */
  --accent: 31 57% 41%;
  --accent-foreground: 45 40% 96%;
  --destructive: 0 66% 44%;
  --destructive-foreground: 45 40% 96%;
  --border: 40 21% 85%;              /* warm hairline */
  --input: 40 21% 85%;
  --ring: 31 57% 41%;

  /* Context accent colors (used to remap Tailwind amber/sky utilities so
     they stay readable on paper and luminous on navy). */
  --gold: 31 57% 41%;                /* bronze on light */
  --gold-soft: 31 42% 42%;
  --info: 205 58% 36%;
}

/* ---- Dark bands ---------------------------------------------------------
   Authored-dark <img> landing heroes, CTA bands (bg-foreground), footer, and
   the dark call-out cards (bg-*-950). Re-declare tokens so each subtree
   renders light-on-navy, brighten the accent variables, and set an explicit
   base colour for un-classed headings.
   The authored-LIGHT heroes (home video + cs/uk assessment, whose H1 carries
   an inline navy colour) are excluded so their navy text stays on paper. */
footer,
section:has(> div > img[class*="object-cover"]):not(:has(h1[style*="color: rgb(14, 27, 44)"])),
[class~="bg-foreground"],
[class*="bg-amber-950/"],
[class*="bg-sky-950/"] {
  --background: 215 52% 10%;
  --foreground: 45 33% 95%;
  --card: 215 38% 15%;
  --card-foreground: 45 33% 95%;
  --popover: 215 38% 15%;
  --popover-foreground: 45 33% 95%;
  --secondary: 215 30% 18%;
  --secondary-foreground: 45 33% 95%;
  --muted: 215 30% 18%;
  --muted-foreground: 44 18% 77%;    /* cream-gray */
  --primary: 36 58% 57%;             /* brighter gold for dark */
  --primary-foreground: 215 52% 10%;
  --accent: 36 58% 57%;
  --border: 215 22% 24%;
  --gold: 38 72% 60%;                /* luminous gold on navy */
  --gold-soft: 40 52% 74%;
  --info: 200 70% 72%;
  color: hsl(var(--foreground));     /* un-classed headings → cream */
}

footer { background-color: hsl(215 52% 10%); }
section:has(> div > img[class*="object-cover"]):not(:has(h1[style*="color: rgb(14, 27, 44)"])) {
  background-color: hsl(215 52% 10%);
}
[class~="bg-foreground"] { background-color: hsl(215 52% 10%) !important; }
/* Solid-navy callout cards (were bg-*-950/20 — invisible tint on paper) */
[class*="bg-amber-950/"],
[class*="bg-sky-950/"] {
  background-color: hsl(215 44% 13%);
  border-color: hsl(38 55% 52% / 0.32);
}

/* ---- Remap Tailwind accent utilities through the context variables ----
   Bronze/deep on paper, luminous on navy — resolves ~220 amber/sky spots. */
.text-amber-400 { color: hsl(var(--gold)); }
.text-amber-300, .text-amber-200, .text-amber-100, .text-yellow-400 { color: hsl(var(--gold-soft)); }
.text-sky-300, .text-sky-100, .text-blue-400 { color: hsl(var(--info)); }
.text-emerald-400, .text-emerald-100, .text-green-400 { color: hsl(150 42% 30%); }

/* Nav: light frosted glass — stays cleanly light over dark image heroes too.
   Tokens forced to light values so a dark ancestor can't drag it dark. */
nav.glass-panel {
  --background: 45 33% 95%;
  --foreground: 215 52% 11%;
  --primary: 31 57% 41%;
  --muted-foreground: 215 18% 34%;
  --border: 40 21% 85%;
  --gold: 31 57% 41%;
  background: hsl(45 33% 96% / 0.9);
  border-bottom: 1px solid hsl(40 21% 85% / 0.9);
  box-shadow: 0 1px 0 hsl(45 33% 100% / 0.5), 0 10px 30px -24px hsl(215 52% 11% / 0.45);
}

/* ---- Header layout ----
   Group the language switcher with the CTA on the right (it was orphaned
   next to the logo). Order: logo | nav links … | EN·CZ·UA | Book Assessment. */
/* Breathing room between the logo and the first nav item (was ~24px), kept
   clear but tightened so the full 6-item row + switcher + CTA fits at 1280. */
nav a.flex.flex-col { margin-right: 1.75rem; }
nav .hidden.md\:flex { gap: 0.72rem; }
nav .hidden.md\:flex > a { white-space: nowrap; }   /* no 2-line labels */
nav .hidden.md\:flex > div { order: 2; }
nav .hidden.md\:flex > a[class*="bg-primary"] { order: 3; white-space: nowrap; }
nav .hidden.md\:flex > div {
  margin-left: 0.1rem;
  padding-left: 0.8rem;
  border-left: 1px solid hsl(var(--border));
}
@media (min-width: 1400px) { nav .hidden.md\:flex { gap: 1.15rem; } }
@media (min-width: 1600px) { nav .hidden.md\:flex { gap: 1.6rem; } }

/* WhatsApp icon in the desktop nav (sits between the switcher and the CTA) */
nav .hidden.md\:flex > a.nav-wa {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: #25D366;                 /* WhatsApp green */
  transition: transform 0.2s ease;
}
nav .hidden.md\:flex > a.nav-wa:hover { transform: scale(1.1); }
/* Logo lockup: tennis-ball icon + wordmark column */
.nav-logo { gap: 0.6rem; }
.nav-ball { flex-shrink: 0; display: block; }
/* The eyebrow (≥1024px) shifts the lockup's centre up, so drop the ball to
   sit level with the STAKHOVSKY wordmark. */
@media (min-width: 1024px) { .nav-ball { transform: translateY(6px); } }
/* Founder credential as a small eyebrow ABOVE the wordmark (desktop ≥1024px).
   Visibility controlled here because the bundle purged `lg:block`. */
.nav-trust {
  display: none;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(31 57% 41%);
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
}
@media (min-width: 1024px) { .nav-trust { display: block; } }

/* ---- Camps ▸ two-level dropdown (zero-JS; the static bundle purged Tailwind
   group/peer variants, so this drives it with plain :hover / :focus-within and
   the checkbox :checked hack) ---- */
nav .hidden.md\:flex > .camps-dd {
  order: 0; position: relative;
  margin-left: 0; padding-left: 0; border-left: 0;   /* reset the switcher-div divider */
}
.camps-trigger { color: hsl(var(--muted-foreground)); gap: 0.28rem; cursor: pointer; }
.camps-dd:hover .camps-trigger, .camps-dd:focus-within .camps-trigger { color: hsl(31 57% 41%); }
.camps-chevron { transition: transform 0.3s ease; }
.camps-dd:hover .camps-chevron, .camps-dd:focus-within .camps-chevron { transform: rotate(180deg); }
.camps-panel {
  position: absolute; left: 0; top: 100%; padding-top: 10px;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 60;
}
.camps-dd:hover .camps-panel, .camps-dd:focus-within .camps-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.camps-panel-inner {
  display: flex; flex-direction: column; min-width: 190px; padding: 0.35rem 0;
  background: hsl(45 33% 97% / 0.98); border: 1px solid hsl(var(--border));
  box-shadow: 0 14px 34px -14px hsl(215 52% 11% / 0.32);
}
.camps-child { color: hsl(var(--muted-foreground)); padding: 0 1.1rem; white-space: nowrap; }
.camps-child:hover { color: hsl(31 57% 41%); background: hsl(31 57% 41% / 0.06); }
/* mobile disclosure (inside the checkbox menu) */
.camps-mob-panel { display: none; }
#camps-sub:checked ~ .camps-mob-panel {
  display: flex; flex-direction: column;
  padding-left: 1rem; border-left: 1px solid hsl(var(--border)); margin-left: 0.25rem;
}
.camps-mob-chevron { transition: transform 0.3s ease; }
#camps-sub:checked ~ .camps-mob-label .camps-mob-chevron { transform: rotate(180deg); }

/* ---- Verified-results strip: centre the delta cards ----
   They were in a left-aligned flex row, leaving dead space on the right. */
.flex.flex-wrap.gap-4:has(> [class*="min-w-[220px]"]) { justify-content: center; }
.flex.flex-wrap.gap-4:has(> [class*="min-w-[220px]"]) > * { flex: 1 1 260px; max-width: 380px; }

/* ---- Normalized primary CTAs ----
   One system everywhere: ink-navy fill + cream label, bronze on hover.
   (Overrides the stray bronze `bg-primary` buttons in the nav + booking pages
   so every primary action reads identically.) */
a[class~="bg-primary"],
button[class~="bg-primary"] {
  background-color: hsl(215 52% 11%) !important;
  color: hsl(45 40% 96%) !important;
}
a[class~="bg-primary"]:hover,
button[class~="bg-primary"]:hover {
  background-color: hsl(31 57% 41%) !important;
  color: hsl(45 40% 96%) !important;
}
/* On dark backgrounds (footer + dark bands + the booking panel) a navy fill is
   navy-on-navy and nearly invisible — invert to a cream fill + navy label so the
   CTA reads clearly, keeping the bronze hover. */
footer a[class~="bg-primary"],
footer button[class~="bg-primary"],
[class~="bg-foreground"] a[class~="bg-primary"],
[data-dark] a[class~="bg-primary"],
[data-dark] button[class~="bg-primary"] {
  background-color: hsl(45 40% 96%) !important;
  color: hsl(215 52% 11%) !important;
}
footer a[class~="bg-primary"]:hover,
footer button[class~="bg-primary"]:hover,
[class~="bg-foreground"] a[class~="bg-primary"]:hover,
[data-dark] a[class~="bg-primary"]:hover,
[data-dark] button[class~="bg-primary"]:hover {
  background-color: hsl(31 57% 41%) !important;
  color: hsl(45 40% 96%) !important;
}
/* Header (nav) CTA in tennis-ball lime — a bold, sporty accent that pops on the
   light glass header and echoes the new ball icon. Only the header CTA; hero /
   footer / in-page CTAs keep the unified navy system. */
nav a[class~="bg-primary"] {
  background-color: #DFF244 !important;
  color: hsl(215 52% 11%) !important;
}
nav a[class~="bg-primary"]:hover {
  background-color: #d2e526 !important;
  color: hsl(215 52% 11%) !important;
}

/* ---- Image-card overlay legibility ----
   Program/feature cards lay text over a photo behind a paper scrim that faded
   too early (via-background/70 → transparent), so the centred heading + body
   landed on raw image. Reshape the scrim to hold a solid backing through the
   lower ~three-quarters (where the text sits) while the photo still reads at
   the top. Uses --background, so it stays paper on light cards and navy on
   dark-scoped ones. A soft same-colour text glow lifts type off busy photos. */
.group.relative.overflow-hidden [class*="from-background"][class*="bg-gradient-to-t"] {
  background-image: linear-gradient(
    to top,
    hsl(var(--background)) 0%,
    hsl(var(--background)) 46%,
    hsl(var(--background) / 0.90) 72%,
    hsl(var(--background) / 0.58) 90%,
    hsl(var(--background) / 0.26) 100%
  ) !important;
}
.group.relative.overflow-hidden .relative.z-10 :is(h2, h3, h4) {
  text-shadow: 0 1px 8px hsl(var(--background) / 0.7);
}
.group.relative.overflow-hidden .relative.z-10 :is(p, li) {
  text-shadow: 0 1px 5px hsl(var(--background) / 0.6);
}

/* Nav content links default to ink-gray. Some CS/UK pages were assembled with
   `text-primary` (→ bronze) on the nav links; force the correct default so every
   page's menu matches (hover → bronze is handled below). */
nav a[class*="tracking-widest"]:not([class*="bg-primary"]) {
  color: hsl(var(--muted-foreground));
}

/* ---- Nav + footer link hover — clear, consistent accent ----
   Nav links used a too-subtle gray→navy shift; footer links were inconsistent.
   Unify on an accent colour + a refined underline that resolves on hover:
   bronze on the light glass header, warm gold on the dark navy footer. */
nav a[class*="tracking-widest"]:not([class*="bg-primary"]),
footer a[class*="text-foreground/70"] {
  transition: color 0.25s ease;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}
nav a[class*="tracking-widest"]:not([class*="bg-primary"]):hover {
  color: hsl(31 57% 41%) !important;                          /* bronze on light header */
  text-decoration: underline hsl(31 57% 41%);
}
footer a[class*="text-foreground/70"]:hover {
  color: hsl(36 58% 57%) !important;                          /* warm gold on dark footer */
  text-decoration: underline hsl(36 58% 57%);
}

/* ---- Booking form (zero-JS; posts to /api/assessment-booking — backend later) ----
   Styled here because the source app (with its Tailwind form classes) is gone. */
.booking-form .field-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-family: inherit;
  color: hsl(var(--foreground) / 0.65);
}
.booking-form input,
.booking-form select {
  width: 100%;
  min-height: 48px;
  padding: 0 0.9rem;
  background: hsl(45 33% 100% / 0.55);
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-family: inherit;
  font-size: 0.9rem;
  border-radius: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.booking-form input::placeholder { color: hsl(var(--foreground) / 0.4); }
.booking-form input:focus,
.booking-form select:focus {
  outline: none;
  border-color: hsl(var(--primary));
  background: hsl(45 33% 100% / 0.9);
}
.booking-form select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23A56B2D' stroke-width='1.5'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
.booking-form input[type="date"] { color: hsl(var(--foreground) / 0.85); }
/* Direct-contact row: keep the SHORT options on one line; let the long email
   wrap instead of overflowing the panel (the earlier nowrap made it spill out).
   Force the email colour to match its siblings (bronze only on hover, like them). */
.booking-form a[href^="tel:"],
.booking-form a[href*="wa.me"] { white-space: nowrap; }
.booking-form a[href^="mailto:"] {
  color: hsl(var(--foreground) / 0.8);
  white-space: normal;
  /* break-word (NOT anywhere): lets a long email wrap on a truly narrow line
     without lowering its flex min-content width to one character — the latter
     let flexbox crush the email into a vertical 1-char column. */
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
}
.booking-form a[href^="mailto:"]:hover { color: hsl(var(--primary)); }
.booking-form .flex.flex-wrap { min-width: 0; }

/* The purged Tailwind build ships `.sm:flex-row` but NOT `.sm:flex-wrap`, so the
   direct-contact row (WhatsApp · Call · Email) was a non-wrapping flex-row: the
   three items were forced onto one line and the email collapsed. Restore the
   missing utility to its standard behaviour so the row wraps as authored. */
@media (min-width: 640px) { .sm\:flex-wrap { flex-wrap: wrap; } }

/* WhatsApp FAB — gentle green glow pulse to draw the eye */
a[href*="wa.me/420606926132"][class*="fixed"] { animation: wa-glow 2.6s ease-in-out infinite; }
@keyframes wa-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55), 0 8px 24px -6px rgba(14, 27, 44, 0.35); }
  55%      { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0), 0 8px 24px -6px rgba(14, 27, 44, 0.35); }
}
@media (prefers-reduced-motion: reduce) { a[href*="wa.me/420606926132"][class*="fixed"] { animation: none; } }
/* Message textarea + native (zero-JS) invalid-field feedback */
.booking-form textarea {
  width: 100%;
  min-height: 84px;
  padding: 0.7rem 0.9rem;
  background: hsl(45 33% 100% / 0.55);
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-family: inherit;
  font-size: 0.9rem;
  border-radius: 0;
  resize: vertical;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.booking-form textarea::placeholder { color: hsl(var(--foreground) / 0.4); }
.booking-form textarea:focus { outline: none; border-color: hsl(var(--primary)); background: hsl(45 33% 100% / 0.9); }
.booking-form input:user-invalid,
.booking-form select:user-invalid,
.booking-form textarea:user-invalid { border-color: #c0392b; }

/* ---- Mobile tap targets (WCAG 2.5.5 / Google 48px min) ----
   A few tel:/mailto: contact CTAs shipped at 44px; lift to 48px so every
   primary touch target clears the minimum on phones (61% of traffic). */
a[href^="tel:"],
a[href^="mailto:"] { min-height: 48px; }

/* ---- Home hero video ----
   Shipped at scale-90, so it rendered small/framed. Fill the hero and drop the
   focal point a little lower (owner feedback). NOTE: source is .mov (Safari-only)
   — needs an MP4/WebM + poster for Chrome/Firefox/mobile. */
.hero-video {
  transform: scale(1.06) translateY(calc(4% + 15px)) !important;
  object-position: center 62% !important;
}

/* Thematic tennis-ball bounce — a subtle, on-brand abstraction used on the 404
   (and available as a reusable accent). Pure CSS (the site ships zero JS), and
   it fully stills for visitors who prefer reduced motion. The `top` offset that
   aligns the 404 ball stays; the bounce oscillates gently around it. */
@keyframes ball-bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  50%      { transform: translateY(-13%); animation-timing-function: cubic-bezier(0.8, 0, 0.7, 1); }
}
.ball-bounce { animation: ball-bounce 2.6s infinite; transform-origin: center bottom; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .ball-bounce { animation: none; } }

/* Booking form scrolls clear of the fixed header when reached via #booking */
#booking { scroll-margin-top: 96px; }

/* Warm, refined text selection */
::selection {
  background: hsl(31 57% 41% / 0.22);
  color: hsl(215 52% 11%);
}

/* ============================================================
   Craft polish — site-wide UI/UX refinement pass (2026)
   The foundation (text-wrap: balance/pretty, smooth scroll,
   optimal measure, dark-band re-scoping) is already solid, so
   this layer sharpens interaction, accessibility and type detail
   across all 131 pages with zero HTML changes.
   ============================================================ */

/* 1. Anchor offset — article table-of-contents and FAQ jump links
   (#coaching, #costs, …) were landing UNDER the 82px fixed header.
   Reserve header clearance for every in-page anchor target. */
[id] { scroll-margin-top: 6rem; }

/* 2. Mobile sticky-CTA clearance — the fixed "Book Assessment" bar
   (md:hidden, ~77px tall) floats over the foot of the page because
   nothing reserved space for it. Extend the dark footer beneath it
   so the last footer row is never obscured on phones (61% of traffic). */
@media (max-width: 767px) {
  footer { padding-bottom: 6rem; }
}

/* 3. Keyboard focus — no :focus-visible style shipped, so keyboard and
   switch users got the browser default (frequently invisible on this
   palette). Crisp bronze ring on paper, luminous gold on dark bands. */
:focus-visible {
  outline: 2px solid hsl(31 57% 41%);
  outline-offset: 3px;
  border-radius: 2px;
}
footer :focus-visible,
[class~="bg-foreground"] :focus-visible {
  outline-color: hsl(38 72% 60%);
}
:focus:not(:focus-visible) { outline: none; }   /* no double ring for pointer users */

/* 4. Native form controls (checkboxes, date pickers) adopt the brand accent
   instead of system blue. */
:root { accent-color: hsl(31 57% 41%); }

/* 5. Typography — make kerning, standard ligatures and contextual alternates
   explicit (sharpens both Inter body and the Cormorant display serif). */
body { font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }
/* Figures in data tables align into clean columns (pricing / academy
   comparison / UTR bands). */
table { font-variant-numeric: tabular-nums; }

/* 6. In-prose links — shipped bronze with an underline ONLY on hover, so at
   rest they were distinguished by colour alone (WCAG 1.4.1) and read like
   plain text. Give inline content links a persistent soft underline that
   resolves to full bronze on hover. Scoped tightly to inline links, so
   eyebrows (spans) and pill / CTA links are untouched. */
a[class~="text-primary"][class*="hover:underline"] {
  text-decoration: underline;
  text-decoration-color: hsl(31 57% 41% / 0.42);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
a[class~="text-primary"][class*="hover:underline"]:hover {
  text-decoration-color: hsl(31 57% 41%);
}

/* 7. Primary CTAs gain a soft depth cue on hover — tactile, with no layout
   shift (the fill already animates navy → bronze). */
a[class~="bg-primary"], button[class~="bg-primary"] {
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
a[class~="bg-primary"]:hover, button[class~="bg-primary"]:hover {
  box-shadow: 0 8px 22px -10px hsl(215 52% 11% / 0.5);
}

/* 8. Interactive image/program cards lift gently on hover — a quiet, premium
   motion cue. Scoped to real cards (a hoverable group wrapping a photo). */
a .group.relative.overflow-hidden:has(img),
a.group.relative.overflow-hidden:has(img),
.group.relative.overflow-hidden:has(> a):has(img) {
  transition: transform 0.35s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.35s ease;
}
a:hover > .group.relative.overflow-hidden:has(img),
a.group.relative.overflow-hidden:has(img):hover,
.group.relative.overflow-hidden:has(> a):has(img):hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -26px hsl(215 52% 11% / 0.5);
}
@media (prefers-reduced-motion: reduce) {
  a:hover > .group.relative.overflow-hidden:has(img),
  .group.relative.overflow-hidden:has(> a):has(img):hover { transform: none; }
}

/* === compat-arbitrary-utilities (auto-generated; classes absent from frozen Tailwind bundle) === */
.bg-\[\#DFF244\]{background-color:#DFF244}
.bg-\[\#F7F5EF\]{background-color:#F7F5EF}
.bg-\[\#E1DBCE\]{background-color:#E1DBCE}
.text-\[\#F7F5EF\]{color:#F7F5EF}
.text-\[\#F7F5EF\]\/70{color:rgb(247 245 239 / .7)}
.text-\[hsl\(215_52\%_11\%\)\]{color:hsl(215 52% 11%)}
.text-primary\/25{color:hsl(var(--primary) / .25)}
.border-\[\#E1DBCE\]{border-color:#E1DBCE}
.border-primary\/60{border-color:hsl(var(--primary) / .6)}
.opacity-8{opacity:.08}
.decoration-1{text-decoration-thickness:1px}
.mb-1\.5{margin-bottom:.375rem}
.mb-7{margin-bottom:1.75rem}
.mb-0{margin-bottom:0}
.pt-10{padding-top:2.5rem}
.min-w-\[9rem\]{min-width:9rem}
.items-baseline{align-items:baseline}
.counter-reset\:item{counter-reset:item}
.from-primary\/8{--tw-gradient-from: hsl(var(--primary) / .08) var(--tw-gradient-from-position);--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.via-background\/88{--tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--background) / .88) var(--tw-gradient-via-position), var(--tw-gradient-to)}
.via-background\/96{--tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--background) / .96) var(--tw-gradient-via-position), var(--tw-gradient-to)}
.hover\:opacity-70:hover{opacity:.7}
.hover\:opacity-80:hover{opacity:.8}
.group[open] .group-open\:rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.divide-\[\#E1DBCE\] > :not([hidden]) ~ :not([hidden]){border-color:#E1DBCE}
@media (min-width:768px){
  .md\:my-10{margin-top:2.5rem;margin-bottom:2.5rem}
  .md\:p-6{padding:1.5rem}
  .md\:pb-14{padding-bottom:3.5rem}
  .md\:gap-6{gap:1.5rem}
  .md\:grid-cols-\[220px_1fr\]{grid-template-columns:220px 1fr}
  .md\:items-stretch{align-items:stretch}
}
@media (min-width:1024px){
  .lg\:block{display:block}
}
/* === end compat === */

/* === testimonials-carousel (zero-JS, radio-driven) === */
.tc-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tc-slide{display:none}
#tc-1:checked~.tc-viewport .tc-slide[data-tc="1"],#tc-2:checked~.tc-viewport .tc-slide[data-tc="2"],#tc-3:checked~.tc-viewport .tc-slide[data-tc="3"]{display:block}
.tc-dot{display:inline-block;width:9px;height:9px;border-radius:9999px;background:rgba(14,27,44,.18);cursor:pointer;transition:background .2s}
.tc-dot:hover{background:rgba(14,27,44,.38)}
#tc-1:checked~.tc-dots label[for="tc-1"],#tc-2:checked~.tc-dots label[for="tc-2"],#tc-3:checked~.tc-dots label[for="tc-3"]{background:hsl(var(--primary))}
.tc-arrow{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #E1DBCE;color:#0E1B2C;font-size:20px;line-height:1;cursor:pointer;transition:border-color .2s,color .2s}
.tc-arrow:hover{border-color:hsl(var(--primary));color:hsl(var(--primary))}
.tc-radio:focus-visible~.tc-viewport .tc-slide{outline:2px solid hsl(var(--primary));outline-offset:3px}
/* === end testimonials-carousel === */