/* Premium service-page redesign (piloted on BOI Services, now shared by
   every redesigned service page) - matches the homepage/Our Services
   visual language: Heebo type, #1f2933 navy, #fd5c5c red accent, bold
   headings, brand-colored icon badges instead of plain WordPress
   paragraph/bullet-list styling. */

.svc-hero {
  padding: 64px 0 40px;
  text-align: center;
}

.svc-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fd5c5c;
  margin-bottom: 12px;
}

.svc-hero-title {
  /* Matches the site's real big display title (e.g.
     /service/statutory-auditing/'s <h1 class="h2 section-title">,
     "Statutory, Financial And Tax Audits") - the earlier 28px match was
     against the wrong element (the smaller title inside the old gray
     gradient box, not the real page h1). */
  font-family: 'Grit', sans-serif;
  font-weight: 100;
  font-size: 54px;
  line-height: 1.3;
  color: #1f2933;
  max-width: 780px;
  margin: 0 auto;
}

.svc-hero-title .svc-accent {
  color: #fd5c5c;
}

@media (max-width: 640px) {
  .svc-hero-title {
    font-size: 34px;
  }
}

/* Decorative title-accent icon (the small red "speed lines" mark used
   next to section titles sitewide, e.g. footer "Our Contacts"). Starts
   as an empty placeholder - assets/js/service-page-redesign.js loads the
   real Signature2.json Lottie animation into it and plays it on scroll,
   same as the homepage's own inline section-title icons. Square to match
   the animation's own 512x512 canvas. */
.svc-accent-icon {
  /* The real sitewide instance of this icon is position:absolute inside
     a position:relative heading, sized much larger (168x168px) than it
     visually appears - the drawn strokes sit off-center within the
     animation's full 512x512 canvas. A same-size inline-flow element
     (even with overflow:visible) pushes/overlaps whatever follows the
     heading, since its box is as tall as the rendered icon. Taking the
     same zero-footprint-anchor + absolutely-positioned-child approach
     here avoids that entirely. */
  display: inline-block;
  position: relative;
  width: 0;
  height: 0;
  vertical-align: top;
}

.svc-accent-icon svg {
  /* service-page-redesign.js crops the SVG's viewBox to just the drawn
     strokes (Lottie otherwise always renders its full, mostly-empty
     512x512 canvas) - so these dimensions are the actual visible mark's
     size, not a box it floats inside of. Position/size tuned to match the
     real site's own "Our Executive Team" heading instance (54px heading,
     /accountant-bangkok/): the mark floats entirely ABOVE the last
     letter - its bottom edge sits ~30px above the text's own bottom, its
     top ~27px above the text's own top, overlapping the letter only
     slightly on the left (~4px) - not beside the word at text height like
     an earlier attempt had it. Expressed in em (relative to the icon's
     own font-size, which inherits the heading's) rather than a fixed px
     size, so it scales down on this page's smaller section headings
     (28px) instead of staying hero-sized everywhere.

     The raw Signature2.json shape (undrawn/uncropped) tilts "\" - but
     every real instance of it sitewide applies its own CSS rotation on
     top (135deg is the generic default used for most homepage section
     titles like "In Numbers" - home.css; "Our Executive Team" uses 120deg
     and "Our Vision" 122deg, so it's hand-tuned per instance but always
     rotated). Without this the icon renders as the raw unrotated shape,
     which reads as tilted the opposite way from every real instance. */
  /* !important: Lottie sets its own inline transform (translate3d) on
     the generated <svg>, which otherwise wins over this rule. */
  transform: rotate(135deg) !important;
  position: absolute;
  top: -0.19em;
  left: -0.07em;
  width: 0.88em !important;
  height: 1.07em !important;
}

/* Hero title's own underline mark (Signature4.json, not the inline
   section-title sparkle above) - a real sibling block below the <h1>,
   not an inline anchor inside it, since it doesn't need to dodge
   following inline text the way the sparkle does. Size/gap measured
   directly off the real /accountant-bangkok/ hero (same 54px font as
   this page's own hero), after service-page-redesign.js crops its
   viewBox to the drawn squiggle: centered under the title, ~17px below
   it, 124x17px (a wide, thin horizontal mark). Not em-based - this
   placeholder is a sibling of .svc-hero-title, not a child, so it
   doesn't inherit the title's font-size; sized in px instead and
   scaled down to match at the title's own 640px breakpoint below. */
.svc-hero-signature {
  display: block;
  width: 124px;
  height: 17px;
  margin: 17px auto 0;
}

.svc-hero-signature svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 640px) {
  .svc-hero-signature {
    width: 78px;
    height: 11px;
    margin-top: 11px;
  }
}

.svc-badges {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.svc-badge {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  color: #fff;
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}

.svc-badge--navy {
  background: #1f2933;
}

.svc-badge--red {
  background: #fd5c5c;
  margin-top: 24px;
}

@media (max-width: 640px) {
  .svc-badge {
    width: 100px;
    height: 100px;
    font-size: 12px;
  }
  .svc-badge--red {
    margin-top: 12px;
  }
}

/* Hero variant: "stat" - same centered eyebrow/title as the default
   (badge) hero, but followed by a row of real company stats instead of
   circular badges. Reuses the real site's own stat figures (its
   /accountant-bangkok/ "In Numbers" strip: 13+ years, 50+ staff, 170+
   clients) rather than inventing page-specific numbers, so every claim
   stays truthful. Deliberately skips that component's count-up JS
   (about-us.js, not loaded on these pages) - a static number reads just
   as well here and avoids a new script dependency. */
.svc-hero--stat .svc-stats {
  display: flex;
  justify-content: center;
  gap: 56px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.svc-stat {
  text-align: center;
}

.svc-stat-value {
  display: block;
  font-family: 'Grit', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.2;
  color: #1f2933;
}

.svc-stat-label {
  display: block;
  margin-top: 4px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #3d4552;
}

@media (max-width: 640px) {
  .svc-hero--stat .svc-stats {
    gap: 32px;
  }
  .svc-stat-value {
    font-size: 30px;
  }
}

/* Hero variant: "split" - left-aligned title/copy/CTA next to a navy
   "at a glance" fact card on the right, instead of a centered title
   over badges/stats. Mirrors the homepage's own asymmetric hero
   (text column + a distinct right-hand panel) rather than introducing
   an unrelated layout. */
.svc-hero--split {
  text-align: left;
  padding: 64px 0;
}

.svc-hero--split .svc-hero-title {
  margin: 0;
  max-width: 560px;
}

.svc-hero--split .svc-eyebrow {
  display: block;
}

.svc-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 56px;
  align-items: center;
  margin-top: 32px;
}

.svc-split-copy p {
  font-family: 'Heebo', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #3d4552;
  max-width: 540px;
  margin: 0 0 28px;
}

.svc-split-cta {
  display: inline-block;
  background: #fd5c5c;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 16px 36px;
  border-radius: 100px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.svc-split-cta:hover {
  background: #e2443f;
  color: #fff;
  text-decoration: none;
}

.svc-split-panel {
  background: #1f2933;
  border-radius: 24px;
  padding: 36px 32px;
}

.svc-split-fact {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.svc-split-fact:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.svc-split-fact:first-child {
  padding-top: 0;
}

.svc-split-fact-label {
  display: block;
  font-family: 'Heebo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fd5c5c;
  margin-bottom: 6px;
}

.svc-split-fact-value {
  display: block;
  font-family: 'Heebo', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

@media (max-width: 900px) {
  .svc-split-grid {
    grid-template-columns: 1fr;
  }
  .svc-hero--split {
    text-align: center;
  }
  .svc-hero--split .svc-hero-title {
    margin: 0 auto;
  }
  .svc-split-copy p {
    margin-left: auto;
    margin-right: auto;
  }
}

.svc-content {
  font-family: 'Heebo', sans-serif;
  color: #1f2933;
}

.svc-block {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 20px;
}

.svc-block p {
  font-size: 16px;
  line-height: 1.7;
  color: #3d4552;
}

.svc-intro {
  font-size: 18px !important;
  color: #1f2933 !important;
}

.svc-heading {
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #1f2933;
  margin: 0 0 16px;
}

/* "What is BOI in Thailand?" benefits now reuse the exact same
   .svc-why/.svc-why-grid/.svc-why-item block below ("Why Choose
   B-accounting") instead of a bespoke layout - see the HTML, which
   applies those same classes to both sections. */

/* Service steps timeline ("Our BOI Services in Bangkok") */
.svc-timeline {
  margin-top: 24px;
}

.svc-step {
  position: relative;
  padding: 0 0 32px 44px;
  border-left: 2px solid #e5e5e5;
  margin-left: 16px;
}

.svc-step--last {
  border-left-color: transparent;
  padding-bottom: 0;
}

.svc-step-num {
  position: absolute;
  left: -19px;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1f2933;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-step-body h3 {
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #1f2933;
  margin: 4px 0 8px;
}

.svc-step-body p {
  margin: 0 0 8px;
}

.svc-step-body ul {
  margin: 0 0 8px;
  padding-left: 20px;
  color: #3d4552;
}

/* Alternate steps layout: a grid of numbered cards instead of the
   connected vertical timeline above - picked per page so the process
   section doesn't look identical on every redesigned page either. */
.svc-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 900px) {
  .svc-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .svc-step-grid {
    grid-template-columns: 1fr;
  }
}

.svc-step-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 28px 24px;
}

.svc-step-card-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1f2933;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 16px;
}

.svc-step-card h3 {
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #1f2933;
  margin: 0 0 8px;
}

.svc-step-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #3d4552;
  margin: 0 0 8px;
}

.svc-step-card ul {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 14px;
  color: #3d4552;
}

/* Why-us dark strip */
.svc-why {
  background: #1f2933;
  padding: 48px 20px;
}

.svc-why-inner {
  max-width: 820px;
  margin: 0 auto;
}

.svc-heading--light {
  color: #fff;
}

.svc-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
}

@media (max-width: 640px) {
  .svc-why-grid {
    grid-template-columns: 1fr;
  }
}

.svc-why-item {
  color: #fff;
  font-size: 15px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.svc-why-item::before {
  content: '\2713';
  color: #fd5c5c;
  font-weight: 700;
  flex-shrink: 0;
}

/* FAQ */
.svc-faq {
  margin-top: 20px;
}

.svc-faq-item {
  border-bottom: 1px solid #e5e5e5;
  padding: 18px 0;
}

.svc-faq-item summary {
  font-weight: 700;
  font-size: 16px;
  color: #1f2933;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.svc-faq-item summary::-webkit-details-marker {
  display: none;
}

.svc-faq-item summary::after {
  content: '+';
  color: #fd5c5c;
  font-size: 22px;
  font-weight: 400;
  flex-shrink: 0;
}

.svc-faq-item[open] summary::after {
  content: '\2212';
}

.svc-faq-item p {
  margin: 12px 0 0;
  color: #3d4552;
}

/* Final CTA band - same background as "Why Choose B-accounting" (.svc-why)
   below it per explicit request */
.svc-final-cta {
  background: #1f2933;
  padding: 56px 20px;
  text-align: center;
}

.svc-final-cta h2 {
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #fff;
  margin: 0 0 14px;
}

.svc-final-cta p {
  color: #fff;
  opacity: 0.92;
  max-width: 620px;
  margin: 0 auto 24px;
  font-size: 16px;
  line-height: 1.6;
}

.svc-cta-button {
  display: inline-block;
  /* Red, not navy - the final CTA band's own background is now navy
     (matches .svc-why), so the button needs to be the contrasting color
     instead of blending into it. */
  background: #fd5c5c;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 16px 40px;
  border-radius: 100px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.svc-cta-button:hover {
  background: #e2443f;
  color: #fff;
  text-decoration: none;
}

/* Secondary outline button for the final CTA's "dual" variant - a
   second way to reach us (a phone call) alongside the primary filled
   button, reusing the real sitewide phone number. */
.svc-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.svc-cta-button--outline {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 16px 36px;
  border-radius: 100px;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.svc-cta-button--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}

/* Alternate "benefits" layout: a lighter grid of small icon tiles
   instead of the homepage's big numbered-card component above - used
   on pages where that heavier treatment would otherwise repeat a look
   already used elsewhere on the same page (the hero) or on a
   neighboring page in the same hero-style group. */
.svc-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .svc-icon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .svc-icon-grid {
    grid-template-columns: 1fr;
  }
}

.svc-icon-tile {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 28px 24px;
}

.svc-icon-tile-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fd5c5c;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 16px;
}

.svc-icon-tile h4 {
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #1f2933;
  margin: 0 0 8px;
}

.svc-icon-tile p {
  font-size: 14px;
  line-height: 1.6;
  color: #3d4552;
  margin: 0;
}

.svc-icon-tile a {
  color: inherit;
  text-decoration: none;
}

.svc-icon-tile a:hover {
  text-decoration: underline;
}

/* Trim the homepage-tuned .section-why-us padding (200px/174px - sized
   for a full standalone homepage section) down to fit as one sub-section
   among several on this page. Everything else about the component
   (colors, card layout, GSAP scroll-reveal) is reused as-is. Generic
   across every redesigned service page, not just the BOI pilot it was
   first built for. */
.svc-benefits.section-why-us {
  padding: 12px 0 56px;
}

.svc-benefits .section-description {
  margin-bottom: 48px;
}

/* The component's own default dark card color (#1f2933, cards 2 and 3)
   reads as near-black - use this medium navy-blue instead for this
   instance (color-matched directly from the requested reference, a
   lighter/more-blue navy than the site's own #1f2933). Matches the
   original rule's own specificity/selector shape so it overrides
   cleanly regardless of stylesheet order. */
.svc-benefits.section-why-us .section-items .item:nth-child(2) .item-inner,
.svc-benefits.section-why-us .section-items .item:nth-child(3) .item-inner {
  background: #23394b;
}

/* A card title can link to that topic's own page (e.g. Tax Preparation's
   "Corporate Income Tax" card links to /tax/corporate-income-tax/) - the
   component's own CSS sets .item-title to white text, but a nested <a>
   gets the browser's own link color by default rather than inheriting
   it, which read as a faded mismatch against the other (unlinked) card
   titles. */
.svc-benefits .item-title a {
  color: inherit;
  text-decoration: none;
}

.svc-benefits .item-title a:hover {
  text-decoration: underline;
}