/* ==========================================================
   Line to Home — v3 (PRDesign Studio theme)
   Sticky 3D stage + 6 chapters. Uses the site's tokens
   (--c-bone / --c-ink / --c-brass / --f-mono …).
   Chapter cards are absolutely placed at the scroll offset
   where they sit centred: top = q × (section height − 100vh).
   ========================================================== */
.lth{position:relative;height:900vh;--lth-k:1;--lth-plan:1;background:var(--c-ink)}
.lth-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.lth-bg{position:absolute;inset:0;background:linear-gradient(#f9f6f1,#f2ede4)}
/* one-off fade-in via animation (a transition would also lag the scene's own per-frame fade-out) */
.lth-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;visibility:hidden}
.lth-ready .lth-canvas{visibility:visible;animation:lthIn .8s var(--ease-out)}
@keyframes lthIn{from{opacity:0}}
/* paper wash behind the hero copy — pinned to the stage (no edge scrolls into view) and faded out by scroll */
.lth-scrim{position:absolute;inset:0;pointer-events:none;opacity:var(--lth-intro,1);
  background:linear-gradient(90deg,rgba(249,246,241,.9) 0%,rgba(249,246,241,.72) 28%,rgba(249,246,241,.3) 44%,rgba(249,246,241,0) 58%)}
@media (max-aspect-ratio:19/20){.lth-scrim{background:linear-gradient(180deg,rgba(249,246,241,.9) 0%,rgba(249,246,241,.75) 38%,rgba(249,246,241,.25) 54%,rgba(249,246,241,0) 64%)}}
.lth-photo{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;will-change:transform,opacity}
.lth-img{display:block;width:100%;height:100%}
/* v5: the daylight render is wider than the stage → feather all four sides into the ink */
.lth-img.land{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 100%);mask-composite:intersect}
.lth-img.port{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-composite:intersect}
/* bottom fade so the dusk stage melts into the ink section below */
.lth-sticky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18vh;pointer-events:none;background:linear-gradient(transparent,var(--c-ink));opacity:0;transition:opacity .8s var(--ease-out)}
.lth[data-tone="dark"] .lth-sticky::after{opacity:1}

/* ---------- HUD (drafting frame) ---------- */
.lth-hud{position:absolute;inset:0;pointer-events:none;z-index:2;--hud:var(--c-ink);--hud-soft:var(--c-concrete);--hud-accent:var(--c-brass-deep);transition:color .6s}
.lth[data-tone="dark"] .lth-hud{--hud:var(--c-bone);--hud-soft:var(--c-concrete-2);--hud-accent:var(--c-brass-soft)}
.lth-corner{position:absolute;width:18px;height:18px;border:0 solid var(--hud);opacity:.55;transition:border-color .6s}
.lth-corner.tl{top:92px;left:var(--gutter);border-top-width:1px;border-left-width:1px}
.lth-corner.tr{top:92px;right:var(--gutter);border-top-width:1px;border-right-width:1px}
.lth-corner.bl{bottom:22px;left:var(--gutter);border-bottom-width:1px;border-left-width:1px}
.lth-corner.br{bottom:22px;right:var(--gutter);border-bottom-width:1px;border-right-width:1px}
.lth-phase{position:absolute;top:100px;right:calc(var(--gutter) + 30px);font:400 11px/1 var(--f-mono);letter-spacing:.22em;color:var(--hud-soft);transition:color .6s}
.lth-phase b{font-weight:400;color:var(--hud-accent)}
.lth-rail{position:absolute;right:calc(var(--gutter) + 2px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.lth-rail i{display:block;height:1px;width:12px;background:var(--hud-soft);opacity:.55;transition:width .5s var(--ease-out),background-color .4s,opacity .4s}
.lth-rail i.done{width:18px;opacity:.8}
.lth-rail i.on{width:34px;background:var(--c-brass);opacity:1}
.lth-fig{position:absolute;left:calc(var(--gutter) + 30px);bottom:28px;font:400 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--hud-soft);transition:color .6s}
.lth-fig span{color:var(--hud-accent);margin-left:14px}
.lth-tag{position:absolute;right:calc(var(--gutter) + 30px);bottom:24px;font:400 10px/1 var(--f-mono);letter-spacing:.2em;color:var(--c-bone);padding:8px 13px;border-radius:999px;background:rgba(28,28,28,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--c-line-dark);opacity:0;transition:opacity .6s}
.lth-tag i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c-brass);margin-right:8px;vertical-align:1px}

/* ---------- chapters ---------- */
.lth-steps{position:absolute;inset:0;pointer-events:none;z-index:3}
.lth-step{position:absolute;left:0;right:0;height:100vh;top:calc(var(--at) * var(--lth-k) * 1vh);display:flex;align-items:center}
.lth-step > .container{pointer-events:none}
.lth-step .lth-card, .lth-intro{pointer-events:auto}
.lth #services{scroll-margin-top:-64px}

/* chapter 0 — the original hero copy, sitting on the drafting paper */
.lth-step--intro{align-items:stretch}
.lth-step--intro > .container{display:flex;flex-direction:column;justify-content:center;padding-top:88px;padding-bottom:64px;position:relative}
.lth-intro{max-width:560px}
.lth-intro .hero__title--bilingual{max-width:none}
.lth-step--intro .hero__scroll{left:var(--gutter);bottom:40px}

/* chapter cards — service cards lifted onto the stage */
.lth-card{position:relative;max-width:410px;padding:clamp(24px,2.2vw,32px) clamp(22px,2vw,30px);background:rgba(249,246,241,.86);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--c-line);box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:12px;transition:background-color .6s,border-color .6s,color .6s}
.lth-card::before{content:"";position:absolute;left:-1px;top:-1px;width:44px;height:1px;background:var(--c-brass)}
.lth-card__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.lth-card__count{font:400 10px/1 var(--f-mono);letter-spacing:.2em;color:var(--c-concrete)}
.lth-card .service__icon{width:56px;height:56px;margin:4px 0 6px}
.lth-card .service__icon svg{width:28px;height:28px}
.lth-card h3{font-family:var(--f-sans);font-weight:600;font-size:clamp(20px,1.9vw,26px);line-height:1.3;margin:0;color:var(--c-ink);text-wrap:balance}
.lth-card p{margin:0;font-size:14.5px;line-height:1.75;color:var(--c-ink-soft)}
.lth-card__kicker{font:400 10px/1.6 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--c-concrete);padding-top:12px;margin-top:4px;border-top:1px solid var(--c-line)}
.lth-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lth-legend i{display:inline-block;width:16px;height:0;border-top:2px solid;margin-left:6px}
.lth-legend i:first-child{margin-left:0}
.lth-legend i.e{border-color:#957632}.lth-legend i.w{border-color:#3f6f8c}.lth-legend i.d{border-top-style:dashed;border-color:var(--c-ink)}
.lth-card__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.lth-card__ctas .btn{padding:11px 20px;font-size:13px;gap:10px}
.lth-card__ctas .btn svg{width:14px;height:14px}

/* dark (dusk) chapter card */
.lth-card--dark{background:rgba(28,28,28,.55);border-color:var(--c-line-dark);color:var(--c-bone);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.lth-card--dark h3{color:var(--c-bone)}
.lth-card--dark p{color:var(--c-concrete-2)}
.lth-card--dark .eyebrow{color:var(--c-brass-soft)}
.lth-card--dark .eyebrow::before{background:var(--c-brass-soft)}
.lth-card--dark .lth-card__count{color:var(--c-concrete-2)}
.lth-card--dark .lth-card__kicker{border-top-color:var(--c-line-dark);color:var(--c-concrete-2)}
.lth-card--dark .btn--primary{background:var(--c-brass);color:var(--c-ink)}
.lth-card--dark .btn--primary:hover{background:var(--c-bone)}
.lth-card--dark .btn--ghost{border-color:rgba(249,246,241,.35);color:var(--c-bone)}
.lth-card--dark .btn--ghost:hover{background:rgba(249,246,241,.08);border-color:var(--c-bone)}

@media (max-width:900px){
  /* phones: 600vh instead of 900vh; --lth-k rescales card offsets (scroll span 500 vs 800) */
  .lth{height:600vh;--lth-k:.625}
  .lth-rail,.lth-corner.tr,.lth-corner.br{display:none}
  .lth-phase{right:var(--gutter);top:84px}
  .lth-fig{display:none}
  .lth-tag{right:auto;left:var(--gutter);bottom:18px}
  .lth-step{align-items:flex-end;padding-bottom:9vh}
  .lth-step--intro{align-items:stretch;padding-bottom:0}
  .lth-step--intro > .container{justify-content:flex-start;padding-top:112px}
  .lth-intro .hero__title--bilingual span{font-size:clamp(34px,10vw,48px) !important}
  .lth-intro .hero__title--bilingual em{font-size:1.15em !important}
  .lth-step--system{--at:478 !important}   /* phones: card reaches the bottom while fixtures/lamps are on show */
  .lth-card{max-width:none;padding:18px 18px 16px;gap:8px}
  .lth-card .service__icon{display:none}
  .lth-card h3{font-size:19px}
  .lth-card p{font-size:13.5px;line-height:1.65}
}

/* ---------- reduced motion / no WebGL: the original photo hero as a static stage ---------- */
.lth-static .lth-canvas,.lth-static .lth-rail,.lth-static .lth-phase,.lth-static .lth-photo{display:none}
.lth-static .lth-bg{background:
  linear-gradient(90deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.55) 30%,rgba(255,255,255,.12) 52%,rgba(255,255,255,0) 66%),
  url('../uploads/ChatGPT Image 11 มิ.ย. 2569 14_50_07.webp') center right / cover no-repeat,var(--c-bone)}