/* Page CSS for layouts/home.njk — lifted out of the layout so it is
   cached instead of re-sent inside every HTML response. */
.services-section .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; row-gap: 28px; align-items: center; }
    .services-intro { grid-row: 1 / 3; } /* span both rows so align-items:center centres it against cards+controls, not just the cards. ponytail: was position:sticky;top:96px — dropped so it scrolls with the section instead of drifting inside it */
    .services-intro .eyebrow { display: inline-block; margin-bottom: 12px; }
    .services-intro h2 { margin: 0 0 16px; }
    .services-intro .lead { margin: 0 0 24px; }
    /* Slider controls (prev + dots + next) centered under the card column, not the whole section. */
    .services-controls { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 28px; }
    .services-controls .m-dots[data-track] { margin: 0; } /* beats .m-dots[data-track]{margin-top:18px} so dots sit on the button centre-line */
    .services-nav__btn {
      width: 44px; height: 44px; border-radius: 999px;
      border: 1px solid rgba(19, 36, 54, 0.18);
      background: #fff; color: #132436;
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
      font-family: var(--font-sans);
    }
    .services-nav__btn:hover { background: #132436; color: #fff; border-color: #132436; }
    .services-nav__btn[disabled] { opacity: 0.35; cursor: default; }
    .services-nav__btn:hover[disabled] { background: #fff; color: #132436; border-color: rgba(19, 36, 54, 0.18); }
    .services-track-wrap { position: relative; overflow: hidden; }
    .services-track {
      display: flex; gap: 20px;
      overflow-x: auto; scroll-snap-type: x mandatory;
      padding: 4px 4px 16px; /* ponytail: dropped scroll-behavior:smooth — it made touch-swipe snap glide (laggy back-swipe); dots/arrows still smooth via explicit JS behavior:'smooth' */
      scrollbar-width: none; -ms-overflow-style: none; /* dots replace the bar on all viewports */
    }
    .services-track::-webkit-scrollbar { display: none; }
    .service-slide {
      flex: 0 0 300px; scroll-snap-align: start;
      text-decoration: none; color: inherit;
      border-radius: 14px; overflow: hidden;
      background: linear-gradient(160deg, #132436 0%, #1f3a55 100%);
      color: #fff; position: relative; min-height: 420px;
      padding: 28px; display: flex; flex-direction: column;
      box-shadow: 0 6px 28px rgba(19, 36, 54, 0.12);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      isolation: isolate;
    }
    .service-slide::before {
      content: ''; position: absolute; inset: 0; z-index: -2;
      background-size: cover; background-position: center;
      background-repeat: no-repeat;
    }
    .service-slide--formation::before { background-image: url('/assets/Formation.jpg'); }
    .service-slide--compliance::before { background-image: url('/assets/Compliance.jpg'); }
    .service-slide--immigration::before { background-image: url('/assets/Immigration.jpg'); }
    .service-slide--legal::before { background-image: url('/assets/Legal.jpg'); }
    .service-slide--formation,
    .service-slide--compliance,
    .service-slide--immigration,
    .service-slide--legal {
      background: none;
    }
    .service-slide::after {
      content: ''; position: absolute; inset: 0; z-index: -1;
      background:
        radial-gradient(circle at 85% 15%, rgba(223, 193, 135, 0.22), transparent 55%),
        linear-gradient(180deg, rgba(19, 36, 54, 0.55) 0%, rgba(19, 36, 54, 0.85) 60%, rgba(19, 36, 54, 0.94) 100%);
    }
    .service-slide:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(19, 36, 54, 0.25); }
    .service-slide__icon {
      width: 44px; height: 44px; border-radius: 999px;
      background: rgba(223, 193, 135, 0.18); color: var(--accent);
      display: inline-flex; align-items: center; justify-content: center;
      margin-bottom: 28px;
    }
    .service-slide__title {
      font-family: var(--font-serif);
      font-size: 1.7rem; line-height: 1.15; color: #fff;
      margin: 0 0 12px; font-weight: 500;
    }
    .service-slide__title a { color: inherit; text-decoration: none; }
    .service-slide__title a:hover { color: var(--accent); }
    .service-slide__items {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column;
      max-height: 0; opacity: 0; overflow: hidden;
      transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin 0.3s ease;
    }
    .service-slide__items li {
      font-size: 0.85rem; line-height: 1.45;
      color: rgba(255, 255, 255, 0.85);
      padding: 5px 0 5px 16px; position: relative;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .service-slide__items li:last-child { border-bottom: none; }
    .service-slide__items li a {
      color: inherit; text-decoration: none;
      display: block; transition: color 0.2s ease;
    }
    .service-slide__items li a:hover { color: var(--accent); }
    .service-slide__items li::before {
      content: ''; position: absolute;
      left: 0; top: 0.95em;
      width: 8px; height: 1px;
      background: var(--accent);
    }
    @media (hover: hover) {
      .service-slide:hover .service-slide__items {
        max-height: 420px; opacity: 1;
        margin: 4px 0 16px;
      }
    }
    @media (hover: none) {
      .service-slide__items { max-height: 420px; opacity: 1; margin: 4px 0 16px; }
    }
    #servicesTrack .service-slide__items {
      max-height: 420px; opacity: 1; margin: 4px 0 16px;
    }
    .service-slide__cta {
      margin-top: auto;
      font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em;
      text-transform: uppercase; color: var(--accent); text-decoration: none;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .service-slide__cta::after { content: '→'; transition: transform 0.2s ease; }
    .service-slide:hover .service-slide__cta::after { transform: translateX(4px); }
    @media (max-width: 900px) {
      .services-section .container { grid-template-columns: 1fr; gap: 32px; }
      .services-controls { grid-column: 1; } /* single column now — don't push into an implicit 2nd */
      .services-intro { grid-row: auto; } /* single column: intro/cards/controls stack — don't span */
      .service-slide { flex-basis: 84%; min-height: 320px; }
    }
    @media (max-width: 560px) {
      /* Phones: keep the row scroll (swipe) instead of stacking; one card per
         view with a peek, paginated by dots (.m-dots) below. */
      .services-track { scroll-snap-type: x mandatory; }
      .service-slide {
        flex: 0 0 86%;
        scroll-snap-align: center; /* ponytail: center (was start) — equal peek both sides so left/right swipe feel the same */
        min-height: 0;
        box-shadow: none;
      }
      .services-controls .services-nav__btn { display: none; } /* phones: dots only, swipe */
      .services-controls .m-dots[data-track] { margin-top: 18px; } /* card->dots = 6 (track pad) + 18 = 24px */
      /* Keep cards aligned while swiping: no sticky tap-lift, no shadow on touch */
      .service-slide:hover {
        transform: none;
        box-shadow: none;
      }
      /* Hide the gray horizontal scrollbar on phones (swipe instead) */
      .services-track { scrollbar-width: none; -ms-overflow-style: none; }
      .services-track::-webkit-scrollbar { display: none; }
      /* Match "Why Khonsu" dot spacing: drop the grid (mobile is 1-col anyway) so
         the dots aren't pushed down by the 32px row-gap, then shrink the track pad
         so card->dots = 6 + 18 = 24px. */
      .services-section .container { display: block; }
      .services-section .services-intro { margin-bottom: 32px; }
      .services-track { padding-bottom: 6px; }
    }
  
    /* Equal-height cards in "Most requested": force uniform row tracks so every card
       matches the tallest one (cards already stretch via .card{height:100%}). No effect
       in the <=560px m-snap carousel, which switches the grid to flex. */
    #most-requested .grid--3 { grid-auto-rows: 1fr; }
    /* White keeps the page's soft/white alternation: cream "Most requested" above,
       white reviews, cream testimonials below. */
    #reviews { background: #fff; }
    /* Two-column layout: copy on the left, review widget card on the right */
    #reviews .reviews-layout { display: grid; grid-template-columns: 1fr; gap: var(--s-7); align-items: center; }
    @media (min-width: 880px) {
      #reviews .reviews-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-8); }
    }
    #reviews h2 { margin: 0 0 var(--s-6); }
    /* Static, crawlable trust block — renders before (and independently of) the JS widget. */
    #reviews .trust-static__headline {
      margin: 0 0 4px;
      font-family: var(--font-sans);
      font-size: 1.3rem;
      font-weight: 400;
      color: var(--ink-soft);
    }
    #reviews .trust-static__headline strong { color: var(--accent, #dfc187); font-weight: 400; }
    #reviews .trust-static__sub { margin: 0 0 var(--s-6); }
    /* Push the "Read our Google reviews:" line down: double the original 4px gap
       above it to 8px (collapses with the headline's 4px margin-bottom -> 8px). */
    #reviews .review-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 0; }
    /* Keep the two location pills as one wrapping unit so a long label (e.g. the
       Russian "Читайте наши отзывы в Google:") can't split Phuket/Bangkok across lines. */
    #reviews .review-pill-group { display: inline-flex; gap: 10px; }
    #reviews .review-pill {
      display: inline-block;
      padding: 6px 20px;
      border: 1.5px solid var(--accent, #dfc187);
      border-radius: 999px;
      font-family: var(--font-sans);
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--khonsu-midnight, #132436);
      text-decoration: none;
    }
    #reviews .review-pill:hover { background: var(--accent, #dfc187); }
    /* On narrow phone screens shrink spacing/pills; the label may wrap above the
       pills, but the pill group stays together on its own line. */
    @media (max-width: 600px) {
      #reviews .review-pills { gap: 6px; }
      #reviews .review-pill-group { gap: 6px; }
      #reviews .review-pill { padding: 5px 13px; font-size: 0.8rem; }
    }
    #reviews .reviews-widget-card {
      background: #fff;
      border: 1px solid var(--line, #e3e0d8);
      border-radius: 28px;
      padding: 28px 20px;
      overflow: hidden;
      min-height: 320px;
      box-shadow: var(--shadow-soft);
      /* Center content so leftover min-height slack splits evenly top/bottom. */
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    /* Trustindex lays the rating summary and reviews out side by side; inside the
       card we stack them vertically — summary on top, reviews below. The card is
       ~500px wide, so the slider then fits one client review per slide. */
    #reviews .reviews-widget-card .ti-widget { margin: 0; }
    #reviews .reviews-widget-card .ti-widget-container { flex-direction: column !important; align-items: center !important; }
    #reviews .reviews-widget-card .ti-footer { width: 100% !important; max-width: none !important; justify-content: center !important; }
    #reviews .reviews-widget-card .ti-reviews-container { width: 100% !important; }
    #reviews .reviews-widget-card .ti-review-item { max-width: 100%; }
    /* Hide the Trustindex slider's native scrollbar — the widget shows its own dots,
       matching the m-snap mobile carousels elsewhere on the page. */
    #reviews .reviews-widget-card .ti-widget,
    #reviews .reviews-widget-card .ti-widget * {
      scrollbar-width: none;          /* Firefox / standard */
      -ms-overflow-style: none;       /* old Edge/IE */
    }
    #reviews .reviews-widget-card .ti-widget::-webkit-scrollbar,
    #reviews .reviews-widget-card .ti-widget *::-webkit-scrollbar {
      display: none;                  /* Chrome / Safari / WebKit */
    }
    /* Long gold rule under the review slide, echoing the one under the heading */
    #reviews .reviews-widget-card .ti-reviews-container::after {
      content: "";
      display: block;
      width: 70%;
      height: 3px;
      background: var(--accent, #dfc187);
      border-radius: 2px;
      margin: 20px auto 4px;
    }
    @media (max-width: 560px) {
      /* Drop the gold rule under the review slide on phones only. */
      #reviews .reviews-widget-card .ti-reviews-container::after { display: none; }
      /* Gold border on the reviews card, phones only. */
      #reviews .reviews-widget-card { border: 1px solid var(--accent, #dfc187); }
    }
  
    /* Testimonials — static, crawlable client quotes (plain HTML, deliberately no Review schema). */
    #testimonials .container { max-width: 1080px; }
    #testimonials h2 { text-align: center; margin: 0 0 8px; }
    #testimonials .testimonials-lead { text-align: center; margin: 0 auto 36px; max-width: 640px; }
    /* Horizontal carousel: show 3 cards on desktop, scroll left/right for the rest
       (mirrors the "In the press" .rankings carousel). */
    #testimonials .testimonials-grid {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding: 8px 4px 16px;
      scrollbar-width: none; -ms-overflow-style: none; /* dots replace the bar */
      scroll-snap-type: x mandatory;
    }
    #testimonials .testimonial {
      flex: 0 0 calc((100% - 2 * 20px) / 3);
      min-width: 0;
      scroll-snap-align: start;
      margin: 0;
      background: #fff;
      border: 1px solid rgba(19, 36, 54, 0.08);
      border-top: 3px solid var(--accent, #dfc187);
      border-radius: 10px;
      padding: 24px 22px 20px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 6px 18px rgba(19, 36, 54, 0.05);
    }
    #testimonials .testimonial p { margin: 0 0 14px; flex: 1; }
    #testimonials .testimonial footer { font-size: 0.88rem; color: var(--khonsu-midnight, #132436); font-weight: 600; }
    #testimonials .testimonials-grid::-webkit-scrollbar { display: none; }
    @media (max-width: 1024px) {
      #testimonials .testimonial { flex-basis: calc((100% - 20px) / 2); }
    }
    @media (max-width: 720px) {
      #testimonials .testimonial { flex-basis: 82%; }
    }
    @media (max-width: 560px) {
      /* Match the other mobile carousels: no brown scrollbar, no card shadow,
         card->dots = 6 + 18 = 24px. ID-scoped to beat the base rules above. */
      #testimonials .testimonials-grid { scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 6px; }
      #testimonials .testimonials-grid::-webkit-scrollbar { display: none; }
      #testimonials .testimonial { box-shadow: none; scroll-snap-align: center; } /* ponytail: center (ID beats base start) = equal peek both sides on phones */
    }
    /* Carousel wrapper reserves side gutters for the arrows (mirror .rankings-carousel). */
    #testimonials .testimonials-carousel { position: relative; padding-inline: 56px; }
    @media (max-width: 720px) {
      #testimonials .testimonials-carousel { padding-inline: 40px; }
    }
    @media (max-width: 560px) {
      #testimonials .testimonials-carousel { padding-inline: 0; }
      /* ID-scoped so it beats the shared `.rankings-nav, .testimonials-nav { display:flex }`
         base rule, which lives in a later <style> block (equal specificity → source order). */
      #testimonials .testimonials-nav { display: none; }
    }
  
    /* "In the press" cards — white surface with a gold hairline border (brand CI).
       Source label and link stay gold; rank number + title stay midnight-navy,
       inheriting the base .ranking colours. */
    .rankings .ranking {
      background: #fff;
      border: 1.5px solid var(--khonsu-gold);
      box-shadow: 0 6px 18px rgba(19, 36, 54, 0.05);
    }
    .rankings .ranking:hover {
      border-color: var(--khonsu-gold-dim);
      box-shadow: 0 10px 28px rgba(19, 36, 54, 0.12);
      transform: translateY(-2px);
    }

    /* Horizontal carousel: show 3 cards, scroll left/right for the rest. */
    .rankings {
      display: flex;
      gap: var(--s-4);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding: 8px 4px 16px;
      scrollbar-width: none; -ms-overflow-style: none; /* dots replace the bar */
      scroll-snap-type: x mandatory;
    }
    .rankings .ranking {
      flex: 0 0 calc((100% - 2 * var(--s-4)) / 3);
      min-width: 0;
      scroll-snap-align: start;
    }
    .rankings::-webkit-scrollbar { display: none; }
    @media (max-width: 1024px) {
      .rankings .ranking { flex-basis: calc((100% - var(--s-4)) / 2); }
    }
    @media (max-width: 720px) {
      .rankings .ranking { flex-basis: 82%; }
    }

    /* Carousel arrow buttons */
    /* Reserve side gutters so the arrows sit beside the cards, not over them. */
    .rankings-carousel { position: relative; padding-inline: 56px; }
    .rankings-nav,
    .testimonials-nav {
      position: absolute;
      top: calc(50% - 8px);
      transform: translateY(-50%);
      z-index: 3;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      color: var(--khonsu-midnight);
      background: #fff;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
      transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
    }
    .rankings-nav:hover,
    .testimonials-nav:hover { background: var(--khonsu-midnight); color: #fff; }
    .rankings-nav--prev,
    .testimonials-nav--prev { left: 6px; }
    .rankings-nav--next,
    .testimonials-nav--next { right: 6px; }
    .rankings-nav:disabled,
    .testimonials-nav:disabled { opacity: 0.35; pointer-events: none; }
    @media (max-width: 720px) {
      /* On small screens the cards already fill the row, so tuck the gutters in. */
      .rankings-carousel { padding-inline: 40px; }
      .rankings-nav--prev,
      .testimonials-nav--prev { left: 0; }
      .rankings-nav--next,
      .testimonials-nav--next { right: 0; }
    }
    /* Pagination dots — shown on all viewports (arrows dropped; dots navigate). */
    .rankings-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
    /* Namespaced class — a plain ".dot" collides with the Trustindex reviews
       widget's own slider dots (which set width/background with !important). */
    .rankings-dots .rankings-dot {
      width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
      background: rgba(19, 36, 54, 0.18); cursor: pointer;
      transition: width 0.25s ease, background 0.25s ease;
    }
    .rankings-dots .rankings-dot--active { width: 22px; border-radius: 99px; background: var(--khonsu-gold); }
    /* Phones (iPhone 12 Pro ~390px and similar 360-430px): drop the arrow gutters,
       hide the arrows, and widen each card so it nearly fills the screen with a small
       peek of the next. Swipe to scroll; pagination dots show the position. */
    @media (max-width: 560px) {
      .rankings-carousel { padding-inline: 0; }
      .rankings-nav { display: none; }
      .rankings .ranking { flex-basis: 86%; scroll-snap-align: center; } /* ponytail: center = equal swipe + last card reachable (no end-lag) */
      /* Match the other mobile carousels: no brown scrollbar, no card shadow,
         card->dots = 6 + 18 = 24px (track pad 16 -> 6). */
      .rankings { scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 6px; }
      .rankings::-webkit-scrollbar { display: none; }
      .rankings .ranking { box-shadow: none; }
      .rankings .ranking:hover { box-shadow: none; transform: none; }
    }

    /* ---- Generic opt-in mobile swipe carousel + pagination dots ----
       Add class "m-snap" to any card grid/track and an ".m-dots" sibling after it.
       Desktop/tablet keep the original grid; only phones (<=560px) get swipe + dots. */
    .m-dots { display: none; }
    /* Scroll carousels (services, testimonials) carry data-track — show their dots on
       all viewports. The mobile-only .m-snap grids have no data-track, so stay hidden. */
    .m-dots[data-track] { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
    .m-dots .m-dot {
      width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
      background: rgba(19, 36, 54, 0.18); cursor: pointer;
      transition: width 0.25s ease, background 0.25s ease;
    }
    .m-dots .m-dot--active { width: 22px; border-radius: 99px; background: var(--khonsu-gold); }
    @media (max-width: 560px) {
      .m-snap {
        display: flex !important;          /* beats .grid (grid) and the #testimonials ID rule */
        flex-direction: row !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory; /* ponytail: mandatory = crisp one-card snapping; center align below keeps both ends reachable so back-swipe + last card don't yank/lag */
        -webkit-overflow-scrolling: touch;
        gap: 16px !important;
        padding-bottom: 6px;
        scrollbar-width: none;
      }
      .m-snap::-webkit-scrollbar { display: none; }
      /* height:auto neutralises .card's height:100% so flex align-items:stretch
         makes every card in the row the same height (matches the tallest). */
      .m-snap { align-items: stretch; }
      .m-snap > * { flex: 0 0 86% !important; scroll-snap-align: center; min-width: 0; height: auto !important; }
      .m-snap > .card { border-color: var(--accent); }  /* ponytail: persist the :hover gold border on mobile (touch never fires :hover) */
      /* ponytail: kill the sticky-:hover lift/shadow/arrow so a tap changes nothing */
      .m-snap > .card:hover { transform: none; box-shadow: none; }
      .m-snap > .card:hover .card__link::after { transform: none; }
      .m-dots { display: flex; } /* reveal the no-data-track mobile-only grids too (styles are at base) */
    }
  
    .clients-section h2::after { margin-left: auto; margin-right: auto; } /* กึ่งกลางเส้นทองใต้หัวข้อ (ปกติชิดซ้าย) */
    .logo-marquee {
      width: 100%;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    }
    .logo-marquee__track {
      display: flex;
      align-items: center;
      width: max-content;
      animation: logo-marquee-scroll 60s linear infinite;
    }
    .logo-marquee__item {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 64px;
      margin-right: 56px; /* per-item gap, not container gap: keeps 40 gaps for 40 items so translateX(-50%) is an exact loop period */
    }
    .logo-marquee__item img {
      max-height: 56px;
      max-width: 160px;
      width: auto;
      height: auto;
      object-fit: contain;
      background: transparent;
      opacity: 0.9;
      transition: opacity 0.2s ease;
    }
    @media (hover: hover) and (pointer: fine) {
      .logo-marquee__item:hover img { opacity: 1; }
    }
    @keyframes logo-marquee-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .logo-marquee__track { animation: none; }
    }