/*
  Theme Name: Maximum Child
  Theme URI: https://maximum-film.com/
  Description: Child theme of Hello Elementor for the Maximum Shop ฟิล์มกันรอย website. Keeps all site-specific customizations isolated from the parent theme.
  Author: Maximum
  Template: hello-elementor
  Version: 1.0.2
  Text Domain: maximum-child
*/

/* ============================================================
   DESIGN SYSTEM — LocalGuide Design System (project: 0d8f74)
   Source: claude.ai/design/p/0d8f74d0-b190-467d-be44-d1f3f5a149bd
   ============================================================ */

/* ── TOKENS: Fonts ────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Kanit:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Sarabun:wght@300;400;500;600;700&display=swap");

/* ── TOKENS: Colors ───────────────────────────────────────── */
:root {
  /* Orange scale — primary brand */
  --orange-50:  #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-200: #FED7AA;
  --orange-300: #FDBA74;
  --orange-400: #FB923C;
  --orange-500: #F97316;
  --orange-600: #EA580C;
  --orange-700: #C2410C;
  --orange-800: #9A3412;
  --orange-900: #7C2D12;

  /* Teal scale — secondary */
  --teal-50:  #F0FDFA;
  --teal-100: #CCFBF1;
  --teal-200: #99F6E4;
  --teal-300: #5EEAD4;
  --teal-400: #2DD4BF;
  --teal-500: #14B8A6;
  --teal-600: #0D9488;
  --teal-700: #0F766E;
  --teal-800: #115E59;
  --teal-900: #134E4A;

  /* Yellow scale — accent / ratings */
  --yellow-50:  #FEFCE8;
  --yellow-100: #FEF9C3;
  --yellow-200: #FEF08A;
  --yellow-300: #FDE047;
  --yellow-400: #FACC15;
  --yellow-500: #EAB308;
  --yellow-600: #CA8A04;
  --yellow-700: #A16207;
  --yellow-800: #854D0E;
  --yellow-900: #713F12;

  /* Warm stone neutrals */
  --stone-0:   #FFFFFF;
  --stone-50:  #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --stone-900: #1C1917;

  /* Semantic status */
  --success:    #16A34A;
  --success-bg: #DCFCE7;
  --warning:    #EAB308;
  --warning-bg: #FEF9C3;
  --error:      #DC2626;
  --error-bg:   #FEE2E2;
  --info:       #0D9488;
  --info-bg:    #CCFBF1;

  /* Semantic aliases — primary */
  --color-primary:       var(--orange-600);
  --color-primary-hover: var(--orange-700);
  --color-primary-press: var(--orange-800);
  --color-primary-soft:  var(--orange-50);
  --color-on-primary:    #FFFFFF;

  /* Semantic aliases — secondary */
  --color-secondary:       var(--teal-600);
  --color-secondary-hover: var(--teal-700);
  --color-secondary-soft:  var(--teal-50);
  --color-on-secondary:    #FFFFFF;

  /* Semantic aliases — accent */
  --color-accent:      var(--yellow-500);
  --color-accent-soft: var(--yellow-50);

  /* Surfaces */
  --bg-page:         var(--stone-50);
  --surface-card:    var(--stone-0);
  --surface-sunken:  var(--stone-100);
  --surface-overlay: rgba(28, 25, 23, 0.55);

  /* Text */
  --text-strong:  var(--stone-900);
  --text-body:    var(--stone-700);
  --text-muted:   var(--stone-500);
  --text-subtle:  var(--stone-400);
  --text-on-dark: var(--stone-0);
  --text-link:    var(--teal-700);

  /* Borders */
  --border-subtle:  var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong:  var(--stone-400);
  --border-focus:   var(--orange-600);

  /* Map-specific */
  --map-pin:       var(--orange-600);
  --map-pin-saved: var(--teal-600);
  --map-water:     var(--teal-50);
  --map-land:      var(--stone-100);
  --map-route:     var(--orange-500);
}

/* ── TOKENS: Typography ───────────────────────────────────── */
:root {
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", "Sarabun", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --text-2xs:  0.6875rem; /* 11px */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  3.75rem;   /* 60px */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-label:  0.08em;
}

/* ── TOKENS: Spacing ──────────────────────────────────────── */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;

  --tap-target:    44px;
  --control-h:     44px;
  --control-h-sm:  36px;
  --control-h-lg:  52px;
}

/* ── TOKENS: Effects ──────────────────────────────────────── */
:root {
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;
  --radius-full: 50%;

  --border-width:        1px;
  --border-width-strong: 2px;

  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.08), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 12px 28px rgba(28, 25, 23, 0.12), 0 4px 8px rgba(28, 25, 23, 0.05);
  --shadow-xl: 0 24px 48px rgba(28, 25, 23, 0.16);
  --shadow-pin: 0 6px 14px rgba(234, 88, 12, 0.35);

  --ring-focus:      0 0 0 3px rgba(234, 88, 12, 0.30);
  --ring-focus-teal: 0 0 0 3px rgba(13, 148, 136, 0.28);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-body);
  background-color: var(--bg-page);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ============================================================
   COMPONENT: Button
   variants: primary | secondary | tertiary | outline | ghost
   sizes:     sm | md (default) | lg
   ============================================================ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  /* default = md */
  height: var(--control-h);
  padding: 0 20px;
  font-size: var(--text-base);
}
.ds-btn:active {
  transform: scale(0.97);
}
.ds-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

/* Sizes */
.ds-btn--sm {
  height: var(--control-h-sm);
  padding: 0 14px;
  font-size: var(--text-sm);
  gap: 6px;
}
.ds-btn--lg {
  height: var(--control-h-lg);
  padding: 0 28px;
  font-size: var(--text-lg);
  gap: 10px;
}
.ds-btn--full {
  width: 100%;
}

/* primary */
.ds-btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}
.ds-btn--primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
  text-decoration: none;
}

/* secondary */
.ds-btn--secondary {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  box-shadow: var(--shadow-sm);
}
.ds-btn--secondary:hover {
  background: var(--color-secondary-hover);
  color: var(--color-on-secondary);
  text-decoration: none;
}

/* tertiary */
.ds-btn--tertiary {
  background: var(--color-primary-soft);
  color: var(--orange-700);
  border: none;
}
.ds-btn--tertiary:hover {
  background: var(--orange-100);
  color: var(--orange-700);
  text-decoration: none;
}

/* outline */
.ds-btn--outline {
  background: var(--surface-card);
  color: var(--text-strong);
  border: var(--border-width) solid var(--border-default);
}
.ds-btn--outline:hover {
  border-color: var(--border-strong);
  color: var(--text-strong);
  text-decoration: none;
}

/* ghost */
.ds-btn--ghost {
  background: transparent;
  color: var(--text-body);
  border: none;
}
.ds-btn--ghost:hover {
  background: var(--surface-sunken);
  color: var(--text-strong);
  text-decoration: none;
}

/* disabled (any variant) */
.ds-btn:disabled,
.ds-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   COMPONENT: IconButton
   variants: surface | primary | ghost
   sizes:     sm (32px) | md (40px, default) | lg (48px)
   shapes:    circle (default) | square
   ============================================================ */
.ds-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
  /* default: md circle surface */
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--surface-card);
  color: var(--text-strong);
  border: var(--border-width) solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.ds-icon-btn:active {
  transform: scale(0.92);
}
.ds-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.ds-icon-btn--sm { width: 32px; height: 32px; }
.ds-icon-btn--lg { width: 48px; height: 48px; }

.ds-icon-btn--square {
  border-radius: var(--radius-md);
}

.ds-icon-btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  box-shadow: var(--shadow-sm);
}
.ds-icon-btn--primary:hover {
  background: var(--color-primary-hover);
}

.ds-icon-btn--ghost {
  background: transparent;
  color: var(--text-body);
  border: none;
  box-shadow: none;
}
.ds-icon-btn--ghost:hover {
  background: var(--surface-sunken);
}

.ds-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   COMPONENT: Badge
   tones:    neutral | primary | secondary | accent | success | warning | error
   variants: soft (default) | solid
   ============================================================ */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  white-space: nowrap;
}

/* soft variants (default) */
.ds-badge--neutral  { background: var(--stone-100);   color: var(--stone-700); }
.ds-badge--primary  { background: var(--orange-50);   color: var(--orange-700); }
.ds-badge--secondary{ background: var(--teal-50);     color: var(--teal-700); }
.ds-badge--accent   { background: var(--yellow-50);   color: var(--yellow-700); }
.ds-badge--success  { background: var(--success-bg);  color: var(--success); }
.ds-badge--warning  { background: var(--warning-bg);  color: var(--yellow-700); }
.ds-badge--error    { background: var(--error-bg);    color: var(--error); }

/* solid variants */
.ds-badge--neutral.ds-badge--solid   { background: var(--stone-700);    color: #fff; }
.ds-badge--primary.ds-badge--solid   { background: var(--color-primary); color: #fff; }
.ds-badge--secondary.ds-badge--solid { background: var(--color-secondary); color: #fff; }
.ds-badge--accent.ds-badge--solid    { background: var(--yellow-400);   color: var(--stone-900); }
.ds-badge--success.ds-badge--solid   { background: var(--success);      color: #fff; }
.ds-badge--warning.ds-badge--solid   { background: var(--warning);      color: var(--stone-900); }
.ds-badge--error.ds-badge--solid     { background: var(--error);        color: #fff; }

/* ============================================================
   COMPONENT: Tag
   Removable keyword chip — outlined, neutral
   ============================================================ */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

.ds-tag__remove {
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  line-height: 0;
}
.ds-tag__remove:hover {
  color: var(--text-strong);
}

/* ============================================================
   COMPONENT: Avatar
   Circular user avatar with initials fallback
   ============================================================ */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--orange-500);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  overflow: hidden;
  /* default: 40px */
  width: 40px;
  height: 40px;
  font-size: 16px;
}
.ds-avatar--sm { width: 32px;  height: 32px;  font-size: 12px; }
.ds-avatar--lg { width: 56px;  height: 56px;  font-size: 22px; }
.ds-avatar--xl { width: 72px;  height: 72px;  font-size: 28px; }

.ds-avatar--ring {
  border: 2px solid var(--surface-card);
  box-shadow: var(--shadow-sm);
}

/* palette variants (deterministic per name length — apply via template) */
.ds-avatar--teal   { background: var(--teal-600); }
.ds-avatar--yellow { background: var(--yellow-500); }
.ds-avatar--dark   { background: var(--orange-700); }

/* ============================================================
   COMPONENT: FilterChip
   Interactive category filter pill
   ============================================================ */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-body);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.ds-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.ds-chip:active {
  transform: scale(0.96);
}
.ds-chip--selected,
.ds-chip[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.ds-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.ds-chip__count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  opacity: 0.7;
}

/* ============================================================
   COMPONENT: PlaceCard  (adapted → ProductCard for MAXIMUMSHOP)
   layouts: vertical (default) | horizontal
   ============================================================ */
.ds-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.ds-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.ds-card--horizontal {
  flex-direction: row;
  gap: 12px;
  padding: 12px;
}

/* Card image area */
.ds-card__image {
  position: relative;
  width: 100%;
  height: 168px;
  flex-shrink: 0;
  background: var(--surface-sunken);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.ds-card--horizontal .ds-card__image {
  width: 116px;
  height: 116px;
  border-radius: var(--radius-md);
}

/* Open/closed status pill overlaid on image */
.ds-card__status {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
}
.ds-card__status--open  { color: var(--success); }
.ds-card__status--closed{ color: var(--error); }
.ds-card__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* Save button overlaid on image */
.ds-card__save {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
  color: var(--stone-600);
  transition: color var(--dur-fast) var(--ease-out);
}
.ds-card__save--saved { color: var(--color-secondary); }
.ds-card__save:hover  { color: var(--color-secondary); }

/* Card body */
.ds-card__body {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-card--horizontal .ds-card__body {
  padding: 0;
}

.ds-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-secondary);
  font-weight: var(--fw-bold);
}

.ds-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-card--horizontal .ds-card__title {
  font-size: var(--text-lg);
}

.ds-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  flex-wrap: wrap;
}
.ds-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.ds-card__price {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}

/* ============================================================
   COMPONENT: Rating
   Read-only star display with optional count
   ============================================================ */
.ds-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ds-rating__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--yellow-500);
  font-size: var(--text-base);
  line-height: 1;
}
.ds-rating__value {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.ds-rating__count {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ============================================================
   COMPONENT: Toast
   tones: primary | secondary | success | warning | error
   ============================================================ */
.ds-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  padding: 14px 16px;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border-left: 4px solid var(--color-primary);
}

.ds-toast--primary   { border-left-color: var(--color-primary); }
.ds-toast--secondary { border-left-color: var(--color-secondary); }
.ds-toast--success   { border-left-color: var(--success); }
.ds-toast--warning   { border-left-color: var(--warning); }
.ds-toast--error     { border-left-color: var(--error); }

.ds-toast__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-primary);
}
.ds-toast--secondary .ds-toast__icon { color: var(--color-secondary); }
.ds-toast--success   .ds-toast__icon { color: var(--success); }
.ds-toast--warning   .ds-toast__icon { color: var(--warning); }
.ds-toast--error     .ds-toast__icon { color: var(--error); }

.ds-toast__content {
  flex: 1;
  min-width: 0;
}
.ds-toast__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.ds-toast__message {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 2px;
}

.ds-toast__close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-subtle);
  padding: 0;
  line-height: 0;
}
.ds-toast__close:hover {
  color: var(--text-body);
}

/* ============================================================
   COMPONENT: Input
   sizes: sm | md (default) | lg
   states: default | focus | error
   ============================================================ */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.ds-field__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}

.ds-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--control-h);
  padding: 0 14px;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.ds-input-wrap:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
}
.ds-input-wrap--error {
  border-color: var(--error);
}
.ds-input-wrap--error:focus-within {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.20);
}
.ds-input-wrap--sm { height: var(--control-h-sm); }
.ds-input-wrap--lg { height: var(--control-h-lg); }

.ds-input-wrap__icon {
  color: var(--text-muted);
  display: inline-flex;
  flex-shrink: 0;
}

.ds-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-strong);
  min-width: 0;
}
.ds-input-wrap input::placeholder {
  color: var(--text-subtle);
}

/* standalone input (without wrapper) */
.ds-input {
  width: 100%;
  height: var(--control-h);
  padding: 0 14px;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-strong);
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.ds-input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
}
.ds-input--error {
  border-color: var(--error);
}
.ds-input--error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.20);
}
.ds-input::placeholder {
  color: var(--text-subtle);
}

.ds-field__hint  { font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); }
.ds-field__error { font-family: var(--font-body); font-size: var(--text-xs); color: var(--error); }

/* ============================================================
   COMPONENT: Select
   Styled native <select>
   ============================================================ */
.ds-select-wrap {
  position: relative;
  width: 100%;
}
.ds-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: var(--control-h);
  padding: 0 40px 0 14px;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-strong);
  cursor: pointer;
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.ds-select:focus {
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
}
.ds-select--sm { height: var(--control-h-sm); }
.ds-select--lg { height: var(--control-h-lg); }

.ds-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
  font-size: 0.75em;
}

/* ============================================================
   COMPONENT: Checkbox
   ============================================================ */
.ds-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.ds-checkbox--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ds-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  background: var(--surface-card);
  border: var(--border-width-strong) solid var(--border-strong);
  transition: background var(--dur-fast) var(--ease-out);
}
.ds-checkbox__box--checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.ds-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ds-checkbox input[type="checkbox"]:focus-visible + .ds-checkbox__box {
  box-shadow: var(--ring-focus);
}

.ds-checkbox__label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-body);
}

/* ============================================================
   COMPONENT: Switch
   Toggle. On state uses --color-secondary (teal).
   ============================================================ */
.ds-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.ds-switch--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.ds-switch__track {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--stone-300);
  transition: background var(--dur-base) var(--ease-out);
  flex-shrink: 0;
  cursor: pointer;
}
.ds-switch__track--on {
  background: var(--color-secondary);
}

.ds-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: left var(--dur-base) var(--ease-snap);
}
.ds-switch__track--on .ds-switch__thumb {
  left: 21px;
}

.ds-switch__label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-body);
}

/* ============================================================
   COMPONENT: MapPin
   Map marker. tone: primary | saved | accent | neutral
   ============================================================ */
.ds-map-pin {
  position: relative;
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  transform-origin: bottom center;
  transition: transform var(--dur-base) var(--ease-snap);
  filter: drop-shadow(0 3px 5px rgba(28, 25, 23, 0.28));
  z-index: 1;
}
.ds-map-pin--selected {
  transform: scale(1.15);
  filter: drop-shadow(var(--shadow-pin));
  z-index: 2;
}

/* label variant */
.ds-map-pin__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--map-pin);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  border: 2px solid #fff;
}
.ds-map-pin--saved .ds-map-pin__label   { background: var(--map-pin-saved); }
.ds-map-pin--accent .ds-map-pin__label  { background: var(--yellow-500); color: var(--stone-900); }
.ds-map-pin--neutral .ds-map-pin__label { background: var(--stone-700); }

/* ============================================================
   COMPONENT: Tabs
   Underline tab bar
   ============================================================ */
.ds-tabs {
  display: flex;
  gap: 4px;
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.ds-tab {
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.ds-tab:hover {
  color: var(--text-strong);
}
.ds-tab--active,
.ds-tab[aria-selected="true"] {
  color: var(--text-strong);
  font-weight: var(--fw-bold);
}
.ds-tab::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-out);
}
.ds-tab--active::after,
.ds-tab[aria-selected="true"]::after {
  background: var(--color-primary);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.ds-container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
.ds-container--sm { max-width: var(--container-sm); }
.ds-container--md { max-width: var(--container-md); }
.ds-container--lg { max-width: var(--container-lg); }

.ds-section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.ds-display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--fw-extra);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.ds-h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.ds-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: var(--leading-snug);
}
.ds-h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  line-height: var(--leading-snug);
}
.ds-h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.ds-lead {
  font-size: var(--text-lg);
  color: var(--text-body);
  line-height: var(--leading-relaxed);
}
.ds-body { font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-normal); }
.ds-caption { font-size: var(--text-sm);  color: var(--text-muted); }
.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
}
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* ============================================================
   SURFACE UTILITIES
   ============================================================ */
.ds-surface {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.ds-surface--sunken {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* ============================================================
   RESPONSIVE
   Mobile: < 768px | Tablet: 768–1024px | Desktop: > 1024px
   ============================================================ */
@media (max-width: 767px) {
  .ds-display { font-size: var(--text-4xl); }
  .ds-h1      { font-size: var(--text-3xl); }
  .ds-h2      { font-size: var(--text-2xl); }
  .ds-container { padding-left: var(--space-4); padding-right: var(--space-4); }
  .ds-section   { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .ds-card--horizontal { flex-direction: column; }
  .ds-card--horizontal .ds-card__image { width: 100%; height: 140px; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .ds-card--horizontal .ds-card__body { padding: 14px 16px 16px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ds-display { font-size: var(--text-5xl); }
  .ds-container { padding-left: var(--space-8); padding-right: var(--space-8); }
}

/* ============================================================
   PAGE: Homepage custom sections (fh-*)
   Classes used in Elementor HTML widgets and custom sections
   ============================================================ */

/* ── Global ── */
.fh-wrap *{box-sizing:border-box;}
.fh-wrap{font-family:var(--font-body);color:var(--text-body);background:var(--surface-card);line-height:var(--leading-normal);max-width:100vw;}
.fh-wrap img,.fh-wrap svg{max-width:100%;}
.fh-wrap [class^="fh-"]{min-width:0;}
.fh-container{max-width:1180px;margin:0 auto;padding:0 var(--space-6);}
.fh-section{padding:var(--space-20) 0;}
.fh-section--tight{padding:var(--space-16) 0;}
.fh-eyebrow{
	display:inline-flex;align-items:center;gap:var(--space-2);
	font-size:var(--text-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);
	color:var(--color-primary-hover);background:var(--color-primary-soft);
	padding:6px var(--space-4);border-radius:var(--radius-pill);text-transform:uppercase;
}
.fh-h2{
	font-family:var(--font-display);
	font-size:clamp(var(--text-2xl),3.6vw,var(--text-3xl));
	font-weight:var(--fw-extra);margin:var(--space-5) 0 var(--space-3);
	letter-spacing:var(--tracking-tight);color:var(--text-strong);
}
.fh-sub{color:var(--text-muted);font-size:var(--text-lg);max-width:620px;}
.fh-center{text-align:center;margin-left:auto;margin-right:auto;}
/* When this class sits on an Elementor *container* (.e-con) rather than
   a widget, Elementor's own base rule `.e-con{text-align:var(--text-align)}`
   (specificity 0,1,0, --text-align defaults to "initial"/start unless a
   Style-tab alignment was set) is declared directly on that same element
   and therefore always beats an *inherited* center — and since both are
   single-class selectors, it also wins the ".fh-center{text-align:center}"
   tie outright once Elementor's stylesheet loads after ours. The result:
   centering silently breaks (children read as left-aligned) only on
   pages where Elementor has actually generated this container's CSS —
   which about-us's post-16.css hadn't yet, masking the bug until its
   cache was rebuilt for this redesign. Pairing the class with ".e-con"
   raises specificity to 0,2,0, which wins outright regardless of order.
   The same tie also hits margin: Elementor's `.e-con` rule resolves
   margin-inline-start/end from `--margin-left`/`--margin-right` (default
   0px) at 0,1,0, beating ".fh-center{margin-left:auto;margin-right:auto}"
   the same way — so a max-width container (e.g. .fh-narrow-760) sits
   flush left instead of centered on the page. Fold margin into this same
   compound-selector fix. */
.fh-center.e-con,.fh-cta.e-con,.fh-why-stats.e-con{text-align:center;margin-left:auto;margin-right:auto;}
/* .fh-container missed this same fix when the list above was written —
   it's the page-width wrapper used on every Container-based page
   (about-us/contact-us/portfolio/film-specification), so the effect
   wasn't "text reads left-aligned" like .fh-center, it was "the entire
   1180px-capped page body sits flush against the left edge with all the
   leftover space dumped on the right" (confirmed via getBoundingClientRect:
   x:10 instead of the ~130px a true center would need at 1440px wide).
   Home never hit this because it's built with the legacy Section/Column
   model, not Container, so it has no .e-con on its width-capped wrapper
   at all. No text-align here (unlike the rule above) — .fh-container only
   needs to center the box itself, its contents keep their own alignment. */
.fh-container.e-con{margin-left:auto;margin-right:auto;}

/* ── Nav ──
   2026-07-08: Nav แปลงเป็น Elementor Library template "Site Header"
   (section.fh-nav > 2 columns > shortcode widgets [maximum_logo] /
   [maximum_header_menu]). .elementor-container คือ flex row จริงที่
   Elementor เจนขึ้นมาเอง (child ของ section) จึง bridge ด้วย
   ".fh-nav .elementor-container" แทนคลาส .fh-nav-inner เดิม (ไม่มี element
   ไหนใส่คลาสนั้นแล้ว) — บังคับ column ให้ width:auto (ไม่ใช่ % ของ Elementor
   default) เพื่อให้โลโก้ชิดซ้าย/เมนูชิดขวาแบบ space-between เหมือนเดิม
   ตาม pattern "assume tie, add !important" ที่เคยเจอกับ .e-con/.elementor-widget */
.fh-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border-subtle);}
.fh-nav .elementor-container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-6);max-width:1180px;margin:0 auto;}
.fh-nav .elementor-column{width:auto !important;max-width:none !important;flex-basis:auto !important;flex-grow:0 !important;flex-shrink:0 !important;}
.fh-nav .custom-logo-link{display:flex;align-items:center;}
.fh-nav .custom-logo{height:46px;width:auto;display:block;}
.fh-nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0;}
.fh-nav-links a{color:var(--text-body);text-decoration:none;font-weight:var(--fw-medium);font-size:var(--text-sm);opacity:.85;transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
.fh-nav-links a:hover{opacity:1;color:var(--color-primary);}
/* Hamburger toggle — hidden on desktop, shown only under the 900px nav
   breakpoint below. Bars animate into an X via .is-open (set by the JS
   in functions.php's wp_footer hook). */
.fh-nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0;background:none;border:none;cursor:pointer;flex:none;}
.fh-nav-toggle-bar{display:block;width:24px;height:2px;margin:0 auto;background:var(--text-strong);border-radius:2px;transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);}
.fh-nav-toggle.is-open .fh-nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.fh-nav-toggle.is-open .fh-nav-toggle-bar:nth-child(2){opacity:0;}
.fh-nav-toggle.is-open .fh-nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.fh-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
	background:var(--color-primary);color:var(--color-on-primary);border:none;
	padding:13px 26px;border-radius:var(--radius-sm);
	font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--text-sm);
	text-decoration:none;
	transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
	box-shadow:0 8px 20px -8px rgba(234,88,12,.45);
}
.fh-btn:hover{background:var(--color-primary-hover);transform:translateY(-1px);text-decoration:none;}
.fh-btn--outline{background:var(--surface-card);color:var(--color-primary-hover);border:1.5px solid var(--color-primary);box-shadow:none;}
.fh-btn--outline:hover{background:var(--color-primary-soft);}
.fh-btn--line{background:#00B900;color:#fff;border-color:#00B900;}
.fh-btn--line:hover{background:#009900;border-color:#009900;}
/* .fh-btn/-line/-outline above are CSS Classes, so on a native button
   WIDGET (about-us/contact-us/portfolio CTAs) they land on the outer
   .elementor-element wrapper, not the real <a class="elementor-button">
   inside it — the wrapper becomes one box (bg/padding/pill radius from
   the rules above) while the anchor still carries Elementor's own kit
   default (each post's generated CSS sets
   ".elementor-widget-button .elementor-button{background-color:var(
   --e-global-color-accent)}" directly on that same tag, 0,2,0 specificity,
   loaded after style.css) — a second, different-green box nested inside
   the first. Stripping the inner anchor back to bare text/color:inherit
   leaves the wrapper as the only visible box. */
.fh-btn .elementor-button{background:none !important;color:inherit !important;padding:0 !important;border-radius:0 !important;font-size:inherit !important;line-height:inherit !important;}

/* ── Hero ── */
.fh-hero{
	position:relative;padding:90px 0 70px;
	background:
		radial-gradient(900px 480px at 85% -10%, rgba(234,88,12,.10), transparent 60%),
		radial-gradient(700px 420px at -5% 110%, rgba(234,88,12,.06), transparent 60%),
		var(--surface-card);
	overflow:hidden;
}
.fh-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.fh-hero h1{
	font-family:var(--font-display);
	font-size:clamp(34px,5vw,56px);font-weight:var(--fw-extra);
	letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);margin:var(--space-5) 0;color:var(--text-strong);
}
.fh-hero h1 .accent{color:var(--color-primary);}
.fh-hero p{color:var(--text-muted);font-size:var(--text-lg);max-width:540px;margin-bottom:var(--space-8);}
.fh-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:var(--space-8);}
.fh-hero-stats{display:flex;gap:34px;flex-wrap:wrap;}
.fh-stat b{display:block;font-size:26px;font-weight:var(--fw-extra);color:var(--text-strong);}
.fh-stat span{font-size:var(--text-xs);color:var(--text-muted);}
.fh-hero-visual{position:relative;}
.fh-hero-card{
	background:linear-gradient(160deg,var(--orange-600) 0%,var(--orange-500) 100%);
	border-radius:var(--radius-xl);padding:42px;color:#fff;
	box-shadow:var(--shadow-xl);position:relative;overflow:hidden;
}
.fh-hero-card::after{content:"";position:absolute;inset:0;background:radial-gradient(260px 260px at 90% 10%,rgba(255,255,255,.18),transparent 60%);}
.fh-hero-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;position:relative;z-index:1;}
.fh-hero-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-lg);padding:var(--space-5);backdrop-filter:blur(2px);}
.fh-hero-pill .ic{font-size:22px;margin-bottom:var(--space-2);display:block;}
.fh-hero-pill b{display:block;font-size:var(--text-sm);font-weight:var(--fw-bold);}
.fh-hero-pill span{font-size:var(--text-xs);opacity:.85;}

/* ── Trust bar ── */
.fh-trust{border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);background:var(--surface-sunken);}
.fh-trust-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 36px;padding:26px 0;color:var(--text-muted);font-size:var(--text-sm);font-weight:var(--fw-semibold);}
.fh-trust-inner span{display:flex;align-items:center;gap:var(--space-2);flex:0 1 auto;max-width:100%;}

/* ── Services ── */
.fh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-12);}
.fh-card{
	border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;
	background:var(--surface-card);
	transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.fh-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-default);}
.fh-card-img-wrap{position:relative;}
.fh-card-img{width:100%;height:160px;object-fit:cover;display:block;}
.fh-card-body{padding:var(--space-6) 26px var(--space-8);}
/* position:absolute needs !important — Elementor's own ".elementor-widget
   {position:relative}" is the same specificity (0,1,0) and loads after
   style.css, so it otherwise wins the tie and leaves this icon sitting
   in normal flow (pushing the image-wrap taller) instead of overlapping
   the image's bottom edge as intended. */
.fh-card-ic{width:52px;height:52px;border-radius:var(--radius-md);background:var(--surface-card);display:flex;align-items:center;justify-content:center;font-size:24px;position:absolute !important;left:20px;bottom:-22px;box-shadow:var(--shadow-md);}
.fh-card p{color:var(--text-muted);font-size:var(--text-sm);margin:0;}
/* Card title is a heading WIDGET, so Elementor's own kit default
   (.elementor-widget-heading .elementor-heading-title{font-family;
   font-weight;color}) lands directly on the same <h3> tag with higher
   specificity (0,2,0) than a bare ".fh-card h3" (0,1,1) ever can — a
   plain descendant selector isn't enough here the way it is for
   ".fh-card p" (a text-editor widget, whose Elementor default only
   touches its wrapper, not the <p> itself). Real values go on the
   wrapper div instead, then the title inherits them; ":not(.fh-card-badge)"
   keeps this from also re-styling the icon-badge heading widget that
   sits next to the title inside the same .fh-card-body. */
.fh-card-body > .elementor-widget-heading:not(.fh-card-badge){
	font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--fw-bold);
	margin:var(--space-5) 0 var(--space-2);color:var(--text-strong);
}
.fh-card-body > .elementor-widget-heading:not(.fh-card-badge) .elementor-heading-title{
	display:block;font-size:inherit;font-weight:inherit;font-family:inherit;color:inherit;margin:inherit;
}

/* ── Process ── */
.fh-process{background:var(--color-primary-soft);}
.fh-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-12);}
.fh-step{position:relative;background:var(--surface-card);border-radius:var(--radius-lg);padding:28px 22px;border:1px solid var(--border-subtle);}
.fh-step-num{width:36px;height:36px;border-radius:var(--radius-pill);background:var(--color-primary);color:var(--color-on-primary);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-extra);font-size:var(--text-sm);margin-bottom:var(--space-4);}
.fh-step h4{margin:0 0 var(--space-2);font-size:var(--text-base);font-weight:var(--fw-bold);color:var(--text-strong);}
.fh-step p{margin:0;font-size:var(--text-sm);color:var(--text-muted);}

/* ── Why us ── */
.fh-why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;}
.fh-why-list{list-style:none;margin:var(--space-8) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-5);}
.fh-why-list li{display:flex;gap:14px;align-items:flex-start;}
.fh-why-check{flex:none;width:26px;height:26px;border-radius:var(--radius-pill);background:var(--color-primary);color:var(--color-on-primary);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:var(--fw-extra);margin-top:2px;}
/* .fh-why-check's color lives on the wrapper (CSS Classes always land
   there, never the inner tag — see the .fh-card-body bridge above); the
   ✓ glyph itself sits in the child .elementor-heading-title, which
   Elementor's own kit default recolors directly, so it needs the same
   "inherit from wrapper" bridge or the checkmark renders in the site's
   accent color instead of the intended on-primary white. */
.fh-why-check .elementor-heading-title{color:inherit !important;}
.fh-why-list b{display:block;font-size:var(--text-base);font-weight:var(--fw-bold);color:var(--text-strong);}
.fh-why-list span{color:var(--text-muted);font-size:var(--text-sm);}
.fh-why-visual{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl);}
.fh-why-photo{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.fh-why-stats{position:absolute;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:var(--radius-lg);padding:var(--space-5);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;text-align:center;}
.fh-why-metric b{display:block;font-size:26px;font-weight:var(--fw-extra);color:var(--color-primary);}
.fh-why-metric span{font-size:var(--text-xs);color:var(--text-muted);}

/* ── CTA ── */
/* border-radius/padding need !important: Elementor's own .e-con base rule
   sets border-radius:var(--border-radius,0) and padding-inline/block-*
   (default 10px) at the same specificity (0,1,0) and loads after this
   stylesheet, so it silently wins the tie on every page using this class
   on a container (portfolio/about-us/contact-us/film-specification) —
   same root cause as the other .e-con specificity pitfalls documented
   above, just not caught until inspecting computed styles post-scroll. */
.fh-cta{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);border-radius:var(--radius-xl) !important;padding:60px !important;color:#fff;text-align:center;position:relative;overflow:hidden;}
.fh-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at 80% 0%,rgba(255,255,255,.14),transparent 60%);}
/* Same heading-widget-vs-kit-default specificity gap as .fh-card-body's
   title bridge above: h2 here IS the .elementor-heading-title element
   itself (not a wrapper), so font-family/font-weight/color need
   !important to beat Elementor's same-tag kit-default rule (0,2,0) since
   ".fh-cta h2" is only (0,1,1). */
.fh-cta h2{position:relative;z-index:1;font-family:var(--font-display) !important;font-size:clamp(26px,3.4vw,36px);font-weight:var(--fw-extra) !important;color:#fff !important;margin:0 0 14px;}
/* color:#fff needed (not just opacity) — this text-editor <p> inherited
   the default gray body text color, which read as near-illegible on the
   orange gradient background (contrast bug found in mobile audit). */
.fh-cta p{position:relative;z-index:1;color:#fff;opacity:.92;max-width:560px;margin:0 auto 30px;}
.fh-cta-actions{position:relative;z-index:1;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.fh-cta .fh-btn{background:var(--surface-card);color:var(--color-primary-hover);box-shadow:none;}
.fh-cta .fh-btn:hover{background:var(--color-primary-soft);}
.fh-cta .fh-btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.fh-cta .fh-btn--outline:hover{background:rgba(255,255,255,.12);}
.fh-cta .fh-btn--line{background:#00B900;color:#fff;}
.fh-cta .fh-btn--line:hover{background:#009900;}

/* ── Footer ── */
.fh-footer{padding:56px 0 30px;border-top:1px solid var(--border-subtle);}
.fh-footer-grid{display:grid;grid-template-columns:1.4fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:36px;}
/* !important จำเป็น: Elementor เจนคลาส .elementor-widget-heading .elementor-heading-title
   (specificity 0,2,0) ชนกับ .fh-footer h5 (0,1,1) เสมอ ตาม pitfall เดียวกับ .fh-card h3 (8.6.1 ข้อ 8) */
.fh-footer h5{font-size:var(--text-sm) !important;font-weight:var(--fw-bold) !important;margin:0 0 14px;color:var(--text-strong) !important;font-family:inherit !important;}
.fh-footer p,.fh-footer a{color:var(--text-muted);font-size:var(--text-sm);text-decoration:none;}
.fh-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
/* 2026-07-08: fh-footer-bottom กลายเป็น section (ไม่ใช่ html widget div
   เดิม) มี 2 columns — copyright (ซ้าย) + เมนู footer จาก Appearance > Menus
   (ขวา) bridge เข้า .elementor-container เหมือน .fh-nav ด้านบน */
.fh-footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--border-subtle);color:var(--text-muted);font-size:var(--text-xs);}
.fh-footer-bottom .elementor-container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;}
.fh-footer-bottom .elementor-column{width:auto !important;max-width:none !important;flex-basis:auto !important;flex-grow:0 !important;flex-shrink:0 !important;}
.fh-footer-bottom p{margin:0;}
.fh-footer-bottom-links{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.fh-footer-bottom-links a{color:var(--text-muted);text-decoration:none;font-size:var(--text-xs);}
.fh-footer-bottom-links a:hover{color:var(--color-primary);}
.fh-footer-bottom .fh-footer-bottom-links{display:none !important;}

/* ── Responsive: homepage ── */
@media (max-width:900px){
	/* 2026-07-08 fix: nav links used to be display:none here with no
	   toggle at all, leaving mobile visitors with zero way to navigate
	   off the homepage. position:fixed (not absolute) is deliberate:
	   .elementor-column is position:relative by default (Elementor's own
	   CSS, same "assume a positioned ancestor already exists" tie as the
	   .e-con/.elementor-widget pitfalls) so an absolute panel would be
	   confined to that ~50px-wide auto-sized column instead of spanning
	   the screen. Fixed positioning is viewport-relative regardless of
	   ancestor positioning; `top` is set at runtime by the toggle script
	   in functions.php to sit flush under the nav bar's real height. */
	.fh-nav-toggle{display:inline-flex;}
	.fh-nav-links{
		display:flex;flex-direction:column;gap:0;
		position:fixed;top:0;left:0;right:0;
		background:var(--surface-card);
		border-bottom:1px solid var(--border-subtle);
		box-shadow:var(--shadow-md);
		max-height:0;overflow:hidden;opacity:0;visibility:hidden;
		transition:max-height var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);
	}
	.fh-nav-links.is-open{max-height:70vh;overflow-y:auto;opacity:1;visibility:visible;}
	.fh-nav-links a{display:block;padding:14px var(--space-6);opacity:1;border-bottom:1px solid var(--border-subtle);}
	.fh-nav .custom-logo{height:38px;}
	.fh-hero-grid{grid-template-columns:1fr;}
	.fh-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
	.fh-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
	.fh-why-grid{grid-template-columns:1fr;}
	/* 2026-07-08 fix: the stats overlay (2 rows of number+label) is taller
	   than the 4:3 photo at mobile column widths, so absolute + bottom
	   anchoring pushed its top past the photo's top edge — and
	   .fh-why-visual's overflow:hidden (there for the photo's rounded
	   corners) silently clipped that overflow instead of erroring, same
	   class of bug as the other Elementor-default ties in 8.6.1. Dropping
	   the overlay into normal flow below the photo removes the height
	   constraint entirely regardless of photo aspect ratio. */
	.fh-why-stats{position:static;left:auto;right:auto;bottom:auto;margin-top:var(--space-4);}
	.fh-footer-grid{grid-template-columns:1fr 1fr;}
	.fh-footer-bottom .elementor-container{flex-direction:column;text-align:center;}
}
@media (max-width:560px){
	.fh-grid{grid-template-columns:1fr;}
	.fh-steps{grid-template-columns:1fr;}
	.fh-footer-grid{grid-template-columns:1fr;}
	.fh-section{padding:56px 0;}
	.fh-cta{padding:40px var(--space-6) !important;}
}

/* ── Fullscreen slide ── */
.fh-fullslide{position:relative;}
.fh-slider{position:relative;height:100vh;min-height:560px;max-height:980px;overflow:hidden;}
.fh-slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity var(--dur-slow) var(--ease-out);}
.fh-slide.is-active{opacity:1;visibility:visible;z-index:2;}
/* Elementor's own .elementor-section/.elementor-widget{position:relative} rules load after
   this stylesheet and share the same specificity, so they silently win the cascade and break
   the absolute positioning above — slides stack in normal flow instead of layering, pushing
   slides 2-3 far down the page and taking the arrow/dot controls with them. #fh-slider-scoped
   overrides restore the intended layout regardless of stylesheet load order. */
#fh-slider .fh-slide{position:absolute;}
/* The column/row/widget-wrap around the slides only auto-size to their in-flow content
   (a few px), since none of that content is the absolutely-positioned slides — without an
   explicit height they collapse, and inset:0 above then resolves against that collapsed
   box instead of the section's real 900px. Stretching them to 100% restores a real
   containing block for both the slides and the arrow/dot overlay below. */
#fh-slider .elementor-container,
#fh-slider .elementor-column,
#fh-slider .elementor-widget-wrap{height:100%;}
#fh-slider .elementor-widget-html{position:absolute;inset:0;z-index:3;pointer-events:none;}
#fh-slider .elementor-widget-html .fh-slide-arrow,
#fh-slider .elementor-widget-html .fh-slide-dots,
#fh-slider .elementor-widget-html .fh-slide-scroll{pointer-events:auto;}
.fh-slide-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;}
.fh-slide-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,14,.35) 0%,rgba(20,16,14,.70) 100%);}
.fh-slide-content{position:relative;z-index:1;color:#fff;max-width:640px;}
.fh-slide-content .fh-eyebrow{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(2px);}
.fh-slide-content h1{font-family:var(--font-display);font-size:clamp(34px,5.2vw,58px);font-weight:var(--fw-extra);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);margin:var(--space-5) 0;color:#fff;}
.fh-slide-content h1 .accent{color:var(--orange-300);}
.fh-slide-content h2{font-family:var(--font-body);font-size:clamp(20px,3vw,24px);line-height:1.5;font-weight:var(--fw-bold);color:#fff;margin:0 0 var(--space-8);}
.fh-slide-content p{color:rgba(255,255,255,.88);font-size:var(--text-lg);max-width:520px;margin-bottom:var(--space-8);}
.fh-slide-scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;color:#fff;font-size:var(--text-xs);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-decoration:none;opacity:.85;}
.fh-slide-scroll span{width:26px;height:42px;border:2px solid rgba(255,255,255,.7);border-radius:14px;position:relative;}
.fh-slide-scroll span::after{content:"";position:absolute;top:6px;left:50%;width:4px;height:8px;margin-left:-2px;background:#fff;border-radius:2px;animation:fh-scroll-dot 1.6s infinite;}
@keyframes fh-scroll-dot{0%{opacity:1;top:6px;}70%{opacity:0;top:20px;}100%{opacity:0;top:6px;}}
.fh-slide-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:var(--radius-pill);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);transition:background var(--dur-fast) var(--ease-out);padding:0;}
.fh-slide-arrow:hover{background:rgba(255,255,255,.32);}
.fh-slide-arrow.prev{left:20px;}
.fh-slide-arrow.next{right:20px;}
/* z-index:4, one above .fh-slide-scroll — both sit on the same horizontal center line,
   so without this the scroll-down link (later in source order) eats clicks meant for
   the middle dot. */
.fh-slide-dots{position:absolute;left:50%;bottom:80px;transform:translateX(-50%);z-index:4;display:flex;gap:10px;}
.fh-slide-dots .dot{width:9px;height:9px;border-radius:var(--radius-pill);background:rgba(255,255,255,.4);border:none;cursor:pointer;padding:0;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);}
.fh-slide-dots .dot.is-active{background:#fff;transform:scale(1.25);}
@media (max-width:560px){
	.fh-slider{height:88vh;}
	.fh-slide-arrow{display:none;}
	.fh-slide-content h2{font-size:20px;line-height:1.55;margin-bottom:var(--space-6);}
	.fh-slide-scroll{display:none;}
	.fh-slide-dots{bottom:34px;}
}

/* ── Price Calculator ── */
.fh-calc{background:var(--surface-sunken);}
.fh-calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-12);align-items:stretch;}
.fh-calc-results{margin-top:var(--space-8);}
.fh-calc-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:30px;display:flex;flex-direction:column;gap:22px;}
.fh-calc-label{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--text-muted);margin-bottom:14px;letter-spacing:var(--tracking-wide);text-transform:uppercase;}
.fh-calc-inputs{display:flex;align-items:flex-end;gap:14px;}
.fh-field{flex:1;}
.fh-field span.field-label{display:block;font-size:var(--text-sm);font-weight:var(--fw-semibold);margin-bottom:var(--space-2);color:var(--text-strong);}
.fh-field-wrap{position:relative;}
.fh-input{width:100%;font-family:var(--font-body);font-size:24px;font-weight:var(--fw-bold);padding:12px 48px 12px 16px;border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-sunken);color:var(--text-strong);transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);}
.fh-input:focus{outline:none;border-color:var(--border-focus);background:var(--surface-card);box-shadow:var(--ring-focus);}
.fh-unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--text-muted);}
.fh-times{font-size:22px;font-weight:var(--fw-semibold);color:var(--border-default);padding-bottom:12px;}
.fh-diag-box{flex:1;background:var(--color-primary-soft);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px 18px;}
.fh-diag-box .cap{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:4px;}
.fh-diag-box .val-row{display:flex;align-items:baseline;gap:var(--space-2);}
.fh-diag-box .val{font-size:34px;font-weight:var(--fw-extra);line-height:1;color:var(--text-strong);}
.fh-diag-box .unit2{font-size:var(--text-xl);font-weight:var(--fw-semibold);color:var(--text-muted);}
.fh-diag-box .sub{font-size:var(--text-xs);color:var(--text-subtle);margin-top:var(--space-1);}
.fh-calc-note{font-size:var(--text-xs);color:var(--text-subtle);text-align:center;}
.fh-btn-reset{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:7px;background:none;border:1.5px solid var(--border-subtle);color:var(--text-strong);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--fw-semibold);cursor:pointer;padding:9px 18px;border-radius:var(--radius-pill);white-space:nowrap;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);}
.fh-btn-reset:hover{border-color:var(--border-default);background:var(--surface-sunken);}
.fh-preview-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:28px 28px 24px;display:flex;flex-direction:column;}
.fh-preview-card .fh-calc-label{margin-bottom:4px;}
.fh-preview-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:38px 54px 24px 16px;}
.fh-preview-box{position:relative;background:linear-gradient(135deg,#FFFFFF 0%,var(--orange-200) 55%,var(--orange-400) 100%);border-radius:var(--radius-sm);border:3px solid var(--text-strong);box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;min-width:60px;min-height:40px;transition:width var(--dur-fast) var(--ease-out),height var(--dur-fast) var(--ease-out);}
.fh-preview-box svg{position:absolute;inset:0;}
.fh-preview-box.is-empty svg,.fh-preview-box.is-empty .inch-pill,.fh-preview-box.is-empty .fh-w-label,.fh-preview-box.is-empty .fh-h-label{visibility:hidden;}
.fh-preview-box .inch-pill{position:relative;background:var(--text-strong);color:#fff;font-weight:var(--fw-bold);font-size:var(--text-sm);padding:6px 13px;border-radius:var(--radius-pill);white-space:nowrap;box-shadow:var(--shadow-md);}
.fh-preview-box .screen-lbl{position:absolute;left:10px;bottom:8px;font-size:10px;color:rgba(255,255,255,.85);letter-spacing:var(--tracking-wide);}
.fh-w-label{position:absolute;top:-28px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--text-muted);font-size:var(--text-xs);font-weight:var(--fw-semibold);}
.fh-w-label .line{flex:1;height:1px;background:var(--border-subtle);}
.fh-h-label{position:absolute;right:-34px;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--text-muted);font-size:var(--text-xs);font-weight:var(--fw-semibold);}
.fh-h-label .line{flex:1;width:1px;background:var(--border-subtle);}
.fh-h-label .txt{white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);}
.fh-preview-foot{text-align:center;font-size:var(--text-xs);color:var(--text-subtle);border-top:1px solid var(--border-subtle);padding-top:14px;}

/* ── Device type chips ── */
.fh-device-grid{display:flex;flex-wrap:wrap;gap:8px;}
.fh-device-chip{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:64px;border:1.5px solid var(--border-subtle);border-radius:14px;padding:9px 10px;cursor:pointer;font-family:var(--font-body);font-size:11px;font-weight:var(--fw-medium);background:var(--surface-card);color:var(--text-body);transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);user-select:none;}
.fh-device-chip .icon{font-size:18px;line-height:1;}
.fh-device-chip.is-active{border-color:var(--color-primary);background:var(--color-primary);color:#fff;}
.fh-device-chip:hover:not(.is-active){border-color:var(--border-default);background:var(--surface-sunken);}

/* ── Device illustration frame (drives the preview shape per device type) ── */
.fh-dev-frame{position:relative;display:flex;flex-direction:column;align-items:center;}
.fh-dev-notch,.fh-dev-cam,.fh-dev-hinge,.fh-dev-base{display:none;}
[data-device="mobile"] .fh-preview-box{border-radius:20px;}
[data-device="mobile"] .fh-dev-notch{display:block;width:34px;height:5px;border-radius:var(--radius-pill);background:var(--stone-800);margin-bottom:12px;}
[data-device="tablet"] .fh-preview-box{border-radius:12px;}
[data-device="tablet"] .fh-dev-cam{display:block;width:5px;height:5px;border-radius:50%;background:var(--stone-800);margin-bottom:12px;}
[data-device="notebook"] .fh-preview-box{border-radius:6px 6px 2px 2px;}
[data-device="notebook"] .fh-dev-hinge{display:block;width:calc(100% + 10px);height:5px;background:linear-gradient(180deg,var(--stone-300),var(--stone-500));}
[data-device="notebook"] .fh-dev-base{display:block;width:calc(100% + 40px);height:12px;background:linear-gradient(180deg,var(--stone-200),var(--stone-400));clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);}
[data-device="monitor"] .fh-preview-box{border-radius:4px;}
[data-device="monitor"] .fh-dev-hinge{display:block;width:16px;height:22px;background:linear-gradient(180deg,var(--stone-300),var(--stone-500));}
[data-device="monitor"] .fh-dev-base{display:block;width:70px;height:9px;border-radius:50%;background:var(--stone-400);margin-top:-2px;}
[data-device="tv"] .fh-preview-box{border-radius:2px;border-width:6px;border-color:var(--stone-800);}
[data-device="tv"] .fh-dev-base{display:block;width:80px;height:14px;margin-top:2px;background:linear-gradient(115deg,transparent 46%,var(--stone-400) 46%,var(--stone-400) 54%,transparent 54%),linear-gradient(65deg,transparent 46%,var(--stone-400) 46%,var(--stone-400) 54%,transparent 54%);}

/* ── Price list (all film types shown at once) ── */
.fh-price-list{display:flex;flex-direction:column;}
.fh-price-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:16px 0;border-bottom:1px solid var(--border-subtle);}
.fh-price-row:last-child{border-bottom:none;}
.fh-price-row .name{font-size:var(--text-base);font-weight:var(--fw-semibold);color:var(--text-strong);line-height:1.3;}
.fh-price-row .sub{font-size:11px;font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);margin-top:2px;}
.fh-price-row .amount{font-size:20px;font-weight:var(--fw-bold);color:var(--text-strong);white-space:nowrap;}
.fh-price-row.is-unavail .amount{font-size:13px;font-weight:var(--fw-medium);color:var(--text-muted);}
.fh-price-row.is-quote .amount{font-size:13px;font-weight:var(--fw-semibold);color:var(--color-primary-hover);}

/* ── Oversize / quote CTA + contact row ── */
.fh-oversize-box{margin-top:var(--space-4);background:var(--color-primary-soft);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:20px 22px;}
.fh-oversize-box .title{font-size:var(--text-base);font-weight:var(--fw-bold);margin-bottom:6px;color:var(--text-strong);}
.fh-oversize-box p{margin:0;font-size:var(--text-sm);color:var(--text-body);line-height:1.5;}
.fh-calc-cta{margin-top:var(--space-6);display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;}
.fh-calc-cta > span{font-size:var(--text-sm);color:var(--text-body);}
.fh-cta-line{background:#00B900;color:#fff;}
.fh-cta-line:hover{background:#009900;color:#fff;}
.fh-calc-empty{padding:32px 0;text-align:center;color:var(--text-muted);font-size:var(--text-sm);border-top:1px solid var(--border-subtle);margin-top:var(--space-6);}

/* ── Portfolio slider + lightbox (2026-07-08) ──
   Cover photos (onsite_job CPT featured images, fetched via the REST API)
   are lined up in a horizontal scroll-snap track; clicking a slide opens
   a lightbox with that job's full photo gallery (parsed from the post's
   block-editor content). See the "Portfolio Slider + Lightbox" script
   block in page-home.php and CLAUDE.md §8.10. Replaces the old
   hardcoded .fh-work-grid mosaic. */
.fh-portfolio-slider{position:relative;display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-12);}
.fh-portfolio-track{display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 12px;flex:1;min-width:0;-webkit-overflow-scrolling:touch;}
.fh-portfolio-track::-webkit-scrollbar{height:6px;}
.fh-portfolio-track::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:var(--radius-pill);}
.fh-portfolio-slide{position:relative;flex:0 0 auto;width:260px;height:210px;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;background:#000;scroll-snap-align:start;box-shadow:var(--shadow-sm);transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);border:none;padding:0;}
.fh-portfolio-slide:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.fh-portfolio-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.fh-portfolio-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,14,0) 40%,rgba(20,16,14,.82) 100%);display:flex;align-items:flex-end;padding:var(--space-4);}
.fh-portfolio-caption{position:relative;color:#fff;text-align:left;}
.fh-portfolio-caption b{display:block;font-size:var(--text-sm);font-weight:var(--fw-bold);margin-bottom:2px;}
.fh-portfolio-caption span{font-size:var(--text-xs);color:rgba(255,255,255,.82);}
.fh-portfolio-arrow{flex:0 0 auto;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);color:var(--text-strong);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:box-shadow var(--dur-fast) var(--ease-out);padding:0;}
.fh-portfolio-arrow:hover{box-shadow:var(--shadow-md);}
.fh-portfolio-loading,.fh-portfolio-empty{padding:32px 0;color:var(--text-muted);font-size:var(--text-sm);}

.fh-portfolio-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:var(--space-4);box-sizing:border-box;}
.fh-portfolio-modal[hidden]{display:none;}
.fh-portfolio-modal-backdrop{position:absolute;inset:0;background:var(--surface-overlay);border:none;padding:0;cursor:default;}
.fh-portfolio-modal-inner{position:relative;z-index:1;width:min(880px,100%);max-height:88vh;background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:var(--space-5);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--space-3);}
.fh-portfolio-modal-close{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:var(--radius-pill);background:var(--surface-card);border:1px solid var(--border-subtle);color:var(--text-strong);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.fh-portfolio-modal-main{position:relative;display:flex;align-items:center;justify-content:center;background:var(--surface-sunken);border-radius:var(--radius-md);overflow:hidden;height:min(56vh,480px);}
.fh-portfolio-modal-main img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.fh-portfolio-modal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:var(--radius-pill);background:rgba(255,255,255,.85);border:1px solid var(--border-subtle);color:var(--text-strong);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.fh-portfolio-modal-arrow.prev{left:12px;}
.fh-portfolio-modal-arrow.next{right:12px;}
.fh-portfolio-modal-caption{text-align:center;}
.fh-portfolio-modal-caption b{display:block;font-size:var(--text-base);font-weight:var(--fw-bold);color:var(--text-strong);}
.fh-portfolio-modal-caption span{font-size:var(--text-sm);color:var(--text-muted);}
.fh-portfolio-modal-thumbs{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:4px;}
.fh-portfolio-modal-thumbs img{width:64px;height:48px;object-fit:cover;border-radius:var(--radius-sm);cursor:pointer;opacity:.55;flex:0 0 auto;transition:opacity var(--dur-fast) var(--ease-out);}
.fh-portfolio-modal-thumbs img.is-active{opacity:1;outline:2px solid var(--color-primary);outline-offset:1px;}

/* ── Scroll reveal ── */
.fh-reveal{opacity:0;transform:translateY(36px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);}
.fh-reveal.is-visible{opacity:1;transform:translateY(0);}
.fh-portfolio-slide.fh-reveal:nth-of-type(1){transition-delay:0s;}
.fh-portfolio-slide.fh-reveal:nth-of-type(2){transition-delay:.1s;}
.fh-portfolio-slide.fh-reveal:nth-of-type(3){transition-delay:.2s;}
.fh-portfolio-slide.fh-reveal:nth-of-type(4){transition-delay:.3s;}
.fh-portfolio-slide.fh-reveal:nth-of-type(5){transition-delay:.4s;}
.fh-step.fh-reveal:nth-of-type(1){transition-delay:0s;}
.fh-step.fh-reveal:nth-of-type(2){transition-delay:.12s;}
.fh-step.fh-reveal:nth-of-type(3){transition-delay:.24s;}
.fh-step.fh-reveal:nth-of-type(4){transition-delay:.36s;}

/* ── Film banner slider ── */
.fh-filmslider{position:relative;border-radius:var(--radius-xl);overflow:hidden;height:420px;margin-top:var(--space-12);box-shadow:var(--shadow-xl);}
.fh-filmslide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity var(--dur-slow) var(--ease-out);}
.fh-filmslide.is-active{opacity:1;visibility:visible;z-index:2;}
.fh-filmslide-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;}
.fh-filmslide-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,16,14,.78) 0%,rgba(20,16,14,.35) 55%,rgba(20,16,14,0) 100%);}
/* Text sits in a small caption card anchored to a corner, not a panel/wash spanning the
   photo, so the dark gradient Elementor draws over the background image is no longer needed. */
#fh-filmslider .elementor-background-overlay{display:none;}
/* ID-scoped: Elementor's own .elementor-column{position:relative} (frontend.css, loaded
   after this stylesheet, equal specificity) would otherwise win the cascade and keep this
   card in normal flow instead of anchored to the corner. */
/* flex-direction:column is required, not cosmetic — Elementor's own .elementor-column{display:flex}
   defaults to row, which would lay the eyebrow/heading/paragraph widgets out side by side and
   squeeze Thai text (no spaces to break on) into a column so narrow it wraps one character per line.
   width (not max-width) is also required: a position:absolute box with only max-width falls back
   to shrink-to-fit sizing, and Thai text has no spaces to set a sane min-content floor, so it
   shrinks to ~one character wide instead of using the space available. */
#fh-filmslider .fh-filmslide-content{position:absolute;left:40px;bottom:32px;z-index:1;color:#fff;width:360px;padding:20px 24px;background:rgba(20,16,14,.82);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);box-sizing:border-box;display:flex;flex-direction:column;}
.fh-filmslide-content .fh-eyebrow{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(2px);}
.fh-filmslide-content h3{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);font-weight:var(--fw-extra);letter-spacing:var(--tracking-tight);margin:14px 0 10px;line-height:var(--leading-snug);}
.fh-filmslide-content p{font-size:var(--text-base);color:rgba(255,255,255,.88);margin:0;}
.fh-filmslide-dots{position:absolute;left:48px;bottom:24px;z-index:3;display:flex;gap:10px;}
.fh-filmslide-dots .dot{width:9px;height:9px;border-radius:var(--radius-pill);background:rgba(255,255,255,.4);border:none;cursor:pointer;padding:0;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);}
.fh-filmslide-dots .dot.is-active{background:#fff;transform:scale(1.25);}
/* Same Elementor cascade override as #fh-slider above (.elementor-section/.elementor-widget
   both ship position:relative with equal specificity to our rules, loaded after this
   stylesheet) — without these, only the first film slide is visible and the dots render
   thousands of pixels below the slider. */
#fh-filmslider .fh-filmslide{position:absolute;}
/* :not() keeps the corner card (already position:absolute with its own left/bottom above)
   out of this — it needs to stay auto-height/shrink-to-fit, not stretched full height. */
#fh-filmslider .elementor-container,
#fh-filmslider .elementor-column:not(.fh-filmslide-content),
#fh-filmslider .elementor-widget-wrap{height:100%;}
/* .fh-filmslide{display:flex} makes .elementor-container a flex item sized to its content
   (main-axis default is fit-content, not 100%) — now that its only child (the caption card)
   is position:absolute and out of flow, that content is empty, so it collapses to 0 width
   and the percentage width on the card above resolves against nothing. */
#fh-filmslider .elementor-container{width:100%;}
#fh-filmslider .elementor-widget-html{position:absolute;inset:0;z-index:3;pointer-events:none;}
#fh-filmslider .elementor-widget-html .fh-filmslide-dots{pointer-events:auto;}
@media (max-width:900px){
	.fh-calc-grid{grid-template-columns:1fr;}
	.fh-filmslider{height:480px;}
	/* Narrower card, still corner-anchored — just tucked further in from the edge.
	   Explicit calc() width, not left+right+width:auto: this element is also a flex
	   container, and Chrome resolves position:absolute + display:flex + width:auto via
	   shrink-to-fit (collapsing to ~1 Thai character) instead of solving width from
	   left/right per the standard non-replaced-block formula. calc() sidesteps that. */
	#fh-filmslider .fh-filmslide-content{left:20px;right:20px;bottom:20px;width:calc(100% - 40px);}
	.fh-filmslide-bg::after{background:linear-gradient(180deg,rgba(20,16,14,.35) 0%,rgba(20,16,14,.82) 75%);}
	.fh-portfolio-slide{width:220px;height:180px;}
}
@media (max-width:560px){
	.fh-filmslider{height:460px;}
	.fh-portfolio-slide{width:190px;height:160px;}
	.fh-portfolio-arrow{width:36px;height:36px;font-size:18px;}
	.fh-portfolio-modal-main{height:min(40vh,320px);}
	.fh-portfolio-modal-inner{padding:var(--space-4);}
	.fh-calc-cta{flex-direction:column;align-items:flex-start;gap:var(--space-2);}
	.fh-calc-inputs{flex-direction:column;align-items:stretch;}
	.fh-times{align-self:center;padding-bottom:0;}
}

/* Mini Slider — CSS-only auto-crossfade (no JS binding), for pages outside page-home.php's
   script block (e.g. Portfolio page). animation-delay staggers each slide's phase within one
   shared infinite loop, so no JS is needed to swap an .is-active class. */
.fh-mini-slider{position:relative;height:420px;border-radius:var(--radius-xl);overflow:hidden;margin:var(--space-12) 0;box-shadow:var(--shadow-xl);}
.fh-mini-slide{position:absolute;inset:0;opacity:0;animation:fh-mini-fade 12s infinite ease-in-out;}
.fh-mini-slide:nth-of-type(1){animation-delay:0s;}
.fh-mini-slide:nth-of-type(2){animation-delay:4s;}
.fh-mini-slide:nth-of-type(3){animation-delay:8s;}
.fh-mini-slide-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;}
.fh-mini-slide-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,14,0) 45%,rgba(20,16,14,.85) 100%);}
.fh-mini-slide-content{position:absolute;left:0;right:0;bottom:0;z-index:1;color:#fff;padding:var(--space-6) var(--space-8);}
.fh-mini-slide-content b{display:block;font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--fw-bold);margin-bottom:4px;}
.fh-mini-slide-content span{font-size:var(--text-sm);color:rgba(255,255,255,.85);}
@keyframes fh-mini-fade{0%,100%{opacity:0;}4%{opacity:1;}29%{opacity:1;}33%{opacity:0;}}
@media (max-width:768px){
	.fh-mini-slider{height:300px;}
	.fh-mini-slide-content{padding:var(--space-4) var(--space-5);}
}

/* ── Portfolio bento grid (post ID 28, "งานติดฟิล์มนอกสถานที่") ──
   Mosaic layout: tiles of mixed sizes packed with grid-auto-flow:dense,
   each tile a full-bleed photo with a bottom gradient caption overlay
   instead of the plain white fh-card body, for a more editorial/portfolio
   feel. Tile size is controlled purely by an extra class on the container
   (fh-bento-size-lg/wide/tall) so size stays adjustable from Elementor's
   own CSS Classes field without touching this file again. */
.fh-bento{
	display:grid !important;
	grid-template-columns:repeat(4,minmax(0,1fr)) !important;
	grid-auto-rows:150px;grid-auto-flow:dense;
	gap:var(--space-5) !important;margin-top:var(--space-12);
}
.fh-bento-tile{
	/* Elementor's own .e-con rule sets position:var(--position) (defaults to
	   "relative") with the same specificity as a bare class selector; since
	   its stylesheet loads after ours, it wins ties silently. !important
	   forces our absolute/relative layout regardless — same pattern as the
	   .fh-flex-grid / .fh-cta overrides below. */
	position:relative !important;height:100% !important;overflow:hidden !important;
	border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
	grid-column:span 1;grid-row:span 1;
}
.fh-bento-tile:hover{box-shadow:var(--shadow-lg);}
.fh-bento-size-lg{grid-column:span 2;grid-row:span 2;}
.fh-bento-size-wide{grid-column:span 2;grid-row:span 1;}
.fh-bento-size-tall{grid-column:span 1;grid-row:span 2;}
.fh-bento-tile .fh-bento-img{position:absolute !important;inset:0;width:100%;height:100%;}
.fh-bento-tile .fh-bento-img img{
	width:100%;height:100%;object-fit:cover;display:block;
	transition:transform var(--dur-slow) var(--ease-out);
}
.fh-bento-tile:hover .fh-bento-img img{transform:scale(1.06);}
.fh-bento-overlay{
	position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;z-index:1;
	padding:var(--space-5) var(--space-5) var(--space-4) !important;
	background:linear-gradient(180deg,rgba(20,16,14,0) 0%,rgba(20,16,14,.78) 100%);
}
/* Same heading-widget-vs-kit-default gap as the about-us card title fix
   (see CLAUDE.md 8.6.1 #8) — h3 here is a bare descendant selector on a
   heading widget's own tag, so color/font-family/font-weight need
   !important to beat Elementor's same-specificity kit default. */
.fh-bento-overlay h3{
	font-family:var(--font-display) !important;color:#fff !important;
	font-size:var(--text-base);font-weight:var(--fw-bold) !important;margin:0 0 4px;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.fh-bento-size-lg .fh-bento-overlay h3{font-size:var(--text-xl);}
.fh-bento-overlay p{
	color:rgba(255,255,255,.85);font-size:var(--text-xs);
	margin:0;line-height:1.4;
	/* Row height is fixed (150px); a full description only fits tiles
	   spanning 2 rows, so smaller tiles show the title alone. */
	display:none;
}
.fh-bento-size-lg .fh-bento-overlay p,.fh-bento-size-tall .fh-bento-overlay p{
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
	font-size:var(--text-sm);
}
@media (max-width:1024px){
	.fh-bento{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
	.fh-bento-size-lg{grid-column:span 2;grid-row:span 2;}
	.fh-bento-size-wide{grid-column:span 2;grid-row:span 1;}
}
@media (max-width:600px){
	.fh-bento{grid-template-columns:1fr !important;grid-auto-rows:220px;}
	.fh-bento-tile,.fh-bento-size-lg,.fh-bento-size-wide,.fh-bento-size-tall{grid-column:span 1 !important;grid-row:span 1 !important;}
}

/* ---------------------------------------------------------------------
   Native-Elementor bridge classes (2026-07-06 pt.2) — used on about-us,
   contact-us and portfolio pages after converting raw HTML widgets to
   native Container/Heading/Text-Editor/Image/Button widgets so all text
   is WYSIWYG-editable in Elementor. !important guards force our intended
   flex/grid/block layout regardless of Elementor's own default container
   settings (display/gap can vary by version) — safe here since these
   classes are only used inside this bridged content.
   --------------------------------------------------------------------- */
.fh-flex-grid{display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;gap:var(--space-6) !important;margin-top:var(--space-12);}
.fh-flex-grid--tight{margin-top:var(--space-10);}
/* Elementor's own .e-con base rule sets width:var(--width,100%) on every
   nested container; !important here is required to win regardless of
   selector specificity or source order. */
/* flex-basis (not width) governs a flex item's main-axis size when both
   are set, so grow/shrink must be pinned to 0 and the sizing expressed
   as flex-basis — a plain "width" here would be silently ignored. */
.fh-flex-grid > *{flex-grow:0 !important;flex-shrink:0 !important;}
.fh-flex-grid--2 > *{flex-basis:calc(50% - 12px) !important;width:calc(50% - 12px) !important;max-width:calc(50% - 12px) !important;}
.fh-flex-grid--3 > *{flex-basis:calc(33.333% - 16px) !important;width:calc(33.333% - 16px) !important;max-width:calc(33.333% - 16px) !important;}
@media (max-width:1024px){
	.fh-flex-grid--3 > *{flex-basis:calc(50% - 12px) !important;width:calc(50% - 12px) !important;max-width:calc(50% - 12px) !important;}
}
@media (max-width:768px){
	.fh-flex-grid--2 > *,.fh-flex-grid--3 > *{flex-basis:100% !important;width:100% !important;max-width:100% !important;}
}

.fh-card,.fh-card-img-wrap,.fh-card-body{display:block !important;}

.fh-why-grid{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;}
@media (max-width:1024px){.fh-why-grid{grid-template-columns:1fr !important;}}
.fh-why-grid > *{width:100% !important;}
.fh-why-list{display:flex !important;flex-direction:column !important;}
.fh-why-list li,.fh-why-list .fh-why-item{display:flex !important;flex-direction:row !important;gap:14px;align-items:flex-start;}
.fh-why-stats{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;}

/* Elementor's custom "CSS Classes" control lands on the widget's own
   .elementor-element wrapper div, not on the semantic tag it renders
   (e.g. the actual <h2>/<img>). Typography/box classes designed for a
   bare tag selector need a descendant-selector bridge so they still take
   effect through that extra wrapper level. */
.fh-eyebrow.elementor-widget-heading .elementor-heading-title,
.fh-h2.elementor-widget-heading .elementor-heading-title{
	display:block;background:none;padding:0;border-radius:0;text-transform:none;
	font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;font-family:inherit;margin:inherit;
}
.fh-eyebrow.elementor-widget-heading{
	display:inline-flex !important;width:fit-content !important;max-width:fit-content !important;
	margin-left:auto !important;margin-right:auto !important;
	align-items:center;gap:var(--space-2);
	font-size:var(--text-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);
	color:var(--color-primary-hover);background:var(--color-primary-soft);
	padding:6px var(--space-4);border-radius:var(--radius-pill);text-transform:uppercase;
}
.fh-h2.elementor-widget-heading{
	font-family:var(--font-display);
	font-size:clamp(var(--text-2xl),3.6vw,var(--text-3xl));
	font-weight:var(--fw-extra);margin:var(--space-5) 0 var(--space-3);
	letter-spacing:var(--tracking-tight);color:var(--text-strong);
}
.fh-sub p{color:var(--text-muted);font-size:var(--text-lg);max-width:620px;margin:0 auto;}
/* Elementor's own frontend.min.css ships ".elementor img{height:auto;
   max-width:100%;...}" — same specificity (0,1,1) as ".fh-card-img img"
   and loaded after style.css, so it silently won the fixed-160px-thumbnail
   height on any portrait-oriented source photo (portrait photos have no
   other rule forcing them short, so they rendered at full natural height,
   which also threw off .fh-card-ic's bottom:-22px anchor since that's
   relative to the now much-taller .fh-card-img-wrap). !important restores
   the intended fixed-height thumbnail regardless of load order. */
.fh-card-img img,.fh-why-photo img{width:100%;height:160px !important;object-fit:cover;display:block;}
.fh-why-photo img{height:auto !important;aspect-ratio:4/3;}

.fh-cta{display:block !important;}
.fh-cta-actions{display:flex !important;flex-direction:row !important;gap:14px !important;justify-content:center !important;flex-wrap:wrap !important;}

/* ---------------------------------------------------------------------
   Overflow-safety net for native-widget pages (about-us/contact-us/
   portfolio, 2026-07-06) — these pages have no wrapping .fh-wrap div
   (that only exists on the homepage's leftover HTML-widget markup), so
   the `.fh-wrap [class^="fh-"]{min-width:0}` and `.fh-wrap img{max-width:
   100%}` rules above never applied to them. Elementor's own frontend CSS
   already sets min-width:0 on .e-con/.elementor-widget, but the *text
   node* inside a heading/text-editor widget can still force its flex
   ancestor wider than the viewport when a long, space-less Thai string
   sits at a font-size that's right at the edge of the container width —
   confirmed on about-us where the h2 clipped mid-character on a 390px
   viewport. Applying min-width:0 + a wrap fallback directly to every
   fh-* element (not scoped to .fh-wrap) closes that gap everywhere. */
[class^="fh-"],[class*=" fh-"]{min-width:0;}
.fh-h2,.fh-eyebrow,.fh-sub,.fh-card h3,.fh-card p,.fh-why-list b,.fh-why-list span{overflow-wrap:anywhere;word-break:break-word;}
.fh-card-img-wrap img,.fh-why-photo img,.fh-icon-badge{max-width:100%;}

/* Sitewide UX/UI text safety (2026-07-08 audit)
   Thai copy, model names, and mixed Thai/English labels can be longer than
   their widget's min-content width, especially when Elementor adds
   widget__width-initial on mobile hero/slide text. These guards keep text
   inside its visual container and give Thai ascenders/descenders enough
   vertical room so headings do not appear stacked on top of each other. */
[class^="fh-"] .elementor-widget,
[class*=" fh-"] .elementor-widget{max-width:100% !important;}
[class^="fh-"] .elementor-heading-title,
[class*=" fh-"] .elementor-heading-title,
[class^="fh-"] .elementor-widget-text-editor,
[class*=" fh-"] .elementor-widget-text-editor,
[class^="fh-"] p,
[class*=" fh-"] p,
[class^="fh-"] a,
[class*=" fh-"] a,
[class^="fh-"] span,
[class*=" fh-"] span{
	overflow-wrap:anywhere;
	word-break:break-word;
}
[class^="fh-"] .elementor-heading-title,
[class*=" fh-"] .elementor-heading-title{line-height:1.28 !important;}
.fh-slide-content .elementor-widget,
.fh-hero .elementor-widget{width:auto !important;max-width:100% !important;}
.fh-slide-content h1,.fh-hero h1{line-height:1.18 !important;}
.fh-slide-content p,.fh-hero p,.fh-sub p{line-height:1.65;}
.fh-btn .elementor-button-text,
.fh-cta-actions .elementor-button-text,
.fh-hero-actions .elementor-button-text{line-height:1.3;white-space:normal;}

/* Paragraph readability: keep intro blocks centered as objects, but justify
   real paragraph text so both line edges feel tidy. Last lines stay left
   aligned so short endings do not stretch awkwardly. */
.fh-sub,
.fh-sub p{
	text-align:justify !important;
	text-align-last:left;
	text-justify:inter-word;
}
.fh-center .fh-eyebrow,
.fh-center .fh-h2,
.fh-center .elementor-widget-heading,
.fh-center .elementor-widget-heading .elementor-heading-title{
	text-align:center !important;
}
.fh-cta p{
	text-align:justify;
	text-align-last:left;
	text-justify:inter-word;
}

/* ── About-us page redesign (2026-07-06) ──
   fh-section--sunken alternates a tinted band between plain-white
   sections for visual rhythm (same idea as the homepage's .fh-trust/
   .fh-process tint bands, generalized into a reusable modifier).
   fh-narrow-760 caps a centered intro paragraph's width for readability
   (class was already referenced on the hero container but never had a
   matching rule). fh-card-badge is a round icon chip for cards that have
   no image to hang .fh-card-ic off of (mirrors the homepage's
   .fh-step-num treatment, reused here for the B2C/B2B and contact-info
   cards instead of leaving the emoji inline inside the heading text). */
.fh-section--sunken{background:var(--surface-sunken);}
.fh-narrow-760{max-width:760px;}
.fh-card-badge{width:48px;height:48px;border-radius:var(--radius-md);background:var(--color-primary-soft);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:var(--space-4);}

/* Scoped Kanit-only font override — About Us page (post ID 16), 2026-07-06.
   Requested explicitly so every element on this page (headings, body
   copy, buttons) renders in one consistent typeface instead of mixing
   the sitewide --font-display/--font-body (Bricolage Grotesque/Hanken
   Grotesk, neither of which covers Thai glyphs) with a browser-picked
   Thai fallback. This is intentionally scoped to body.page-id-16 only —
   it does not change the sitewide design-system tokens, so the
   homepage/contact-us/portfolio keep their documented font stack. */
body.page-id-16 *{font-family:"Kanit",system-ui,sans-serif !important;}

/* Film Specification page — spec infographic image, centered and capped
   so the dense text baked into each PNG/JPG stays legible (native
   1080x1080 source, displayed no wider than 820px). No object-fit/
   aspect-ratio needed since the source is already square. */
.fh-spec-img{width:100%;max-width:820px;display:block;margin:var(--space-10) auto 0;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);}

/* ── Homepage FAQ — LINE-chat-style Q&A (2026-07-07) ──
   Built with the homepage's classic section/column elType (NOT the newer
   "container" elType used on about-us/contact-us/portfolio), so none of
   the container-specific pitfalls in CLAUDE.md §8.6.1 (content_width,
   flex-direction:column default, .e-con text-align tie) apply here —
   classic columns already lay out side-by-side by default and plain
   text-align inherits cleanly (confirmed by .fh-center already working
   sitewide with no !important). Bubble alignment is done the same way:
   .fh-faq-q/.fh-faq-a set text-align on the COLUMN, the actual bubble
   (inline-block on the real <h3>/<p> tag) resets text-align:left for its
   own contents so the box floats right/left while its text still reads
   normally.
   Q uses a "heading" widget (h3) styled white-on-orange — this DOES need
   !important on color/font-family because Elementor's kit CSS
   (`.elementor-widget-heading .elementor-heading-title`) sets both at
   specificity (0,2,0) and loads after style.css (same collision already
   documented for .fh-cta h2 in §8.6.1 item 8; harmless there because the
   target color happened to match the kit default — not harmless here
   with white-on-orange, so it needs the same !important treatment).
   A uses a "text-editor" widget, which per the same doc does NOT hit
   that collision (kit only colors the wrapper, not the inner <p>), so no
   !important is needed for its color. */
.fh-faq{background:var(--surface-sunken);}
.fh-faq-chat{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl) !important;padding:var(--space-8) var(--space-8) var(--space-2) !important;margin-top:var(--space-12);box-shadow:var(--shadow-md);}
.fh-faq-bar{align-items:center;padding-bottom:var(--space-6);margin-bottom:var(--space-2);border-bottom:1px solid var(--border-subtle);}
.fh-faq-avatar img{width:52px;height:52px;border-radius:50%;object-fit:cover;display:block;border:2px solid var(--surface-card);box-shadow:var(--shadow-sm);}
.fh-faq-brand h4{margin:0 0 2px;font-size:var(--text-base);font-weight:var(--fw-bold);color:var(--text-strong);}
.fh-faq-brand p{margin:0;font-size:var(--text-xs);color:var(--success);display:flex;align-items:center;gap:6px;}
.fh-faq-brand p::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--success);flex:none;}

.fh-faq-q{text-align:right;margin-bottom:8px;}
.fh-faq-a{text-align:left;margin-bottom:var(--space-6);}
.fh-faq-q h3{
	display:inline-block;max-width:78%;margin:0;text-align:left;
	background:var(--color-primary);color:#fff !important;
	font-family:var(--font-body) !important;font-size:var(--text-base);font-weight:var(--fw-medium) !important;
	line-height:var(--leading-normal);letter-spacing:normal;text-transform:none;
	padding:12px 18px;border-radius:18px 18px 4px 18px;box-shadow:var(--shadow-sm);
}
.fh-faq-a p{
	display:inline-block;max-width:78%;margin:0;text-align:left;
	background:var(--surface-sunken);color:var(--text-body);
	font-size:var(--text-sm);line-height:var(--leading-normal);
	padding:12px 16px;border-radius:18px 18px 18px 4px;border:1px solid var(--border-subtle);
}

@media (max-width:600px){
	.fh-faq-chat{padding:var(--space-6) var(--space-4) var(--space-2) !important;}
	.fh-faq-q h3,.fh-faq-a p{max-width:90%;font-size:var(--text-sm);padding:10px 14px;}
}