/* Tia Huad Lee: architectural daylight, material detail, navy chapter contrast. */
@font-face { font-family:Prompt; src:url('fonts/Prompt-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:Prompt; src:url('fonts/Prompt-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:Prompt; src:url('fonts/Prompt-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:Prompt; src:url('fonts/Prompt-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
:root { --font:Prompt,Thonburi,sans-serif; --cine-ease:cubic-bezier(.22,.72,.25,1); --cine-ink:#092b53; --cine-sky:#dceefe; }
body { font-family:var(--font); }
button,input,select,textarea { font-family:inherit; }
h1,h2,h3 { letter-spacing:0; text-wrap:balance; }
p { text-wrap:pretty; }
:is(section,footer)[id] { scroll-margin-top:132px; }
.tia-home-v4 .hp4-section { padding-top:92px; padding-bottom:92px; }
.tia-home-v4 .hp4-section h2 { line-height:1.45; letter-spacing:0; }
.tia-home-v4 .hp4-category-heading h2 { font-size:clamp(32px,4.2vw,58px); }
.tia-home-v4 .hp4-immersive { min-height:clamp(660px,57vw,850px); }
.tia-home-v4 .hp4-immersive h1 { font-size:clamp(36px,4.35vw,66px); line-height:1.42; letter-spacing:0; }
.tia-home-v4 .hp4-immersive .hp4-lead { max-width:610px; font-size:18px; }
.hp4-immersive::after { background:linear-gradient(90deg,#061f3bf5 0%,#061f3bd9 25%,#061f3b59 56%,#061f3b05 100%); }
.tia-home-v4 .hp4-immersive .hp4-hero-photo > img { transform:scale(1.04); }
.hp4-immersive .hp4-actions .button { box-shadow:0 8px 30px #061f3b18; }
.hp4-category-heading .eyebrow,.hp4-section-heading .eyebrow,.hp7-video-heading .eyebrow { font-weight:500; letter-spacing:.16em; font-size:12px; }
.hp4-category-heading > p { max-width:390px; }
.tia-home-v4 .hp4-category-card { border-color:#d8e5f0; border-radius:12px; box-shadow:0 4px 14px #092b5305; }
.tia-home-v4 .hp4-category-copy h3 { font-size:16px; }
.tia-home-v4 .hp4-category-copy .hp4-pill { background:transparent; color:var(--navy); border:1px solid #d0dfed; }
.tia-home-v4 .hp4-category-copy .hp4-pill .icon { filter:none; }
.tia-home-v4 .hp4-category-copy .hp4-pill:hover { background:var(--navy); color:#fff; }
.tia-home-v4 .hp4-category-copy .hp4-pill:hover .icon { filter:brightness(0) invert(1); }
.tia-home-v4 .hp7-video-section { background:linear-gradient(135deg,#f3f9ff,#edf6fc); }
.hp7-video-heading h2 { font-size:clamp(34px,4.6vw,60px); }
.hp7-video-grid .hp4-video-card { border-color:#c9deef; box-shadow:0 6px 24px #092b5306; }
.hp7-video-grid .hp4-video-card h3 { font-size:16px; line-height:1.7; min-height:78px; }
/* Selected real work becomes the contrasting cinematic proof chapter. */
.tia-home-v4 #hp4-gallery { width:100%; max-width:none; background:#092b53; color:#fff; padding-inline:max(40px,calc((100% - 1240px)/2)); }
.tia-home-v4 #hp4-gallery :is(h2,h3) { color:#fff; }
.tia-home-v4 #hp4-gallery .hp4-section-heading p:not(.eyebrow) { color:#cbdced; }
#hp4-gallery .hp4-section-heading .eyebrow { color:#abd3f8; }
#hp4-gallery .hp4-filter { border-color:#55708c; background:transparent; color:#e5f2ff; }
#hp4-gallery .hp4-filter[aria-pressed=true] { background:#fff; color:#092b53; border-color:#fff; }
#hp4-gallery .hp4-filter .icon { filter:brightness(0) invert(1); }
#hp4-gallery .hp4-filter[aria-pressed=true] .icon { filter:none; }
#hp4-gallery .hp4-gallery-card { border-color:#55708c; background:#0e335a; border-radius:10px; overflow:hidden; }
#hp4-gallery figcaption { color:#e7f1fa; padding:18px 14px; }
#hp4-gallery figcaption .icon { filter:brightness(0) invert(1); }
#hp4-gallery .hp4-centered-action .button { background:#fff; color:#092b53; border-color:#fff; }
#hp4-gallery .hp4-centered-action .button .icon { filter:none; }
#hp4-prepare { position:relative; background:#f6f3ed; isolation:isolate; }
#hp4-prepare::before { content:''; position:absolute; inset:0; z-index:-1; background:url('cinematic/fabric-atmosphere.webp') right center / cover no-repeat; opacity:.20; pointer-events:none; }
#hp4-prepare .hp4-space { background:#ffffffed; }
.hp4-process-grid { position:relative; }
.hp4-process-grid::before { content:''; position:absolute; top:26px; left:10%; right:10%; height:1px; background:#b4cee6; z-index:0; }
.hp4-process-grid > li { position:relative; background:#fff; border-radius:12px; border:1px solid #d5e3ef; }
.hp4-process-title > span { background:#092b53; color:#fff; }
.hp4-story-photos figure { border-radius:10px; overflow:hidden; }
.hp4-contact-grid { gap:28px; }
.hp4-contact-grid > * { border-radius:12px; }
.hp4-footer { background:#061f3b; }
.primary-nav a { position:relative; }
.primary-nav a::after { transition:width .25s var(--cine-ease); }
.tia-cinematic .page-band { background:linear-gradient(115deg,#eff6fd,#e5eef7); border-bottom:1px solid #d5e3f0; }
.tia-cinematic .band-copy h1 { font-size:clamp(32px,4vw,58px); line-height:1.4; }
.tia-cinematic .band-photo { overflow:hidden; border-radius:0 0 20px 0; }
.tia-cinematic .category-card,.tia-cinematic .product-card { border-radius:12px; border-color:#d5e3ef; }
.tia-cinematic .button:focus-visible,.cine-rail a:focus-visible,.cine-rail summary:focus-visible { outline:3px solid #408bee; outline-offset:4px; }
.cine-rail { position:fixed; z-index:35; right:12px; top:50%; transform:translateY(-50%); }
.cine-rail details { position:relative; }
.cine-rail summary { display:none; cursor:pointer; }
.cine-chapter-list { display:grid; gap:5px; padding:7px; border:1px solid #c9dbec; border-radius:30px; background:#ffffffef; box-shadow:0 8px 30px #092b5312; }
.cine-chapter-list::after { content:''; position:absolute; bottom:12px; right:2px; width:2px; height:calc(var(--page-progress,0)*90%); background:#3b83c9; border-radius:2px; pointer-events:none; }
.cine-rail a { position:relative; display:flex; justify-content:center; align-items:center; width:44px; height:44px; color:#294d73; border-radius:50%; text-decoration:none; }
.cine-rail a img { width:21px; height:21px; }
.cine-chapter-number { position:absolute; right:1px; bottom:0; font-size:9px; }
.cine-chapter-label { display:none; }
.cine-rail a[aria-current=location] { color:#fff; background:#092b53; }
.cine-rail a[aria-current=location] img { filter:brightness(0) invert(1); }
.cine-rail a:hover .cine-chapter-label,.cine-rail a:focus-visible .cine-chapter-label { display:block; position:absolute; right:56px; padding:9px 14px; max-width:240px; white-space:nowrap; font-size:13px; color:#fff; background:#092b53; border-radius:7px; }
@media (min-width:1100px) {
  .tia-home-v4 .hp4-container,.tia-home-v4 .hp4-immersive .hp4-hero-copy { width:min(1240px,calc(100% - 160px)); }
  .tia-home-v4 #hp4-gallery { width:100%; padding-inline:max(80px,calc((100% - 1240px)/2)); }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .tia-cinematic :is(.button,.hp4-pill,.hp4-setting,.hp4-channel-card,.cine-rail a):is(:hover,:focus-visible) .icon { animation:cine-icon .45s ease both; }
  .cine-rail a:is(:hover,:focus-visible) img { animation:cine-icon .45s ease both; }
  @keyframes cine-icon { 0% { transform:translateX(0) rotate(0); } 45% { transform:translateX(3px) rotate(-5deg); } 100% { transform:translateX(0) rotate(0); } }
  .tia-cinematic .hp4-gallery-photo:hover img { transform:scale(1.035); }
}
@media (max-width:1099px) {
  .cine-rail { top:auto; bottom:max(16px,env(safe-area-inset-bottom)); right:14px; transform:none; }
  .cine-rail summary { display:block; list-style:none; background:#092b53; color:white; padding:12px 18px; min-height:44px; border:1px solid #6389b4; border-radius:24px; font-size:13px; box-shadow:0 6px 20px #092b5326; }
  .cine-rail summary::-webkit-details-marker { display:none; }
  .cine-chapter-list { position:absolute; bottom:58px; right:0; width:240px; max-height:65vh; overflow:auto; border-radius:14px; background:#fff; gap:2px; }
  .cine-rail a { width:100%; border-radius:8px; justify-content:flex-start; gap:12px; padding:6px 12px; min-height:48px; height:auto; }
  .cine-rail .cine-chapter-label { display:block; position:static; font-size:13px; white-space:normal; }
  .cine-chapter-number { display:none; }
  .cine-chapter-list::after { display:none; }
  .cine-rail a:hover .cine-chapter-label,.cine-rail a:focus-visible .cine-chapter-label { position:static; padding:0; white-space:normal; color:inherit; background:none; }
  footer { padding-bottom:80px !important; }
}
@media (max-width:767px) {
  :is(section,footer)[id] { scroll-margin-top:100px; }
  .tia-home-v4 .hp4-section { padding-block:54px; }
  .tia-home-v4 .hp4-immersive { min-height:720px; }
  .tia-home-v4 .hp4-immersive h1 { font-size:clamp(25px,7vw,36px); line-height:1.5; }
  .tia-home-v4 .hp4-immersive .hp4-lead { font-size:15px; line-height:1.85; }
  .hp4-immersive::after { background:linear-gradient(0deg,#061f3bfa,#061f3bd9 45%,#061f3b05 92%); }
  .tia-home-v4 .hp4-category-copy h3 { font-size:13px; }
  .tia-home-v4 .hp4-category-copy .hp4-pill { font-size:11px; }
  .tia-home-v4 #hp4-gallery { width:100%; padding-inline:18px; }
  .hp7-video-grid .hp4-video-card h3 { font-size:12px; }
  .hp7-video-heading h2 { font-size:30px; }
  .hp4-process-grid::before { display:none; }
  #hp4-prepare::before { background-position:70% center; opacity:.12; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto !important; }
  .tia-cinematic *, .tia-cinematic *::before, .tia-cinematic *::after { animation:none !important; transition:none !important; }
}
/* Reset generic FAQ disclosure styling for the chapter navigation. */
.cine-rail details {
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.cine-rail a:is(:hover,:focus-visible) {
  background:#e4f0fc;
  color:#092b53;
}
.cine-rail a[aria-current=location]:is(:hover,:focus-visible) {
  background:#092b53;
  color:#fff;
}
@media (max-width:440px) {
  .hp4-story-heading { flex-direction:column; align-items:flex-start; gap:24px; }
  .hp4-story-heading .hp4-logo { width:128px; max-width:100%; }
  .hp4-contact-logo .hp4-logo { max-width:100%; }
}
/* Final refinement: readable initial Hero text and restrained metadata contrast. */
.hp7-video-heading .eyebrow { color:#4d6888; }
.tia-home-v4 .hp4-immersive h1 > span,
.tia-home-v4 .hp4-immersive .hp4-actions {
  animation-name:cine-hero-enter;
}
@keyframes cine-hero-enter {
  from { opacity:1; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
.tia-home-v4 .hp4-category-copy .hp4-pill {
  min-width:100px;
  justify-content:center;
}
@media (max-width:767px) {
  .tia-home-v4 .hp4-category-copy .hp4-pill { min-width:0; }
}
.tia-home-v4 .hp4-immersive .hp4-kicker,
.tia-home-v4 .hp4-immersive .hp4-lead {
  animation-name:cine-hero-enter;
}
/* V9 photo preview: stable geometry and opacity-only transitions. */
.tia-home-v4 .hp4-immersive .hp4-hero-photo > .hp9-hero-slide {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
  pointer-events:none;
}
.tia-home-v4 .hp4-immersive .hp4-hero-photo > .hp9-hero-slide.is-active { opacity:1; }
.tia-home-v4 .hp4-immersive .hp4-hero-photo > .hp9-hero-slide:nth-of-type(2) { object-position:65% center; }
.hp9-hero-controls {
  position:absolute;
  bottom:18px;
  left:max(80px,calc((100% - 1240px)/2));
  z-index:3;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid #ffffff52;
  border-radius:28px;
  background:#061f3bd9;
  color:#fff;
}
.hp9-hero-controls button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:8px;
  border:0;
  border-radius:22px;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-size:12px;
}
.hp9-hero-controls button:hover { background:#ffffff20; }
.hp9-hero-controls button:focus-visible { outline:2px solid #fff; outline-offset:-3px; }
.hp9-hero-controls button:disabled { opacity:.65; cursor:default; }
.hp9-hero-controls .icon { width:18px; height:18px; filter:brightness(0) invert(1); }
.hp9-hero-controls [data-hero-count] { padding-inline:5px; font-size:11px; font-variant-numeric:tabular-nums; }
.hp9-hero-controls [data-hero-toggle] { border-left:1px solid #ffffff35; border-radius:0 22px 22px 0; padding-inline:12px; }
.hp4-immersive .hp4-hero-photo figcaption { z-index:2; }
@media (max-width:1099px) { .hp9-hero-controls { left:24px; } }
@media (max-width:767px) {
  .hp9-hero-controls { left:18px; bottom:14px; }
  .hp4-immersive .hp4-hero-photo figcaption { bottom:76px; right:18px; font-size:10px; }
  .tia-home-v4 .hp4-immersive .hp4-hero-copy { padding-bottom:132px; }
}
@media (prefers-reduced-motion:reduce) {
  .tia-home-v4 .hp4-immersive .hp4-hero-photo > .hp9-hero-slide { transition:none; }
}