/* ============================================================
   R.E. Enterprise — geo landing pages stylesheet ("Trust Blue")
   Shared by all 61 district pages (geo-pages/{slug}/index.html),
   generated from geo-pages/template.html. Same design tokens and
   chrome as home.css / tools-style.css, plus components specific
   to geo pages: two-card hero CTAs, before/after split cards, FAQ
   accordion, and a mobile sticky call/LINE bar.
   ============================================================ */

:root {
  --ink: oklch(24% 0.03 255);
  --ink-soft: oklch(38% 0.03 255);
  --mute: oklch(55% 0.02 255);
  --bg: oklch(98% 0.004 255);
  --bg-soft: oklch(95% 0.01 255);
  --paper: #FFFFFF;
  --line: oklch(90% 0.01 255);
  --accent: oklch(48% 0.14 255);
  --accent-soft: oklch(94% 0.03 255);
  --accent-ink: #FFFFFF;
  --green: #06C755;
  --radius: 10px;
  --max: 1320px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
/* Some components below set `display: grid/flex` on classes that also carry
   the `hidden` attribute for lang-th/lang-en toggling (e.g. .rd-faqs,
   .rd-ctype-grid, .rd-subpills). Author rules of equal specificity beat the
   UA stylesheet's [hidden]{display:none}, so without this both languages'
   copies were rendering at once. Force it. */
[hidden] { display: none !important; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans Thai', 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
.rd-wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.rd-accent { color: var(--accent); }
.rd-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; animation: rd-pulse 1.8s infinite; }
@keyframes rd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Nav */
.rd-nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.rd-nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 76px; }
.rd-nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.rd-nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); cursor: pointer; padding: 0; flex-shrink: 0; }
.rd-nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.rd-logo { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; color: var(--ink); }
.rd-logo-mark { width: 36px; height: 36px; flex-shrink: 0; }
.rd-logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.rd-nav-links { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
.rd-nav-links a:hover { color: var(--accent); }
.rd-nav-lang-btn { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); padding: 6px 12px; border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: all .15s; }
.rd-nav-lang-btn:hover { border-color: var(--accent); color: var(--accent); }
.rd-nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; transition: background .15s; }
.rd-nav-cta:hover { background: var(--ink); }

/* Buttons */
.rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: all .15s ease; }
.rd-btn-primary { background: var(--accent); color: #fff; }
.rd-btn-primary:hover { background: oklch(42% 0.14 255); }
.rd-btn-line { background: var(--green); color: #fff; }
.rd-btn-line:hover { filter: brightness(0.93); }
.rd-btn-secondary { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.rd-btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* Placeholder photo blocks (shared pattern with home.css/tools-style.css) */
.rd-ph { background: repeating-linear-gradient(135deg, var(--bg-soft) 0 10px, var(--paper) 10px 20px); border: 1px solid var(--line); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; }
.rd-ph-label { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); background: var(--paper); padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line); }

/* Hero — matches home.css hero visual language exactly (single eyebrow pill,
   title+accent, lede, two-button actions with small notes, photo + floating
   badge). Breadcrumb + sub-area pills are geo-specific additions kept for
   navigation/SEO/content value; font sizes here are bumped to the geo-page
   ≥14px minimum (home.css itself uses 13px in a couple of spots since the
   homepage isn't bound by that rule). */
.rd-hero { padding: 56px 0 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.rd-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--mute); margin-bottom: 22px; }
.rd-breadcrumb a:hover { color: var(--accent); }
.rd-breadcrumb .sep { opacity: .5; }
.rd-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: end; }
.rd-hero-marquee-mobile { display: none; }
.rd-hero-eyebrow { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); background: var(--accent-soft); padding: 7px 14px; border-radius: 999px; margin-bottom: 22px; }
.rd-hero-title { font-size: clamp(34px, 5vw, 64px); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.rd-hero-title.lang-en { text-transform: uppercase; }
.rd-hero-title .rd-accent { color: var(--accent); }
.rd-hero-sub { margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; white-space: pre-line; }
.rd-hero-copy { padding-bottom: 64px; align-self: center; }

.rd-subpills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.rd-subpill { font-size: 14px; font-weight: 500; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: var(--bg-soft); }

.rd-hero-actions { display: flex; gap: 18px; margin-top: 34px; flex-wrap: wrap; }
.rd-cta-short { display: none; }
.rd-hero-cta-block { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rd-hero-cta-block small { font-size: 14px; color: var(--mute); padding-left: 6px; }
.rd-line-tag { display: inline-flex; align-items: center; gap: 8px; }
.rd-line-icon { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; }
.rd-hero-visual { position: relative; }
.rd-hero-photo { width: 100%; height: auto; aspect-ratio: 4/4.6; object-fit: contain; object-position: bottom; display: block; }
.rd-hero-badge { position: absolute; left: -16px; bottom: -16px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 12px 32px -12px oklch(24% 0.03 255 / 0.25); border-radius: var(--radius); padding: 16px 20px; text-align: center; }
.rd-hero-badge b { display: block; font-size: 22px; color: var(--accent); font-weight: 700; }
.rd-hero-badge small { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); }

/* Gallery — before/after work showcase (shared visual system with homepage's rd-gal-*) */
.rd-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rd-gal-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rd-gal-img { display: flex; aspect-ratio: 4/3; }
.rd-gal-half { position: relative; flex: 1; overflow: hidden; background: oklch(88% 0.02 255); }
.rd-gal-half img, .rd-gal-half video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-gal-badge { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; background: oklch(20% 0.02 255 / 0.6); color: #fff; }
.rd-gal-badge-after { background: var(--accent); }
.rd-gal-meta { padding: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.rd-gal-title { font-weight: 700; font-size: 16px; }
.rd-gal-sub { font-size: 16px; color: var(--mute); margin-top: 4px; }
.rd-gal-pill { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: var(--bg-soft); padding: 5px 10px; border-radius: 999px; flex-shrink: 0; }
#gallery-section { display: none; }
#gallery-section.has-items { display: block; }

/* Trusted-by marquee */
.rd-marquee-wrap { background: var(--paper); border-top: 1px solid var(--line); }
.rd-marquee-eyebrow { text-align: center; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); padding: 24px 0 14px; }
.rd-marquee { background: var(--ink); overflow: hidden; height: 120px; display: flex; align-items: center; }
.rd-marquee-track { display: flex; align-items: center; gap: 64px; white-space: nowrap; animation: rd-marquee-scroll 34s linear infinite; }
.rd-marquee-logo { display: flex; align-items: center; height: 90px; flex-shrink: 0; }
.rd-marquee-logo img { height: 90px; width: auto; max-width: 220px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.75; }
@keyframes rd-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .rd-marquee-track { animation-duration: 18s; } }

/* Section head */
.rd-section { padding: 72px 0; border-top: 1px solid var(--line); }
.rd-section-soft { background: var(--bg-soft); }
.rd-section-head { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; margin-bottom: 44px; }
.rd-section-title { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.rd-section-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mute); text-align: right; max-width: 160px; padding-top: 8px; }
.rd-section-body { font-size: 16px; line-height: 1.75; color: var(--ink-soft); max-width: 68ch; margin-bottom: 36px; }

/* Stats */
.rd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.rd-stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 22px; }
.rd-stat-num { font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.rd-stat-label { margin-top: 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); }

/* Customer type cards */
.rd-ctype-grid { display: flex; gap: 12px; margin-top: 28px; justify-content: center; }
.rd-ctype-item { flex: 1 1 0; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 8px; background: var(--paper); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; max-width: 200px; }
.rd-ctype-icon { font-size: 26px; line-height: 1; }
.rd-ctype-num { display: none; }
.rd-ctype-label { font-weight: 700; font-size: 16px; }

/* How it works (dark) */
.rd-how { background: var(--ink); color: #EDEFF5; padding: 72px 0; }
.rd-how-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.rd-how-title { font-size: clamp(30px, 4vw, 48px); font-weight: 700; line-height: 1.15; }
.rd-how-sub { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 14px; }
.rd-steps { display: grid; gap: 22px; }
.rd-step { display: grid; grid-template-columns: 40px 1fr; gap: 16px; }
.rd-step-num { font-size: 15px; font-weight: 700; color: var(--accent); }
.rd-step-title { font-weight: 700; font-size: 17px; }
.rd-step-desc { font-size: 14px; color: rgba(255,255,255,0.75); margin-top: 4px; line-height: 1.6; }

/* FAQ accordion */
.rd-faqs { display: grid; }
.rd-faq { border-top: 1px solid var(--line); }
.rd-faq:last-child { border-bottom: 1px solid var(--line); }
.rd-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr 32px; gap: 18px; padding: 24px 4px; align-items: center; font-weight: 600; font-size: 16px; user-select: none; }
.rd-faq summary::-webkit-details-marker { display: none; }
.rd-faq summary:hover { color: var(--accent); }
.rd-faq-idx { font-size: 13px; color: var(--mute); font-weight: 600; }
.rd-faq-toggle { font-size: 20px; color: var(--accent); text-align: right; transition: transform .2s ease; line-height: 1; }
.rd-faq[open] > summary .rd-faq-toggle { transform: rotate(45deg); }
.rd-faq[open] > summary { color: var(--accent); }
.rd-faq-body { padding: 0 4px 24px 62px; font-size: 15px; color: var(--ink-soft); line-height: 1.7; max-width: 70ch; }

/* Nearby chips */
.rd-area-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.rd-area-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--paper); transition: all .15s; }
.rd-area-chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Final CTA (dark, centered) */
.rd-finalcta { background: var(--ink); color: #EDEFF5; padding: 72px 0; text-align: center; }
.rd-finalcta-inner { display: grid; justify-items: center; gap: 26px; }
.rd-finalcta-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.rd-finalcta-title { font-size: clamp(28px, 3.8vw, 46px); font-weight: 700; line-height: 1.2; max-width: 20ch; text-wrap: balance; }
.rd-finalcta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* Footer */
.rd-footer { padding: 56px 0 96px; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .rd-footer { padding-bottom: 28px; } }
.rd-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.rd-footer-logo { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.rd-footer-desc { font-size: 14px; color: var(--mute); line-height: 1.65; max-width: 36ch; }
.rd-footer h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.rd-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.rd-footer li a:hover { color: var(--accent); }
.rd-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--mute); }

@media (min-width: 561px) and (max-width: 1200px) {
  /* Tablet only (mobile keeps its own narrower viewport which already wraps
     the headline to 3 lines naturally). Constrain width so line 1 wraps to
     2 lines here too (3 total with the accent line), and keep the checklist
     tight so no single item wraps past its own line. */
  .rd-hero-title { max-width: 560px; margin-left: auto; margin-right: auto; }
  .rd-hero-sub { max-width: 480px; font-size: 19px; }
}
@media (max-width: 1200px) {
  /* .rd-hero-grid's base rule sets align-items:end for the desktop 2-col
     grid; that's a cross-axis (horizontal, once flex-direction is column)
     rule that survives here unless reset, which shrank+right-aligned each
     stacked item instead of letting it fill the row and center. Reset it. */
  .rd-hero-grid { display: flex; flex-direction: column; align-items: center; }
  .rd-hero-marquee-mobile { display: block; margin: 0 -32px; width: calc(100% + 64px); overflow: hidden; }
  .rd-marquee-outer { display: none; }
  .rd-hero-copy { text-align: center; padding-bottom: 32px; align-self: auto; width: 100%; }
  .rd-hero-sub { margin-left: auto; margin-right: auto; }
  .rd-subpills { justify-content: center; }
  .rd-hero-actions { justify-content: center; }
  .rd-hero-cta-block { align-items: center; }
}

@media (max-width: 900px) {
  .rd-how-grid { grid-template-columns: 1fr; }
  .rd-nav-toggle { display: flex; }
  .rd-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 32px -20px oklch(24% 0.03 255 / 0.3);
    padding: 4px 32px 12px;
    z-index: 10;
  }
  .rd-nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .rd-nav-links a:last-child { border-bottom: 0; }
  .rd-nav-open .rd-nav-links { display: flex; }
  .rd-stats { grid-template-columns: 1fr 1fr; }
  .rd-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .rd-hero-eyebrow > span:last-child { display: none; }
  .rd-gallery { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rd-wrap { padding: 0 18px; }
  .rd-section { padding: 44px 0; }
  .rd-how { padding: 44px 0; }
  .rd-hero-marquee-mobile { margin: 0 -18px; width: calc(100% + 36px); }
  .rd-logo-text { display: none; }
  .rd-nav-lang-btn { padding: 5px 10px; font-size: 12px; }
  .rd-nav-cta { padding: 10px 16px; font-size: 13px; }
  .rd-hero-actions { flex-direction: row; gap: 10px; flex-wrap: nowrap; margin-top: 20px; justify-content: stretch; }
  .rd-hero-cta-block { align-items: stretch; flex: 1 1 0; min-width: 0; }
  .rd-hero-cta-block .rd-btn { width: 100%; padding: 14px 10px; font-size: 14px; gap: 6px; }
  .rd-hero-cta-block small { text-align: center; }
  .rd-cta-full { display: none; }
  .rd-cta-short { display: inline; }
  .rd-hero-sub { font-size: 15px; }
}