/* =========================================================
   Grand Senior Residence — ระบบดีไซน์ (PHP + CSS ล้วน)
   สีและระยะห่างทั้งเว็บมาจากตัวแปรชุดนี้ชุดเดียว
   ========================================================= */
:root{
  --blue:#1450B4;
  --blue-dk:#0B3372;
  --blue-dp:#072451;
  --blue-lt:#2E77D0;
  --blue-pale:#EAF3FD;
  --blue-pale-2:#D8E9FB;

  --ink:#14243D;
  --ink-2:#54637B;
  --line:#DCE7F3;
  --white:#fff;
  --line-green:#06C755;

  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --shadow-sm:0 1px 2px rgba(11,51,114,.05), 0 6px 16px -8px rgba(11,51,114,.18);
  --shadow:0 2px 4px rgba(11,51,114,.06), 0 16px 40px -18px rgba(11,51,114,.30);
  --shadow-lg:0 4px 8px rgba(11,51,114,.07), 0 34px 70px -26px rgba(11,51,114,.42);
  --wrap:1180px;
  --font:"Prompt","IBM Plex Sans Thai",-apple-system,"Segoe UI",sans-serif;
}

/* ============ พื้นฐาน ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font); font-size:17.5px; line-height:1.75; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--font); font-weight:600; line-height:1.32; margin:0}
h1{font-size:clamp(2rem,4.6vw,3.05rem); line-height:1.22}
h2{font-size:clamp(1.55rem,3vw,2.2rem)}
h3{font-size:1.2rem}
p{margin:0}
:focus-visible{outline:3px solid var(--blue-lt); outline-offset:3px; border-radius:4px}
[id]{scroll-margin-top:100px}

.wrap{width:min(100% - 40px, var(--wrap)); margin-inline:auto}
.section{padding:88px 0}
.section-sm{padding:64px 0}
.lead{font-size:1.06rem; color:var(--ink-2); font-weight:300}
.muted{color:var(--ink-2)}
.skip{position:absolute; left:-9999px; top:0; background:var(--blue); color:#fff; padding:12px 20px; z-index:300; border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ข้อความที่ยังรอข้อมูลจากศูนย์ — ต้องเอาสไตล์นี้ออกก่อนขึ้นเว็บจริง */
.todo{background:#FFF6E0; border-bottom:1px dashed #C08A2A; color:#7A5A22; padding:0 3px; border-radius:3px}

/* ============ หัวข้อของแต่ละส่วน ============ */
.head-c{text-align:center; max-width:66ch; margin:0 auto 52px}
.head-c h2{color:var(--blue-dk)}
.head-c .lead{margin-top:14px}
.heart-rule{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; color:var(--blue-lt)}
.heart-rule::before,.heart-rule::after{content:""; height:2px; width:52px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--blue-lt))}
.heart-rule::after{background:linear-gradient(90deg,var(--blue-lt),transparent)}
.head-l{max-width:64ch; margin-bottom:44px}
.head-l h2{color:var(--blue-dk)}
.head-l .lead{margin-top:14px}
.eyebrow{font-size:.92rem; font-weight:500; color:var(--blue-lt); margin-bottom:10px}

/* ============ ปุ่ม ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 28px; border-radius:999px;
  font-family:var(--font); font-size:1rem; font-weight:500; border:2px solid transparent;
  cursor:pointer; transition:background .3s ease,background-position .4s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .25s ease;
}
.btn svg{flex:none}
.btn-primary{background:linear-gradient(135deg,var(--blue-lt),var(--blue) 55%,var(--blue-dk)); background-size:160% 160%; background-position:0 0; color:#fff; box-shadow:0 10px 22px -12px rgba(20,80,180,.9)}
.btn-primary:hover{background-position:100% 100%; box-shadow:0 14px 28px -12px rgba(20,80,180,.95)}
.btn:hover{transform:translateY(-2px)}
.btn svg{transition:transform .2s ease}
.btn:hover svg:last-child{transform:translateX(3px)}
.btn-ghost{border-color:var(--line); color:var(--blue-dk); background:#fff}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue)}
.btn-white{background:#fff; color:var(--blue-dk)}
.btn-white:hover{background:var(--blue-pale)}
.btn-outline-white{border-color:rgba(255,255,255,.75); color:#fff}
.btn-outline-white:hover{background:rgba(255,255,255,.14)}
.btn-line{background:var(--line-green); color:#fff}
.btn-line:hover{background:#05a948}
.btn-lg{min-height:60px; padding:0 34px; font-size:1.05rem}
.btn:active{transform:translateY(1px)}

/* ============ หัวเว็บ ============ */
.header{position:sticky; top:0; z-index:200; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .3s ease}
.header.is-scrolled{box-shadow:0 8px 30px -18px rgba(11,51,114,.35)}
.header-in{display:flex; align-items:center; gap:24px; min-height:84px}
.logo{display:flex; align-items:center; flex:none}
.logo-img{height:52px; width:auto; flex:none}
.logo-link{display:inline-flex; flex:none}
.nav{display:flex; gap:20px; margin-left:auto; align-items:center}
.nav a{font-size:.94rem; color:var(--ink-2); padding:8px 0; position:relative; white-space:nowrap}
.nav a:hover{color:var(--blue)}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; border-radius:2px; background:var(--blue); transition:right .2s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--blue-dk); font-weight:500}
.header-cta{flex:none}
.header-cta .btn{min-height:48px; padding:0 22px; font-size:.97rem}

/* เมนูมือถือ ใช้ <details> ของเบราว์เซอร์ ไม่ใช้ JavaScript */
.navm{display:none; margin-left:auto; position:static}
.navm > summary{list-style:none; display:flex}
.navm > summary::-webkit-details-marker{display:none}
.navm > summary::marker{content:""}
.burger{width:52px; height:52px; border:1px solid var(--line); border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--blue-dk)}
.navm[open] .burger{background:var(--blue); color:#fff; border-color:var(--blue)}
.nav-m{
  position:absolute; top:100%; left:0; right:0; width:auto; margin:0;
  background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
}
.nav-m-in{padding:8px 0 18px}
.nav-m a{display:block; padding:15px 0; border-bottom:1px solid var(--line)}
.nav-m a:last-child{border-bottom:0}
.nav-m a[aria-current="page"]{color:var(--blue); font-weight:500}
.nav-m-tel{display:flex; gap:12px; padding-top:16px}
.nav-m-tel .btn{flex:1; min-height:50px; padding:0 14px; font-size:.95rem}

/* ============ Hero หน้าแรก ============
   รูปต้นฉบับกว้าง 860px จึงวางในกรอบขนาดพอดีแทนการดึงเต็มจอ ภาพจะคมกว่ามาก
   ถ้าได้ไฟล์ต้นฉบับความละเอียดสูงจากลูกค้า ค่อยเปลี่ยนเป็นรูปพื้นเต็มจอได้
   ======================================= */
.hero{position:relative; overflow:hidden; color:var(--ink); background:var(--blue-pale)}

/* รูปเต็มความกว้างจอ อยู่หลังตัวหนังสือ */
.hero-bg{position:absolute; inset:0; z-index:0}
/* ยึดขอบบนของรูป ส่วนที่ถูกตัดจะเป็นขอบล่างเสมอ ไม่มีทางตัดโดนหน้าใคร */
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 0; display:block}

/* ม่านขาวไล่จากซ้าย — เข้มพอให้ตัวหนังสือน้ำเงินเข้มอ่านออก
   แต่ยังบางพอให้เห็นพยาบาลคนซ้ายและฉากสวนด้านหลัง */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(94deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.62) 28%,rgba(255,255,255,.26) 46%,rgba(255,255,255,0) 62%);
}

.hero-grid{
  position:relative; z-index:3; display:grid; align-items:center;
  /* รูป 1717x916 (1.874:1) หน้าคนอยู่ช่วงบน 42% มือที่จับกันอยู่ราว 80%
     ความสูงกรอบ 43vw ≈ 80% ของความสูงรูป จึงเก็บทั้งหน้าและมือไว้ครบทุกขนาดจอ
     ส่วนที่หายมีแต่ขอบล่างซึ่งเป็นคลื่นน้ำเงินล้วน */
  height:clamp(440px,43vw,820px); padding:0 0 40px;
}
.hero-in{max-width:min(52%,600px)}
.hero h1{color:var(--blue-dk); text-shadow:0 1px 16px rgba(255,255,255,.9)}
.hero h1 span{display:block}
.hero-en{
  margin-top:12px; font-family:var(--font); font-weight:400;
  font-size:clamp(.95rem,1.55vw,1.14rem); letter-spacing:.01em; color:var(--blue-lt);
  text-shadow:0 1px 12px rgba(255,255,255,.95);
}
.hero-name{margin-top:10px; font-size:clamp(1.05rem,2.1vw,1.28rem); font-weight:500; color:var(--blue); text-shadow:0 1px 12px rgba(255,255,255,.95)}
.hero-badges{display:flex; flex-wrap:wrap; gap:16px 26px; margin-top:36px}
.hero-badge{display:flex; flex-direction:column; align-items:center; gap:9px; width:96px; text-align:center}
.hero-badge .ring{
  width:62px; height:62px; border-radius:50%; background:#fff; color:var(--blue);
  display:grid; place-items:center; flex:none; box-shadow:0 10px 24px -12px rgba(11,51,114,.55);
  transition:transform .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease;
}
.hero-badge:hover .ring{background:var(--blue); color:#fff; transform:translateY(-4px); box-shadow:0 16px 28px -14px rgba(20,80,180,.9)}
.hero-badge span{font-size:.85rem; line-height:1.45; color:var(--blue-dk); font-weight:500; text-shadow:0 1px 10px rgba(255,255,255,.95)}

/* แถบโทร/นัดชม คร่อมรอยต่อใต้ hero */
.callbar{position:relative; z-index:5; margin-top:-40px}
.callbar-in{
  background:linear-gradient(100deg,var(--blue-dk),var(--blue) 62%,var(--blue-lt));
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg); color:#fff;
  padding:22px 34px; display:flex; align-items:center; justify-content:center; gap:14px 40px; flex-wrap:wrap;
}
.callbar-tel{display:flex; align-items:center; gap:16px}
.callbar-tel .ring{width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; flex:none; animation:ring-pulse 2.6s ease-out infinite}
.callbar-tel b{display:block; font-size:1.6rem; font-weight:600; line-height:1.25}
.callbar-tel span{display:block; font-size:.9rem; color:#CFE1F8}

/* ============ แถบหัวของหน้าย่อย ============ */
.pagehead{background:linear-gradient(100deg,var(--blue-dp),var(--blue-dk) 55%,var(--blue)); color:#fff; padding:62px 0 70px; position:relative; overflow:hidden}
.pagehead::after{content:""; position:absolute; right:-8%; top:-60%; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.10),transparent 62%)}
.pagehead h1{color:#fff; position:relative}
.pagehead p{margin-top:14px; color:#D3E4FA; max-width:60ch; position:relative}
.crumb{font-size:.9rem; color:#AFCCEE; margin-bottom:14px; position:relative}
html.js .pagehead .crumb,html.js .pagehead h1,html.js .pagehead p{animation:fade-up .7s cubic-bezier(.2,.7,.3,1) both}
html.js .pagehead h1{animation-delay:.08s}
html.js .pagehead p{animation-delay:.18s}
.crumb a:hover{color:#fff}

/* ============ คลื่นคั่นส่วน ============ */
.wave{display:block; line-height:0}
.wave svg{display:block; width:100%; height:clamp(38px,5vw,74px)}

/* ============ การ์ดบริการ ============ */
.cards{display:grid; grid-template-columns:repeat(5,1fr); gap:22px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; overflow:hidden; transition:transform .22s ease, box-shadow .22s ease}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--blue-pale-2)}
.card-media{position:relative}
.card-img{display:block; overflow:hidden; position:relative}
.card-media img{width:100%; aspect-ratio:4/3; object-fit:cover; height:auto; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-media img{transform:scale(1.06)}
.card-img::after{content:""; position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(to top,rgba(7,36,81,.22),transparent); pointer-events:none}
.card-ico{
  position:absolute; left:50%; bottom:-27px; transform:translateX(-50%);
  width:54px; height:54px; border-radius:50%; background:#fff; color:var(--blue);
  display:grid; place-items:center; box-shadow:0 6px 18px -8px rgba(11,51,114,.7); border:1px solid var(--line); z-index:1;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s ease,color .25s ease;
}
.card:hover .card-ico{transform:translate(-50%,-6px) scale(1.08); background:var(--blue); color:#fff}
.card-body{padding:42px 20px 26px; text-align:center}
.card-body h3{font-size:1.06rem; color:var(--blue-dk)}
.card-body p{margin-top:8px; font-size:.92rem; color:var(--ink-2); line-height:1.68}

/* ============ ส่วนรูปคู่ข้อความ ============ */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.split-media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow)}
.split-media img{width:100%; aspect-ratio:16/11; object-fit:cover; height:auto; transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.split-media:hover img{transform:scale(1.04)}
.split h2{color:var(--blue-dk)}
.split p{margin-top:16px; color:var(--ink-2)}
.thumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px}
.thumbs img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-sm); height:auto; box-shadow:var(--shadow-sm); transition:transform .25s ease,box-shadow .25s ease}
.thumbs img:hover{transform:translateY(-4px); box-shadow:var(--shadow)}

/* ============ แถบสีน้ำเงิน ============ */
.band{background:linear-gradient(150deg,var(--blue-dk) 0%,var(--blue) 52%,var(--blue-lt) 100%); color:#fff; padding:86px 0; position:relative; overflow:hidden}
.band::after{content:""; position:absolute; left:-10%; bottom:-40%; width:700px; height:700px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.10),transparent 60%)}
.band .wrap{position:relative; z-index:1}
.band h2,.band h3{color:#fff}
.band .lead,.band p{color:#D5E6FA}
.band .heart-rule{color:#fff}
.band .heart-rule::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.85))}
.band .heart-rule::after{background:linear-gradient(90deg,rgba(255,255,255,.85),transparent)}

.five-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px}
.five-item{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); border-radius:var(--r); padding:26px 20px; text-align:center; backdrop-filter:blur(6px); transition:transform .25s ease,background .25s ease,border-color .25s ease}
.five-item:hover{transform:translateY(-6px); background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.45)}
.five-glyph{display:grid; place-items:center; width:58px; height:58px; margin:0 auto 14px; border-radius:50%; background:#fff; color:var(--blue); font-size:1.85rem; font-weight:600; line-height:1; box-shadow:0 0 0 6px rgba(255,255,255,.14); transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.five-item:hover .five-glyph{transform:rotate(-8deg) scale(1.08)}
.five-item h3{font-size:1.06rem}
.five-item p{font-size:.9rem; margin-top:8px; line-height:1.65}

/* ============ จุดเด่น 4 ข้อ ============ */
.feats{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.feat{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 24px; text-align:center; box-shadow:var(--shadow-sm); transition:transform .25s ease,box-shadow .25s ease}
.feat:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.feat .ring{width:62px; height:62px; border-radius:50%; margin:0 auto 16px; background:var(--blue-pale); color:var(--blue); display:grid; place-items:center}
.feat h3{font-size:1.04rem; color:var(--blue-dk)}
.feat p{margin-top:8px; font-size:.92rem; color:var(--ink-2); line-height:1.68}

/* ============ รายการเครื่องหมายถูก ============ */
.ticks{list-style:none; margin:0; padding:0}
.ticks li{display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--line); font-size:1rem}
.ticks li:last-child{border-bottom:0}
.ticks svg{color:var(--blue); flex:none; margin-top:7px}
.ticks b{display:block; font-weight:500}
.ticks span span{display:block; color:var(--ink-2); font-size:.93rem; line-height:1.6}

/* ============ บริการรายข้อ ============ */
.svc-list{display:grid; gap:18px}
.svc{display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px 30px; box-shadow:var(--shadow-sm); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.svc:hover{transform:translateX(6px); box-shadow:var(--shadow); border-color:var(--blue-pale-2)}
.svc:hover .svc-n{color:var(--blue-lt)}
.svc-n{font-size:1.5rem; font-weight:600; color:var(--blue-pale-2); line-height:1; transition:color .25s ease}
.svc h3{color:var(--blue-dk)}
.svc p{margin-top:8px; color:var(--ink-2); font-size:.98rem; max-width:70ch}
.svc-tag{font-size:.85rem; color:var(--blue-dk); background:var(--blue-pale); padding:7px 15px; border-radius:999px; white-space:nowrap}

/* ============ ขั้นตอน ============ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative}
.steps::before{content:""; position:absolute; left:6%; right:6%; top:48px; border-top:2px dashed var(--blue-pale-2); z-index:0}
.step{position:relative; z-index:1; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px 24px; box-shadow:var(--shadow-sm); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.step:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--blue-pale-2)}
.step-n{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--blue-lt),var(--blue-dk)); color:#fff; display:grid; place-items:center; font-weight:600; margin-bottom:16px; box-shadow:0 8px 16px -8px rgba(20,80,180,.8)}
.step h3{font-size:1.04rem; color:var(--blue-dk)}
.step p{font-size:.93rem; color:var(--ink-2); margin-top:8px; line-height:1.68}

/* ============ ทีมบริหาร ============ */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.member{border:1px solid var(--line); border-radius:var(--r); padding:30px; background:#fff; box-shadow:var(--shadow-sm); transition:transform .25s ease,box-shadow .25s ease}
.member:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.member h3{font-size:1.06rem; color:var(--blue-dk)}
.member .role{color:var(--blue-lt); font-size:.92rem; margin-top:6px}
.member .cred{color:var(--ink-2); font-size:.92rem; margin-top:10px}

/* ============ แกลเลอรี ============ */
.gal{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.gal figure{margin:0; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--blue-pale-2)}
.gal img{width:100%; aspect-ratio:4/3; object-fit:cover; height:auto; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.04)}
.gal .tall{grid-column:1 / -1}
.gal .tall img{aspect-ratio:16/9}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.shot{margin:0}
.shot img{width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:var(--r-sm); height:auto; box-shadow:var(--shadow-sm); transition:transform .3s ease,box-shadow .3s ease}
.shot:hover img{transform:translateY(-5px); box-shadow:var(--shadow)}
.shot figcaption{font-size:.88rem; color:var(--ink-2); margin-top:10px; line-height:1.5}

/* ============ กิจกรรม ============ */
.life{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.life figure{margin:0; border-radius:var(--r); overflow:hidden; position:relative; background:var(--blue-pale-2)}
.life img{width:100%; aspect-ratio:3/4; object-fit:cover; height:auto; transition:transform .5s ease}
.life figure:hover img{transform:scale(1.04)}
.life figcaption{position:absolute; left:0; right:0; bottom:0; padding:56px 22px 20px; color:#fff; font-weight:500; font-size:1.02rem; background:linear-gradient(to top,rgba(7,36,81,.88),rgba(7,36,81,0)); transition:padding-bottom .3s ease}
.life figure:hover figcaption{padding-bottom:26px}

/* ============ ราคา ============ */
.price-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:start}
.price-card{background:linear-gradient(150deg,var(--blue-dk),var(--blue)); color:#fff; border-radius:var(--r-lg); padding:38px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.price-card::before{content:""; position:absolute; right:-70px; top:-70px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%); pointer-events:none}
.price-card::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent); transform:skewX(-18deg); transition:left .9s ease; pointer-events:none}
.price-card:hover::after{left:130%}
.price-card > *{position:relative; z-index:1}
.price-card .cap{font-size:.95rem; color:#CFE1F8}
.price-row{display:flex; align-items:baseline; gap:10px; margin-top:6px}
.price-num{font-size:3.3rem; font-weight:600; line-height:1; letter-spacing:-.02em}
.price-unit{font-size:1.02rem; color:#CFE1F8}
.price-note{font-size:.92rem; color:#CFE1F8; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.24); line-height:1.7}
.price-more{margin-top:16px; font-size:.93rem}
.price-more a{color:#DCEAFB; text-decoration:underline; text-underline-offset:3px}
.price-more a:hover{color:#fff}
.price-card .btn{margin-top:24px; width:100%}

/* ============ คำถามที่พบบ่อย ============ */
.faq{max-width:860px; margin:0 auto}
.faq details{border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px; background:#fff; box-shadow:var(--shadow-sm); transition:border-color .2s ease,box-shadow .2s ease}
.faq details:hover,.faq details[open]{border-color:var(--blue-pale-2); box-shadow:var(--shadow)}
.faq .ans{animation:fade-up .35s ease both}
.faq summary{list-style:none; cursor:pointer; padding:22px 56px 22px 26px; position:relative; font-weight:500; font-size:1.02rem; line-height:1.55; color:var(--blue-dk)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:26px; top:30px; width:11px; height:11px; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(45deg); transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(-135deg); top:34px}
.faq .ans{padding:0 26px 24px; color:var(--ink-2); font-size:.98rem}

/* ============ ติดต่อและฟอร์ม ============ */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start}
.info-list{list-style:none; padding:0; margin:26px 0 0}
.info-list li{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:flex-start}
.info-list li:last-child{border-bottom:0}
.info-list .ring{width:44px; height:44px; border-radius:50%; background:var(--blue-pale); color:var(--blue); display:grid; place-items:center; flex:none}
.info-list b{display:block; font-weight:500}
.info-list span span{display:block; color:var(--ink-2); font-size:.93rem}
/* การ์ดช่องทางติดต่อ — มาแทนฟอร์มเดิม เพราะศูนย์ไม่มีระบบหลังบ้านรับข้อมูล */
.reach{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:36px; box-shadow:var(--shadow); position:sticky; top:104px}
.reach-h{color:var(--blue-dk); font-size:1.24rem}
.reach-btns{display:grid; gap:12px; margin-top:24px}
.reach-qr{margin-top:26px; padding-top:24px; border-top:1px solid var(--line); text-align:center}
.reach-qr img{width:172px; height:auto; margin:0 auto 12px; border:1px solid var(--line); border-radius:14px; padding:8px; background:#fff}
.reach-sub{margin-top:26px; padding-top:24px; border-top:1px solid var(--line); color:var(--blue-dk); font-size:1rem}
.form-note{font-size:.88rem; color:var(--ink-2); margin-top:16px; text-align:center}
.link-strong{font-weight:500; color:var(--blue)}
.underline{text-decoration:underline}
.map-ph{border:1px dashed var(--line); border-radius:var(--r); background:var(--blue-pale); padding:44px 24px; text-align:center; color:var(--ink-2)}

/* ============ แถบชวนติดต่อท้ายหน้า ============ */
.cta{background:linear-gradient(100deg,var(--blue-dk),var(--blue) 60%,var(--blue-lt)); color:#fff; border-radius:var(--r-xl); padding:44px 48px; box-shadow:var(--shadow-lg); display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; position:relative; overflow:hidden}
.cta::before,.cta::after{content:""; position:absolute; border-radius:50%; border:1.5px solid rgba(255,255,255,.16); pointer-events:none}
.cta::before{width:320px; height:320px; right:-90px; top:-150px}
.cta::after{width:200px; height:200px; right:60px; bottom:-120px}
.cta > *{position:relative; z-index:1}
.cta h2{color:#fff; font-size:clamp(1.4rem,2.4vw,1.9rem)}
.cta p{color:#D5E6FA; margin-top:10px; max-width:52ch}
.cta-btns{display:flex; gap:14px; flex-wrap:wrap}

/* ============ ท้ายเว็บ ============ */
.footer{background:var(--blue-dp); color:#B9CFEA; padding:64px 0 0}
.footer a:hover{color:#fff}
.footer-grid{display:grid; grid-template-columns:1.25fr .8fr 1.15fr .8fr; gap:44px; padding-bottom:48px}
.footer h4{color:#fff; font-size:1rem; margin-bottom:18px; font-weight:500}
.footer ul{list-style:none; padding:0; margin:0}
.footer li{margin-bottom:11px; font-size:.94rem}
.footer-logo{background:#fff; border-radius:14px; padding:12px 14px; display:inline-block}
.footer-logo img{height:44px; width:auto}
.footer-tag{margin-top:18px; font-size:.94rem; line-height:1.75; max-width:34ch}
.footer-tag b{color:#fff; font-weight:500}
.footer-tag-en{color:#7FB0E8; font-size:.88rem}
.footer-ct{display:flex; gap:12px; align-items:flex-start}
.footer-ct svg{color:#7FB0E8; flex:none; margin-top:5px}
.footer-qr{background:#fff; padding:10px; border-radius:14px; display:inline-block}
.footer-qr img{width:130px; height:auto}
.footer-qr-cap{font-size:.86rem; margin-top:10px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14); padding:22px 0 30px; font-size:.86rem; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ============ แถบติดขอบล่างบนมือถือ ============ */
/* ============ ปุ่มลอยข้างจอ (มือถือ) ============ */
.fabs{
  display:none; position:fixed; z-index:150;
  right:14px; bottom:calc(18px + env(safe-area-inset-bottom));
  flex-direction:column; gap:12px;
}
.fab{
  position:relative; width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; color:#fff; flex:none;
  box-shadow:0 8px 22px -6px rgba(11,51,114,.45), 0 2px 6px rgba(0,0,0,.14);
  transition:transform .2s ease, box-shadow .2s ease;
}
.fab:active{transform:scale(.94)}
.fab-tel{background:linear-gradient(135deg,var(--blue-lt),var(--blue-dk))}
.fab-line{background:var(--line-green); box-shadow:0 8px 22px -6px rgba(6,199,85,.6), 0 2px 6px rgba(0,0,0,.14)}
/* เครื่องหมายไลน์: ฟองคำพูดขาวบนวงกลมเขียว วาดด้วย CSS จะได้คมทุกความละเอียด */
.line-mark{
  width:38px; height:31px; border-radius:47% 47% 44% 44%/52% 52% 48% 48%;
  background:#fff; display:grid; place-items:center; position:relative;
}
.line-mark span{
  font-family:var(--font); font-weight:600; font-size:.72rem; letter-spacing:.02em;
  color:var(--line-green); line-height:1;
}
.line-mark::after{
  content:""; position:absolute; right:7px; bottom:-4px;
  border-left:7px solid #fff; border-bottom:6px solid transparent; transform:rotate(-8deg);
}
/* ป้ายชื่อปุ่ม โผล่ตอนโฟกัสด้วยคีย์บอร์ดหรือชี้เมาส์ */
.fab-tip{
  position:absolute; right:calc(100% + 10px); top:50%; translate:0 -50%;
  background:var(--blue-dp); color:#fff; font-size:.82rem; white-space:nowrap;
  padding:7px 12px; border-radius:999px; opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.fab:hover .fab-tip,.fab:focus-visible .fab-tip{opacity:1}

/* ============ ตัวช่วยเล็ก ๆ ============ */
.bg-pale{background:var(--blue-pale)}
.pt-0{padding-top:0}
.w-full{width:100%}
.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-28{margin-top:28px}.mt-40{margin-top:40px}.mt-56{margin-top:56px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.fs-93{font-size:.93rem}
.doc{max-width:70ch}
.doc h2{font-size:1.3rem; color:var(--blue-dk); margin-top:30px}
.doc p{color:var(--ink-2); font-size:1rem; margin-top:14px}


/* ============ ตารางอัตราค่าบริการ ============ */
.table-hint{display:none; font-size:.86rem; color:var(--blue); margin:0 0 10px; font-weight:500}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r); box-shadow:var(--shadow-sm); background:#fff}
.rate-table{width:100%; border-collapse:collapse; min-width:720px; font-size:1rem}
.rate-table th,.rate-table td{padding:18px 16px; text-align:center; border-bottom:1px solid var(--line)}
.rate-table thead th{
  background:var(--blue-dk); color:#fff; font-weight:500; font-size:.98rem; line-height:1.45;
  border-bottom:0; vertical-align:middle;
}
.rate-table thead th span{display:block; font-size:.82rem; font-weight:300; color:#C7DCF6; margin-top:3px}
.rate-table thead th:first-child{text-align:left}
.rate-table tbody th{text-align:left; font-weight:400; max-width:34ch; background:#fff}
.rate-table tbody tr:nth-child(even) th{background:var(--blue-pale)}
.rate-table tbody tr:hover th{background:var(--blue-pale-2)}
.rate-table tbody th b{display:block; font-weight:500; color:var(--blue-dk); line-height:1.5}
.rate-table tbody th span{display:block; font-size:.9rem; color:var(--ink-2); margin-top:4px; line-height:1.5}
.rate-table tbody td{font-size:1.14rem; font-weight:500; color:var(--ink); white-space:nowrap}
.rate-table tbody tr{transition:background .2s ease}
.rate-table tbody tr:nth-child(even){background:var(--blue-pale)}
.rate-table tbody tr:hover{background:var(--blue-pale-2)}
.rate-table tbody tr:last-child th,.rate-table tbody tr:last-child td{border-bottom:0}

/* ============ ช่องทางชำระเงิน ============ */
.pay-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; align-items:start}
.pay-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 30px 32px; box-shadow:var(--shadow-sm); transition:transform .25s ease,box-shadow .25s ease}
.pay-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.pay-card h3{color:var(--blue-dk); font-size:1.16rem}
.pay-acct{margin:20px 0 0; display:grid; gap:14px}
.pay-acct div{display:grid; grid-template-columns:104px 1fr; gap:12px; align-items:baseline}
.pay-acct dt{color:var(--ink-2); font-size:.93rem}
.pay-acct dd{margin:0; font-weight:500; color:var(--ink)}
.pay-no{font-size:1.5rem; letter-spacing:.02em; color:var(--blue-dk)}

/* ============ รายการมีลำดับเลข ============ */
.numlist{list-style:none; margin:0; padding:0; counter-reset:n}
.numlist li{display:flex; gap:15px; padding:13px 0; border-bottom:1px solid var(--line); font-size:1rem; line-height:1.65}
.numlist li:last-child{border-bottom:0}
.numlist .num{
  flex:none; width:29px; height:29px; border-radius:50%; background:var(--blue-pale); color:var(--blue-dk);
  display:grid; place-items:center; font-size:.9rem; font-weight:500; margin-top:2px;
}

/* ============ แกลเลอรีคู่ / แกลเลอรีเอกสาร ============ */
.gal-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.gal-2 figure{margin:0}
.gal-2 img{width:100%; aspect-ratio:3/4; object-fit:cover; height:auto; border-radius:var(--r); box-shadow:var(--shadow-sm); transition:transform .3s ease,box-shadow .3s ease}
.gal-2 figure:hover img{transform:translateY(-5px); box-shadow:var(--shadow)}
.gal-2.is-wide{grid-template-columns:1fr; gap:20px}
.gal-2.is-wide img{aspect-ratio:16/10}
.gal-2 figcaption{font-size:.88rem; color:var(--ink-2); margin-top:10px; line-height:1.5}

/* เอกสารที่ต้องอ่านออก — คงสัดส่วนจริง ไม่ครอป */
.doc-figure{margin:0 auto; max-width:640px; text-align:center}
.doc-figure img{width:100%; height:auto; border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--shadow-sm); background:#fff}
.doc-figure figcaption{font-size:.9rem; color:var(--ink-2); margin-top:12px; line-height:1.6}

.gal-docs{display:grid; gap:22px}
.gal-docs figure{margin:0}
.gal-docs img{width:100%; height:auto; border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--shadow-sm); background:#fff}
.gal-docs figcaption{font-size:.88rem; color:var(--ink-2); margin-top:10px; line-height:1.5}

/* ============ จอเล็กลง ============ */
@media (max-width:1180px){
  .nav,.header-cta{display:none}
  .navm{display:block}
  .cards{grid-template-columns:repeat(3,1fr)}
  .five-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr; gap:36px}
}
@media (max-width:900px){
  body{font-size:17px}
  .section{padding:64px 0}
  /* จอแนวตั้ง รูปจะไม่ถูกครอปแนวสูง หน้าคนจึงอยู่ช่วง 25–45% ของความสูงเสมอ
     เลยวางตัวหนังสือไว้ด้านล่าง แล้วไล่ม่านจากล่างขึ้นบน หน้าคนจะไม่ถูกบัง */
  /* มือถือ: ไม่ดึงรูปเต็มกรอบและไม่ทับตัวหนังสือ
     ต้นฉบับกว้าง 1258px จอ 390px ที่ความละเอียด 3 เท่าต้องการ 1170px จึงยังคมชัดพอดี
     แต่ถ้าดึงเต็มกรอบสูงแบบเดสก์ท็อป ต้องยืดเกิน 2 เท่า ภาพจะเบลอทันที */
  .hero{background:linear-gradient(180deg,#F4F9FE,#fff)}
  .hero-bg{position:static}
  .hero-bg img{width:100%; height:auto; object-fit:fill}
  .hero::before,.hero::after{display:none}
  .hero-grid{height:auto; padding:34px 0 78px; align-items:start}
  .hero-in{max-width:none}
  .hero h1,.hero-name,.hero-en,.hero-badge span{text-shadow:none}
  .callbar{margin-top:-34px}
  .callbar-in{padding:20px 22px; flex-direction:column; gap:16px}
  .callbar-in .btn{width:100%}
  .cards{grid-template-columns:repeat(2,1fr)}
  .feats{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr; gap:32px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps::before{display:none}
  .table-hint{display:block}
  .rate-table thead th:first-child,.rate-table tbody th{position:sticky; left:0; z-index:1; min-width:176px; max-width:200px; box-shadow:8px 0 14px -12px rgba(11,51,114,.45)}
  .rate-table thead th:first-child{background:var(--blue-dk)}
  .team{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr; gap:32px}
  .pay-grid{grid-template-columns:1fr; gap:22px}
  .contact-grid{grid-template-columns:1fr; gap:36px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .life{grid-template-columns:repeat(2,1fr)}
  .life figure:last-child:nth-child(odd){grid-column:1 / -1}
  .life img{aspect-ratio:4/3}
  .svc{grid-template-columns:auto 1fr; gap:18px; padding:24px}
  .svc-tag{grid-column:2; justify-self:start}
  .cta{grid-template-columns:1fr; padding:34px 28px; text-align:center}
  .cta p{margin-inline:auto}
  .cta-btns{justify-content:center}
  .fabs{display:flex}
  .footer{padding-bottom:20px}
  .reach{padding:26px; position:static}
}
@media (max-width:620px){
  .cards{grid-template-columns:1fr}
  .five-grid{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .life{grid-template-columns:1fr}
  .thumbs{grid-template-columns:repeat(3,1fr); gap:10px}
  .footer-grid{grid-template-columns:1fr}
  .hero-badges{gap:12px 18px}
  .hero-badge{width:78px}
  .price-card{padding:28px}
}

/* คลื่นบน/ล่างของแถบสีน้ำเงิน */
.band > .wave{position:absolute; left:0; right:0; z-index:2; pointer-events:none}
.band > .wave:first-of-type{top:-1px}
.band > .wave:last-of-type{bottom:-1px; transform:scaleY(-1)}
.band{padding-block:calc(86px + clamp(38px,5vw,74px))}

/* ---------- แผนที่ฝังจาก Google Maps ---------- */
.map{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--blue-pale)}
.map iframe{display:block; width:100%; height:340px; border:0}
.map-act{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:18px}
.map-act p{max-width:32ch}
@media (max-width:620px){
  .map iframe{height:280px}
  .map-act{flex-direction:column; align-items:stretch}
  .map-act .btn{width:100%}
}

/* จอกลาง: บีบช่องไฟลง แต่ยังให้รูปกว้างพอจะเห็นครบทั้งสามคน */
/* จอกลาง: ย่อไอคอนลงหน่อย ให้แถวไอคอนอยู่ในโซนสว่างฝั่งซ้ายของรูป อ่านง่ายขึ้น */
@media (min-width:901px) and (max-width:1240px){
  .hero-in{max-width:min(52%,470px)}
  .hero-badges{gap:14px 16px; margin-top:28px}
  .hero-badge{width:84px}
  .hero-badge .ring{width:54px; height:54px}
  .hero-badge span{font-size:.78rem}
}

/* =========================================================
   แอนิเมชัน — ทำงานเฉพาะเมื่อมี JavaScript (html.js)
   ไม่มี JS หรือผู้ใช้ตั้งค่าลดการเคลื่อนไหว = แสดงทันทีทุกอย่าง
   ========================================================= */
@keyframes fade-up{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
@keyframes rise-in{from{opacity:0; transform:translateY(34px) scale(.97)} to{opacity:1; transform:none}}
@keyframes ring-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)} 70%{box-shadow:0 0 0 16px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes drift{0%,100%{transform:translate(0,0)} 50%{transform:translate(-24px,18px)}}
@keyframes rule-grow{from{width:0} to{width:52px}}
@keyframes hero-fade{from{opacity:0} to{opacity:1}}

/* hero: เข้าฉากตอนโหลดหน้า */
html.js .hero h1 span{animation:fade-up .8s cubic-bezier(.2,.7,.3,1) both}
html.js .hero h1 span:nth-child(2){animation-delay:.1s}
html.js .hero-en{animation:fade-up .8s cubic-bezier(.2,.7,.3,1) .20s both}
html.js .hero-name{animation:fade-up .8s cubic-bezier(.2,.7,.3,1) .28s both}
html.js .hero-badge{animation:fade-up .7s cubic-bezier(.2,.7,.3,1) both}
html.js .hero-badge:nth-child(1){animation-delay:.34s}
html.js .hero-badge:nth-child(2){animation-delay:.42s}
html.js .hero-badge:nth-child(3){animation-delay:.50s}
html.js .hero-badge:nth-child(4){animation-delay:.58s}
html.js .hero-bg img{animation:hero-fade 1.1s cubic-bezier(.2,.7,.3,1) both}
html.js .callbar-in{animation:fade-up .8s cubic-bezier(.2,.7,.3,1) .5s both}

/* เผยเนื้อหาตอนเลื่อนถึง — ใช้ translate แยกจาก transform ของ hover จะได้ไม่แย่งกัน
   และประกาศ transition ครบทุกคุณสมบัติที่การ์ดต่าง ๆ ใช้ตอน hover เพราะกฎนี้ชนะกฎของการ์ด */
html.js .reveal{opacity:0; translate:0 24px; transition:opacity .7s cubic-bezier(.2,.7,.3,1),translate .7s cubic-bezier(.2,.7,.3,1)}
html.js .reveal.is-in{opacity:1; translate:0 0}
html.js .reveal-group > *{
  opacity:0; translate:0 26px;
  transition:opacity .65s cubic-bezier(.2,.7,.3,1),translate .65s cubic-bezier(.2,.7,.3,1),
             transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease,color .25s ease;
}
html.js .reveal-group.is-in > *{opacity:1; translate:0 0}
html.js .reveal-group.is-in > :nth-child(2){transition-delay:.08s,.08s,0s,0s,0s,0s,0s}
html.js .reveal-group.is-in > :nth-child(3){transition-delay:.16s,.16s,0s,0s,0s,0s,0s}
html.js .reveal-group.is-in > :nth-child(4){transition-delay:.24s,.24s,0s,0s,0s,0s,0s}
html.js .reveal-group.is-in > :nth-child(5){transition-delay:.32s,.32s,0s,0s,0s,0s,0s}
html.js .reveal-group.is-in > :nth-child(6){transition-delay:.40s,.40s,0s,0s,0s,0s,0s}
html.js .reveal-group.is-in > :nth-child(7){transition-delay:.48s,.48s,0s,0s,0s,0s,0s}
html.js .reveal-group.is-in > :nth-child(8){transition-delay:.56s,.56s,0s,0s,0s,0s,0s}
html.js .reveal-group.is-in > :nth-child(n+9){transition-delay:.62s,.62s,0s,0s,0s,0s,0s}
/* เส้นข้างหัวใจค่อย ๆ ยืดออก */
html.js .reveal .heart-rule::before,html.js .reveal .heart-rule::after{width:0}
html.js .reveal.is-in .heart-rule::before,html.js .reveal.is-in .heart-rule::after{animation:rule-grow .7s .25s cubic-bezier(.2,.7,.3,1) both}

@media (prefers-reduced-motion:reduce){
  html.js .reveal,html.js .reveal-group > *{opacity:1!important; translate:none!important}
  html.js .hero-bg img{animation:none!important}
  .callbar-tel .ring{animation:none!important}
}

/* =========================================================
   ไลท์บ็อกซ์ — กดรูปแล้วขยายเต็มจอ
   ========================================================= */
.zoomable{cursor:zoom-in}
.zoomable:focus-visible{outline:3px solid var(--blue-lt); outline-offset:3px}

.lb{
  position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  padding:clamp(16px,4vw,48px); background:rgba(7,36,81,.92);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.lb[hidden]{display:none}
html.js .lb{animation:lb-in .22s ease both}
@keyframes lb-in{from{opacity:0} to{opacity:1}}
.lb-fig{margin:0; max-width:min(1100px,100%); max-height:100%; display:flex; flex-direction:column; gap:14px; align-items:center}
.lb-fig img{
  max-width:100%; max-height:calc(100vh - 150px); width:auto; height:auto;
  border-radius:var(--r); box-shadow:0 30px 80px -20px rgba(0,0,0,.6); background:#fff;
}
html.js .lb-fig img{animation:lb-pop .28s cubic-bezier(.2,.7,.3,1) both}
@keyframes lb-pop{from{opacity:0; transform:scale(.96) translateY(10px)} to{opacity:1; transform:none}}
.lb-cap{color:#DCEAFB; font-size:.95rem; line-height:1.6; text-align:center; max-width:70ch}
.lb-close{
  position:absolute; top:clamp(12px,2.4vw,26px); right:clamp(12px,2.4vw,26px);
  width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
  display:grid; place-items:center; font-size:1.7rem; line-height:1; font-family:var(--font);
  transition:background .2s ease,transform .2s ease;
}
.lb-close:hover{background:rgba(255,255,255,.24); transform:scale(1.06)}
.lb-nav{
  position:absolute; top:50%; translate:0 -50%; width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,.34); background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
  display:grid; place-items:center; transition:background .2s ease}
.lb-nav:hover{background:rgba(255,255,255,.24)}
.lb-prev{left:clamp(8px,2vw,26px)}
.lb-next{right:clamp(8px,2vw,26px)}
.lb-count{position:absolute; bottom:clamp(12px,2.4vw,24px); left:50%; translate:-50% 0; color:#9FC2EA; font-size:.86rem}
@media (max-width:620px){
  .lb-nav{width:44px; height:44px}
  .lb-fig img{max-height:calc(100vh - 190px)}
}
@media (prefers-reduced-motion:reduce){
  html.js .lb,html.js .lb-fig img{animation:none!important}
}