/* onnext-polish.css — global consistency + loading polish layered on top of the
   aantrik Webflow CSS. Loaded last in <head>; uses !important to beat the
   per-page inline <style> blocks that ship inside each page's body markup. */

/* ---- 2. Image loading: skeleton shimmer (no DOM wrapping) ----
   onnext-skeleton.js tags content images .onx-skel and adds .onx-done when each
   finishes loading. A loading image is transparent, so a shimmer drawn as its
   background shows in the image's box until the pixels arrive, then is removed.
   No wrapper element -> safe for the Webflow grid layouts. */
@keyframes onx-shimmer {
  0% { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
img.onx-skel:not(.onx-done) {
  background-color: #ece8e1;
  background-image: linear-gradient(90deg, #ece8e1 0%, #f6f3ee 50%, #ece8e1 100%);
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: onx-shimmer 1.25s linear infinite;
  color: transparent; /* hide alt text flash while loading */
}
img.onx-skel.onx-done {
  background-image: none;
  animation: none;
}
/* Fade the real image in once it loads instead of popping in over the shimmer.
   No wrapper needed: the shimmer lives on :not(.onx-done); this only runs on done. */
@keyframes onx-fade { from { opacity: 0.3; } to { opacity: 1; } }
img.onx-skel.onx-done { animation: onx-fade 0.35s ease both; }

/* Accessibility: users who ask for less motion get no shimmer/fade — image just shows. */
@media (prefers-reduced-motion: reduce) {
  img.onx-skel:not(.onx-done),
  img.onx-skel.onx-done { animation: none !important; background-image: none !important; }
}

/* ---- 3. Mobile nav menu ----
   webflow.js doesn't bind the hamburger on these non-hydrated pages, so
   onnext-nav.js toggles .onx-open on the menu. This styles the open panel. */
@media (max-width: 991px) {
  /* clip (not hidden) prevents horizontal overflow WITHOUT creating a scroll
     container — `overflow:hidden` on an ancestor breaks the sticky nav on mobile. */
  html, body { overflow-x: clip; }
  .w-nav, [role="banner"] { position: relative; }
  .w-nav-menu.onx-open {
    display: block !important;
    position: fixed; /* top is set by onnext-nav.js to the nav's bottom edge */
    top: 66px;
    left: 0;
    right: 0;
    width: 100vw;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    padding: 4px 0 16px;
    z-index: 1200;
    max-height: calc(100vh - 66px);
    overflow-y: auto;
    border-top: 1px solid #efe9e0;
  }
  .w-nav-menu.onx-open a,
  .w-nav-menu.onx-open .w-dropdown-toggle {
    display: block;
    width: 100%;
    padding: 13px 24px;
    text-align: left;
    border-bottom: 1px solid #f4f0e9;
    color: #2c2620;
    font-size: 15px;
  }
  .w-nav-menu.onx-open .w-dropdown { display: block; width: 100%; }
  .w-nav-menu.onx-open .w-dropdown-list {
    display: none;
    position: static !important;
    box-shadow: none;
    background: #faf7f2;
  }
  .w-nav-menu.onx-open .w-dropdown.onx-dd-open .w-dropdown-list { display: block; }
  .w-nav-menu.onx-open .w-dropdown-list a {
    padding-left: 42px;
    font-size: 14px;
    color: #5a524a;
  }
  .w-nav-button.w--open { background-color: rgba(0, 0, 0, 0.06); }
}

/* ---- 4. Home "Our Track Record" overflow on mobile ----
   .hire-a-designer pins max-width:1180px and its stat columns don't stack,
   forcing 810px of horizontal overflow on phones. */
@media (max-width: 767px) {
  .hire-a-designer { max-width: 100% !important; }
  .hire-a-designer .w-row { display: flex; flex-wrap: wrap; }
  .hire-a-designer .w-row > [class*="w-col"] { width: 50%; }
}

/* ==== aantrik-fidelity fixes (vs aantrik.in mobile, 2026-06-22) ==== */

/* ---- 6. Contact + Home map: horizontal overflow on mobile ----
   The embed pins the iframe to width:400px !important inline; on a 375px phone
   that overflows the viewport. Higher specificity (.mapouter .gmap_iframe) beats
   the 1-class inline !important regardless of source order. */
.mapouter, .gmap_canvas { width: 100% !important; max-width: 100% !important; }
.mapouter .gmap_iframe, .gmap_canvas .gmap_iframe { width: 100% !important; max-width: 100% !important; }

/* ---- 7. Home "Let Us Connect" block alignment ----
   aantrik centers the whole contact block under the centered heading; the ONNEXT
   reskin left-drifted the .h3b lines. Scoped to this block's unique Webflow node
   id so it can never touch the same .div-block-25 class used on 40+ other pages. */
#w-node-_13e783d7-7a3f-6b73-fab6-83f75a394b2e-5a394b2b {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
#w-node-_13e783d7-7a3f-6b73-fab6-83f75a394b2e-5a394b2b .h3b { text-align: center !important; width: 100% !important; }

/* ---- 8. Home partner marquee: faint logos ----
   Resting grayscale + opacity 0.62 made the partner logos hard to read; nudge up
   slightly while keeping the muted marquee look. */
.onx-marquee-track .onx-logo img { opacity: 0.78 !important; }

/* ---- 13. Site-wide body readability ----
   Comfortable line-height on long-form text bodies (blog posts, project
   descriptions, FAQ answers, any rich text) so copy never reads cramped. Scoped
   to rich-text containers so it can't disturb nav/buttons/headings/grids. */
.w-richtext p,
.rich-text-block p,
.h5-blogs p,
.h5-blogs li,
.w-richtext li {
  line-height: 1.7 !important;
}

/* ---- 15. FAQ page: constrain + center the column (vs aantrik, 2026-06-24) ----
   .faq-container ran full-width (max-width:none), spreading 8 short questions
   across the page and reading loose/under-filled. aantrik keeps a tidy centered
   column. Constrain + center; rows keep their existing 20px rhythm. */
.faq-container {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- 17. Mobile nav menu: solid bg regardless of open mechanism ----
   webflow.js can open the menu (display:block) WITHOUT the .onx-open class
   onnext-nav.js sets, so §3's white bg didn't apply and the hero bled through the
   open panel. Give the mobile menu a solid bg unconditionally — it is display:none
   until opened, so this only shows when the menu is actually open. */
@media (max-width: 991px) {
  .w-nav-menu { background-color: #fff !important; }
}

/* ============================================================
   §19-§25: aantrik-fidelity design diffs (Goal-2, workflow wbkkze80c, 2026-06-24)
   One scoped block per documented diff; #10 (orange CTA) was a no-op — home has
   no orange CTA (buttons already taupe/brand-brown).
   ============================================================ */

/* ---- 19. Gallery + Contact "Let Us Connect" heading: left-align (vs aantrik, 2026-06-24) ----
   The "Let us connect !" h2 carries Webflow's base .h2 { text-align:center }, so it reads
   centered while its flush-left .h3b siblings (container .div-block-25 is a flex column with
   align-items:flex-start) look misaligned on desktop. The consultation block's node-id is
   shared across home/gallery/contact, so §7's home node-id can't scope here. Scope to
   gallery/contact ONLY via a page-unique sibling anchor of the shared .e-consultation-form:
   on gallery the form follows .section.residential (gallery-only); on contact the form is
   the navbar's adjacent sibling (only on contact — home/gallery have other content there).
   Desktop only; align-self guards against any flex-centering on the container. */
@media (min-width: 768px) {
  .e-consultation-form .div-block-25 > .h2 { /* every page, like aantrik (2026-10-06) */
    text-align: left !important;
    margin-left: 0 !important;
    align-self: flex-start !important;
  }
}

/* ---- 20. Services hero: center subtitle to match heading + mobile inline padding (vs aantrik, 2026-06-24) ----
   .paragraph-25 has no text-align (defaults left) so the subtitle "Book Your Free
   Interior Design Quote Now" sits left-orphaned under the centered .heading-100.
   Center it; on mobile add padding-inline so neither line runs edge-to-edge.
   Scoped to .section-38.farmland (page-unique hero; the form's .paragraph-25 is outside it).
   Does NOT touch the §5 .container-34.farmland background. */
.section-38.farmland .paragraph-25 {
  text-align: center !important;
}
@media (max-width: 767px) {
  .section-38.farmland .heading-100,
  .section-38.farmland .paragraph-25 {
    padding-inline: 24px !important;
  }
}

/* ---- 21. About "team" grid: REVERTED (2026-06-24) ----
   The square-tile/cover fix fought the Webflow masonry (each tile has an explicit
   node-id grid placement), producing a scattered, gappy wall. The deeper issue is
   content: the grid is a masonry collage of only 6 repeated interior photos (48
   tiles), i.e. placeholder filler, not real team headshots. Forcing a layout on
   filler isn't a real improvement — left the original masonry intact. TODO (content):
   real team photos + a deliberate team-section layout. */

/* ---- 22. Blog index: caption block height (vs aantrik, 2026-06-24) ----
   Blog cards' caption block (.div-block-17) has aspect-ratio:2 + height:20% +
   padding:0 20px, so it renders a fixed width-derived height (~half the 18vw card
   width) leaving 40-60px empty below a 2-line title with no vertical padding.
   Neutralize aspect-ratio + height so it sizes to content, give symmetric padding,
   and cap a min-height so short titles still align. Scoped to .section.blogs (blog
   listing only) so the reused generic .div-block-17 elsewhere is untouched. */
.section.blogs .div-block-17 {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 88px !important;
  padding: 16px 20px !important;
}

/* ---- 26. FAQ page: CMS-driven native <details> accordion (2026-06-24) ----
   /faqs now renders from the Faqs CMS collection (admin edits reflect via ISR).
   Static Webflow items were replaced with native <details> for a guaranteed,
   accessible toggle. Styled here to match the warm ONNEXT look. Scoped to .onx-faq. */
.onx-faq {
  border-bottom: 1px solid rgba(31, 27, 23, 0.12);
  padding: 0;
}
.onx-faq[open] { background: rgba(184, 112, 47, 0.03); }
.onx-faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 8px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: #1f1b17;
  user-select: none;
}
.onx-faq-q::-webkit-details-marker { display: none; }
.onx-faq-q:hover { color: #b8702f; }
.onx-faq-arrow {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
  transition: transform 0.25s ease;
}
.onx-faq-arrow::before,
.onx-faq-arrow::after {
  content: "";
  position: absolute;
  background: #b8702f;
  border-radius: 2px;
}
.onx-faq-arrow::before { top: 10px; left: 3px; width: 16px; height: 2px; }            /* horizontal */
.onx-faq-arrow::after  { left: 10px; top: 3px; width: 2px; height: 16px; transition: opacity 0.25s ease; } /* vertical */
.onx-faq[open] .onx-faq-arrow::after { opacity: 0; }   /* + turns into − on open */
.onx-faq-a {
  padding: 0 8px 22px;
  max-width: 760px;
}
.onx-faq-a p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.72;
  color: #4a443d;
}

/* ---- 27. About team: CMS-driven member cards (2026-06-24) ----
   The about "Our Team" section now renders the Team collection (admin edits reflect
   via ISR) instead of a 48-image placeholder interior masonry. Real members with
   role; initials avatar until photos are uploaded (Blob-gated). Scoped to .onx-team-*. */
.onx-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 28px 20px;
  max-width: 1100px;
  margin: 8px auto 0;
  padding: 0 16px;
}
.onx-team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.onx-team-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, #b8702f 0%, #9c7a55 100%);
  box-shadow: 0 8px 20px rgba(184, 112, 47, 0.22);
  margin-bottom: 16px;
}
.onx-team-name {
  font-size: 17px;
  font-weight: 600;
  color: #1f1b17;
  line-height: 1.3;
}
.onx-team-role {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: #8a8073;
  letter-spacing: 0.02em;
}
@media (max-width: 479px) {
  .onx-team-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .onx-team-avatar { width: 78px; height: 78px; font-size: 25px; }
}

/* ---- 28. Blog listing: "Latest Guides" CMS-post cards (2026-06-24) ----
   Surfaces the original ONNEXT CMS posts (commercial + local-SEO guides) at the top
   of /blog with internal links (were sitemap-only). Rendered at the ONX_CMS_POSTS
   marker in blog.html; ISR-fed. Scoped to .onx-latest. */
.onx-latest { padding: 36px 0 8px; }
.onx-latest-head { margin-bottom: 22px !important; }
.onx-latest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}
.onx-latest-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(31, 27, 23, 0.1);
  border-radius: 14px;
  background: #fff;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.onx-latest-img { display: block; width: 100%; height: 168px; overflow: hidden; background: #ece8e1; }
.onx-latest-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.onx-latest-card:hover .onx-latest-img img { transform: scale(1.05); }
.onx-latest-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.onx-latest-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(31, 27, 23, 0.09);
  border-color: rgba(184, 112, 47, 0.4);
}
.onx-latest-cat {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8702f;
  font-weight: 600;
  margin-bottom: 8px;
}
.onx-latest-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: #1f1b17;
}
.onx-latest-excerpt {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #6b6258;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.onx-latest-more {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #b8702f;
}

/* ---- 30. Button click overlay fix (user: "light blue pixelated overlay on click", 2026-06-24) ----
   The §11b glass buttons carry backdrop-filter:blur(8px) which samples + blurs the tinted
   light-field behind them — reading as a pixelated light-blue patch — and the default tap
   highlight flashed on press. Drop the button blur, kill the tap highlight, and stop text
   selection on buttons (its light-blue ::selection was part of the "overlay"). */
.w-button, .onx-portfolio-cta, .book-e-consultation-copy, .submit-button-3,
button, a.button {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* ---- 31. Bigger partner logos on home (user request, 2026-06-24) ----
   The marquee logos shipped at 56px (44px mobile, inline-styled in home.html). Enlarge. */
.onx-marquee-track .onx-logo img {
  height: 92px !important;
  max-width: 230px !important;
}
@media (max-width: 767px) {
  .onx-marquee-track .onx-logo img { height: 64px !important; }
}

/* ---- 32. Logo breathing room + nav-link tap overlay + hamburger box (user requests, 2026-06-24) ----
   Bug: logo looked "cut off above/below" — it was cramped (72px logo in an 82px bar,
   ~5px each side). Add vertical room. Bug: tapping a sidebar link ("About Us") flashed
   a blue pixelated overlay — the nav links (not just buttons, §30) still had the default
   tap-highlight + text selection. Kill both. Bug: open hamburger showed a grey box. */
a, button, [role="button"], .w-nav-link, .nav-link, .nav-link-3,
.w-button, .w-dropdown-toggle, .menu-button, input, label {
  -webkit-tap-highlight-color: transparent !important;
}
.w-nav-link, .nav-link, .nav-link-3, .w-dropdown-toggle, .menu-button, .dropdown-link {
  -webkit-user-select: none !important;
  user-select: none !important;
}
.w-nav-button.w--open { background-color: transparent !important; color: #222 !important; }

/* ---- 34. Font-family consistency: kill the serif fallback on ONNEXT content (user: "/about font looks off", 2026-06-24) ----
   Root cause: the Webflow base rule `body { font-family: "Sfpro (R)" }` wins the
   cascade site-wide, but "Sfpro (R)" / "Sfpro (M)" / "SF SEMI BOLD" have NO @font-face
   anywhere in the shared CSS, so any element that *inherits* the body font (instead of
   declaring its own) paints in the browser default serif (Times) — reading as a totally
   different typeface from the Open Sans the rest of the site uses.
   HOME (the reference) escapes this: its visible headings/body all carry an explicit
   `Open Sans` (or intentional `Montserrat` on the hero/"Peek" titles) Webflow class, so
   the Sfpro fallback never shows on its prose. The ONNEXT-custom .onx-* content blocks
   added later (about team cards §27, faqs Q&A §26, blog "Latest Guides" §28) set size/
   weight/color but NOT font-family, so they fell through to the serif fallback — that is
   the "off" font the user sees on /about (the team names/roles) and, loudest of all, the
   entire /faqs question + answer copy.
   Fix: pin these page-unique ONNEXT classes to the SAME stack home uses for body/heading
   text — "Open Sans", sans-serif. FAMILY ONLY (sizes/weights/letter-spacing are owned by
   §26/§27/§28 and left untouched). Every selector here is an .onx-* / .faq-* class that
   exists ONLY on its page (verified absent from home.html), so the reference home page is
   never touched and these can't leak. Intentional Montserrat on home/services heroes is
   deliberately NOT included. */
/* /about — CMS team cards (§27) */
.onx-team-name,
.onx-team-role,
.onx-team-avatar,
/* /faqs — native <details> accordion (§26) + the section heading */
.faq-menu-title-label,
.onx-faq-q,
.onx-faq-a,
.onx-faq-a p,
/* /blog — "Latest Guides" CMS cards (§28) */
.onx-latest-cat,
.onx-latest-title,
.onx-latest-excerpt,
.onx-latest-more {
  font-family: "Open Sans", sans-serif !important;
}

/* ---- 35. Section spacing: even out one-sided sections to the GALLERY rhythm (user request, 2026-06-24) ----
   Reference: /gallery reads well because every section uses ONE uniform gap — the
   untouched base `.section` (computed mt:40 / pb:0 desktop, mt:0 / px:20 mobile),
   sections separated by top margin only, NO bottom padding, symmetric. The other
   pages broke that by being ERRATIC, not tighter: top-only padding that jumps
   30→50→60→100 and collapses on mobile. Fix is consistency + symmetry, anchored to
   the gallery feel — NOT slamming everything to one number. Each rule is scoped to a
   page-unique / compound class (never bare `.section`/`.container`, which would hit
   gallery + every page). Already-even sections (gallery, §25 story 88/88, §28 blog,
   contact's consistent pair) are left untouched. `.section.featured` deliberately
   skipped — it also lives on home (polished), so a global change would leak there.
   Verified computed values (playwright, desktop 1280 + mobile 390) before/after.

   33a. about + our-team "Team Spirit" tail section (.section-54, those two pages only)
        was pt:60 / pb:0 desktop, pt:20 / pb:0 mobile — one-sided, top heavier than the
        gallery 40px rhythm and no bottom breathing room before the footer. Make it even. */
.section-54 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
@media (max-width: 767px) {
  .section-54 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* 33b. services .section-62 was pt:50 / pb:0 (top-only) at both widths. Mirror it so
        the block sits with equal air top and bottom, in the same 48px desktop rhythm. */
.section-62 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
@media (max-width: 767px) {
  .section-62 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* 33c. services last section before footer (.section-40.farmland): desktop is already
        even (50/50) — leave it. Only MOBILE was asymmetric (pt:0 / pb:50), so the block
        jammed against the section above on phones. Restore a matching top on mobile only;
        desktop untouched. */
@media (max-width: 767px) {
  .section-40.farmland {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* ---- 27b. Team real-photo avatars (2026-06-24) ----
   Real member photos (onx-team-photo) fill the round avatar instead of the gradient
   initials. Center-cropped via object-fit:cover. */
.onx-team-avatar.onx-team-photo {
  background: none !important;
  padding: 0 !important;
  overflow: hidden;
}
.onx-team-avatar.onx-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}

/* ---- 36. Mobile nav menu: smooth open/close animation + polish (user: "sidebar not good + animation not built", 2026-06-24) ----
   onnext-nav.js toggles .onx-open (and sets inline top/maxHeight on open). Previously the
   menu went display:none→block (instant pop, no animation). Keep it ALWAYS rendered on
   mobile but hidden+lifted when closed, so it can fade + slide down smoothly. Cleaner panel. */
@media (max-width: 991px) {
  .navbar-3 .w-nav-menu {
    display: block !important;
    position: absolute !important; /* hangs off the (non-sticky) header and scrolls with it */
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(31, 27, 23, 0.16) !important;
    border-top: 1px solid #efe9e0 !important;
    padding: 6px 0 18px !important;
    z-index: 1200 !important;
    overflow-y: auto !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.26s ease, transform 0.26s ease, visibility 0.26s ease;
    pointer-events: none;
  }
  /* Visible when opened by EITHER onnext-nav.js (.onx-open on the menu) OR webflow.js
     (.w--open on the button — what actually fires on the live preview). */
  .navbar-3 .w-nav-menu.onx-open,
  .navbar-3:has(.w-nav-button.w--open) .w-nav-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
  /* link rows: comfortable tap targets + subtle dividers */
  .navbar-3 .w-nav-menu .w-nav-link,
  .navbar-3 .w-nav-menu .nav-link,
  .navbar-3 .w-nav-menu .w-dropdown-toggle {
    padding: 15px 26px !important;
    font-size: 15.5px !important;
    letter-spacing: 0.2px !important;
    border-bottom: 1px solid #f4f0e9 !important;
  }
  .navbar-3 .w-nav-menu .nav-link-3 { display: block !important; width: auto !important; margin: 12px 24px 4px !important; text-align: center !important; border-radius: 8px !important; }
}

/* ---- 37. Native webflow-widget rebuilds (slider + lightbox) — paired with
   onnext-webflow-widgets.js (the webflow JS modules never init in this build). ---- */
/* Slider: a flex track of full-width slides; JS translates to reveal the active one. */
.onx-slider .w-slider-mask { display: flex !important; overflow: hidden; }
.onx-slider .w-slide { flex: 0 0 100% !important; transition: transform 0.55s ease; }
.onx-slider .w-slider-arrow-left,
.onx-slider .w-slider-arrow-right { display: flex !important; opacity: 1; }
.onx-slider .w-slider-nav { display: block; }
.onx-slider .w-slider-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); margin: 0 4px; cursor: pointer; transition: background 0.2s;
}
.onx-slider .w-slider-dot.w-active { background: #fff; }
/* Lightbox overlay */
.onx-lightbox {
  position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.92);
  display: none; align-items: center; justify-content: center;
}
.onx-lightbox.onx-open { display: flex; }
.onx-lb-img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 4px; }
.onx-lb-close, .onx-lb-prev, .onx-lb-next {
  position: absolute; background: none; border: none; color: #fff; cursor: pointer;
  opacity: 0.82; transition: opacity 0.2s; user-select: none;
}
.onx-lb-close:hover, .onx-lb-prev:hover, .onx-lb-next:hover { opacity: 1; }
.onx-lb-close { top: 16px; right: 24px; font-size: 40px; line-height: 1; }
.onx-lb-prev, .onx-lb-next { top: 50%; transform: translateY(-50%); font-size: 54px; padding: 0 18px; }
.onx-lb-prev { left: 8px; }
.onx-lb-next { right: 8px; }

/* ---- 38. PageSkeleton overlay — guaranteed dismissal (no-JS safety net) ----
   The overlay is a React 'use client' component that hides itself in useEffect,
   but these pages don't hydrate, so onnext-skeleton.js clears it from plain JS.
   This is the belt-and-suspenders: a pure-CSS animation fades + disables the
   overlay after 3s even if every script fails to load, so it can never block the
   site permanently. (JS clears it ~0.25s after content paints; this is only the
   fallback.) */
[class*="PageSkeleton"][class*="overlay"] {
  animation: onx-skel-autohide 0.45s ease 3s forwards;
}
@keyframes onx-skel-autohide {
  to { opacity: 0; pointer-events: none; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  [class*="PageSkeleton"][class*="overlay"] { animation-delay: 1.5s; animation-duration: 0.01s; }
}

/* ---- 39. FAQ accordion toggle — circled +/- (aantrik parity) ----
   The FAQ list is native <details>/<summary>; the default triangle marker reads
   as unfinished next to aantrik's contained circled-plus button. Only the FAQ
   page uses <details>, so global scoping is safe. */
details > summary {
  list-style: none;
  position: relative;
  padding-right: 46px;
  cursor: pointer;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: "+";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
}
details[open] > summary::after { content: "\2212"; opacity: 1; } /* minus when open */

/* ---- 41. Track Record stat numbers — monumental counters (Goal 2, toward aantrik) ----
   The stat numbers use the shared .h2b class, so scope to the stat columns (.w-row)
   only — never the "Our Track Record" section heading (which sits directly in
   .hire-a-designer, not in the row). */
.hire-a-designer .w-row .h2b {
  font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.5px;
}

/* ---- 42. FAQ list — stronger dividers + roomier rows (Goal 2, toward aantrik) ----
   The diff flagged the dividers as too light and rows as cramped. `<details>` is used
   ONLY on /faqs, so global scoping is safe. */
details {
  border-bottom: 1px solid rgba(0, 0, 0, 0.13);
}
details > summary {
  padding-top: 18px;
  padding-bottom: 18px;
}