/* ── seo/website-design-thailand — page-scoped editorial redesign ──
   Loaded only on this page, after shared styles.v2.css. Does not touch
   :root/body tokens — every rule here is scoped under .wdt- prefixed
   classes or [data-wdt-page] to avoid leaking into the shared dark theme.
   Reused by the future Thai-language variant of this page (same classes). */

[data-wdt-page]{
  --wdt-cream:#F5F2EC;
  --wdt-navy:#0B1E3D;
  --wdt-navy-2:#132A4D;
  --wdt-ink:#1A2233;
  --wdt-muted:#5B6472;
  --wdt-gold:#C6A96B;
  --wdt-gold-h:#D4BB82;
  --wdt-border:rgba(11,30,61,.1);
  --wdt-ease-out:cubic-bezier(0.23,1,0.32,1);
  --wdt-ease-in-out:cubic-bezier(0.77,0,0.175,1);
}

/* Everything below is scoped to [data-wdt-page] so it can never leak into
   the shared dark theme used by every other page on the site. Light,
   editorial, premium — but keeps the gold accent + Inter font. */

[data-wdt-page]{
  background:var(--wdt-cream);
  color:var(--wdt-ink);
}

/* Shared fluid desktop container — clamp() tuned so content lands at
   1440-1520px@1920 viewport and 1240-1320px@1440 viewport (not a single
   fixed max-width, which either starves 1920px or overflows 1440px). */
[data-wdt-page] .wdt-wrap{
  width:min(calc(100% - 48px), clamp(1240px, 41.6667vw + 680px, 1520px));
  margin:0 auto;
}
[data-wdt-page] .wrap{
  width:min(calc(100% - 48px), clamp(1240px, 41.6667vw + 680px, 1520px));
  max-width:none;
  margin:0 auto;
  padding:0;
}

/* Nav sits on the cream page too — override the dark-nav defaults just
   enough to read on a light background while keeping the same markup. */
[data-wdt-page] .nav{
  background:rgba(245,242,236,.88);
  border-bottom:.5px solid var(--wdt-border);
  backdrop-filter:blur(10px);
}
[data-wdt-page] .nav.scrolled{
  background:rgba(245,242,236,.97);
}
[data-wdt-page] .nav__link{
  color:var(--wdt-ink);
  opacity:.68;
}
[data-wdt-page] .nav__link:hover,
[data-wdt-page] .nav__link--active{
  opacity:1;
  color:var(--wdt-navy);
}
[data-wdt-page] .nav__burger span{
  background:var(--wdt-ink);
}
[data-wdt-page] .nav__mobile{
  background:var(--wdt-cream);
  border-bottom:.5px solid var(--wdt-border);
}
[data-wdt-page] .nav__mobile a{
  color:var(--wdt-ink);
}

/* Compact premium header — shorter than the shared 64px nav, smaller logo,
   tighter CTA so the longer "Get My Free Homepage Concept" label fits
   cleanly without crowding the nav links at desktop widths. */
[data-wdt-page] .nav__i{
  height:56px;
}
[data-wdt-page] .nav__logo img{
  height:20px;
}
[data-wdt-page] .nav__cta{
  font-size:10.5px;
  padding:8px 16px;
  letter-spacing:.03em;
  white-space:nowrap;
}
@media(min-width:768px) and (max-width:1180px){
  [data-wdt-page] .nav__cta{
    font-size:9.5px;
    padding:7px 12px;
  }
}

/* Full desktop nav (logo + 6 links + CTA) needs ~965px of viewport to fit
   without overflow — the shared site-wide breakpoint switches to it at
   768px, ~200px too narrow. Page-scoped: keep the burger menu through
   tablet widths and only switch to full nav once there's room. */
@media(min-width:768px) and (max-width:979px){
  [data-wdt-page] .nav__links,
  [data-wdt-page] .nav__cta{
    display:none;
  }
  [data-wdt-page] .nav__burger{
    display:flex;
  }
}

/* ── 1b. TOOLS MARQUEE — fills the 32px strip [data-wdt-page] .nav already
   reserves above it (body padding-top:32px + .nav{top:32px} from the shared
   stylesheet), so no layout shift is introduced. Same infinite-scroll
   technique as the shared .logos__track (styles.v2.css:136): two identical
   groups side by side, animate the whole track -50% so it loops seamlessly. */
.wdt-tools-bar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:201;
  height:32px;
  overflow:hidden;
  background:var(--wdt-navy);
  border-bottom:.5px solid rgba(198,169,107,.15);
}
.wdt-tools-track{
  display:flex;
  align-items:center;
  height:32px;
  width:max-content;
  animation:wdt-tools-scroll 32s linear infinite;
}
.wdt-tools-bar:hover .wdt-tools-track{ animation-play-state:paused; }
@keyframes wdt-tools-scroll{ to{ transform:translateX(-50%); } }
.wdt-tools-group{
  display:flex;
  align-items:center;
  flex-shrink:0;
  min-width:100vw;
  justify-content:space-evenly;
}
.wdt-tools-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 22px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.02em;
  color:rgba(255,255,255,.55);
  white-space:nowrap;
  border-right:.5px solid rgba(255,255,255,.08);
}
.wdt-tools-item svg{ flex-shrink:0; }
.wdt-tools-item--text{
  font-weight:600;
  color:rgba(255,255,255,.6);
}
@media (prefers-reduced-motion:reduce){
  .wdt-tools-track{ animation:none; }
  .wdt-tools-bar{ overflow-x:auto; }
}
@media (max-width:600px){
  .wdt-tools-item{ padding:0 16px; font-size:10px; }
}

/* ── 2. HERO — navy, matches approved reference composition (s97) ── */
.wdt-hero{
  padding:56px 0 0;
  overflow:hidden;
  background:var(--wdt-navy);
}
.wdt-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
  padding-bottom:40px;
}
.wdt-hero__label{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--wdt-gold-h);
  margin-bottom:18px;
}
.wdt-hero__h1{
  font-size:clamp(32px,4vw,50px);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.03em;
  color:#fff;
  margin:0 0 18px;
  text-wrap:balance;
}
.wdt-hero__h1 em{
  font-style:normal;
  color:var(--wdt-gold);
  font-weight:500;
}
.wdt-hero__lead{
  font-size:15.5px;
  line-height:1.65;
  color:rgba(255,255,255,.65);
  max-width:460px;
  margin:0 0 16px;
}
.wdt-hero__lead strong{
  color:#fff;
  font-weight:600;
}
.wdt-hero__price{
  font-size:14.5px;
  color:rgba(255,255,255,.85);
  margin:0 0 24px;
}
.wdt-hero__price strong{
  font-weight:700;
  color:#0B0B0C;
  background:var(--wdt-gold);
  padding:2px 10px;
  border-radius:6px;
  font-size:13.5px;
}
.wdt-hero__price-sep{
  color:var(--wdt-gold-h);
  margin:0 2px;
}
.wdt-hero__ctas{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.wdt-btn-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:#0B0B0C;
  background:var(--wdt-gold);
  padding:15px 26px;
  border-radius:100px;
  letter-spacing:.04em;
  text-decoration:none;
  transition:transform 160ms cubic-bezier(.23,1,.32,1),background 160ms ease,box-shadow 160ms ease;
  box-shadow:0 8px 24px -8px rgba(198,169,107,.4);
}
.wdt-btn-primary:hover{
  background:var(--wdt-gold-h);
  transform:translateY(-1px);
}
.wdt-btn-primary:active{ transform:scale(.97); }
.wdt-btn-primary:focus-visible{
  outline:2px solid var(--wdt-gold-h);
  outline-offset:3px;
}
.wdt-btn-outline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  padding:14px 26px;
  border-radius:100px;
  letter-spacing:.04em;
  text-decoration:none;
  transition:border-color 150ms ease, background 150ms ease, transform 160ms var(--wdt-ease-out);
}
.wdt-btn-outline:hover{ border-color:var(--wdt-gold); background:rgba(255,255,255,.04); }
.wdt-btn-outline:active{ transform:scale(.97); }
.wdt-btn-outline:focus-visible{
  outline:2px solid var(--wdt-gold);
  outline-offset:3px;
}

.wdt-hero__assurance{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:rgba(255,255,255,.55);
  margin:20px 0 0;
}
.wdt-hero__assurance svg{ flex-shrink:0; color:var(--wdt-gold-h); }

/* Bottom trust rail — 4-up, below the hero grid, matches approved reference */
.wdt-hero__rail{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  padding:26px 0;
  margin:0;
  border-top:1px solid rgba(255,255,255,.1);
}
.wdt-hero__rail li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  font-weight:500;
  color:rgba(255,255,255,.75);
  justify-content:center;
}
.wdt-hero__rail svg{ flex-shrink:0; color:var(--wdt-gold-h); }

/* Direct-contact links — real channels only */
.wdt-hero__contacts{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding:20px 0 32px;
  border-top:1px solid rgba(255,255,255,.1);
}
.wdt-hero__contact{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:500;
  color:rgba(255,255,255,.75);
  text-decoration:none;
  padding:7px 12px;
  border:.5px solid rgba(255,255,255,.18);
  border-radius:100px;
  transition:border-color 150ms ease, color 150ms ease;
}
.wdt-hero__contact:hover{
  border-color:var(--wdt-gold);
  color:var(--wdt-gold-h);
}
.wdt-hero__contact svg{
  flex-shrink:0;
  opacity:.85;
}

/* Hero device mock — a single pre-composed transparent PNG/WebP per project
   (monitor + laptop + tablet + phone, all real hardware rendering baked in
   at build time via Sharp — see scripts/build-device-composites reference
   in DECISION_LOG), crossfaded as ONE complete image every 5s. Replaces the
   earlier CSS-built bezel approach: compositing once at build time keeps
   the real screenshots sharp/undistorted and guarantees pixel-identical
   device layout across all 3 projects (verified 0.00% alpha-channel diff
   between builds), instead of relying on live CSS gradients per device. */
.wdt-devicewrap{
  position:relative;
  padding:16px 10px 44px;
  background:transparent;
}
.wdt-devicewrap--composite{
  padding:0 0 88px; /* dedicated strip below the composite for badge + dots */
}

.wdt-composite-stage{
  position:relative;
  width:100%;
}
/* <picture> is inline by default — display:contents removes it from layout
   entirely so the <img> inside positions directly against .wdt-composite-stage,
   exactly as if there were no wrapper. */
.wdt-composite-stage picture{ display:contents; }
.wdt-composite-img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  opacity:0;
  transition:opacity 800ms ease;
}
.wdt-composite-img--visible{
  position:relative;
  opacity:1;
  z-index:1;
}
.wdt-composite-img:not(.wdt-composite-img--visible){
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
@media (prefers-reduced-motion:reduce){
  .wdt-composite-img{ transition:none; }
}

/* Rotator dots — bottom-right of the dedicated strip below the devices */
.wdt-rotator-dots{
  position:absolute;
  right:10px;
  bottom:24px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:5;
}
.wdt-rotator-dot{
  width:8px;
  height:8px;
  padding:0;
  border:1px solid rgba(255,255,255,.4);
  border-radius:50%;
  background:rgba(255,255,255,.15);
  cursor:pointer;
  transition:background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.wdt-rotator-dot[aria-selected="true"]{
  background:var(--wdt-gold-h);
  border-color:var(--wdt-gold-h);
  transform:scale(1.2);
}
.wdt-rotator-dot:hover{ border-color:rgba(255,255,255,.8); }
.wdt-rotator-dot:focus-visible{
  outline:2px solid var(--wdt-gold-h);
  outline-offset:2px;
}

.wdt-devicewrap__badge{
  position:absolute;
  left:10px;
  bottom:24px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:10px;
  border:1px solid rgba(198,169,107,.3);
  background:rgba(11,30,61,.7);
  backdrop-filter:blur(6px);
  font-size:11px;
  line-height:1.5;
  color:rgba(255,255,255,.7);
  z-index:5;
}
.wdt-devicewrap__badge svg{ flex-shrink:0; color:var(--wdt-gold-h); }
.wdt-devicewrap__badge b{ color:#fff; font-weight:600; }

/* ── 3. FEATURE RAIL ── */
.wdt-section{
  padding:72px 0;
  border-top:.5px solid var(--wdt-border);
}
.wdt-section--tight{ padding:56px 0; }
.wdt-eyebrow{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9C7F45;
  margin-bottom:10px;
}
.wdt-h2{
  font-size:clamp(24px,3vw,36px);
  font-weight:300;
  letter-spacing:-.025em;
  color:var(--wdt-navy);
  line-height:1.15;
  margin:0 0 12px;
  text-wrap:balance;
}
.wdt-h2 em{ font-style:normal; color:var(--wdt-gold); font-weight:500; }
.wdt-sub{
  font-size:15px;
  line-height:1.7;
  color:var(--wdt-muted);
  max-width:560px;
  margin:0 0 40px;
  text-wrap:pretty;
}

/* ── Feature rail — 4 individual premium cards, not a hairline-grid table.
   Depth/radius borrows the .wdt-price-card convention (16px radius, .5px
   border, translateY+shadow hover); stagger borrows the .wdt-price-grid
   pattern — a single [data-fade] trigger on the parent, nth-child delays
   on the children, no new JS (main.js:430-431 mechanism unchanged). */
.wdt-rail{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.wdt-rail__item{
  position:relative;
  background:#fff;
  border:.5px solid var(--wdt-border);
  border-radius:16px;
  padding:32px 24px 28px;
  overflow:hidden;
  transition:transform 260ms var(--wdt-ease-out),box-shadow 260ms var(--wdt-ease-out),border-color 260ms var(--wdt-ease-out);
}
.wdt-rail[data-fade] .wdt-rail__item{
  transition:transform 260ms var(--wdt-ease-out) var(--wdt-card-delay,0ms),
             box-shadow 260ms var(--wdt-ease-out),
             border-color 260ms var(--wdt-ease-out),
             opacity 320ms var(--wdt-ease-out) var(--wdt-card-delay,0ms);
}
.wdt-rail[data-fade] .wdt-rail__item:nth-child(1){ --wdt-card-delay:0ms; }
.wdt-rail[data-fade] .wdt-rail__item:nth-child(2){ --wdt-card-delay:70ms; }
.wdt-rail[data-fade] .wdt-rail__item:nth-child(3){ --wdt-card-delay:140ms; }
.wdt-rail[data-fade] .wdt-rail__item:nth-child(4){ --wdt-card-delay:210ms; }
@media (hover:hover) and (pointer:fine){
  .wdt-rail__item:hover{
    transform:translateY(-6px);
    box-shadow:0 28px 48px -22px rgba(11,30,61,.22);
    border-color:rgba(11,30,61,.16);
  }
  .wdt-rail__item:hover .wdt-rail__icon{
    background:var(--wdt-gold);
    color:#fff;
    border-color:var(--wdt-gold);
  }
}
.wdt-rail__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:rgba(198,169,107,.1);
  color:var(--wdt-gold);
  border:.5px solid rgba(198,169,107,.25);
  margin-bottom:18px;
  transition:background 260ms var(--wdt-ease-out),color 260ms var(--wdt-ease-out),border-color 260ms var(--wdt-ease-out);
}
.wdt-rail__title{
  position:relative;
  font-size:16px;
  font-weight:600;
  color:var(--wdt-navy);
  margin:0 0 8px;
}
.wdt-rail__text{
  position:relative;
  font-size:13px;
  line-height:1.6;
  color:var(--wdt-muted);
  margin:0;
}
@media (prefers-reduced-motion:reduce){
  .wdt-rail__item,
  .wdt-rail__icon{
    transition-duration:1ms !important;
    transition-delay:0ms !important;
  }
  .wdt-rail__item:hover{ transform:none !important; }
}

/* ── 4. FEATURED PROJECT ── */
.wdt-feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  background:#fff;
  border:.5px solid var(--wdt-border);
  border-radius:18px;
  padding:44px;
}
.wdt-feature__media{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 20px 50px -18px rgba(11,30,61,.35);
  line-height:0;
}
.wdt-feature__media img{
  width:100%;
  height:auto;
  display:block;
}
.wdt-feature__tag{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--wdt-navy);
  background:rgba(11,30,61,.06);
  padding:5px 12px;
  border-radius:100px;
  margin-bottom:16px;
}
.wdt-feature__title{
  font-size:24px;
  font-weight:500;
  color:var(--wdt-navy);
  margin:0 0 12px;
}
.wdt-feature__desc{
  font-size:14px;
  line-height:1.75;
  color:var(--wdt-muted);
  margin:0 0 20px;
}
.wdt-feature__list{
  list-style:none;
  padding:0;
  margin:0 0 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wdt-feature__list li{
  font-size:13px;
  color:var(--wdt-ink);
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.wdt-feature__list li::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--wdt-gold);
  margin-top:7px;
  flex-shrink:0;
}
.wdt-feature__link{
  font-size:13px;
  font-weight:600;
  color:var(--wdt-navy);
  text-decoration:none;
  border-bottom:1px solid var(--wdt-gold);
  padding-bottom:2px;
  transition:color 160ms ease,border-color 160ms ease;
}
.wdt-feature__link:hover{ color:#9C7F45; border-color:#9C7F45; }
.wdt-feature__link:focus-visible{
  outline:2px solid var(--wdt-navy);
  outline-offset:3px;
}

/* ── 5. BEFORE / AFTER ── */
.wdt-ba{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.wdt-ba__card{
  border-radius:22px;
  overflow:hidden;
  border:.5px solid var(--wdt-border);
  background:#fff;
  box-shadow:0 24px 48px -30px rgba(11,30,61,.28);
}
.wdt-ba__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--wdt-navy);
}
.wdt-ba__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.wdt-ba__card--before .wdt-ba__media img{ object-position:top center; }
.wdt-ba__card--after .wdt-ba__media img{ object-position:center 30%; }
.wdt-ba__badge{
  position:absolute;
  top:16px;
  left:16px;
  padding:7px 16px;
  border-radius:100px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(11,30,61,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.wdt-ba__badge--after{
  color:#0B0B0C;
  background:var(--wdt-gold);
}
.wdt-ba__caption{
  padding:18px 22px 22px;
  font-size:13.5px;
  color:var(--wdt-muted);
  line-height:1.6;
}
.wdt-ba__caption strong{
  color:var(--wdt-ink);
  font-weight:600;
}

/* Synchronized reveal — before clips in from the left, after from the right,
   both driven by the shared .wdt-ba[data-fade].in trigger (no separate JS). */
.wdt-ba[data-fade] .wdt-ba__card{
  opacity:0;
  transition:opacity 700ms var(--wdt-ease-out),clip-path 700ms var(--wdt-ease-out);
}
.wdt-ba[data-fade] .wdt-ba__card--before{
  clip-path:inset(0 0 0 100%);
  transition-delay:0ms;
}
.wdt-ba[data-fade] .wdt-ba__card--after{
  clip-path:inset(0 100% 0 0);
  transition-delay:140ms;
}
.wdt-ba[data-fade].in .wdt-ba__card{
  opacity:1;
  clip-path:inset(0 0 0 0);
}
@media (prefers-reduced-motion:reduce){
  .wdt-ba[data-fade] .wdt-ba__card{
    clip-path:none;
    transition:opacity 300ms linear;
  }
}

/* ── 6. SELECTED WORK ── */
.wdt-work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.wdt-work-card{
  display:block;
  background:#fff;
  border:.5px solid var(--wdt-border);
  border-radius:14px;
  overflow:hidden;
  transition:transform 200ms cubic-bezier(.23,1,.32,1),box-shadow 200ms ease;
}
.wdt-work-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -18px rgba(11,30,61,.3);
}
.wdt-work-card:focus-visible{
  outline:2px solid var(--wdt-navy);
  outline-offset:3px;
}
.wdt-work-card__media{
  line-height:0;
  border-bottom:.5px solid var(--wdt-border);
}
.wdt-work-card__media img{
  width:100%;
  height:auto;
  display:block;
}
/* Consistent browser-chrome bar over every screenshot — unifies 3 client
   sites with very different color themes (dark/light) into one "browser
   window" presentation, matching the hero device treatment. */
.wdt-work-card__bar{
  display:flex;
  align-items:center;
  gap:5px;
  padding:9px 12px;
  background:var(--wdt-navy);
}
.wdt-work-card__bar span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
}
.wdt-work-card__body{
  padding:20px 22px 24px;
}
.wdt-work-card__kicker{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--wdt-gold);
  margin-bottom:8px;
  display:block;
}
.wdt-work-card__title{
  font-size:16px;
  font-weight:600;
  color:var(--wdt-navy);
  margin:0 0 6px;
}
.wdt-work-card__text{
  font-size:13px;
  line-height:1.6;
  color:var(--wdt-muted);
  margin:0;
}

/* ── 7. PROCESS FLOW ── */
.wdt-flow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  position:relative;
}
.wdt-flow__step{
  position:relative;
  text-align:center;
  padding:0 16px;
}
.wdt-flow__step::after{
  content:"";
  position:absolute;
  top:27px;
  left:calc(50% + 34px);
  width:calc(100% - 68px);
  height:1.5px;
  background:repeating-linear-gradient(90deg,var(--wdt-gold) 0 6px,transparent 6px 12px);
}
.wdt-flow__step:last-child::after{ display:none; }
.wdt-flow__icon{
  width:56px;
  height:56px;
  margin:0 auto 18px;
  border-radius:50%;
  background:var(--wdt-navy);
  color:var(--wdt-cream);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  position:relative;
  z-index:1;
  box-shadow:0 10px 26px -10px rgba(11,30,61,.5);
}
.wdt-flow__title{
  font-size:14px;
  font-weight:600;
  color:var(--wdt-navy);
  margin:0 0 6px;
}
.wdt-flow__text{
  font-size:12.5px;
  line-height:1.6;
  color:var(--wdt-muted);
  margin:0;
}

/* ── 8. SERVICES RECAP — editorial step list + 3 distinct animated product
   scenes (s100 rebuild — client rejected the s98/s99 tiny always-on-screen
   composition as illegible/cheap for a page selling ฿25k-75k+ builds).
   Left: 3 large editorial steps (button, role=tab) with a thin gold progress
   line, contextual CTA under the active step. Right: ONE scene at a time
   (the other two get [hidden]), each telling its own assembly/transform
   story instead of one diagram being dimmed/highlighted. Auto-rotates via
   public/website-design-thailand.js; pause on hover/focus/click — same
   pattern as the hero device rotator. Motion is transform/opacity only
   (GPU), reusing --wdt-ease-out / --wdt-ease-in-out from the top of this
   file and the wire-sweep primitive from the s98 build. ── */
.wdt-section--svc{ overflow:hidden; }
.wdt-svc2{
  display:grid;
  grid-template-columns:minmax(320px,420px) 1fr;
  gap:64px;
  align-items:start;
}

/* ── Steps rail — large editorial type, generous spacing ── */
.wdt-svc2-steps{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-left:28px;
}
.wdt-svc2-line{
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:2px;
  background:var(--wdt-border);
  border-radius:2px;
  overflow:hidden;
}
.wdt-svc2-line__fill{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(180deg,var(--wdt-gold) 0%,var(--wdt-gold-h) 100%);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 500ms var(--wdt-ease-out);
}

.wdt-svc2-step{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:20px;
  text-align:left;
  background:transparent;
  border:0;
  border-radius:16px;
  padding:24px 22px;
  margin:0;
  font-family:inherit;
  cursor:pointer;
  transition:background 260ms var(--wdt-ease-out);
}
.wdt-svc2-step:hover{ background:rgba(11,30,61,.03); }
.wdt-svc2-step:focus-visible{
  outline:2px solid var(--wdt-gold);
  outline-offset:2px;
}
.wdt-svc2-step__num{
  flex-shrink:0;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--wdt-muted);
  opacity:.5;
  line-height:1.4;
  padding-top:6px;
  transition:color 320ms var(--wdt-ease-out),opacity 320ms var(--wdt-ease-out);
}
.wdt-svc2-step__body{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.wdt-svc2-step__title{
  font-size:19px;
  font-weight:600;
  color:var(--wdt-navy);
  opacity:.55;
  line-height:1.25;
  transition:opacity 320ms var(--wdt-ease-out),font-size 320ms var(--wdt-ease-out),transform 320ms var(--wdt-ease-out);
}
.wdt-svc2-step__text{
  font-size:14px;
  line-height:1.65;
  color:var(--wdt-muted);
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-4px);
  transition:opacity 320ms var(--wdt-ease-out),max-height 500ms var(--wdt-ease-out),transform 320ms var(--wdt-ease-out);
}
.wdt-svc2-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  font-size:13px;
  font-weight:600;
  color:var(--wdt-navy);
  text-decoration:none;
  padding:9px 4px;
  border-bottom:1.5px solid var(--wdt-gold);
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:opacity 320ms var(--wdt-ease-out) 80ms,max-height 500ms var(--wdt-ease-out),color 160ms ease,border-color 160ms ease;
}
.wdt-svc2-cta span{ transition:transform 200ms var(--wdt-ease-out); }
.wdt-svc2-cta:hover{ color:var(--wdt-gold); border-color:var(--wdt-gold-h); }
.wdt-svc2-cta:hover span{ transform:translateX(3px); }

/* Active step: large title (32-40px desktop via clamp), full-opacity body,
   visible CTA. Inactive: legible but clearly secondary — never below ~0.5
   opacity, no blur/hide, per brief ("elegant, clearly secondary"). */
.wdt-svc2-step--active .wdt-svc2-step__num{
  color:var(--wdt-gold);
  opacity:1;
}
.wdt-svc2-step--active .wdt-svc2-step__title{
  opacity:1;
  font-size:clamp(32px,1.6vw + 12px,40px);
  font-weight:300;
  letter-spacing:-.02em;
  transform:translateX(2px);
}
.wdt-svc2-step--active .wdt-svc2-step__text{
  opacity:1;
  max-height:220px;
  transform:translateY(0);
  font-size:18px;
  line-height:1.7;
}
.wdt-svc2-step--active .wdt-svc2-cta{
  opacity:1;
  max-height:60px;
}
.wdt-svc2-step--active{ background:rgba(198,169,107,.07); }

/* ── Scene stage — one large scene visible at a time ── */
.wdt-svc2-stage{
  position:relative;
  background:#fff;
  border:.5px solid var(--wdt-border);
  border-radius:24px;
  padding:48px;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 30px 70px -32px rgba(11,30,61,.22);
  overflow:hidden;
}
.wdt-svc2-scene{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:36px;
  width:100%;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 550ms var(--wdt-ease-out),transform 550ms var(--wdt-ease-out);
}
.wdt-svc2-scene--active{
  opacity:1;
  transform:translateY(0);
}
.wdt-svc2-scene[hidden]{ display:none; }

/* ═══ SCENES 0-2 — Custom Website / SEO + GEO / AI Automation: each scene
   shows ONE real premium visual (client-supplied AVIF/WebP/PNG), swapped
   with a 700ms opacity+scale transition via the existing .wdt-svc2-piece--in
   class (same mechanism as the previous CSS-built mockups, now applied to
   a single <img> per scene instead of several device/card pieces). ═══ */
.wdt-svc2-visual{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wdt-svc2-visual__img{
  display:block;
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  border-radius:30px;
  box-shadow:0 30px 70px -32px rgba(11,30,61,.28);
  opacity:0;
  transform:scale(.97);
  transition:opacity 700ms var(--wdt-ease-out),transform 700ms var(--wdt-ease-out);
}
.wdt-svc2-visual__img.wdt-svc2-piece--in{
  opacity:1;
  transform:scale(1);
}

@media (prefers-reduced-motion:reduce){
  .wdt-svc2-line__fill,
  .wdt-svc2-step,
  .wdt-svc2-step__num,
  .wdt-svc2-step__title,
  .wdt-svc2-step__text,
  .wdt-svc2-cta,
  .wdt-svc2-scene,
  .wdt-svc2-visual__img{
    transition-duration:1ms !important;
    transition-delay:0ms !important;
  }
  .wdt-svc2-scene{ opacity:1 !important; transform:none !important; }
  .wdt-svc2-visual__img{ opacity:1 !important; transform:none !important; }
}

/* ── Tablet (900px-769px): steps stack full-width above the stage. ── */
@media (max-width:900px){
  .wdt-svc2{ grid-template-columns:1fr; gap:16px; }
  .wdt-svc2-steps{ padding-left:0; gap:12px; }
  .wdt-svc2-line{ display:none; }
  .wdt-svc2-step{ padding:20px 18px; border:.5px solid var(--wdt-border); border-radius:16px; }
  .wdt-svc2-step__text{ max-height:none; opacity:1; transform:none; overflow:visible; }
  .wdt-svc2-step--active .wdt-svc2-step__title{ font-size:24px; }
  .wdt-svc2-step--active .wdt-svc2-step__text{ font-size:15px; }
  .wdt-svc2-cta{ opacity:1; max-height:none; position:static; margin-top:2px; }

  .wdt-svc2-stage{
    position:static;
    min-height:0;
    padding:24px 20px;
    margin-top:4px;
    border-radius:18px;
  }
  .wdt-svc2-scene{ gap:0; }
  .wdt-svc2-visual__img{ border-radius:22px; max-height:420px; }
}

/* ── Mobile (<768px, incl. 390px): same single-visual scene, smaller radius
   and shadow, no side-by-side chrome to squeeze — the image already reads
   at full size since it's real content, not a shrunk device composition. */
@media (max-width:768px){
  .wdt-svc2-stage{ padding:18px 14px; border-radius:16px; }
  .wdt-svc2-scene{ gap:0; }
  .wdt-svc2-visual__img{ border-radius:18px; max-height:none; box-shadow:0 18px 40px -22px rgba(11,30,61,.28); }
}

@media (max-width:600px){
  .wdt-svc2-step{ padding:18px 16px; }
  .wdt-svc2-stage{ padding:16px 12px; }
}

/* ── 9. INTEGRATIONS RAIL ── */
.wdt-int-rail{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.wdt-int-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:500;
  color:var(--wdt-navy);
  background:#fff;
  border:.5px solid var(--wdt-border);
  border-radius:100px;
  padding:11px 20px;
}
.wdt-int-chip::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--wdt-gold);
}

/* ── 9b. FREE HOMEPAGE CONCEPT — qualification form (Phase 3, s96; dark
   navy card treatment added s97 to match the approved reference mockup) ── */
.wdt-wrap--narrow{ max-width:680px; }
.wdt-section--concept{ background:var(--wdt-cream); padding:72px 0; }

.wdt-concept-card{
  background:var(--wdt-navy);
  border-radius:20px;
  padding:56px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  box-shadow:0 24px 60px rgba(11,30,61,.25);
}
.wdt-concept-card__intro{ display:flex; flex-direction:column; }
.wdt-eyebrow--onavy{ color:var(--wdt-gold-h); }
.wdt-h2--onavy{ color:#fff; }
.wdt-sub--onavy{ color:rgba(255,255,255,.65); }

.wdt-concept-steps{
  list-style:none;
  padding:0;
  margin:36px 0 0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.wdt-concept-steps__item{
  display:flex;
  align-items:center;
  gap:14px;
}
.wdt-concept-steps__num{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1.5px solid var(--wdt-gold);
  color:var(--wdt-gold-h);
  font-size:13px;
  font-weight:700;
}
.wdt-concept-steps__label{
  font-size:13.5px;
  color:rgba(255,255,255,.8);
  line-height:1.4;
}

.wdt-concept-contacts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
  padding-top:36px;
}
.wdt-concept-contact{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:500;
  color:#fff;
  text-decoration:none;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:100px;
  transition:border-color 150ms ease, background 150ms ease;
}
.wdt-concept-contact:hover{ border-color:var(--wdt-gold); background:rgba(255,255,255,.04); }
.wdt-concept-contact svg{ flex-shrink:0; color:var(--wdt-gold-h); }

.wdt-concept-card__form{ min-width:0; }

.wdt-btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  padding:14px 26px;
  border-radius:100px;
  letter-spacing:.04em;
  cursor:pointer;
  font-family:inherit;
  transition:background 160ms ease, transform 160ms var(--wdt-ease-out);
}
.wdt-btn-ghost:hover{ background:rgba(255,255,255,.06); }
.wdt-btn-ghost:active{ transform:scale(.97); }
.wdt-btn-ghost:focus-visible{
  outline:2px solid var(--wdt-gold);
  outline-offset:3px;
}

.wdt-concept-progress{
  display:flex;
  align-items:center;
  gap:0;
  max-width:360px;
  margin:0 0 40px;
}
.wdt-concept-progress__step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  width:28px;
  height:28px;
  border-radius:50%;
  background:transparent;
  border:1.5px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.5);
  flex-shrink:0;
  line-height:25px;
  text-align:center;
  position:relative;
}
.wdt-concept-progress__step--active{
  border-color:var(--wdt-gold);
  color:var(--wdt-navy);
  background:var(--wdt-gold-h);
}
.wdt-concept-progress__step--done{
  border-color:var(--wdt-gold);
  background:var(--wdt-gold);
  color:#0B0B0C;
}
.wdt-concept-progress__label{
  position:absolute;
  top:34px;
  left:50%;
  transform:translateX(-50%);
  font-size:10.5px;
  font-weight:500;
  color:rgba(255,255,255,.55);
  white-space:nowrap;
  letter-spacing:.02em;
}
.wdt-concept-progress__bar{
  flex:1;
  height:2px;
  background:rgba(255,255,255,.15);
  margin:0 10px;
  position:relative;
  overflow:hidden;
  border-radius:2px;
}
.wdt-concept-progress__fill{
  position:absolute;
  inset:0;
  width:0%;
  background:var(--wdt-gold);
  transition:width 220ms ease;
}

.wdt-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* honeypot — visually hidden, never shown to sighted or AT users, real
   visitors never interact with it; a filled value signals a bot */
.wdt-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.wdt-concept-step{
  border:0;
  margin:0;
  padding:0;
  min-width:0;
}

.wdt-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.wdt-form-group{ margin-bottom:18px; }
.wdt-form-label{
  display:block;
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,.55);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:7px;
}
.wdt-form-opt{
  font-weight:400;
  color:rgba(255,255,255,.4);
  text-transform:none;
  letter-spacing:0;
  margin-left:4px;
}
.wdt-form-input{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  color:#fff;
  font-family:inherit;
  font-size:14px;
  padding:13px 15px;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
  appearance:none;
  box-sizing:border-box;
}
.wdt-form-input::placeholder{ color:rgba(255,255,255,.35); }
.wdt-form-input:focus{ border-color:var(--wdt-gold); box-shadow:0 0 0 3px rgba(198,169,107,.2); }
.wdt-form-input[aria-invalid="true"]{ border-color:#f87171; }
.wdt-form-select{ cursor:pointer; }
.wdt-form-select option{ background:var(--wdt-navy); color:#fff; }
.wdt-form-textarea{ resize:vertical; min-height:80px; }
.wdt-form-err{
  display:block;
  font-size:12px;
  color:#f87171;
  margin-top:6px;
  min-height:0;
}
.wdt-form-error{
  padding:14px 18px;
  border-radius:8px;
  border:1px solid rgba(248,113,113,.35);
  background:rgba(248,113,113,.1);
  font-size:13px;
  color:#fecaca;
  margin-bottom:24px;
}
.wdt-concept-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:8px;
}
.wdt-concept-next{ margin-top:8px; }

.wdt-form-success{
  padding:40px 32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);
  text-align:center;
}
.wdt-form-success__icon{
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(198,169,107,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  color:var(--wdt-gold-h);
  margin:0 auto 16px;
}
.wdt-form-success h3{
  font-size:18px;
  font-weight:500;
  color:#fff;
  margin:0 0 8px;
}
.wdt-form-success p{
  font-size:14px;
  color:rgba(255,255,255,.65);
  line-height:1.7;
  max-width:44ch;
  margin:0 auto;
}

@media(max-width:900px){
  .wdt-concept-card{ grid-template-columns:1fr; gap:40px; padding:36px 24px; border-radius:16px; }
  .wdt-concept-contacts{ margin-top:0; padding-top:8px; }
}

@media(max-width:600px){
  .wdt-form-row{ grid-template-columns:1fr; gap:0; }
  .wdt-concept-actions{ flex-direction:column-reverse; align-items:stretch; }
  .wdt-concept-progress{ max-width:100%; }
}

/* ── 10. PRICING ──
   Premium value-stacking layout: featured card carries clear visual weight
   (gradient + stronger glow), "Everything in X, plus" stacks perceived value
   between tiers, shared SEO-foundation line moved to one bottom-line so it
   reads once instead of 3x identical. Stagger uses the existing [data-fade]
   mechanism (styles.v2.css:262-263 + main.js:430) — the parent .wdt-price-grid
   gets .in from IntersectionObserver, these nth-child rules add a per-card
   delay on top of that single trigger, no new JS needed. */
.wdt-price-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
}
.wdt-price-card{
  background:#fff;
  border:.5px solid var(--wdt-border);
  border-radius:16px;
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  transition:transform 260ms var(--wdt-ease-out),box-shadow 260ms var(--wdt-ease-out),border-color 260ms var(--wdt-ease-out);
}
/* Stagger: [data-fade] on the grid already animates opacity/transform on
   itself; these delays ride the same .in toggle so each card settles in
   sequence instead of all 3 appearing at once. */
.wdt-price-grid[data-fade] .wdt-price-card{
  transition:transform 260ms var(--wdt-ease-out) var(--wdt-card-delay,0ms),
             box-shadow 260ms var(--wdt-ease-out),
             border-color 260ms var(--wdt-ease-out),
             opacity 320ms var(--wdt-ease-out) var(--wdt-card-delay,0ms);
}
.wdt-price-grid[data-fade] .wdt-price-card:nth-child(1){ --wdt-card-delay:0ms; }
.wdt-price-grid[data-fade] .wdt-price-card:nth-child(2){ --wdt-card-delay:60ms; }
.wdt-price-grid[data-fade] .wdt-price-card:nth-child(3){ --wdt-card-delay:120ms; }
@media (hover:hover) and (pointer:fine){
  .wdt-price-card:hover{
    transform:translateY(-6px);
    box-shadow:0 28px 48px -22px rgba(11,30,61,.28);
    border-color:rgba(11,30,61,.18);
  }
  .wdt-price-card--featured:hover{
    transform:translateY(-18px);
    box-shadow:0 32px 64px -20px rgba(198,169,107,.5);
  }
}
.wdt-price-card--featured{
  background:linear-gradient(165deg,#fff 0%,#fdfaf3 60%,#faf3e3 100%);
  border:1.5px solid var(--wdt-gold);
  box-shadow:0 28px 56px -20px rgba(198,169,107,.4),0 0 0 1px rgba(198,169,107,.08) inset;
  transform:translateY(-12px);
  position:relative;
}
.wdt-price-card__badge{
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  background:var(--wdt-gold);
  color:#0B0B0C;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 14px;
  border-radius:100px;
  white-space:nowrap;
  box-shadow:0 6px 16px -4px rgba(198,169,107,.5);
}
.wdt-price-card__tier{
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wdt-muted);
  margin-bottom:14px;
}
.wdt-price-card--featured .wdt-price-card__tier{ color:var(--wdt-navy); }
.wdt-price-card__price{
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--wdt-muted);
  margin-bottom:2px;
}
.wdt-price-card__amount{
  font-size:32px;
  font-weight:600;
  color:var(--wdt-navy);
  margin:0 0 22px;
  letter-spacing:-.02em;
}
/* Scale reads as the premium ceiling even though Growth is the featured
   card — larger, heavier numerals give it its own visual authority. */
.wdt-price-card--featured .wdt-price-card__amount{
  font-size:36px;
  font-weight:700;
}
.wdt-price-card:last-child .wdt-price-card__amount{
  font-size:38px;
  font-weight:700;
  background:linear-gradient(135deg,var(--wdt-navy) 0%,#2A4A7A 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* "Everything in [previous tier], plus" — value-stacking cue so higher
   tiers read as cumulative, not a flat re-list of unrelated features. */
.wdt-price-card__inherit{
  font-size:11.5px;
  font-weight:600;
  color:var(--wdt-gold);
  letter-spacing:.02em;
  margin:0 0 14px;
  padding-bottom:14px;
  border-bottom:.5px solid var(--wdt-border);
}
.wdt-price-card__list{
  list-style:none;
  padding:0;
  margin:0 0 26px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.wdt-price-card__list li{
  font-size:13px;
  line-height:1.5;
  color:var(--wdt-ink);
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.wdt-price-card__list li::before{
  content:"✓";
  color:var(--wdt-gold);
  font-weight:700;
  flex-shrink:0;
}
.wdt-price-card__cta{
  display:block;
  text-align:center;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  border-radius:100px;
  padding:14px;
  transition:transform 160ms var(--wdt-ease-out),background 160ms var(--wdt-ease-out),box-shadow 160ms var(--wdt-ease-out),border-color 160ms var(--wdt-ease-out);
}
.wdt-price-card__cta:active{ transform:scale(.97); }
.wdt-price-card__cta:focus-visible{
  outline:2px solid var(--wdt-navy);
  outline-offset:3px;
}
.wdt-price-card__cta--ghost{
  color:var(--wdt-navy);
  border:1px solid var(--wdt-border);
}
@media (hover:hover) and (pointer:fine){
  .wdt-price-card__cta--ghost:hover{ background:rgba(11,30,61,.04); border-color:rgba(11,30,61,.22); transform:translateY(-1px); }
  .wdt-price-card__cta--solid:hover{ background:var(--wdt-gold-h); transform:translateY(-1px); box-shadow:0 12px 28px -10px rgba(198,169,107,.55); }
}
.wdt-price-card__cta--solid{
  color:#0B0B0C;
  background:var(--wdt-gold);
  font-weight:700;
  box-shadow:0 10px 24px -10px rgba(198,169,107,.5);
}
/* ── Compare all features (collapsed by default — keeps cards short) ── */
.wdt-price-compare{
  width:100%;
  min-width:0;
  margin:40px 0 0;
  border:.5px solid var(--wdt-border);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 20px 44px -28px rgba(11,30,61,.16);
  transition:box-shadow 260ms var(--wdt-ease-out);
}
.wdt-price-compare[open]{
  box-shadow:0 28px 60px -30px rgba(11,30,61,.22);
}
.wdt-price-compare__toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 28px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--wdt-navy);
  cursor:pointer;
  list-style:none;
  transition:background 200ms var(--wdt-ease-out);
}
.wdt-price-compare__toggle:hover{ background:rgba(11,30,61,.02); }
.wdt-price-compare__toggle:focus-visible{
  outline:2px solid var(--wdt-navy);
  outline-offset:-2px;
}
.wdt-price-compare__toggle::-webkit-details-marker{ display:none; }
.wdt-price-compare__toggle .wdt-faq-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(198,169,107,.1);
  color:var(--wdt-gold);
  font-size:15px;
  flex-shrink:0;
  transition:transform 260ms var(--wdt-ease-out),background 260ms var(--wdt-ease-out);
}
.wdt-price-compare[open] .wdt-faq-icon{ transform:rotate(45deg); background:var(--wdt-gold); color:#fff; }
.wdt-price-compare__scroll{
  width:100%;
  min-width:0;
  overflow-x:auto;
  border-top:.5px solid var(--wdt-border);
  -webkit-overflow-scrolling:touch;
}
.wdt-price-compare__table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:12.5px;
}
.wdt-price-compare__table th,
.wdt-price-compare__table td{
  text-align:left;
  padding:14px 28px;
  border-bottom:.5px solid var(--wdt-border);
  line-height:1.5;
}
.wdt-price-compare__table thead th{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--wdt-muted);
  background:var(--wdt-cream);
  white-space:nowrap;
}
.wdt-price-compare__table tbody th{
  font-weight:600;
  color:var(--wdt-ink);
  white-space:nowrap;
}
.wdt-price-compare__table tbody td{ color:var(--wdt-muted); }
.wdt-price-compare__table tbody tr:last-child th,
.wdt-price-compare__table tbody tr:last-child td{ border-bottom:0; }
.wdt-price-compare__table tbody tr:hover th,
.wdt-price-compare__table tbody tr:hover td{ background:rgba(11,30,61,.015); }

.wdt-price-included{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  font-size:13px;
  font-weight:500;
  color:var(--wdt-ink);
  margin:28px 0 0;
  padding:14px 20px;
}
.wdt-price-included span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--wdt-gold);
  color:#fff;
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
}

/* ── What is not included ── */
.wdt-price-excluded{
  max-width:800px;
  margin:32px auto 0;
  padding:32px 36px;
  border:.5px solid var(--wdt-border);
  border-radius:16px;
  background:var(--wdt-navy);
  box-shadow:0 24px 48px -30px rgba(11,30,61,.35);
}
.wdt-price-excluded__title{
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wdt-gold);
  margin:0 0 20px;
}
.wdt-price-excluded__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:32px;
  row-gap:16px;
}
.wdt-price-excluded__list li{
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.88);
  display:flex;
  align-items:flex-start;
  gap:11px;
}
.wdt-price-excluded__list li::before{
  content:"";
  flex-shrink:0;
  width:18px;
  height:18px;
  margin-top:1px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.65)' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:8px 8px;
}
@media (max-width:900px){
  .wdt-price-excluded__list{ grid-template-columns:1fr; row-gap:14px; }
}
@media (max-width:640px){
  .wdt-price-excluded{ padding:26px 24px; }
}

.wdt-price-note{
  text-align:center;
  font-size:12.5px;
  color:var(--wdt-muted);
  margin:24px 0 0;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}

/* ── FAQ (light theme override of shared .faq-item) ── */
.wdt-faq{
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:.5px solid var(--wdt-border);
}
.wdt-faq-item{
  border-bottom:.5px solid var(--wdt-border);
}
.wdt-faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 0;
  font-size:15px;
  font-weight:500;
  color:var(--wdt-navy);
  cursor:pointer;
  list-style:none;
  transition:color 160ms ease;
}
.wdt-faq-q::-webkit-details-marker{ display:none; }
@media (hover:hover) and (pointer:fine){
  .wdt-faq-q:hover{ color:var(--wdt-gold); }
  .wdt-faq-q:hover .wdt-faq-icon{ color:var(--wdt-navy); }
}
.wdt-faq-q:focus-visible{
  outline:2px solid var(--wdt-gold);
  outline-offset:4px;
  border-radius:2px;
}
.wdt-faq-icon{
  font-size:18px;
  color:var(--wdt-gold);
  flex-shrink:0;
  transition:transform 200ms ease;
}
.wdt-faq-item[open] .wdt-faq-icon{ transform:rotate(45deg); }
.wdt-faq-a{
  font-size:14px;
  line-height:1.75;
  color:var(--wdt-muted);
  padding:0 0 24px;
  max-width:680px;
}

.wdt-faq-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 56px;
}
.wdt-faq-cols .wdt-faq{ border-top:.5px solid var(--wdt-border); }

@media (max-width:750px){
  .wdt-faq-cols{ grid-template-columns:1fr; gap:0; }
  .wdt-faq-cols .wdt-faq + .wdt-faq{ border-top:0; }
}

/* ── 10b. RELATED — card/pill grid matching .wdt-int-chip + .wdt-work-card
   hover language (border/shadow lift, gold accent), animated via the shared
   [data-fade] scroll-reveal (styles.v2.css:262-263 + main.js IntersectionObserver) ── */
.wdt-related-grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:0;
  margin:0;
}
.wdt-related-item{ margin:0; }
.wdt-related-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13.5px;
  font-weight:500;
  line-height:1.4;
  color:var(--wdt-ink);
  background:#fff;
  border:.5px solid var(--wdt-border);
  border-radius:12px;
  padding:16px 18px;
  text-decoration:none;
  transition:border-color 180ms ease, box-shadow 180ms ease, transform 180ms cubic-bezier(.23,1,.32,1), color 180ms ease;
}
.wdt-related-arrow{
  flex-shrink:0;
  color:var(--wdt-gold);
  transition:transform 180ms cubic-bezier(.23,1,.32,1);
}
.wdt-related-link:hover{
  border-color:var(--wdt-gold);
  color:var(--wdt-navy);
  box-shadow:0 14px 30px -16px rgba(11,30,61,.25);
  transform:translateY(-2px);
}
.wdt-related-link:hover .wdt-related-arrow{ transform:translateX(3px); }
.wdt-related-link:focus-visible{
  outline:2px solid var(--wdt-gold);
  outline-offset:2px;
}

@media (max-width:900px){
  .wdt-related-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .wdt-related-grid{ grid-template-columns:1fr; }
}

/* ── CTA section — reuse shared .cta-section/.cta-glow/.cta-h2/.cta-desc/.cta-btn
   but override colors to sit on the light theme (dark navy card instead of
   the dark-site's bg-on-bg glow pattern) ── */
[data-wdt-page] .cta-section{
  background:var(--wdt-navy);
  border-radius:24px;
  width:min(calc(100% - 48px), clamp(1240px, 41.6667vw + 680px, 1520px));
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  position:relative;
}
[data-wdt-page] .cta-section .wrap{
  width:auto;
  padding:72px 24px;
}
[data-wdt-page] .cta-h2{ color:#fff; }
[data-wdt-page] .cta-desc{ color:rgba(245,242,236,.65); }
.wdt-cta-eyebrow{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wdt-gold);
  background:rgba(198,169,107,.15);
  border:.5px solid rgba(198,169,107,.35);
  padding:6px 14px;
  border-radius:100px;
  margin-bottom:20px;
}

/* ── Footer transition — .footer has no background of its own, so it
   inherits [data-wdt-page]'s cream background (line 23) and reads as a
   continuation of the page, not a dark break. It already carries its own
   border-top (gold hairline, styles.v2.css:775), so the seam reads
   intentionally; nothing to override. */

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */
@media (max-width:900px){
  .wdt-devicewrap{ padding:16px 16px 4px; }
  .wdt-devicewrap--composite{ padding:0 0 96px; }
  .wdt-devicewrap__badge{ left:16px; right:74px; bottom:24px; }
  .wdt-rotator-dots{ right:16px; bottom:14px; flex-direction:column; }
  .wdt-hero__grid{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .wdt-hero__rail{ grid-template-columns:repeat(2,1fr); gap:16px 12px; }
  .wdt-rail{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .wdt-feature{ grid-template-columns:1fr; padding:28px; gap:28px; }
  .wdt-ba{ grid-template-columns:1fr; }
  .wdt-work-grid{ grid-template-columns:1fr 1fr; }
  .wdt-flow{ grid-template-columns:1fr 1fr; row-gap:36px; }
  .wdt-flow__step::after{ display:none; }
  .wdt-price-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .wdt-price-card--featured{ transform:none; order:-1; }
}

@media (max-width:600px){
  .wdt-hero{ padding:40px 0 0; }
  .wdt-devicewrap{ padding:16px 12px 4px; }
  .wdt-devicewrap--composite{ padding:0 0 116px; }
  .wdt-devicewrap__badge{ flex-direction:column; align-items:flex-start; gap:4px; font-size:10px; right:16px; bottom:24px; }
  .wdt-rotator-dots{ right:12px; bottom:14px; flex-direction:row; }
  .wdt-hero__ctas{ flex-direction:column; align-items:stretch; }
  .wdt-btn-primary,.wdt-btn-outline{ justify-content:center; }
  .wdt-rail{ grid-template-columns:1fr; gap:14px; }
  .wdt-rail__item{ padding:26px 22px 24px; }
  .wdt-hero__rail{ grid-template-columns:1fr; gap:14px; }
  .wdt-work-grid{ grid-template-columns:1fr; }
  .wdt-flow{ grid-template-columns:1fr; }
  [data-wdt-page] .cta-section{ border-radius:18px; }
  [data-wdt-page] .cta-section .wrap{ padding:52px 20px; }
}

/* ── Footer — 5-column layout (brand + Services/Company/Resources/Contact) ── */
.wdt-footer .footer__top{ display:none; }
.wdt-footer-cols{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
  gap:32px;
  margin-bottom:40px;
}
.wdt-footer-col{ display:flex; flex-direction:column; gap:10px; }
.wdt-footer-col--brand{ gap:6px; }
.wdt-footer-contact-list li a{ display:inline-flex; align-items:center; gap:7px; }
.wdt-footer-contact-list svg{ flex-shrink:0; color:var(--wdt-gold); }

/* footer sits on the page's cream background here (not the dark footer
   from index.html), so the shared near-white hover color is invisible —
   override to the gold accent used across this page instead */
.wdt-footer .footer__res-list a:hover,
.wdt-footer .footer__link:hover{ color:var(--wdt-gold); }

@media (max-width:900px){
  .wdt-footer-cols{ grid-template-columns:1fr 1fr; gap:32px 24px; }
  .wdt-footer-col--brand{ grid-column:1 / -1; }
}
@media (max-width:600px){
  .wdt-footer-cols{ grid-template-columns:1fr; }
}

/* ── Floating contact stack — AI Chat / LINE / WhatsApp ──
   The Empirra Assistant chatbot widget (shared production embed, see
   </body> script tag) self-injects a toggle button fixed at
   bottom:96px/right:24px by its own widget.css. It was built assuming a
   SINGLE float already sits at bottom:24px (its own comment says so). This
   page needs two floats there (LINE + WhatsApp), so the chat toggle's
   default 96px would collide with the second one — pushed to 168px below
   to clear both, via the ID its own markup renders with the shared
   .empirra-chat class (safe to override: page-scoped selector, doesn't
   touch the shared widget file). */
[data-wdt-page] .empirra-chat{ bottom:168px !important; right:24px !important; }

.wdt-float-stack{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:9998; /* just under the chat widget's 99999 */
  display:flex;
  flex-direction:column;
  gap:12px;
}
.wdt-float-btn{
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  text-decoration:none;
  transition:transform 200ms var(--wdt-ease-out),box-shadow 200ms var(--wdt-ease-out);
}
.wdt-float-btn:hover,
.wdt-float-btn:focus-visible{
  transform:scale(1.08);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  outline:none;
}
.wdt-float-btn svg{ width:28px; height:28px; display:block; }
.wdt-float-btn--whatsapp{ background:#25D366; }
.wdt-float-btn--whatsapp svg{ fill:#fff; }
.wdt-float-btn--line{ background:#06C755; }
.wdt-float-btn--line svg{ fill:#fff; width:26px; height:26px; }

@media (prefers-reduced-motion:reduce){
  .wdt-float-btn{ transition:none; }
  .wdt-float-btn:hover,.wdt-float-btn:focus-visible{ transform:none; }
}

@media (max-width:600px){
  .wdt-float-stack{ right:16px; bottom:16px; gap:10px; }
  .wdt-float-btn{ width:50px; height:50px; }
  .wdt-float-btn svg{ width:24px; height:24px; }
  [data-wdt-page] .empirra-chat{ right:16px !important; bottom:148px !important; }
}

/* ── LANG TOGGLE — small EN/TH link next to the desktop nav CTA + inside
   the mobile menu. Plain <a href>, no JS content-swap (hreflang pages are
   separate indexable URLs — /seo/website-design-thailand vs .../th). Shared
   by both language variants of this page (same class names). */
[data-wdt-page] .nav__lang{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--wdt-ink);
  opacity:.55;
  border:1px solid var(--wdt-border);
  border-radius:100px;
  padding:6px 12px;
  transition:opacity .15s, border-color .15s;
  white-space:nowrap;
}
[data-wdt-page] .nav__lang:hover{
  opacity:1;
  border-color:var(--wdt-gold);
}
[data-wdt-page] .nav__mobile-lang{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--wdt-gold);
  padding:14px 0 0;
}

/* ── TH LANGUAGE VARIANT — Inter has no Thai glyph coverage, so the Thai
   page (seo/website-design-thailand/th) loads Noto Sans Thai alongside it
   (see that page's <head> font preload). Scoped to html[lang="th"] only —
   never affects the English page or any other [data-wdt-page] instance. */
html[lang="th"] [data-wdt-page]{
  font-family:"Noto Sans Thai","Inter",sans-serif;
}