/* ===========================================================================
   TOM'S PAINTING DESIGN SYSTEM — tokens
   Shared by the public site and the admin panel so both feel like one
   connected product. Do not hard-code raw colors/spacing elsewhere —
   reference these custom properties.
=========================================================================== */

:root {
  /* --- Color: brand --- */
  --tp-navy-900: #0a1830;
  --tp-navy-800: #0b1d33;
  --tp-navy-700: #122745;
  --tp-navy-600: #1b3660;
  --tp-gold-600: #a8823f;
  --tp-gold-500: #c6a15b;
  --tp-gold-400: #d7b878;
  --tp-gold-100: #f3e8d3;
  --tp-cream: #f7f4ee;
  --tp-cream-dim: #efe9de;
  --tp-white: #ffffff;
  --tp-gray-100: #eef0f3;
  --tp-gray-200: #e7e9ec;
  --tp-gray-400: #b7bec8;
  --tp-gray-600: #6b7280;
  --tp-charcoal: #1c1f24;

  /* --- Color: semantic --- */
  --tp-bg-page: var(--tp-white);
  --tp-bg-alt: var(--tp-cream);
  --tp-bg-dark: var(--tp-navy-800);
  --tp-text-primary: var(--tp-charcoal);
  --tp-text-inverse: var(--tp-white);
  --tp-text-muted: var(--tp-gray-600);
  --tp-border: var(--tp-gray-200);
  --tp-accent: var(--tp-gold-500);
  --tp-success: #2f7a4f;
  --tp-danger: #b3413a;
  --tp-warning: #b3813a;

  /* --- Typography --- */
  --tp-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --tp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --tp-text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --tp-text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --tp-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --tp-text-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --tp-text-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --tp-text-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --tp-text-2xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
  --tp-text-3xl: clamp(2.75rem, 2rem + 3.5vw, 5rem);

  /* --- Spacing (4px base) --- */
  --tp-space-1: 0.25rem;
  --tp-space-2: 0.5rem;
  --tp-space-3: 0.75rem;
  --tp-space-4: 1rem;
  --tp-space-5: 1.5rem;
  --tp-space-6: 2rem;
  --tp-space-7: 3rem;
  --tp-space-8: 4.5rem;
  --tp-space-9: 6.5rem;
  --tp-space-10: 9rem;

  /* --- Radius --- */
  --tp-radius-sm: 8px;
  --tp-radius-md: 14px;
  --tp-radius-lg: 24px;
  --tp-radius-full: 999px;

  /* --- Shadow (soft, layered — never heavy) --- */
  --tp-shadow-sm: 0 1px 2px rgba(10, 24, 48, 0.06), 0 1px 1px rgba(10, 24, 48, 0.04);
  --tp-shadow-md: 0 8px 24px -8px rgba(10, 24, 48, 0.18);
  --tp-shadow-lg: 0 24px 60px -16px rgba(10, 24, 48, 0.28);
  --tp-shadow-gold: 0 8px 20px -6px rgba(198, 161, 91, 0.45);

  /* --- Glass surfaces --- */
  --tp-glass-light-bg: rgba(255, 255, 255, 0.72);
  --tp-glass-dark-bg: rgba(10, 24, 48, 0.68);
  --tp-glass-border: rgba(255, 255, 255, 0.35);

  /* --- Motion --- */
  --tp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tp-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --tp-duration-fast: 180ms;
  --tp-duration-base: 380ms;
  --tp-duration-slow: 700ms;

  /* --- Layout --- */
  --tp-max-width: 1240px;
  --tp-header-height: 76px;
  --tp-safe-top: env(safe-area-inset-top, 0px);
  --tp-safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tp-duration-fast: 1ms;
    --tp-duration-base: 1ms;
    --tp-duration-slow: 1ms;
  }
}
/* ===========================================================================
   BASE — reset, typography defaults, accessibility primitives
=========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--tp-font-body);
  font-size: var(--tp-text-base);
  line-height: 1.6;
  color: var(--tp-text-primary);
  background: var(--tp-bg-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--tp-font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 var(--tp-space-4);
  letter-spacing: -0.01em;
  color: var(--tp-navy-800);
}
h1 { font-size: var(--tp-text-3xl); }
h2 { font-size: var(--tp-text-2xl); }
h3 { font-size: var(--tp-text-xl); }
h4 { font-size: var(--tp-text-lg); }

p { margin: 0 0 var(--tp-space-4); color: var(--tp-text-muted); }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

/* --- Accessibility: focus, skip link, touch targets --- */
:focus-visible {
  outline: 3px solid var(--tp-gold-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: var(--tp-space-4);
  z-index: 9999;
  background: var(--tp-navy-800);
  color: var(--tp-white);
  padding: var(--tp-space-3) var(--tp-space-5);
  border-radius: var(--tp-radius-sm);
  transition: top var(--tp-duration-fast) var(--tp-ease-soft);
}
.skip-link:focus { top: var(--tp-space-4); }

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

button, a, [role="button"] { min-height: 44px; }

/* --- Layout helpers --- */
.tp-container {
  width: 100%;
  max-width: var(--tp-max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.tp-section { padding-block: var(--tp-space-9); }
.tp-section--tight { padding-block: var(--tp-space-8); }
.tp-section--alt { background: var(--tp-bg-alt); }
.tp-section--dark { background: var(--tp-bg-dark); color: var(--tp-white); }
.tp-section--dark h1, .tp-section--dark h2, .tp-section--dark h3, .tp-section--dark h4 { color: var(--tp-white); }
.tp-section--dark p { color: rgba(255,255,255,0.72); }

.tp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--tp-space-2);
  font-size: var(--tp-text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tp-gold-600);
  margin-bottom: var(--tp-space-3);
}
.tp-section--dark .tp-eyebrow { color: var(--tp-gold-400); }

.tp-lede {
  font-size: var(--tp-text-md);
  color: var(--tp-text-muted);
  max-width: 62ch;
}

.tp-grid {
  display: grid;
  gap: var(--tp-space-6);
}

@media (min-width: 768px) {
  .tp-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .tp-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .tp-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/* ===========================================================================
   COMPONENTS — buttons, cards, the signature brush-stroke divider, badges
=========================================================================== */

/* --- Signature element: the painted stroke ---------------------------- 
   A tapered brush-stroke underline/divider used consistently as the
   site's one recurring motif: under active nav links, beneath section
   eyebrows, and as the intro's animated line. It's the one place the
   painting subject shows up graphically instead of literally (no paint
   splatters or cartoon rollers) — a single confident stroke of gold. */
.tp-stroke {
  display: block;
  width: 64px;
  height: 6px;
}
.tp-stroke path {
  fill: var(--tp-gold-500);
}
.tp-stroke--underline {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 6px;
  opacity: 0;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform var(--tp-duration-base) var(--tp-ease), opacity var(--tp-duration-base) var(--tp-ease-soft);
}
.tp-nav-link:hover .tp-stroke--underline,
.tp-nav-link.is-active .tp-stroke--underline {
  opacity: 1;
  transform: scaleX(1);
}

.tp-divider {
  display: flex;
  justify-content: center;
  margin-block: var(--tp-space-6);
}

/* --- Buttons ------------------------------------------------------------ */
.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tp-space-2);
  padding: 0.9rem 1.6rem;
  border-radius: var(--tp-radius-full);
  font-weight: 600;
  font-size: var(--tp-text-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--tp-duration-fast) var(--tp-ease-soft),
              box-shadow var(--tp-duration-fast) var(--tp-ease-soft),
              background var(--tp-duration-fast) var(--tp-ease-soft),
              color var(--tp-duration-fast) var(--tp-ease-soft);
  white-space: nowrap;
}
.tp-btn:active { transform: scale(0.97); }

.tp-btn--gold {
  background: linear-gradient(180deg, var(--tp-gold-400), var(--tp-gold-500));
  color: var(--tp-navy-900);
  box-shadow: var(--tp-shadow-gold);
}
.tp-btn--gold:hover { box-shadow: 0 12px 28px -8px rgba(198,161,91,0.6); transform: translateY(-1px); }

.tp-btn--outline-dark {
  background: transparent;
  border-color: var(--tp-navy-800);
  color: var(--tp-navy-800);
}
.tp-btn--outline-dark:hover { background: var(--tp-navy-800); color: var(--tp-white); }

.tp-btn--outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  color: var(--tp-white);
}
.tp-btn--outline-light:hover { background: rgba(255,255,255,0.12); border-color: var(--tp-white); }

.tp-btn--ghost {
  background: transparent;
  color: var(--tp-navy-800);
}
.tp-btn--ghost:hover { background: var(--tp-gray-100); }

.tp-btn--sm { padding: 0.6rem 1.1rem; font-size: var(--tp-text-xs); }
.tp-btn--block { width: 100%; }
.tp-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* --- Cards ---------------------------------------------------------------*/
.tp-card {
  background: var(--tp-white);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-lg);
  padding: var(--tp-space-6);
  transition: transform var(--tp-duration-base) var(--tp-ease),
              box-shadow var(--tp-duration-base) var(--tp-ease);
}
.tp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tp-shadow-md);
}

.tp-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--tp-radius-md);
  background: var(--tp-gold-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tp-gold-600);
  margin-bottom: var(--tp-space-4);
}

/* --- Badges --------------------------------------------------------------*/
.tp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tp-space-1);
  padding: 0.3rem 0.75rem;
  border-radius: var(--tp-radius-full);
  font-size: var(--tp-text-xs);
  font-weight: 600;
  background: var(--tp-gray-100);
  color: var(--tp-text-muted);
}

/* --- Glass surface (used sparingly: header on scroll, modals) -----------*/
.tp-glass-light {
  background: var(--tp-glass-light-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--tp-glass-border);
}
.tp-glass-dark {
  background: var(--tp-glass-dark-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.08);
}

/* --- Skeleton loading ------------------------------------------------- */
.tp-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--tp-gray-100);
  border-radius: var(--tp-radius-sm);
}
.tp-skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: tp-shimmer 1.6s infinite;
}
@keyframes tp-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .tp-skeleton::after { animation: none; display: none; }
}

/* --- Toast notifications ------------------------------------------------*/
.tp-toast-region {
  position: fixed;
  bottom: calc(var(--tp-space-5) + var(--tp-safe-bottom));
  right: var(--tp-space-5);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-3);
  max-width: min(360px, 90vw);
}
.tp-toast {
  background: var(--tp-navy-800);
  color: var(--tp-white);
  padding: var(--tp-space-4) var(--tp-space-5);
  border-radius: var(--tp-radius-md);
  box-shadow: var(--tp-shadow-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--tp-space-3);
  animation: tp-toast-in var(--tp-duration-base) var(--tp-ease);
}
.tp-toast--success { border-left: 4px solid var(--tp-success); }
.tp-toast--error { border-left: 4px solid var(--tp-danger); }
@keyframes tp-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ===========================================================================
   ANIMATION SYSTEM — fade-ups, text/image reveals, hover motion
   Driven mostly by IntersectionObserver toggling .is-visible in JS.
=========================================================================== */

[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--tp-duration-slow) var(--tp-ease),
              transform var(--tp-duration-slow) var(--tp-ease);
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-animate="fade"] { transform: none; }

[data-animate-group] > * { transition-delay: calc(var(--tp-i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Headline mask reveal ------------------------------------------------*/
.tp-mask-reveal {
  overflow: hidden;
  display: inline-block;
}
.tp-mask-reveal__inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--tp-duration-slow) var(--tp-ease);
}
.is-visible .tp-mask-reveal__inner { transform: translateY(0); }

/* --- Image reveal (clip-path wipe) ---------------------------------------*/
.tp-image-reveal {
  overflow: hidden;
  border-radius: var(--tp-radius-lg);
  clip-path: inset(0 0 0 0);
}
.tp-image-reveal img {
  transform: scale(1.12);
  transition: transform 1.1s var(--tp-ease);
}
[data-animate].is-visible .tp-image-reveal img { transform: scale(1); }

/* --- Scroll-based depth parallax (subtle, JS-driven translateY) ----------*/
.tp-depth {
  will-change: transform;
}

/* --- Button press / interactive feedback ----------------------------------*/
.tp-pressable { transition: transform var(--tp-duration-fast) var(--tp-ease-soft); }
.tp-pressable:active { transform: scale(0.96); }

/* --- Cursor-follow accent (desktop, precise pointer only) -----------------*/
#tp-cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 28px; height: 28px;
  margin-left: -14px; margin-top: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,161,91,0.55), rgba(198,161,91,0) 70%);
  pointer-events: none;
  z-index: 9998;
  transform: translate(var(--tp-cursor-x, -100px), var(--tp-cursor-y, -100px));
  transition: transform 90ms linear, width 220ms var(--tp-ease-soft), height 220ms var(--tp-ease-soft), margin 220ms var(--tp-ease-soft);
}
#tp-cursor-glow.is-hover {
  width: 52px; height: 52px;
  margin-left: -26px; margin-top: -26px;
}
@media (hover: none), (pointer: coarse) {
  #tp-cursor-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #tp-cursor-glow { display: none; }
}

/* --- Skip Intro / progress ------------------------------------------------*/
.tp-intro-progress {
  position: absolute;
  bottom: calc(var(--tp-space-6) + var(--tp-safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 2px;
  background: rgba(255,255,255,0.18);
  border-radius: var(--tp-radius-full);
  overflow: hidden;
}
.tp-intro-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--tp-gold-500);
}
/* ===========================================================================
   LAYOUT — header, nav, mobile menu, footer, intro overlay
=========================================================================== */

/* --- Intro overlay --------------------------------------------------------*/
#tp-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--tp-navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 500ms var(--tp-ease-soft), visibility 500ms;
}
#tp-intro.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.tp-intro-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tp-space-4);
  text-align: center;
}
.tp-intro-line {
  width: min(280px, 60vw);
  height: 3px;
  position: relative;
  overflow: hidden;
  border-radius: var(--tp-radius-full);
  background: rgba(255,255,255,0.12);
}
.tp-intro-line__fill {
  position: absolute; inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--tp-gold-400), var(--tp-gold-500));
  animation: tp-paint-line 1.1s var(--tp-ease) 0.15s forwards;
}
@keyframes tp-paint-line { to { width: 100%; } }

.tp-intro-logo {
  width: clamp(150px, 24vw, 240px);
  height: auto;
  border-radius: 28px;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.88);
  filter: drop-shadow(0 24px 44px rgba(0,0,0,0.38));
  animation: tp-fade-scale-in 650ms var(--tp-ease) 1.05s forwards;
}
.tp-intro-name {
  font-family: var(--tp-font-display);
  color: var(--tp-white);
  font-size: var(--tp-text-lg);
  letter-spacing: 0.01em;
  opacity: 0;
  animation: tp-fade-up-in 550ms var(--tp-ease) 1.7s forwards;
}
.tp-intro-tagline {
  color: var(--tp-gold-400);
  font-size: var(--tp-text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  animation: tp-fade-up-in 550ms var(--tp-ease) 2.05s forwards;
}
@keyframes tp-fade-scale-in { to { opacity: 1; transform: scale(1); } }
@keyframes tp-fade-up-in { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: translateY(0); } }

.tp-skip-intro {
  position: absolute;
  top: calc(var(--tp-space-5) + var(--tp-safe-top));
  right: var(--tp-space-5);
  color: rgba(255,255,255,0.75);
  font-size: var(--tp-text-xs);
  letter-spacing: 0.06em;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--tp-radius-full);
  background: transparent;
  cursor: pointer;
  min-height: 40px;
}
.tp-skip-intro:hover { border-color: var(--tp-gold-400); color: var(--tp-white); }

#tp-intro.is-reduced-motion .tp-intro-mark > * { animation: none !important; opacity: 1 !important; transform: none !important; }
#tp-intro.is-reduced-motion .tp-intro-line__fill { animation: none; width: 100%; }

/* --- Header ----------------------------------------------------------------*/
#tp-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--tp-header-height);
  padding-top: var(--tp-safe-top);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--tp-duration-base) var(--tp-ease-soft),
              box-shadow var(--tp-duration-base) var(--tp-ease-soft),
              border-color var(--tp-duration-base) var(--tp-ease-soft);
  border-bottom: 1px solid transparent;
}
#tp-header.is-scrolled {
  background: var(--tp-glass-light-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--tp-border);
  box-shadow: var(--tp-shadow-sm);
}
#tp-header.is-scrolled .tp-nav-link,
#tp-header.is-scrolled .tp-header-phone,
#tp-header.is-scrolled .tp-logo-name { color: var(--tp-navy-800); }
.tp-nav-link, .tp-header-phone, .tp-logo-name { color: var(--tp-white); transition: color var(--tp-duration-base) var(--tp-ease-soft); }

.tp-header-inner {
  width: 100%;
  max-width: var(--tp-max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tp-space-5);
}

.tp-logo {
  display: flex;
  align-items: center;
  gap: var(--tp-space-3);
  font-family: var(--tp-font-display);
}
.tp-logo-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.tp-logo-name { font-size: var(--tp-text-md); line-height: 1.1; }
.tp-logo-tagline { display: block; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; font-family: var(--tp-font-body); }

.tp-nav-desktop {
  display: none;
  align-items: center;
  gap: var(--tp-space-6);
}
@media (min-width: 1024px) {
  .tp-nav-desktop { display: flex; }
}
.tp-nav-link {
  position: relative;
  font-size: var(--tp-text-sm);
  font-weight: 500;
  padding-block: var(--tp-space-2);
}

.tp-header-actions {
  display: flex;
  align-items: center;
  gap: var(--tp-space-4);
}
.tp-header-phone {
  display: none;
  font-size: var(--tp-text-sm);
  font-weight: 600;
}
@media (min-width: 1024px) { .tp-header-phone { display: inline-flex; align-items: center; gap: 0.4rem; } }

.tp-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--tp-radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
}
@media (min-width: 1024px) { .tp-menu-btn { display: none; } }

/* --- Mobile menu sheet ------------------------------------------------- */
#tp-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--tp-navy-900);
  color: var(--tp-white);
  display: flex;
  flex-direction: column;
  padding: calc(var(--tp-space-6) + var(--tp-safe-top)) var(--tp-space-6) calc(var(--tp-space-6) + var(--tp-safe-bottom));
  transform: translateY(-100%);
  transition: transform var(--tp-duration-base) var(--tp-ease);
  visibility: hidden;
}
#tp-mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.tp-mobile-menu-header { display: flex; justify-content: flex-end; margin-bottom: var(--tp-space-6); }
.tp-mobile-nav-link {
  display: block;
  font-family: var(--tp-font-display);
  font-size: var(--tp-text-xl);
  padding-block: var(--tp-space-3);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.tp-mobile-menu-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--tp-space-4); padding-top: var(--tp-space-6); }

body.tp-scroll-lock { overflow: hidden; }

/* --- Footer ---------------------------------------------------------------*/
#tp-footer {
  background: var(--tp-navy-900);
  color: rgba(255,255,255,0.7);
  padding-block: var(--tp-space-8) var(--tp-space-6);
}
.tp-footer-grid {
  display: grid;
  gap: var(--tp-space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .tp-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.tp-footer-heading { color: var(--tp-white); font-size: var(--tp-text-xs); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--tp-space-4); }
.tp-footer-link { display: block; padding-block: var(--tp-space-2); font-size: var(--tp-text-sm); }
.tp-footer-link:hover { color: var(--tp-gold-400); }
.tp-footer-bottom {
  margin-top: var(--tp-space-8);
  padding-top: var(--tp-space-5);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-4);
  justify-content: space-between;
  font-size: var(--tp-text-xs);
}
/* ===========================================================================
   HERO + TRUST BAR
=========================================================================== */

.tp-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--tp-white);
  overflow: hidden;
  padding-bottom: var(--tp-space-9);
}
.tp-hero__media {
  position: absolute; inset: 0;
  z-index: 0;
}
.tp-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.tp-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,24,48,0.55) 0%, rgba(10,24,48,0.45) 40%, rgba(10,24,48,0.92) 100%);
}
.tp-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--tp-max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  padding-top: calc(var(--tp-header-height) + var(--tp-space-7));
}
.tp-hero__headline {
  font-size: var(--tp-text-3xl);
  max-width: 16ch;
  color: var(--tp-white);
  margin-bottom: var(--tp-space-5);
}
.tp-hero__description {
  color: rgba(255,255,255,0.86);
  font-size: var(--tp-text-md);
  max-width: 52ch;
  margin-bottom: var(--tp-space-6);
}
.tp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-4);
  margin-bottom: var(--tp-space-7);
}
.tp-hero__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--tp-space-2);
  color: var(--tp-white);
  font-weight: 600;
}

.tp-trust-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-3) var(--tp-space-5);
}
.tp-trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--tp-space-2);
  font-size: var(--tp-text-sm);
  color: rgba(255,255,255,0.9);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--tp-duration-base) var(--tp-ease), transform var(--tp-duration-base) var(--tp-ease);
  transition-delay: calc(var(--tp-i, 0) * 110ms);
}
.is-visible .tp-trust-item { opacity: 1; transform: translateY(0); }
.tp-trust-item svg { color: var(--tp-gold-400); flex-shrink: 0; }

.tp-scroll-indicator {
  position: absolute;
  bottom: calc(var(--tp-space-5) + var(--tp-safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tp-space-2);
  color: rgba(255,255,255,0.7);
  font-size: var(--tp-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tp-scroll-indicator__line {
  width: 1px; height: 32px;
  background: rgba(255,255,255,0.35);
  position: relative;
  overflow: hidden;
}
.tp-scroll-indicator__line::after {
  content: "";
  position: absolute; top: -100%; left: 0; right: 0; height: 100%;
  background: var(--tp-gold-400);
  animation: tp-scroll-travel 2.2s var(--tp-ease-soft) infinite;
}
@keyframes tp-scroll-travel { to { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .tp-scroll-indicator__line::after { animation: none; top: 0; } }

/* --- Trust bar (below hero) ----------------------------------------------*/
.tp-trust-bar-grid {
  display: grid;
  gap: var(--tp-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .tp-trust-bar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tp-trust-bar-grid { grid-template-columns: repeat(3, 1fr); } }
.tp-trust-bar-item h4 { margin-bottom: var(--tp-space-2); font-size: var(--tp-text-md); }
.tp-trust-bar-item p { margin: 0; font-size: var(--tp-text-sm); }
/* ===========================================================================
   ABOUT + SERVICES + WHY CHOOSE US
=========================================================================== */

/* --- About ------------------------------------------------------------- */
.tp-about-grid {
  display: grid;
  gap: var(--tp-space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .tp-about-grid { grid-template-columns: 1fr 1fr; }
}
.tp-about-media {
  position: relative;
  aspect-ratio: 4 / 5;
}
.tp-about-media__large {
  position: absolute;
  inset: 0 12% 12% 0;
  border-radius: var(--tp-radius-lg);
  overflow: hidden;
  box-shadow: var(--tp-shadow-lg);
}
.tp-about-media__large img { width: 100%; height: 100%; object-fit: cover; }
.tp-about-media__small {
  position: absolute;
  right: 0; bottom: 0;
  width: 55%;
  aspect-ratio: 4/3;
  border-radius: var(--tp-radius-md);
  overflow: hidden;
  border: 6px solid var(--tp-white);
  box-shadow: var(--tp-shadow-md);
}
.tp-about-media__small img { width: 100%; height: 100%; object-fit: cover; }
.tp-about-highlight {
  display: inline-flex;
  align-items: center;
  gap: var(--tp-space-3);
  margin-top: var(--tp-space-5);
  font-family: var(--tp-font-display);
  font-size: var(--tp-text-md);
  color: var(--tp-navy-800);
}

/* --- Services: cards ------------------------------------------------------*/
.tp-services-grid {
  display: grid;
  gap: var(--tp-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .tp-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tp-services-grid { grid-template-columns: repeat(3, 1fr); } }

.tp-service-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.tp-service-card__media {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.tp-service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tp-duration-slow) var(--tp-ease); }
.tp-service-card:hover .tp-service-card__media img { transform: scale(1.06); }
.tp-service-card__body { padding: var(--tp-space-5); flex: 1; display: flex; flex-direction: column; }
.tp-service-card__body p { flex: 1; }

/* --- Services: interactive selector ---------------------------------------*/
.tp-service-selector {
  display: grid;
  gap: var(--tp-space-6);
  margin-top: var(--tp-space-8);
}
@media (min-width: 900px) {
  .tp-service-selector { grid-template-columns: 320px 1fr; align-items: start; }
}
.tp-service-tabs {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: var(--tp-space-2);
  scrollbar-width: none;
}
.tp-service-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .tp-service-tabs { flex-direction: column; overflow: visible; }
}
.tp-service-tab {
  text-align: left;
  padding: var(--tp-space-4) var(--tp-space-5);
  border-radius: var(--tp-radius-md);
  background: transparent;
  border: 1px solid var(--tp-border);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  font-size: var(--tp-text-sm);
  transition: background var(--tp-duration-fast) var(--tp-ease-soft), border-color var(--tp-duration-fast) var(--tp-ease-soft), color var(--tp-duration-fast) var(--tp-ease-soft);
}
@media (min-width: 900px) { .tp-service-tab { white-space: normal; } }
.tp-service-tab.is-active {
  background: var(--tp-navy-800);
  border-color: var(--tp-navy-800);
  color: var(--tp-white);
}
.tp-service-tab:not(.is-active):hover { border-color: var(--tp-gold-500); }

.tp-service-panel {
  display: grid;
  gap: var(--tp-space-6);
  background: var(--tp-white);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-lg);
  overflow: hidden;
}
@media (min-width: 700px) { .tp-service-panel { grid-template-columns: 1fr 1fr; } }
.tp-service-panel__media { aspect-ratio: 4/3; }
.tp-service-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.tp-service-panel__body { padding: var(--tp-space-6); display: flex; flex-direction: column; }
.tp-service-panel__examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-2);
  margin-block: var(--tp-space-4) var(--tp-space-5);
}
.tp-service-panel__examples span {
  font-size: var(--tp-text-xs);
  padding: 0.35rem 0.75rem;
  border-radius: var(--tp-radius-full);
  background: var(--tp-gold-100);
  color: var(--tp-gold-600);
  font-weight: 600;
}

/* --- Why choose us ---------------------------------------------------- */
.tp-why-grid {
  display: grid;
  gap: var(--tp-space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .tp-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tp-why-grid { grid-template-columns: repeat(3, 1fr); } }
/* ===========================================================================
   PROJECT GALLERY — masonry, filters, lightbox, before/after slider
=========================================================================== */

.tp-gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-2);
  margin-bottom: var(--tp-space-6);
}
.tp-filter-chip {
  padding: 0.55rem 1.1rem;
  border-radius: var(--tp-radius-full);
  border: 1px solid var(--tp-border);
  background: var(--tp-white);
  font-size: var(--tp-text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--tp-duration-fast) var(--tp-ease-soft), color var(--tp-duration-fast) var(--tp-ease-soft), border-color var(--tp-duration-fast) var(--tp-ease-soft);
}
.tp-filter-chip.is-active { background: var(--tp-navy-800); border-color: var(--tp-navy-800); color: var(--tp-white); }
.tp-filter-chip:not(.is-active):hover { border-color: var(--tp-gold-500); }

.tp-placeholder-notice {
  display: flex;
  align-items: center;
  gap: var(--tp-space-3);
  padding: var(--tp-space-4) var(--tp-space-5);
  border-radius: var(--tp-radius-md);
  background: var(--tp-gold-100);
  color: var(--tp-gold-600);
  font-size: var(--tp-text-sm);
  font-weight: 500;
  margin-bottom: var(--tp-space-6);
}

.tp-masonry {
  columns: 1;
  column-gap: var(--tp-space-5);
}
@media (min-width: 640px) { .tp-masonry { columns: 2; } }
@media (min-width: 1024px) { .tp-masonry { columns: 3; } }

.tp-masonry-item {
  break-inside: avoid;
  margin-bottom: var(--tp-space-5);
  border-radius: var(--tp-radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--tp-gray-100);
  transition: transform var(--tp-duration-base) var(--tp-ease), opacity var(--tp-duration-base) var(--tp-ease);
}
.tp-masonry-item.is-filtered-out {
  opacity: 0;
  transform: scale(0.94);
  height: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
.tp-masonry-item img {
  width: 100%;
  display: block;
  transition: transform var(--tp-duration-slow) var(--tp-ease);
}
.tp-masonry-item:hover img { transform: scale(1.05); }
.tp-masonry-item__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--tp-space-4);
  background: linear-gradient(0deg, rgba(10,24,48,0.82), transparent);
  color: var(--tp-white);
  font-size: var(--tp-text-sm);
}
.tp-masonry-item__badge {
  position: absolute; top: var(--tp-space-3); left: var(--tp-space-3);
  font-size: var(--tp-text-xs);
  padding: 0.3rem 0.7rem;
  border-radius: var(--tp-radius-full);
  background: rgba(10,24,48,0.75);
  color: var(--tp-white);
}

.tp-gallery-empty {
  text-align: center;
  padding: var(--tp-space-8) var(--tp-space-5);
  border: 1px dashed var(--tp-border);
  border-radius: var(--tp-radius-lg);
  color: var(--tp-text-muted);
}

/* --- Lightbox --------------------------------------------------------- */
#tp-lightbox {
  position: fixed; inset: 0;
  z-index: 800;
  background: rgba(10,24,48,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tp-space-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tp-duration-base) var(--tp-ease);
}
#tp-lightbox.is-open { opacity: 1; visibility: visible; }
.tp-lightbox-figure { max-width: min(90vw, 1100px); max-height: 82vh; position: relative; }
.tp-lightbox-figure img { max-height: 82vh; width: auto; margin-inline: auto; border-radius: var(--tp-radius-md); }
.tp-lightbox-caption { color: rgba(255,255,255,0.85); text-align: center; margin-top: var(--tp-space-4); font-size: var(--tp-text-sm); }
.tp-lightbox-close, .tp-lightbox-prev, .tp-lightbox-next {
  position: absolute;
  color: var(--tp-white);
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.tp-lightbox-close { top: calc(var(--tp-space-5) + var(--tp-safe-top)); right: var(--tp-space-5); }
.tp-lightbox-prev { left: var(--tp-space-4); top: 50%; transform: translateY(-50%); }
.tp-lightbox-next { right: var(--tp-space-4); top: 50%; transform: translateY(-50%); }

/* --- Before / after slider --------------------------------------------- */
.tp-ba-slider {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--tp-radius-lg);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}
.tp-ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-ba-slider__after { clip-path: inset(0 0 0 50%); }
.tp-ba-slider__handle {
  position: absolute; top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--tp-white);
  transform: translateX(-50%);
}
.tp-ba-slider__handle::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--tp-white);
  box-shadow: var(--tp-shadow-md);
}
.tp-ba-slider__label {
  position: absolute; top: var(--tp-space-3);
  font-size: var(--tp-text-xs);
  padding: 0.3rem 0.7rem;
  border-radius: var(--tp-radius-full);
  background: rgba(10,24,48,0.7);
  color: var(--tp-white);
}
.tp-ba-slider__label--before { left: var(--tp-space-3); }
.tp-ba-slider__label--after { right: var(--tp-space-3); }
/* ===========================================================================
   PROCESS TIMELINE + SERVICE AREA MAP + REVIEWS + FAQ
=========================================================================== */

/* --- Process timeline ----------------------------------------------------*/
.tp-timeline {
  position: relative;
  margin-top: var(--tp-space-7);
}
.tp-timeline__track {
  position: absolute;
  left: 27px;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--tp-border);
}
@media (min-width: 900px) {
  .tp-timeline__track { left: 50%; transform: translateX(-50%); }
}
.tp-timeline__progress {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 0%;
  background: var(--tp-gold-500);
  transition: height 120ms linear;
}
.tp-timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--tp-space-5);
  padding-bottom: var(--tp-space-8);
}
@media (min-width: 900px) {
  .tp-timeline-step {
    grid-template-columns: 1fr 56px 1fr;
    align-items: center;
  }
  .tp-timeline-step:nth-child(even) .tp-timeline-step__content { grid-column: 3; }
  .tp-timeline-step:nth-child(odd) .tp-timeline-step__content { grid-column: 1; text-align: right; }
  .tp-timeline-step__marker { grid-column: 2; }
  .tp-timeline-step:nth-child(even) .tp-timeline-step__spacer { grid-column: 1; }
}
.tp-timeline-step__marker {
  position: relative;
  z-index: 1;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--tp-white);
  border: 2px solid var(--tp-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--tp-font-display);
  font-weight: 600;
  color: var(--tp-gray-400);
  transition: border-color var(--tp-duration-base) var(--tp-ease), color var(--tp-duration-base) var(--tp-ease), background var(--tp-duration-base) var(--tp-ease);
}
.tp-timeline-step.is-active .tp-timeline-step__marker,
.tp-timeline-step.is-complete .tp-timeline-step__marker {
  border-color: var(--tp-gold-500);
  color: var(--tp-gold-600);
  background: var(--tp-gold-100);
}
.tp-timeline-step__content h4 { margin-bottom: var(--tp-space-2); }
.tp-timeline-step__content p { margin: 0; }

/* --- Nationwide service map ------------------------------------------- */
.tp-map-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-block: var(--tp-space-7);
}
.tp-us-map { width: 100%; max-width: 720px; color: rgba(255,255,255,0.16); }
.tp-us-map path { fill: currentColor; stroke: rgba(255,255,255,0.25); stroke-width: 0.5; }
.tp-map-dot {
  fill: var(--tp-gold-400);
  animation: tp-map-pulse 2.4s ease-in-out infinite;
}
@keyframes tp-map-pulse {
  0%, 100% { opacity: 0.4; r: 3; }
  50% { opacity: 1; r: 5; }
}
@media (prefers-reduced-motion: reduce) { .tp-map-dot { animation: none; opacity: 0.9; } }

.tp-service-area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-3);
  justify-content: center;
}
.tp-service-area-tags span {
  font-size: var(--tp-text-xs);
  padding: 0.5rem 1rem;
  border-radius: var(--tp-radius-full);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
}

/* --- Reviews ------------------------------------------------------------ */
.tp-reviews-grid {
  display: grid;
  gap: var(--tp-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .tp-reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tp-reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.tp-review-card blockquote { margin: 0 0 var(--tp-space-4); font-size: var(--tp-text-md); font-family: var(--tp-font-display); color: var(--tp-navy-800); }
.tp-review-card__meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--tp-text-xs); color: var(--tp-text-muted); }
.tp-review-stars { color: var(--tp-gold-500); }

.tp-reviews-empty {
  text-align: center;
  padding: var(--tp-space-8);
  border: 1px dashed var(--tp-border);
  border-radius: var(--tp-radius-lg);
  color: var(--tp-text-muted);
}

/* --- FAQ accordion ----------------------------------------------------- */
.tp-faq-list { max-width: 760px; margin-inline: auto; }
.tp-faq-item {
  border-bottom: 1px solid var(--tp-border);
}
.tp-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tp-space-4);
  padding-block: var(--tp-space-5);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--tp-font-display);
  font-size: var(--tp-text-md);
  color: var(--tp-navy-800);
}
.tp-faq-question__icon { transition: transform var(--tp-duration-base) var(--tp-ease-soft); flex-shrink: 0; color: var(--tp-gold-500); }
.tp-faq-item.is-open .tp-faq-question__icon { transform: rotate(45deg); }
.tp-faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--tp-duration-base) var(--tp-ease);
}
.tp-faq-answer__inner { padding-bottom: var(--tp-space-5); }
/* ===========================================================================
   ESTIMATE FORM
=========================================================================== */

.tp-estimate-cta {
  display: grid;
  gap: var(--tp-space-6);
  margin-bottom: var(--tp-space-8);
}
@media (min-width: 900px) { .tp-estimate-cta { grid-template-columns: 1fr auto; align-items: end; } }
.tp-estimate-contact-list { display: flex; flex-direction: column; gap: var(--tp-space-2); }
.tp-estimate-contact-list a { font-weight: 600; color: var(--tp-navy-800); }

.tp-form {
  background: var(--tp-white);
  border-radius: var(--tp-radius-lg);
  border: 1px solid var(--tp-border);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.tp-form-grid {
  display: grid;
  gap: var(--tp-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .tp-form-grid { grid-template-columns: 1fr 1fr; } }
.tp-form-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .tp-form-grid--3 { grid-template-columns: 1fr 1fr 1fr; } }
.tp-field { display: flex; flex-direction: column; gap: var(--tp-space-2); }
.tp-field--full { grid-column: 1 / -1; }
.tp-field label { font-size: var(--tp-text-xs); font-weight: 600; color: var(--tp-navy-800); }
.tp-field .tp-hint { font-size: var(--tp-text-xs); color: var(--tp-text-muted); font-weight: 400; }

.tp-input, .tp-select, .tp-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--tp-radius-sm);
  border: 1px solid var(--tp-border);
  background: var(--tp-white);
  font-size: var(--tp-text-base);
  transition: border-color var(--tp-duration-fast) var(--tp-ease-soft), box-shadow var(--tp-duration-fast) var(--tp-ease-soft);
}
.tp-input:focus, .tp-select:focus, .tp-textarea:focus {
  border-color: var(--tp-gold-500);
  box-shadow: 0 0 0 3px rgba(198,161,91,0.2);
  outline: none;
}
.tp-textarea { min-height: 130px; resize: vertical; }

.tp-field.has-error .tp-input,
.tp-field.has-error .tp-select,
.tp-field.has-error .tp-textarea { border-color: var(--tp-danger); }
.tp-field-error {
  font-size: var(--tp-text-xs);
  color: var(--tp-danger);
  display: none;
}
.tp-field.has-error .tp-field-error { display: block; }

.tp-error-summary {
  display: none;
  background: #fbeceb;
  border: 1px solid var(--tp-danger);
  color: var(--tp-danger);
  border-radius: var(--tp-radius-md);
  padding: var(--tp-space-4) var(--tp-space-5);
  margin-bottom: var(--tp-space-5);
  font-size: var(--tp-text-sm);
}
.tp-error-summary.is-visible { display: block; }
.tp-error-summary ul { margin-top: var(--tp-space-2); padding-left: 1.2em; list-style: disc; }

/* --- File upload dropzone ---------------------------------------------- */
.tp-dropzone {
  border: 1.5px dashed var(--tp-border);
  border-radius: var(--tp-radius-md);
  padding: var(--tp-space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--tp-duration-fast) var(--tp-ease-soft), background var(--tp-duration-fast) var(--tp-ease-soft);
}
.tp-dropzone.is-dragover { border-color: var(--tp-gold-500); background: var(--tp-gold-100); }
.tp-dropzone input[type="file"] { display: none; }
.tp-photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--tp-space-3);
  margin-top: var(--tp-space-4);
}
.tp-photo-preview {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--tp-radius-sm);
  overflow: hidden;
}
.tp-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.tp-photo-preview button {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px;
  min-height: unset;
  border-radius: 50%;
  background: rgba(10,24,48,0.8);
  color: white;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.tp-consent-row {
  display: flex;
  align-items: flex-start;
  gap: var(--tp-space-3);
  font-size: var(--tp-text-sm);
  color: var(--tp-text-muted);
}
.tp-consent-row input { margin-top: 4px; width: 18px; height: 18px; }

.tp-form-notice {
  font-size: var(--tp-text-xs);
  color: var(--tp-text-muted);
  margin-top: var(--tp-space-5);
}

.tp-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tp-space-4);
  margin-top: var(--tp-space-6);
}

/* --- Success screen ------------------------------------------------------*/
.tp-form-success {
  display: none;
  text-align: center;
  padding: var(--tp-space-8) var(--tp-space-4);
}
.tp-form-success.is-visible { display: block; }
.tp-form-success__icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--tp-gold-100);
  color: var(--tp-gold-600);
  display: flex; align-items: center; justify-content: center;
  margin-inline: auto var(--tp-space-5);
  margin-bottom: var(--tp-space-5);
}

/* --- Spinner ------------------------------------------------------------*/
.tp-spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.15);
  border-top-color: currentColor;
  animation: tp-spin 700ms linear infinite;
  display: inline-block;
}
@keyframes tp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tp-spinner { animation-duration: 1400ms; } }
/* ===========================================================================
   UTILITIES + RESPONSIVE FINE-TUNING
=========================================================================== */

.tp-center { text-align: center; }
.tp-mx-auto { margin-inline: auto; }
.tp-mt-0 { margin-top: 0; }
.tp-flex { display: flex; }
.tp-flex-wrap { flex-wrap: wrap; }
.tp-items-center { align-items: center; }
.tp-gap-3 { gap: var(--tp-space-3); }
.tp-gap-4 { gap: var(--tp-space-4); }
.tp-section-head { max-width: 720px; margin-bottom: var(--tp-space-7); }
.tp-section-head.tp-center { margin-inline: auto; }

/* --- No-JS fallback: if JS fails entirely, show static content -------- */
.tp-js-only { display: none; }
.no-js .tp-js-only { display: none !important; }
.no-js [data-animate] { opacity: 1 !important; transform: none !important; }
.no-js #tp-intro { display: none; }

/* --- Small-screen guards to avoid horizontal scroll -------------------- */
@media (max-width: 380px) {
  .tp-hero__headline { font-size: clamp(2rem, 9vw, 2.5rem); }
}

/* --- Landscape phone: shrink intro/hero vertical space ------------------*/
@media (max-height: 480px) and (orientation: landscape) {
  .tp-hero { min-height: 100vh; align-items: center; }
  .tp-hero__content { padding-top: calc(var(--tp-header-height) + var(--tp-space-4)); }
  .tp-scroll-indicator { display: none; }
}

/* --- Print --------------------------------------------------------------*/
@media print {
  #tp-header, #tp-mobile-menu, #tp-intro, #tp-cursor-glow, .tp-toast-region { display: none !important; }
}

/* Tom's Painting custom logo integration */
@media (min-width: 768px) {
  .tp-logo-mark { width: 48px; height: 48px; }
}
#tp-header.is-scrolled .tp-logo-mark { box-shadow: 0 7px 20px rgba(11,29,51,0.18); }