/* PeTech public site — earth-tone system shared with PeBooking */
:root {
  --paper: #F7F2E9; --surface: #FDFBF6; --sand: #EFE5D5; --ink: #362B22; --inksoft: #6B5D4F;
  --wood: #A9835F; --wood-dark: #7C5A38; --gold: #D2B48C; --tan: #C8A47C; --sage: #7C8F6E;
  --sage-soft: #DCE3D3; --moss: #5E7A52; --forest: #3E5134; --caramel: #A98260; --caramel-deep: #8A6744; --latte: #EADBC3;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
[x-cloak] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Prompt', sans-serif; background: var(--paper); -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { font-family: 'Kanit', sans-serif; }
::selection { background: #EADCC5; color: var(--ink); }
:focus-visible { outline: 2px solid var(--caramel); outline-offset: 3px; border-radius: 10px; }
.tap-target { min-height: 44px; min-width: 44px; justify-content: center; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: .75rem; }
.skip-link:focus { top: 1rem; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; }
.font-accent { font-family: 'Cormorant Garamond', serif; font-style: italic; }

/* ---------- surfaces ---------- */
.nav-pill { background: rgba(253, 251, 246, .78); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border: 1px solid rgba(54, 43, 34, .08); box-shadow: 0 10px 30px -18px rgba(54, 43, 34, .35); }
.mega-panel { background: var(--surface); border: 1px solid rgba(54, 43, 34, .08); box-shadow: 0 30px 60px -30px rgba(54, 43, 34, .45); }
.paper-card { background: var(--surface); border: 1px solid rgba(54, 43, 34, .08); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 40px -28px rgba(54, 43, 34, .35); }
.bg-latte-grad { background: linear-gradient(150deg, #F6EDDF 0%, #EADBC3 55%, #DFC9A8 100%); }
.bg-sage-deep { background: radial-gradient(120% 90% at 85% 10%, #7C8F6E 0%, #5E7A52 38%, #3E5134 100%); }
.bg-caramel-grad { background: linear-gradient(145deg, #C29B72 0%, #A98260 100%); }
.bg-moss-grad { background: linear-gradient(145deg, #6F8963 0%, #4C6442 100%); }
.footer-texture { background: radial-gradient(60% 50% at 10% 0%, rgba(210, 180, 140, .12), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(124, 143, 110, .14), transparent 70%); }
.grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .21 0 0 0 0 .17 0 0 0 0 .13 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- buttons ---------- */
.btn-primary { background: linear-gradient(145deg, #4A3B2E, #2E241C); color: var(--paper); box-shadow: 0 10px 24px -14px rgba(46, 36, 28, .9);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -16px rgba(46, 36, 28, .95); }
.btn-gold { background: linear-gradient(145deg, #E2C9A2, #C8A47C); color: var(--ink); box-shadow: 0 12px 26px -16px rgba(124, 90, 56, .9); transition: transform .2s var(--ease-out); }
.btn-gold:hover { transform: translateY(-1px); }
.btn-ghost-light { color: var(--paper); box-shadow: inset 0 0 0 1px rgba(247, 242, 233, .35); transition: background .2s; }
.btn-ghost-light:hover { background: rgba(247, 242, 233, .12); }
.btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(54, 43, 34, .18); transition: background .2s; }
.btn-ghost:hover { background: rgba(239, 229, 213, .8); }
.nav-link { position: relative; transition: color .2s; }

/* ---------- split hero ---------- */
.split { display: flex; flex-direction: column; }
.split-half { position: relative; }
.split-clip { min-height: 100%; }
@media (min-width: 1024px) {
  .split { flex-direction: row; min-height: max(760px, 100svh); }
  .split-half { flex: 1 1 0; min-width: 0; transition: flex-grow .7s var(--ease-out); }
  .split-clip { position: absolute; inset: 0; }
}
@media (min-width: 1024px) and (hover: hover) {
  .split:hover .split-half:hover { flex-grow: 1.38; }
  .split:hover .split-half:not(:hover) .split-dim { opacity: .55; }
}
.split-dim { transition: opacity .5s var(--ease-out); }
.split-seam { position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); z-index: 20; }
.seam-badge { width: 92px; height: 92px; border-radius: 9999px; background: var(--surface); box-shadow: 0 0 0 8px rgba(247, 242, 233, .55), 0 24px 50px -18px rgba(54, 43, 34, .6); }

/* ---------- 3D device ---------- */
.stage { perspective: 1500px; }
.device { --rx: 8deg; --ry: -18deg; position: relative; width: 268px; aspect-ratio: 9 / 19.2; border-radius: 46px; padding: 11px;
  background: linear-gradient(150deg, #3B3029 0%, #1D1713 60%, #120E0B 100%);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(1.5deg); transform-style: preserve-3d; transition: transform .6s var(--ease-out);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08), inset 0 0 0 6px #0d0a08, 30px 50px 80px -30px rgba(30, 22, 16, .75), 8px 14px 30px -10px rgba(30, 22, 16, .5); }
.device.flip { --ry: 18deg; transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(-1.5deg); }
.hero-device { --rx: 16deg; --ry: -9deg; }
.hero-device.flip { --ry: 9deg; }
.device::before { content: ''; position: absolute; inset: 0; border-radius: inherit; transform: translateZ(-14px); background: #0b0806; filter: blur(1px); }
.device::after { content: ''; position: absolute; inset: 11px; border-radius: 36px; pointer-events: none; z-index: 5;
  background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .06) 100%); }
.device-btn { position: absolute; width: 4px; border-radius: 4px; background: #2a211b; }
.device-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: var(--surface); transform: translateZ(1px); }
.device-island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; border-radius: 20px; background: #0d0a08; z-index: 6; }
.float-card { position: absolute; z-index: 10; transform: translateZ(60px); transition: transform .6s var(--ease-out); }
.device-shadow { position: absolute; left: 12%; right: 12%; bottom: -46px; height: 40px; border-radius: 50%; background: rgba(30, 22, 16, .35); filter: blur(22px); }
@media (max-width: 640px) { .device { width: 228px; border-radius: 40px; } .device-screen { border-radius: 31px; } .device::after { border-radius: 31px; } }

/* ---------- map (PeDelivery) ---------- */
.route-line { stroke-dasharray: 6 7; animation: dash 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -26; } }
.pulse-ring { animation: pulse 2s var(--ease-out) infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.4); opacity: 0; } }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- forms ---------- */
.field-label { display: block; font-size: .875rem; font-weight: 500; color: var(--ink); margin-bottom: .4rem; }
.field { width: 100%; min-height: 48px; border-radius: .9rem; background: var(--surface); border: 1px solid rgba(54, 43, 34, .16); padding: .7rem .95rem; font-size: 15px; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field:focus { outline: none; border-color: var(--caramel); box-shadow: 0 0 0 4px rgba(169, 130, 96, .16); }
.field[aria-invalid="true"] { border-color: #B4533C; }
.field-error { margin-top: .35rem; font-size: .8rem; color: #A3422D; }
textarea.field { min-height: 140px; resize: vertical; }

/* ---------- prose (news / jobs / legal) ---------- */
.prose-pt { color: var(--inksoft); line-height: 1.85; font-size: 1.0625rem; }
.prose-pt h2 { color: var(--ink); font-size: 1.6rem; font-weight: 600; margin: 2.2rem 0 .8rem; }
.prose-pt h3 { color: var(--ink); font-size: 1.25rem; font-weight: 600; margin: 1.8rem 0 .6rem; }
.prose-pt p { margin: 0 0 1.1rem; }
.prose-pt ul, .prose-pt ol { margin: 0 0 1.1rem 1.3rem; } .prose-pt ul { list-style: disc; } .prose-pt ol { list-style: decimal; }
.prose-pt li { margin: .35rem 0; }
.prose-pt a { color: var(--caramel-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose-pt img { border-radius: 1rem; margin: 1.5rem 0; }
.prose-pt blockquote { border-left: 3px solid var(--gold); padding-left: 1rem; font-style: italic; color: var(--ink); }

/* ---------- misc ---------- */
.uptime-bar { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; }
.uptime-bar > span { height: 30px; border-radius: 2px; }
.marquee { display: flex; gap: 3rem; width: max-content; animation: marquee 38s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Grid items may shrink below their content width (prevents long Thai lines from widening the page on phones). */
.grid > * { min-width: 0; }