/* ==========================================================================
   JOEANT — MAIN STYLESHEET  (dark agency layout, Joeant navy & gold)
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Base / reset
   3.  Layout helpers
   4.  Buttons & links
   5.  Header & navigation
   6.  Hero (home, full screen) + page banner (inner pages)
   7.  Section headings (script subtitle + title + accent bar)
   8.  Cards: numbered feature, category, listing, post, service, location
   9.  Home: carousel, parallax band, how-it-works rows, testimonials, Let's Talk
   10. Forms & search
   11. Category index / category page / filters / pagination
   12. Single listing
   13. Blog article
   14. Contact, sitemap, 404
   15. Footer + back-to-top
   16. Dialog & lightbox
   17. Logo-element animations
   18. Scroll reveal + reduced motion
   19. Responsive
   ========================================================================== */

/* 1. DESIGN TOKENS ======================================================== */
:root {
  /* Brand (sampled from the official Joeant logo) */
  --navy: #021a51;
  --navy-300: #3b5bb5;
  --gold: #f5a800;
  --gold-600: #db8b00;
  --gold-soft: rgba(245, 168, 0, .14);

  /* Dark surfaces — near-black with a navy undertone */
  --bg: #0a0d16;          /* page */
  --bg-alt: #10141f;      /* alternate sections */
  --card: #171c29;        /* cards / panels */
  --card-2: #1e2433;      /* raised */
  --line: rgba(255, 255, 255, .09);
  --text: #b9bfcc;        /* body copy */
  --heading: #ffffff;
  --muted: #8a92a3;

  /* Typography */
  --font-head: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Hind", "Segoe UI", Arial, sans-serif;
  --font-script: "Architects Daughter", "Comic Sans MS", cursive;
  --fs-xs: .82rem;
  --fs-sm: .95rem;
  --fs-md: 1.05rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 2.4vw, 2rem);
  --fs-2xl: clamp(2rem, 4vw, 3rem);
  --fs-hero: clamp(3rem, 9vw, 7rem);

  /* Spacing */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;

  /* Shape, depth, motion */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --sh-md: 0 18px 40px -18px rgba(0, 0, 0, .7);
  --sh-gold: 0 14px 30px -12px rgba(245, 168, 0, .55);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --t-fast: .25s;
  --t-med: .5s;
  --t-slow: .9s;

  --container: 1200px;
  --header-h: 84px;
}

/* 2. BASE ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-md)/1.75 var(--font-body);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--heading); line-height: 1.15; margin: 0 0 var(--s-4); font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); font-weight: 700; }
p { margin: 0 0 var(--s-4); }
a { color: var(--gold); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: #fff; }
ul { padding-left: 1.2rem; }
strong { color: #e6e9f0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--navy); }
.skip-link { position: absolute; left: 1rem; top: -60px; z-index: 300; background: var(--gold); color: var(--navy); padding: .5rem 1rem; border-radius: var(--r-sm); font-weight: 700; }
.skip-link:focus { top: 1rem; color: var(--navy); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* 3. LAYOUT =============================================================== */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
main { overflow-x: clip; }
.section { position: relative; padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-8); }
.section--alt, .section--paper { background: var(--bg-alt); }
.section--navy { background: var(--bg-alt); }
/* thin vertical accent line that "drops" into every section — reference detail */
.section--line::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 70px;
  background: linear-gradient(var(--gold), rgba(245, 168, 0, 0)); transform: translateX(-50%);
  animation: line-drop 2.6s ease-in-out infinite;
}
@keyframes line-drop { 0% { transform: translateX(-50%) scaleY(0); transform-origin: top; } 50% { transform: translateX(-50%) scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: translateX(-50%) scaleY(0); transform-origin: bottom; } }
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid > *, .split > *, .contact-grid > *, .cat-layout > *, .listing-layout > *, .form-grid > * { min-width: 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.stack > * + * { margin-top: var(--s-4); }
.center { text-align: center; }
.muted { color: var(--muted); }
.mt-6 { margin-top: var(--s-6); }

/* 4. BUTTONS ============================================================== */
.btn {
  --btn-bg: var(--gold); --btn-fg: var(--navy); --btn-hover: #ffffff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .8rem 1.9rem; border: 0; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg); white-space: nowrap;
  font: 700 var(--fs-sm)/1 var(--font-head); cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast), color var(--t-fast);
}
.btn::before { /* fill sweeps up from the bottom on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-hover);
  transform: translateY(101%); transition: transform var(--t-med) var(--ease);
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--sh-gold); color: var(--navy); }
.btn:hover::before { transform: none; }
.btn svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--light, .btn--white { --btn-bg: #fff; --btn-fg: var(--navy); --btn-hover: var(--gold); }
.btn--navy, .btn--dark { --btn-bg: var(--card-2); --btn-fg: #fff; --btn-hover: var(--gold); }
.btn--ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-hover: var(--gold); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--gold), var(--sh-gold); }
.btn--sm { min-height: 42px; padding: .55rem 1.2rem; font-size: var(--fs-xs); }
.link-arrow { font: 700 var(--fs-sm)/1 var(--font-head); color: var(--gold); display: inline-flex; align-items: center; gap: .35rem; }
.link-arrow::after { content: "→"; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover::after, .card:hover .link-arrow::after { transform: translateX(5px); }

/* 5. HEADER =============================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  background: transparent; transition: background var(--t-med), height var(--t-med), box-shadow var(--t-med);
}
.site-header.is-scrolled { background: rgba(5, 7, 13, .94); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -15px rgba(0, 0, 0, .8); --header-h: 72px; }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--s-6); }
body:not([data-page="home"]) { padding-top: 0; }
.brand { flex: 0 0 auto; background: #fff; padding: .45rem .8rem; border-radius: var(--r-md); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.brand img { height: 34px; width: auto; animation: logo-in 1s var(--ease) both; }
.brand:hover { transform: translateY(-2px); box-shadow: var(--sh-gold); }
@keyframes logo-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .3rem; }
.main-nav a { position: relative; display: block; padding: .5rem .8rem; font: 700 var(--fs-sm)/1 var(--font-head); color: #fff; }
.main-nav a::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: translateX(-50%) scale(0); transition: transform var(--t-fast) var(--ease); }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--gold); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: translateX(-50%) scale(1); }
.header-cta { flex: 0 0 auto; display: flex; align-items: center; gap: .7rem; color: #fff; }
.header-cta small { display: block; font: 400 .85rem/1.1 var(--font-script); color: var(--gold); }
.header-cta strong { font: 800 var(--fs-sm)/1.2 var(--font-head); color: #fff; }
.header-cta .ico { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--navy); transition: transform var(--t-med) var(--ease); }
.header-cta:hover .ico { transform: rotate(-12deg) scale(1.08); }
.header-cta:hover strong { color: var(--gold); }
.nav-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold); background: transparent; cursor: pointer; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: #fff; border-radius: 2px; transform: translate(-50%, -50%); content: ""; transition: transform var(--t-fast); }
.nav-toggle span::before { transform: translate(-50%, -6px); }
.nav-toggle span::after { transform: translate(-50%, 4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translate(-50%, -1px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translate(-50%, -1px) rotate(-45deg); }

/* 6. HERO ================================================================= */
.hero-full {
  position: relative; min-height: 100vh; display: grid; place-items: center; text-align: center;
  color: #fff; overflow: hidden; padding: calc(var(--header-h) + 3rem) 0 6rem; isolation: isolate;
}
.hero-full__bg { position: absolute; inset: -6% 0; z-index: -2; }
.hero-full__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.55); transform: scale(1.06); animation: hero-zoom 18s ease-in-out infinite alternate; }
@keyframes hero-zoom { to { transform: scale(1.14); } }
.hero-full::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(10, 13, 22, .35), rgba(10, 13, 22, .92) 75%); }
.hero-full__script { font: 400 1.35rem/1 var(--font-script); color: var(--gold); margin-bottom: var(--s-4); display: block; }
.display { font: 900 var(--fs-hero)/.98 var(--font-head); color: #fff; margin: 0 0 var(--s-5); letter-spacing: -.02em; }
.display .stroke, .stroke { color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .9); display: block; }
.display .solid { display: block; }
.display .solid em { font-style: normal; color: var(--gold); }
.hero-full__lead { max-width: 560px; margin: 0 auto var(--s-6); font-size: 1.15rem; color: #d9dde6; }
.hero-full .search-box { margin-inline: auto; }
.hero-full__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-5); }
.hero-full__scroll { position: absolute; left: 50%; bottom: 0; width: 2px; height: 80px; background: var(--gold); transform: translateX(-50%); animation: line-drop 2.6s ease-in-out infinite; }
.deco { position: absolute; pointer-events: none; z-index: 0; }
.hero-full .deco { z-index: -1; opacity: .9; }

/* Category page: full-width photo banner */
.cat-hero { position: relative; min-height: 62vh; display: grid; place-items: center; text-align: center; color: #d9dde6; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + var(--s-8)) 0 var(--s-8); }
.cat-hero__bg { position: absolute; inset: -12% 0; z-index: -2; }
.cat-hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.62); }
.cat-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(10, 13, 22, .35), rgba(10, 13, 22, .9) 78%); }
.cat-hero p { max-width: 60ch; margin: 0 auto var(--s-5); font-size: 1.1rem; }
.display--cat { font-size: clamp(2.4rem, 6vw, 4.8rem); max-width: 18ch; margin-inline: auto; }
.cat-hero .deco { z-index: -1; }

/* inner-page banner: dark photo strip with centered outlined + solid title */
.page-hero {
  position: relative; overflow: hidden; text-align: center; color: #d9dde6; isolation: isolate;
  padding: calc(var(--header-h) + var(--s-8)) 0 var(--s-8);
  background: var(--bg-alt) url("../images/backgrounds/pattern-rings.svg") repeat;
}
.page-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--line); }
.page-hero h1 { font-size: var(--fs-2xl); max-width: 22ch; margin-inline: auto; }
.page-hero p { max-width: 60ch; margin: 0 auto var(--s-4); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero__art { position: absolute; right: 6%; bottom: 18%; width: 150px; z-index: 0; opacity: .9; }
.breadcrumb { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .4rem; font: 400 1rem/1.4 var(--font-script); }
.breadcrumb li + li::before { content: "•"; margin-right: .4rem; color: var(--gold); }
.breadcrumb a { color: #fff; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb [aria-current] { color: var(--gold); }

/* 7. SECTION HEADINGS ===================================================== */
.sec-head { text-align: center; max-width: 720px; margin: 0 auto var(--s-7); }
.sec-head h2 { margin-bottom: var(--s-3); }
.sec-head h2::after { content: ""; display: block; width: 60px; height: 2px; margin: var(--s-4) auto 0; background: var(--gold); transition: width var(--t-slow) var(--ease); }
.sec-head.is-visible h2::after, .sec-head:hover h2::after { width: 90px; }
.sec-head p { color: var(--muted); margin: var(--s-4) 0 0; }
.eyebrow, .script { display: inline-block; margin-bottom: var(--s-2); font: 400 1.1rem/1.2 var(--font-script); color: var(--gold); }
/* legacy two-column heading still used on some inner sections */
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-7); flex-wrap: wrap; }
.section-head h2 { margin: 0; max-width: 22ch; }
.section-head h2::after { content: ""; display: block; width: 60px; height: 2px; margin-top: var(--s-3); background: var(--gold); }
.section-head p { max-width: 46ch; margin: 0; color: var(--muted); }

/* 8. CARDS ================================================================ */
.card {
  position: relative; background: var(--card); border-radius: var(--r-md); overflow: hidden;
  transition: transform var(--t-med) var(--ease), background var(--t-med), box-shadow var(--t-med);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--sh-md); }
.card__fold { position: absolute; top: 0; right: 0; width: 0; height: 0; z-index: 3; background: linear-gradient(225deg, var(--gold) 50%, var(--gold-600) 50%); transition: width var(--t-med) var(--ease), height var(--t-med) var(--ease); }
.card:hover .card__fold { width: 38px; height: 38px; }
.card__media { position: relative; aspect-ratio: 25 / 18; overflow: hidden; background: var(--card-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85); transition: transform 1s var(--ease), filter var(--t-med); }
.card:hover .card__media img { transform: scale(1.07); filter: none; }
.card__body { padding: var(--s-5) var(--s-5) var(--s-6); }
.card__body h3 { margin-bottom: var(--s-2); font-size: 1.15rem; }
.card__body h3 a { color: #fff; }
.card__body h3 a:hover { color: var(--gold); }
.card__body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.card__meta { font-size: var(--fs-sm); color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center; }
.tag { display: inline-block; padding: .2rem .7rem; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--gold); font: 600 var(--fs-xs)/1.5 var(--font-head); }
.tag--navy { background: var(--navy); color: #fff; }

/* Numbered feature card — icon, title, text, outlined number; first is filled */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.feature-card {
  position: relative; display: block; text-align: center; padding: var(--s-7) var(--s-6) var(--s-8);
  background: var(--card); border-radius: var(--r-md); color: var(--text); overflow: hidden;
  transition: background var(--t-med) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-med);
}
.feature-card img { width: 64px; height: 64px; margin: 0 auto var(--s-5); transition: transform var(--t-med) var(--ease), filter var(--t-med); }
.feature-card h3 { color: #fff; margin-bottom: var(--s-3); }
.feature-card p { font-size: var(--fs-sm); margin: 0; }
.feature-card .num { position: absolute; right: 18px; bottom: -14px; font: 900 5.5rem/1 var(--font-head); color: transparent; -webkit-text-stroke: 1.5px rgba(245, 168, 0, .3); transition: -webkit-text-stroke-color var(--t-med), transform var(--t-med) var(--ease); }
.feature-card:hover, .feature-card.is-active { background: var(--gold); color: var(--navy); transform: translateY(-8px); box-shadow: var(--sh-gold); }
.feature-card:hover h3, .feature-card.is-active h3 { color: var(--navy); }
.feature-card:hover img, .feature-card.is-active img { filter: brightness(0) saturate(100%) invert(9%) sepia(54%) saturate(4370%) hue-rotate(219deg) brightness(90%); transform: scale(1.1) rotate(-6deg); }
.feature-card:hover .num, .feature-card.is-active .num { -webkit-text-stroke-color: rgba(2, 26, 81, .35); transform: translateY(-6px); }
.feature-grid:hover .feature-card.is-active:not(:hover) { background: var(--card); color: var(--text); transform: none; box-shadow: none; }
.feature-grid:hover .feature-card.is-active:not(:hover) h3 { color: #fff; }
.feature-grid:hover .feature-card.is-active:not(:hover) img { filter: none; transform: none; }
.feature-grid:hover .feature-card.is-active:not(:hover) .num { -webkit-text-stroke-color: rgba(245, 168, 0, .3); transform: none; }

/* Category card — photo with caption overlay */
.cat-card { aspect-ratio: 4 / 5; display: flex; align-items: flex-end; color: #fff; }
.cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.9) brightness(.9); transition: transform 1s var(--ease), filter var(--t-med); }
.cat-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 13, 22, 0) 30%, rgba(10, 13, 22, .92)); }
.cat-card:hover img { transform: scale(1.08); filter: none; }
.cat-card__body { position: relative; z-index: 2; padding: var(--s-5); width: 100%; }
.cat-card h3 { color: #fff; margin: 0; font-size: 1.05rem; }
.cat-card h3 a { color: inherit; }
.cat-card h3 a::after { content: ""; position: absolute; inset: 0; }
.cat-card span { display: block; font: 400 .95rem/1.3 var(--font-script); color: var(--gold); margin-bottom: .2rem; }

/* Listing card */
.listing-card { display: flex; flex-direction: column; }
.listing-card .card__media { aspect-ratio: 16 / 10; display: grid; place-items: center; background: #fff; }
.listing-card .card__media img:not(.is-logo) { object-position: top center; filter: none; }
.listing-card .card__media img.is-logo { width: auto; height: auto; max-width: 74%; max-height: 70%; object-fit: contain; filter: none; }
.listing-card .card__body { display: flex; flex-direction: column; flex: 1; }
.listing-card .card__foot { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.listing-card .biz { font: 400 .98rem/1.3 var(--font-script); color: var(--gold); margin-bottom: var(--s-2); }
.listing-card p { font-size: var(--fs-sm); color: var(--muted); }
.monogram {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: linear-gradient(225deg, var(--gold) 0 16%, transparent 16%), radial-gradient(circle at 12% 112%, rgba(245, 168, 0, .3) 0 24%, transparent 25%), linear-gradient(135deg, #0d1a45, var(--navy));
  color: #fff; font: 900 2.6rem/1 var(--font-head);
}
.monogram small { display: block; font: 400 .9rem/1.4 var(--font-script); color: var(--gold); margin-top: .35rem; }

/* Live news cards (text-only RSS items) */
.news-card { display: flex; flex-direction: column; border-top: 3px solid var(--gold); }
.news-card .card__body { display: flex; flex-direction: column; flex: 1; padding-top: var(--s-6); }
.news-card h3 { font-size: 1.12rem; line-height: 1.35; margin: var(--s-3) 0; }
.news-card p { color: var(--muted); font-size: var(--fs-sm); }
.news-card .link-arrow { margin-top: auto; }
.news-card__num { position: absolute; right: 18px; top: 10px; font: 900 3.4rem/1 var(--font-head); color: transparent; -webkit-text-stroke: 1.5px rgba(245, 168, 0, .25); transition: -webkit-text-stroke-color var(--t-med); }
.news-card:hover .news-card__num { -webkit-text-stroke-color: var(--gold); }
.news-card:hover { background: var(--card-2); }
.news-status { text-align: center; margin: var(--s-5) 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* Post card */
.post-card .card__media { aspect-ratio: 16 / 11; }
.post-card p { color: var(--muted); font-size: var(--fs-sm); }

/* Service card (services page) */
.svc-card { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.svc-card .card__media { aspect-ratio: auto; min-height: 300px; }
.svc-card .card__body { display: flex; flex-direction: column; justify-content: center; padding: var(--s-7); }
.svc-card .svc-icon { width: 54px; height: 54px; margin-bottom: var(--s-4); }
.svc-card:nth-child(even) .card__media { order: 2; }
.svc-card .num { position: absolute; right: 22px; top: 6px; font: 900 4rem/1 var(--font-head); color: transparent; -webkit-text-stroke: 1.5px rgba(245, 168, 0, .3); }

/* Location card — image tile with overlapping info box (team-card layout) */
.loc-card { display: block; position: relative; padding-bottom: 42px; color: #fff; }
.loc-card img { width: 100%; height: auto; border-radius: var(--r-md); filter: saturate(.6); transition: transform var(--t-med) var(--ease), filter var(--t-med); }
.loc-card span { position: absolute; left: 14px; right: 14px; bottom: 0; padding: .9rem 1.1rem; border-radius: var(--r-sm); background: var(--card-2); font: 800 var(--fs-sm)/1.3 var(--font-head); transition: background var(--t-med), color var(--t-med), transform var(--t-med) var(--ease); }
.loc-card span small { display: block; font: 400 .85rem/1.4 var(--font-body); color: var(--muted); }
.loc-card:hover img { transform: translateY(-6px); filter: none; }
.loc-card:hover span { background: var(--gold); color: var(--navy); transform: translateY(-6px); }
.loc-card:hover span small { color: var(--navy); }

/* 9. HOME SECTIONS ======================================================== */
/* Carousel (scroll-snap track + dots) */
.carousel { position: relative; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--s-5)) / 3); gap: var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px 2px 20px; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__dots { display: flex; justify-content: center; gap: .55rem; margin-top: var(--s-5); }
.carousel__dots button { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .35); cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
.carousel__dots button[aria-current="true"] { background: var(--gold); transform: scale(1.2); }
.carousel--2 .carousel__track { grid-auto-columns: calc((100% - var(--s-5)) / 2); }
/* testimonials: four equal boxes in view, sliding one at a time */
.carousel--4 .carousel__track { grid-auto-columns: calc((100% - 3 * var(--s-5)) / 4); align-items: stretch; }
.carousel--4 .quote-card { display: flex; flex-direction: column; padding: var(--s-5); }
.carousel--4 .quote-card blockquote { flex: 1; font-size: var(--fs-sm); }

/* Full-width parallax band */
.parallax-band { position: relative; min-height: 460px; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; color: #fff; }
.parallax-band__bg { position: absolute; inset: -20% 0; z-index: -2; background-size: cover; background-position: center; filter: grayscale(1) brightness(.5); will-change: transform; }
.parallax-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 13, 22, .55); }
.parallax-band h2 { max-width: 20ch; margin-inline: auto; }
.parallax-band .orbit { width: 140px; margin: 0 auto var(--s-5); }

/* How-it-works rows (event-row layout) */
.steps-list { border-top: 1px solid var(--line); }
.step-row { display: grid; grid-template-columns: 150px 1fr auto; gap: var(--s-6); align-items: center; padding: var(--s-6) 0; border-bottom: 1px solid var(--line); transition: background var(--t-med), padding var(--t-med) var(--ease); }
.step-row:hover { background: linear-gradient(90deg, var(--gold-soft), transparent 70%); padding-left: var(--s-4); }
.step-row .big { font: 900 4.8rem/1 var(--font-head); color: transparent; -webkit-text-stroke: 1.5px var(--gold); }
.step-row h3 { margin-bottom: .2rem; font-size: 1.4rem; }
.step-row p { margin: 0; color: var(--muted); }
.step-row .script { margin: 0; font-size: 1rem; }

/* Testimonials */
.quote-card { background: var(--card); border-radius: var(--r-md); padding: var(--s-6); margin: 0; height: 100%; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.quote-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.quote-card .qm { font: 900 4rem/.6 var(--font-head); color: var(--gold); display: block; height: 34px; }
.quote-card blockquote { margin: var(--s-4) 0 var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid rgba(245, 168, 0, .35); font-size: var(--fs-md); color: #d9dde6; }
.quote-card figcaption { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.quote-card figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); padding: 2px; filter: grayscale(1); transition: filter var(--t-med); }
.quote-card:hover figcaption img { filter: none; }
.quote-card strong { color: #fff; display: block; font: 800 1rem/1.3 var(--font-head); }
.quote-mark { width: 40px; margin: 0 auto var(--s-4); }

/* Why choose us: dark text panel joined to a photo */
.why { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); overflow: hidden; background: var(--card); box-shadow: var(--sh-md); }
.why__panel { position: relative; padding: var(--s-8) var(--s-7); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; overflow: hidden; }
.why__panel h3 { font-size: var(--fs-xl); margin-bottom: var(--s-4); }
.why__panel h3::after { content: ""; display: block; width: 50px; height: 2px; margin-top: var(--s-3); background: var(--gold); }
.why__panel p { color: var(--text); margin-bottom: var(--s-6); }
.why__num { position: absolute; right: 26px; top: 14px; font: 900 5rem/1 var(--font-head); color: transparent; -webkit-text-stroke: 1.5px rgba(245, 168, 0, .25); }
.why__deco { position: absolute; left: -34px; bottom: -34px; width: 110px; opacity: .35; }
.why__media { position: relative; min-height: 420px; overflow: hidden; }
.why__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform 1.2s var(--ease), filter var(--t-med); }
.why:hover .why__media img { transform: scale(1.05); filter: none; }
.why__fold { position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: linear-gradient(225deg, var(--gold) 50%, transparent 50%); transition: width var(--t-med) var(--ease), height var(--t-med) var(--ease); }
.why:hover .why__fold { width: 110px; height: 110px; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; } .why__media { min-height: 300px; order: -1; } .why__panel { padding: var(--s-7) var(--s-5); } }

/* "Let's Talk" call-to-action band */
.lets-talk { position: relative; text-align: center; padding: var(--s-9) 0; overflow: hidden; isolation: isolate; color: #fff; }
.lets-talk__bg { position: absolute; inset: -20% 0; z-index: -2; background-size: cover; background-position: center; filter: grayscale(1) brightness(.45); will-change: transform; }
.lets-talk::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 13, 22, .55), rgba(10, 13, 22, .8)); }
.lets-talk .display { font-size: clamp(2.6rem, 7vw, 5.4rem); }
.lets-talk .display .stroke, .lets-talk .display .solid { display: inline; }
.lets-talk .display--sm { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.12; max-width: 18ch; margin-inline: auto; margin-bottom: var(--s-6); }
.lets-talk p { max-width: 560px; margin: 0 auto var(--s-6); color: #d9dde6; }
.lets-talk__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.lets-talk .deco { z-index: -1; }
/* compact CTA band used on inner pages */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-lg); color: #fff; background: var(--card) url("../images/backgrounds/cta-folds.svg") center/cover no-repeat; padding: var(--s-8) var(--s-7); display: grid; grid-template-columns: 1.4fr .6fr; align-items: center; gap: var(--s-6); }
.cta-band h2 { margin-bottom: var(--s-3); }
.cta-band__art { justify-self: end; width: 200px; }

/* About / check list */
.about__media { position: relative; }
.about__media .frame { border-radius: var(--r-md); overflow: hidden; }
.about__media .frame img { width: 100%; filter: grayscale(1); transition: transform 1.2s var(--ease), filter var(--t-med); }
.about__media .frame:hover img { transform: scale(1.04); filter: none; }
.check-list { list-style: none; padding: 0; margin: var(--s-5) 0; display: grid; gap: var(--s-3); }
.check-list li { display: flex; gap: .7rem; align-items: start; }
.check-list li::before { content: ""; flex: 0 0 8px; height: 8px; margin-top: .65rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }

/* 10. FORMS & SEARCH ====================================================== */
.search-box { margin-top: var(--s-5); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); border-radius: var(--r-pill); padding: .4rem; display: flex; gap: .4rem; max-width: 660px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.search-box input, .search-box select { border: 0; background: transparent; font: inherit; color: #fff; padding: .6rem 1.1rem; min-width: 0; }
.search-box input::placeholder { color: #aab1c2; }
.search-box input { flex: 1 1 auto; }
.search-box select { flex: 0 0 auto; max-width: 200px; border-left: 1px solid rgba(255, 255, 255, .18); }
.search-box select option { color: #111; }
.search-box input:focus, .search-box select:focus { outline: none; }
.search-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font: 700 var(--fs-sm)/1.3 var(--font-head); color: #fff; margin-bottom: .4rem; }
.field input, .field select, .field textarea, .toolbar select, .toolbar input {
  width: 100%; padding: .85rem 1.1rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg);
  font: inherit; color: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field select option, .toolbar select option { color: #111; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .toolbar select:focus, .toolbar input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.field .error { display: block; min-height: 1.2em; color: #ff8a80; font-size: var(--fs-xs); margin-top: .25rem; }
.field [aria-invalid="true"] { border-color: #ff8a80; }
.notice { padding: var(--s-4) var(--s-5); border-radius: var(--r-sm); background: var(--gold-soft); border-left: 4px solid var(--gold); color: #e6e9f0; }
.notice--navy { background: rgba(59, 91, 181, .18); border-color: var(--navy-300); }

/* 11. CATEGORY INDEX / CATEGORY PAGE ===================================== */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; margin-bottom: var(--s-6); }
.toolbar .field { margin: 0; }
.toolbar select, .toolbar input { width: auto; border-radius: var(--r-pill); padding: .7rem 1.1rem; background: var(--card); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { padding: .5rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); color: #fff; font: 600 var(--fs-sm)/1 var(--font-head); cursor: pointer; transition: all var(--t-fast); }
.chip:hover, .chip.is-active { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.result-count { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.pagination { display: flex; gap: .45rem; justify-content: center; margin-top: var(--s-7); flex-wrap: wrap; }
.pagination button { min-width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font: 700 var(--fs-sm)/1 var(--font-head); color: #fff; cursor: pointer; transition: all var(--t-fast); }
.pagination button:hover:not([disabled]), .pagination button[aria-current="page"] { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.pagination button[disabled] { opacity: .35; cursor: not-allowed; }
.cat-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--s-7); align-items: start; }
.sidebar { position: sticky; top: calc(var(--header-h) + 1rem); display: grid; gap: var(--s-5); }
.panel { background: var(--card); border-radius: var(--r-md); padding: var(--s-6); }
.panel h3 { font-size: 1.15rem; position: relative; padding-bottom: var(--s-3); }
.panel h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--gold); }
.panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; }
.panel li a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem 0 .45rem 1rem; color: var(--text); font-size: var(--fs-sm); position: relative; transition: color var(--t-fast), padding var(--t-fast); }
.panel li a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); }
.panel li a:hover { color: var(--gold); padding-left: 1.4rem; }
.panel--gold { background: var(--gold); color: var(--navy); }
.panel--gold h3, .panel--gold strong { color: var(--navy); }
.panel--gold h3::after { background: var(--navy); }
.empty-state { text-align: center; padding: var(--s-8) var(--s-5); background: var(--card); border-radius: var(--r-md); }

/* 12. SINGLE LISTING ====================================================== */
.listing-hero { position: relative; color: #fff; background: var(--bg-alt); overflow: hidden; text-align: center; }
.listing-hero__bg { position: absolute; inset: 0; }
.listing-hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .25; }
.listing-hero .container { position: relative; padding: calc(var(--header-h) + var(--s-8)) 0 var(--s-8); }
.listing-hero h1 { font-size: var(--fs-2xl); max-width: 24ch; margin-inline: auto; }
.listing-hero .biz-name { font: 400 1.35rem/1.3 var(--font-script); color: var(--gold); margin-bottom: var(--s-4); }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: var(--s-5); }
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .9rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); font: 600 var(--fs-xs)/1 var(--font-head); color: #fff; }
.badge--gold { background: var(--gold); color: var(--navy); }
.action-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.listing-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--s-7); align-items: start; }
.listing-main > section { margin-bottom: var(--s-7); }
.listing-main h2 { font-size: var(--fs-xl); }
.listing-main h2::after { content: ""; display: block; width: 50px; height: 2px; margin-top: var(--s-3); background: var(--gold); }
.listing-main .chip { cursor: default; }
.info-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--card); border-radius: var(--r-md); overflow: hidden; }
.info-table th, .info-table td { text-align: left; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.info-table th { width: 38%; color: #fff; font-family: var(--font-head); font-weight: 600; }
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 170px; gap: var(--s-3); }
.gallery button { position: relative; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; cursor: zoom-in; background: #fff; }
.gallery button:first-child { grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.7); transition: transform .8s var(--ease), filter var(--t-med); }
.gallery img.is-logo { width: auto; height: auto; max-width: 80%; max-height: 80%; object-fit: contain; filter: none; }
.gallery button:hover img { transform: scale(1.08); filter: none; }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .7rem; font-size: var(--fs-xs); color: #fff; background: linear-gradient(transparent, rgba(10, 13, 22, .9)); text-align: left; }
.gallery-note { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s-2); }
.map-embed { border: 0; width: 100%; height: 340px; border-radius: var(--r-md); background: var(--card); filter: grayscale(.6) invert(.9) hue-rotate(180deg); }
.review-box { display: grid; grid-template-columns: 160px 1fr; gap: var(--s-5); align-items: center; padding: var(--s-6); background: var(--card); border-radius: var(--r-md); }
.review-score { text-align: center; }
.review-score b { display: block; font: 900 3rem/1 var(--font-head); color: transparent; -webkit-text-stroke: 1.5px var(--gold); }
.stars { color: #3a4152; letter-spacing: .12em; font-size: 1.2rem; }
.submit-review-row { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.contact-card dl { margin: 0; display: grid; gap: var(--s-4); }
.contact-card dt { font: 400 1rem/1 var(--font-script); color: var(--gold); margin-bottom: .35rem; }
.contact-card dd { margin: 0; word-break: break-word; color: #e6e9f0; }
.hours-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hours-table th, .hours-table td { padding: .35rem 0; border-bottom: 1px dashed var(--line); text-align: left; font-weight: 400; }
.hours-table td { text-align: right; color: var(--muted); }
.hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--gold); font-weight: 600; }
.hours-table th span { font: 400 .8rem/1 var(--font-script); margin-left: .3rem; }

/* 13. BLOG ARTICLE ======================================================= */
.article-hero img { width: 100%; aspect-ratio: 7 / 3; object-fit: cover; border-radius: var(--r-md); filter: grayscale(.5); }
.article { max-width: 780px; margin-inline: auto; font-size: 1.1rem; }
.article h2 { font-size: var(--fs-xl); margin-top: var(--s-7); }
.article blockquote { margin: var(--s-6) 0; padding: var(--s-6); border-radius: var(--r-md); background: var(--card); border-left: 4px solid var(--gold); font: 600 1.2rem/1.5 var(--font-head); color: #fff; }
.article li { margin-bottom: .4rem; }
.author-row { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0; padding: var(--s-4); background: var(--card); border-radius: var(--r-md); }
.author-row img { width: 54px; height: 54px; border-radius: 50%; }

/* 14. CONTACT / SITEMAP / 404 ============================================= */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s-7); align-items: start; }
.sitemap-cols { columns: 3 240px; column-gap: var(--s-7); }
.sitemap-group { break-inside: avoid; margin-bottom: var(--s-6); background: var(--card); border-radius: var(--r-md); padding: var(--s-5); }
.sitemap-group h2 { font-size: var(--fs-lg); display: flex; align-items: center; gap: .6rem; }
.sitemap-group h2 img { width: 30px; height: 30px; }
.sitemap-group ul { list-style: none; padding: 0; margin: 0; }
.sitemap-group li a { display: inline-block; padding: .25rem 0 .25rem 1rem; color: var(--text); position: relative; transition: color var(--t-fast), transform var(--t-fast); }
.sitemap-group li a::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.sitemap-group li a:hover { color: var(--gold); transform: translateX(4px); }
.err-wrap { min-height: 100vh; display: grid; place-items: center; padding: calc(var(--header-h) + var(--s-6)) 0 var(--s-8); position: relative; overflow: hidden; }
.err-stage { position: relative; width: min(600px, 90vw); height: 250px; margin: 0 auto var(--s-6); }
.err-digit { position: absolute; top: 10px; font: 900 230px/1 var(--font-head); color: transparent; -webkit-text-stroke: 2px #fff; }
.err-digit--l { left: 0; animation: bob 4s ease-in-out infinite; }
.err-digit--r { right: 0; animation: bob 4s ease-in-out infinite .6s; }
.err-ring { position: absolute; left: 50%; top: 18px; width: 210px; transform: translateX(-50%); }
@keyframes bob { 50% { transform: translateY(-14px); } }

/* 15. FOOTER ============================================================== */
.site-footer { background: #11151f; color: var(--text); padding-top: var(--s-8); position: relative; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--s-7); padding-bottom: var(--s-7); }
.footer-logo { display: inline-block; background: #fff; padding: .55rem .9rem; border-radius: var(--r-md); margin-bottom: var(--s-4); transition: transform var(--t-med) var(--ease); }
.footer-logo:hover { transform: translateY(-3px); }
.footer-logo img { height: 36px; width: auto; }
.site-footer h2 { font-size: 1.25rem; margin-bottom: var(--s-5); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.site-footer ul a { color: var(--text); position: relative; padding-left: 1rem; display: inline-block; transition: color var(--t-fast), transform var(--t-fast); }
.site-footer ul a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); }
.site-footer ul a:hover { color: var(--gold); transform: translateX(4px); }
.footer-big { font: 800 1.35rem/1.3 var(--font-head); color: var(--gold); display: inline-block; margin: .2rem 0 .6rem; }
.footer-big:hover { color: #fff; }
.footer-search { display: flex; gap: .4rem; padding: .35rem; border: 1px solid var(--gold); border-radius: var(--r-pill); }
.footer-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; padding: .55rem .9rem; font: inherit; }
.footer-search input:focus { outline: none; }
.footer-search button { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: 0; background: #fff; color: var(--navy); cursor: pointer; display: grid; place-items: center; transition: background var(--t-fast), transform var(--t-fast); }
.footer-search button:hover { background: var(--gold); transform: rotate(-10deg); }
.footer-search button svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid rgba(245, 168, 0, .3); padding-block: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center; font-size: var(--fs-sm); }
.footer-bottom p { margin: 0; }
.footer-bottom nav { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.footer-bottom a { color: var(--text); }
.footer-bottom a:hover { color: var(--gold); }
.footer-wave { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 40px; opacity: .6; }
.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(10, 13, 22, .8); color: var(--gold); cursor: pointer; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--t-med) var(--ease); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold); color: var(--navy); }
.to-top svg { width: 20px; height: 20px; }

/* 16. DIALOG & LIGHTBOX =================================================== */
dialog { border: 0; border-radius: var(--r-lg); padding: 0; max-width: min(680px, 92vw); background: var(--card); color: var(--text); box-shadow: var(--sh-md); }
dialog::backdrop { background: rgba(0, 0, 0, .75); backdrop-filter: blur(3px); }
.dialog-body { padding: var(--s-7) var(--s-6) var(--s-6); }
.dialog-close { position: absolute; top: .8rem; right: .8rem; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--gold); color: var(--navy); font-size: 1.4rem; cursor: pointer; }
.lightbox { max-width: min(1100px, 95vw); background: #000; }
.lightbox img { max-height: 78vh; width: auto; margin: 0 auto; }
.lightbox figcaption { color: #fff; padding: var(--s-3) var(--s-5); font-size: var(--fs-sm); }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--gold); color: var(--navy); font-size: 1.3rem; cursor: pointer; }
.lightbox .lb-prev { left: .8rem; }
.lightbox .lb-next { right: .8rem; }

/* 17. LOGO-ELEMENT ANIMATIONS ============================================ */
.float-a { animation: float-a 7s ease-in-out infinite; }
.float-b { animation: float-b 9s ease-in-out infinite; }
.spin-slow { animation: spin-slow 28s linear infinite; }
.sway { animation: sway 6s ease-in-out infinite; transform-origin: bottom center; }
@keyframes float-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, -16px); } }
@keyframes float-b { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-12px, 12px) rotate(6deg); } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes sway { 50% { transform: rotate(-4deg); } }

/* 18. SCROLL REVEAL ====================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: var(--reveal-delay, 0s); }
.js [data-reveal="left"] { transform: translateX(-50px); }
.js [data-reveal="right"] { transform: translateX(50px); }
.js [data-reveal="zoom"] { transform: scale(.9); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js .card[data-reveal].is-visible:hover { transform: translateY(-8px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* 19. RESPONSIVE ========================================================= */
@media (max-width: 1100px) {
  .header-cta { display: none; }
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .listing-layout, .cat-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}
@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .site-header { background: rgba(5, 7, 13, .94); }
  .nav-toggle { display: block; }
  .main-nav { position: fixed; inset: var(--header-h) 0 auto 0; background: #0b0e17; border-bottom: 1px solid var(--line); padding: var(--s-4); transform: translateY(-130%); visibility: hidden; transition: transform var(--t-med) var(--ease), visibility var(--t-med); }
  .main-nav.is-open { transform: none; visibility: visible; }
  .main-nav ul { flex-direction: column; }
  .main-nav a { padding: .9rem 1rem; }
  .main-nav .nav-cta { display: block; margin-top: var(--s-2); }
  .split, .contact-grid, .cta-band { grid-template-columns: 1fr; }
  .grid-3, .grid-2, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .carousel__track { grid-auto-columns: calc((100% - var(--s-5)) / 2); }
  .carousel--2 .carousel__track { grid-auto-columns: 100%; }
  .carousel--4 .carousel__track { grid-auto-columns: calc((100% - var(--s-5)) / 2); }
  .svc-card { grid-template-columns: 1fr; }
  .svc-card:nth-child(even) .card__media { order: 0; }
  .step-row { grid-template-columns: 100px 1fr; }
  .step-row .btn { grid-column: 2; justify-self: start; }
  .page-hero__art { display: none; }
}
@media (max-width: 640px) {
  .section { padding-block: var(--s-8); }
  .grid-2, .grid-3, .grid-4, .feature-grid, .form-grid, .footer-grid { grid-template-columns: 1fr; }
  .grid-4.cats-compact { grid-template-columns: repeat(2, 1fr); }
  .carousel__track { grid-auto-columns: 86%; }
  .carousel--4 .carousel__track { grid-auto-columns: 86%; }
  .search-box { flex-direction: column; border-radius: var(--r-md); }
  .search-box select { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); max-width: none; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }
  .gallery button:first-child { grid-column: span 2; }
  .review-box { grid-template-columns: 1fr; }
  .cta-band { padding: var(--s-7) var(--s-5); }
  .step-row { grid-template-columns: 1fr; gap: var(--s-3); }
  .step-row .btn { grid-column: auto; }
  .step-row .big { font-size: 3.4rem; }
  .err-stage { height: 170px; }
  .err-digit { font-size: 140px; }
  .err-ring { width: 120px; }
  .section > .deco, .hero-full .deco { display: none; }
  .cat-card h3 { font-size: .95rem; }
  .cat-card__body { padding: var(--s-4); }
  .display .stroke { -webkit-text-stroke-width: 1.5px; }
}
@media (min-width: 901px) { .main-nav .nav-cta { display: none; } }