/* ============================================================
Yes I Do Souvenir — Premium Custom Canvas Tote Bag
by Art of Inspire Co., Ltd.
Design system: exact brand palette per Brand Brief §4
============================================================ */
:root{
/* Official brand palette (Brand Brief §4 — Alatlakn ภาพและโลโก้) */
--rose-blush:#EFB6B0; /* primary — ribbon/bow, main accent */
--soft-pink:#F6D8D6; /* light tint — soft backgrounds/highlights */
--deep-rose:#D48A89; /* accent/shadow — borders, emphasis, readable-on-white */
--charcoal:#1A1A1A; /* headings — YES / SOUVENIR wordmark */
--warm-grey:#7A7272; /* secondary text — "I do" script */
/* Compatibility aliases used throughout the stylesheet */
--navy:var(--charcoal); /* headings & primary ink */
--navy-deep:#0f0e0e; /* darkest — footer / cta base */
--navy-soft:var(--warm-grey); /* secondary accent text */
--ink:#2a2426; /* body text (charcoal, slightly warm) */
--muted:#8f8586; /* muted grey (between warm-grey and cream) */
--cream:#fdf8f5; /* ivory ground */
--cream-2:#f7ece7; /* warm blush-cream */
--blush:var(--soft-pink);
--sky:var(--soft-pink);
--gold:var(--deep-rose); /* primary rose accent (readable as text) */
--gold-light:var(--rose-blush); /* lighter rose for gradients/highlights */
--white:#ffffff;
--shadow-sm:0 2px 10px rgba(180,110,110,.12);
--shadow-md:0 12px 35px rgba(180,110,110,.16);
--shadow-lg:0 25px 60px rgba(140,80,80,.22);
--radius:18px;
--ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{
scroll-behavior:smooth;
/* body's overflow-x:hidden alone did not stop sideways scrolling at 320px —
the viewport takes its overflow from , so it has to be set here too */
overflow-x:hidden;
}
body{
font-family:'Sarabun',sans-serif;
color:var(--ink);
background:var(--cream);
line-height:1.7;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{width:min(1180px,92%);margin-inline:auto}
section{padding:5.5rem 0;position:relative}
.section-bg-alt{
background:linear-gradient(180deg,var(--cream-2) 0%,#efe5d6 100%);
}
/* ---------- Language toggle visibility ---------- */
html[data-lang="th"] .lang-en{display:none}
html[data-lang="en"] .lang-th{display:none}
/* ---------- Typography ---------- */
.eyebrow{
display:inline-block;
font-size:.8rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
color:var(--gold);
}
.eyebrow.center{display:block;text-align:center}
.section-title{
font-family:'Playfair Display',serif;
font-size:clamp(1.8rem,4vw,2.6rem);
font-weight:600;color:var(--navy);
text-align:center;margin:.6rem 0 1rem;
line-height:1.3;
}
.section-sub{
max-width:620px;margin:0 auto 3rem;text-align:center;
color:var(--muted);font-size:1.02rem;
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:.45rem;
padding:.75rem 1.6rem;border-radius:999px;
font-family:'Sarabun',sans-serif;font-weight:600;font-size:.95rem;
border:2px solid transparent;cursor:pointer;
transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s;
will-change:transform;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.98)}
.btn-primary{
background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);
color:#fff;box-shadow:0 10px 25px rgba(150,95,105,.35);
}
.btn-primary:hover{box-shadow:0 16px 35px rgba(150,95,105,.45)}
.btn-ghost{
background:rgba(255,255,255,.65);color:var(--navy);
border-color:rgba(150,95,105,.25);backdrop-filter:blur(6px);
}
.btn-ghost:hover{border-color:var(--navy);background:#fff;box-shadow:var(--shadow-md)}
.btn-accent{
background:linear-gradient(135deg,var(--gold) 0%,#e0b39c 100%);
color:#fff;box-shadow:0 10px 25px rgba(195,144,121,.4);
}
.btn-accent:hover{box-shadow:0 16px 35px rgba(195,144,121,.5)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{box-shadow:0 14px 30px rgba(0,0,0,.25)}
.btn-line{background:#06c755;color:#fff;box-shadow:0 10px 25px rgba(6,199,85,.35)}
.btn-line:hover{box-shadow:0 16px 35px rgba(6,199,85,.45)}
.btn-sm{padding:.5rem 1.2rem;font-size:.85rem}
.btn-lg{padding:.95rem 2rem;font-size:1.02rem}
.center-cta{text-align:center;margin-top:2.8rem}
/* ---------- Header ---------- */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:100;
padding:.9rem 0;
transition:background .4s,box-shadow .4s,padding .4s;
}
.site-header.scrolled{
background:rgba(253,248,245,.85);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:var(--shadow-sm);
padding:.5rem 0;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--navy);font-size:1.05rem}
.brand-logo{height:44px;width:auto;display:block;transition:transform .4s var(--ease)}
.brand:hover .brand-logo{transform:scale(1.05)}
.brand-tagline{display:block;font-family:'Sarabun',sans-serif;font-weight:500;font-size:.66rem;letter-spacing:.06em;color:var(--muted);margin-top:1px}
/* legacy text-mark fallback (unused once logo art is in place, kept for safety) */
.brand-mark{
display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
background:linear-gradient(135deg,var(--navy),var(--navy-soft));
color:#fff;font-family:'Playfair Display',serif;font-size:1rem;
box-shadow:0 6px 16px rgba(150,95,105,.35);
transform:rotate(-4deg);
transition:transform .4s var(--ease);
}
.brand:hover .brand-mark{transform:rotate(4deg) scale(1.06)}
.nav-links{display:flex;gap:1.6rem}
.nav-links a{
white-space:nowrap;
font-size:.93rem;font-weight:500;color:var(--ink);
position:relative;padding:.25rem 0;
}
.nav-links a::after{
content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
background:linear-gradient(90deg,var(--gold),var(--gold-light));
border-radius:2px;transition:width .35s var(--ease);
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--navy);font-weight:600}
.nav-cta{display:flex;align-items:center;gap:.8rem}
.lang-toggle{
display:flex;border:1.5px solid rgba(150,95,105,.25);border-radius:999px;overflow:hidden;
background:rgba(255,255,255,.6);
}
.lang-toggle button{
border:0;background:transparent;padding:.3rem .7rem;font-size:.78rem;font-weight:700;
color:var(--muted);cursor:pointer;font-family:'Sarabun',sans-serif;
transition:background .3s,color .3s;
}
.lang-toggle button.active{background:var(--navy);color:#fff}
.nav-toggle{
display:none;width:42px;height:42px;border:0;border-radius:10px;
background:var(--navy);cursor:pointer;position:relative;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after{
content:"";position:absolute;left:11px;right:11px;height:2px;border-radius:2px;
background:#fff;transition:transform .3s,opacity .3s,top .3s;
}
.nav-toggle::before{top:14px}
.nav-toggle span{top:20px}
.nav-toggle::after{top:26px}
.nav-open .nav-toggle::before{top:20px;transform:rotate(45deg)}
.nav-open .nav-toggle span{opacity:0}
.nav-open .nav-toggle::after{top:20px;transform:rotate(-45deg)}
/* ---------- Hero (3D) ---------- */
.hero{
min-height:100svh;
display:flex;align-items:center;
padding:8rem 0 4rem;
background:
radial-gradient(1100px 600px at 85% 20%,#f7e2e4 0%,transparent 60%),
radial-gradient(900px 600px at 10% 85%,#f9ece2 0%,transparent 60%),
linear-gradient(160deg,#fdf9f6 0%,#f6e9e4 55%,#f3e6e6 100%);
overflow:hidden;
}
#hero-canvas{
position:absolute;inset:0;width:100%;height:100%;
display:block;z-index:1;
}
.hero-inner{position:relative;z-index:2;pointer-events:none}
.hero-inner a,.hero-inner button{pointer-events:auto}
.hero-copy{max-width:600px}
.hero-eyebrow{
display:inline-block;
font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--navy-soft);
background:rgba(255,255,255,.6);
border:1px solid rgba(150,95,105,.15);
border-radius:999px;padding:.4rem 1.1rem;
backdrop-filter:blur(6px);
box-shadow:var(--shadow-sm);
}
.hero-title{
font-family:'Playfair Display',serif;
font-size:clamp(2.6rem,6vw,4.3rem);
font-weight:700;color:var(--navy);
line-height:1.12;margin:1.4rem 0 .4rem;
letter-spacing:-.01em;
}
.hero-script{
display:block;
font-family:'Great Vibes',cursive;
font-weight:400;
font-size:clamp(3rem,7vw,5.2rem);
background:linear-gradient(120deg,var(--gold) 10%,#a06450 50%,var(--gold) 90%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
line-height:1.15;
padding-right:.3em;
}
.hero-sub{
font-size:1.06rem;color:var(--muted);max-width:520px;margin-bottom:1.2rem;
}
.hero-anchor{
font-family:'Playfair Display',serif;font-style:italic;font-weight:600;
font-size:1.05rem;color:var(--navy);max-width:480px;margin-bottom:2.2rem;
padding-left:1rem;border-left:3px solid var(--gold);line-height:1.5;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2.8rem}
/* ปุ่ม 3 ปุ่มต้องอยู่แถวเดียวกันในกล่องกว้าง 600px (.hero-copy) ทั้งสองภาษา
ด้วย padding 2rem เดิม ภาษาไทยใช้ 593px พอดี แต่ภาษาอังกฤษใช้ 602px เกินไป 2px
("Design Your Own" ยาวกว่า "ลองออกแบบเอง") ปุ่มเบอร์โทรเลยตกไปแถวใหม่
เฉพาะตอนสลับเป็นภาษาอังกฤษ — ลด padding ลงให้เหลือที่ว่างจริงราว 40px ทั้งสองภาษา */
.hero-actions .btn-lg{padding-left:1.6rem;padding-right:1.6rem}
/* จอ 561–639px กล่องปุ่มแคบกว่า 600px (container 92%) ภาษาไทยพอดีเป๊ะ อังกฤษเกินไม่กี่ px
ถ้าปล่อยตามปกติ การสลับภาษาจะทำให้ปุ่มเบอร์โทรกระโดดขึ้นลงอีก
ช่วงนี้จึงให้เบอร์โทรขึ้นแถวของตัวเองเต็มความกว้างเสมอ ทั้งสองภาษาหน้าตาเหมือนกัน
(ต่ำกว่า 561px ทุกปุ่มเรียงเต็มแถวอยู่แล้ว / ตั้งแต่ 640px ขึ้นไปอยู่แถวเดียวได้สบาย) */
@media (min-width:561px) and (max-width:639px){
.hero-actions .btn-ico{flex:1 1 100%;justify-content:center}
}
/* เบอร์โทรห้ามหักกลางเลข เช่น "096-026-" / "9999" — ขีดเป็นจุดที่เบราว์เซอร์ยอมตัดบรรทัด */
a[href^="tel:"]{white-space:nowrap}
.hero-stats{
display:flex;gap:2.6rem;flex-wrap:wrap;
}
.stat strong{
display:block;
font-family:'Playfair Display',serif;
font-size:1.9rem;color:var(--navy);line-height:1.1;
}
.stat span{font-size:.82rem;color:var(--muted);letter-spacing:.06em}
.hero-scroll{
position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);
width:26px;height:44px;border:2px solid rgba(150,95,105,.35);border-radius:999px;
z-index:2;
}
.hero-scroll span{
position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;
border-radius:4px;background:var(--navy-soft);
animation:scrollHint 1.8s infinite var(--ease);
}
@keyframes scrollHint{
0%{transform:translateY(0);opacity:1}
70%{transform:translateY(16px);opacity:0}
100%{transform:translateY(0);opacity:0}
}
/* ---------- Showcase banner ---------- */
.showcase{padding:2rem 0 3rem}
.showcase-frame{
display:block;position:relative;border-radius:22px;overflow:hidden;
box-shadow:var(--shadow-lg);
transform-style:preserve-3d;
}
.showcase-frame img{width:100%;transition:transform .8s var(--ease)}
.showcase-frame:hover img{transform:scale(1.03)}
.showcase-shine{
position:absolute;inset:0;
background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
transform:translateX(-120%);
transition:transform 1s var(--ease);
pointer-events:none;
}
.showcase-frame:hover .showcase-shine{transform:translateX(120%)}
/* ---------- Client credentials wall ---------- */
.credentials{padding:3.2rem 0}
/* ---------- Pillars ---------- */
.pillars{
display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
perspective:1200px;
}
.pillar{
background:#fff;border-radius:var(--radius);padding:2.4rem 2rem;
box-shadow:var(--shadow-sm);
border:1px solid rgba(195,144,121,.18);
transform-style:preserve-3d;
transition:box-shadow .4s var(--ease);
position:relative;overflow:hidden;
}
.pillar::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold));
opacity:0;transition:opacity .4s;
}
.pillar:hover{box-shadow:var(--shadow-lg)}
.pillar:hover::before{opacity:1}
.pillar-icon{
width:58px;height:58px;border-radius:16px;
display:grid;place-items:center;font-size:1.5rem;color:#fff;
background:linear-gradient(135deg,var(--navy),var(--navy-soft));
box-shadow:0 10px 22px rgba(150,95,105,.3);
margin-bottom:1.3rem;
transform:translateZ(30px);
}
.pillar h3{
font-size:1.15rem;color:var(--navy);margin-bottom:.6rem;font-weight:700;
transform:translateZ(20px);
}
.pillar p{font-size:.93rem;color:var(--muted);transform:translateZ(10px)}
/* ---------- Services ---------- */
.services{
display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
perspective:1200px;
}
.service-card{
background:#fff;border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow-sm);
transform-style:preserve-3d;
transition:box-shadow .4s var(--ease);
display:flex;flex-direction:column;
}
.service-card:hover{box-shadow:var(--shadow-lg)}
.sc-bg{
height:170px;position:relative;
display:grid;place-items:center;
transform:translateZ(0);
}
.sc-emblem{
font-size:3rem;
filter:drop-shadow(0 12px 18px rgba(70,40,50,.35));
transform:translateZ(40px);
transition:transform .5s var(--ease);
}
.service-card:hover .sc-emblem{transform:translateZ(55px) scale(1.12) rotate(-4deg)}
.sc-bg.wed{background:linear-gradient(135deg,#f6dfd5 0%,#e9c4cb 50%,#d9aebd 100%)}
.sc-bg.cor{background:linear-gradient(135deg,#f0dfe2 0%,#d9aeb8 50%,#c48f9c 100%)}
.sc-bg.bm{background:linear-gradient(135deg,#efe0d6 0%,#dcb9a4 50%,#c3907a 100%)}
.sc-bg::after{
content:"";position:absolute;inset:0;
background:radial-gradient(420px 160px at 30% 0%,rgba(255,255,255,.55),transparent 70%);
}
.sc-body{padding:1.7rem 1.8rem 1.9rem;display:flex;flex-direction:column;flex:1}
.sc-body h3{font-size:1.18rem;color:var(--navy);margin-bottom:.55rem;font-weight:700}
.sc-body p{font-size:.92rem;color:var(--muted);flex:1}
.sc-link{
margin-top:1.1rem;font-weight:700;font-size:.9rem;color:var(--gold);
transition:letter-spacing .3s var(--ease);
}
.service-card:hover .sc-link{letter-spacing:.04em;color:#a86a54}
/* ---------- Portfolio ---------- */
.portfolio-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
perspective:1400px;
}
.p-item{
background:#fff;border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow-sm);
transform-style:preserve-3d;
transition:box-shadow .4s var(--ease);
}
.p-item:hover{box-shadow:var(--shadow-lg)}
.p-thumb.has-img{padding:0}
.p-thumb.has-img img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform .8s var(--ease);
}
.p-item:hover .p-thumb.has-img img{transform:scale(1.06)}
.p-thumb.has-img span{display:none}
.p-thumb{
height:210px;display:grid;place-items:center;text-align:center;
font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:600;
color:rgba(255,255,255,.95);line-height:1.4;
text-shadow:0 2px 14px rgba(0,0,0,.3);
position:relative;overflow:hidden;
}
.p-thumb span{position:relative;z-index:1;transform:translateZ(30px)}
.p-thumb::after{
content:"";position:absolute;inset:0;
background:radial-gradient(380px 200px at 50% -20%,rgba(255,255,255,.3),transparent 70%);
}
.t1{background:linear-gradient(150deg,#e7b3b8,#cf8b95 60%,#b06d79)}
.t2{background:linear-gradient(150deg,#dcbcae,#bd9784 60%,#a2745d)}
.t3{background:linear-gradient(150deg,#b98a94,#8f5f6c 55%,#6d4351)}
.t4{background:linear-gradient(150deg,#ecc9b6,#d3a184 60%,#b57e5f)}
.t5{background:linear-gradient(150deg,#eebcc8,#d486a0 60%,#b75f80)}
.t6{background:linear-gradient(150deg,#d9c0b8,#b8938a 60%,#93685f)}
.p-body{padding:1.4rem 1.6rem 1.6rem}
.p-tag{
display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold);
background:rgba(195,144,121,.12);
border:1px solid rgba(195,144,121,.3);
padding:.18rem .7rem;border-radius:999px;margin-bottom:.6rem;
}
.p-body h4{font-size:1.05rem;color:var(--navy);margin-bottom:.3rem;font-weight:700}
.p-body p{font-size:.88rem;color:var(--muted)}
/* ---------- Steps ---------- */
.steps{
display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;
counter-reset:step;
}
.step{
background:#fff;border-radius:var(--radius);padding:2.1rem 1.6rem 1.8rem;
box-shadow:var(--shadow-sm);position:relative;
border:1px solid rgba(195,144,121,.16);
transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.step:hover{transform:translateY(-8px) rotateX(4deg);box-shadow:var(--shadow-md)}
.step::before{
content:attr(data-num);
position:absolute;top:-1.1rem;left:1.4rem;
width:2.5rem;height:2.5rem;border-radius:50%;
display:grid;place-items:center;
font-family:'Playfair Display',serif;font-weight:700;font-size:1.05rem;color:#fff;
background:linear-gradient(135deg,var(--gold),#a86a54);
box-shadow:0 8px 18px rgba(195,144,121,.45);
}
.step h4{font-size:1.08rem;color:var(--navy);margin:.4rem 0 .5rem;font-weight:700}
.step p{font-size:.9rem;color:var(--muted)}
/* ---------- Testimonials ---------- */
.testimonials{
display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
perspective:1200px;
}
.testi{
background:#fff;border-radius:var(--radius);padding:2.1rem 1.9rem;
box-shadow:var(--shadow-sm);
border:1px solid rgba(150,95,105,.08);
transform-style:preserve-3d;
transition:box-shadow .4s var(--ease);
display:flex;flex-direction:column;
}
.testi:hover{box-shadow:var(--shadow-lg)}
.testi-stars{color:var(--gold);letter-spacing:.2em;margin-bottom:.9rem;font-size:.95rem}
.testi blockquote{
font-size:.97rem;color:var(--ink);flex:1;
border:0;font-style:italic;line-height:1.75;
}
.who{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem}
.avatar{
width:46px;height:46px;border-radius:50%;
display:grid;place-items:center;color:#fff;font-weight:700;
background:linear-gradient(135deg,var(--navy),var(--navy-soft));
box-shadow:0 6px 14px rgba(150,95,105,.3);
}
.who .name{font-weight:700;font-size:.95rem;color:var(--navy)}
.who .role{font-size:.8rem;color:var(--muted)}
/* ---------- CTA Banner ---------- */
.cta-banner{
position:relative;overflow:hidden;
background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 55%,#6d4451 100%);
border-radius:26px;
padding:4.2rem 2rem;
text-align:center;color:#fff;
box-shadow:var(--shadow-lg);
}
.cta-banner h2{
font-family:'Playfair Display',serif;
font-size:clamp(1.7rem,3.6vw,2.4rem);margin-bottom:.8rem;
position:relative;z-index:1;
}
.cta-banner p{
color:rgba(255,255,255,.82);max-width:520px;margin:0 auto 2rem;
position:relative;z-index:1;
}
.cta-actions{
display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;
position:relative;z-index:1;
}
.cta-orb{
position:absolute;border-radius:50%;filter:blur(2px);
background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),rgba(255,255,255,.04) 65%);
animation:orbFloat 9s ease-in-out infinite;
}
.cta-orb.o1{width:260px;height:260px;top:-90px;right:-60px}
.cta-orb.o2{width:180px;height:180px;bottom:-70px;left:-40px;animation-delay:-4.5s}
@keyframes orbFloat{
0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-22px) scale(1.05)}
}
/* ---------- Footer ---------- */
.site-footer{
background:linear-gradient(180deg,var(--navy-deep) 0%,#170f12 100%);
color:rgba(255,255,255,.78);
padding:4.5rem 0 0;
margin-top:3rem;
}
.site-footer .brand{color:#fff}
.site-footer .brand-mark{background:linear-gradient(135deg,var(--gold),#a86a54)}
/* Footer brand: the real logo art recoloured for dark ground —
images/logo-yid-light.png keeps the pink bow and ribbon, lettering turned white. */
.footer-brand{display:inline-block;line-height:0}
.footer-brand img{
width:228px;height:auto;display:block;
transition:transform .45s var(--ease),filter .45s;
}
.footer-brand:hover img{transform:scale(1.03)}
.footer-grid{
display:grid;grid-template-columns:2.2fr 1fr 1fr 1.5fr;gap:2.6rem;
padding-bottom:2.8rem;
}
.footer-grid h2{
color:#fff;font-size:.95rem;margin-bottom:1.1rem;letter-spacing:.06em;
}
.footer-grid ul li{margin-bottom:.65rem;font-size:.92rem}
.footer-grid a{transition:color .3s}
.footer-grid a:hover{color:var(--gold-light)}
.about-col p{font-size:.92rem;line-height:1.8}
.social-row{display:flex;gap:.7rem;margin-top:1.4rem}
.social-row a{
width:40px;height:40px;border-radius:12px;
display:grid;place-items:center;font-weight:700;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
transition:background .3s,transform .3s var(--ease),border-color .3s;
}
.social-row a:hover{
background:var(--gold);border-color:var(--gold);color:#fff;
transform:translateY(-4px);
}
.footer-bottom{
display:flex;justify-content:space-between;align-items:center;
gap:1.4rem;flex-wrap:wrap;
border-top:1px solid rgba(255,255,255,.1);
padding:1.5rem 0;font-size:.82rem;color:rgba(255,255,255,.5);
}
/* ---------- Footer: reading order & rhythm ---------- */
.foot-tagline{
margin-top:1.15rem;max-width:34ch;
font-size:.9rem;line-height:1.85;color:rgba(255,255,255,.62);
}
.footer-grid h2{position:relative;padding-bottom:.7rem}
.footer-grid h2::after{
content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;
background:linear-gradient(90deg,var(--rose-blush),transparent);
}
.foot-col ul li{margin-bottom:.7rem}
.foot-col a{color:rgba(255,255,255,.72)}
/* footer call-to-action */
.foot-cta{
display:inline-flex;align-items:center;gap:.5rem;margin-top:1.25rem;
padding:.62rem 1.15rem;border-radius:999px;
font-size:.87rem;font-weight:600;color:#fff;
background:linear-gradient(135deg,var(--deep-rose),#a86a54);
box-shadow:0 8px 20px rgba(190,120,120,.3);
transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.foot-cta svg{width:15px;height:15px;display:block;flex:none}
.foot-cta:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(190,120,120,.42);color:#fff}
/* legal band */
.fb-entity-txt{display:flex;flex-direction:column;gap:.15rem;line-height:1.5}
.fb-entity-name{color:rgba(255,255,255,.72);font-weight:600}
.fb-copy{text-align:right;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.fb-policy{
color:rgba(255,255,255,.62);text-decoration:underline;text-underline-offset:3px;
transition:color .3s;
}
.fb-policy:hover{color:var(--gold-light)}
@media(max-width:640px){.fb-copy{justify-content:flex-start}}
/* ---------- Floating LINE button ---------- */
.float-line{
position:fixed;right:1.4rem;bottom:1.4rem;z-index:90;
width:58px;height:58px;border-radius:50%;
display:grid;place-items:center;
background:#06c755;color:#fff;font-weight:800;font-size:1.4rem;
box-shadow:0 12px 30px rgba(6,199,85,.45);
animation:linePulse 2.6s infinite;
transition:transform .35s var(--ease);
}
.float-line:hover{transform:scale(1.12) rotate(-6deg)}
@keyframes linePulse{
0%{box-shadow:0 12px 30px rgba(6,199,85,.45),0 0 0 0 rgba(6,199,85,.45)}
70%{box-shadow:0 12px 30px rgba(6,199,85,.45),0 0 0 18px rgba(6,199,85,0)}
100%{box-shadow:0 12px 30px rgba(6,199,85,.45),0 0 0 0 rgba(6,199,85,0)}
}
/* ---------- Scroll reveal ---------- */
.reveal{
opacity:0;transform:translateY(34px);
transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}
.reveal.d4{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
.reveal{opacity:1;transform:none}
}
/* ---------- Responsive ---------- */
@media (max-width:1024px){
.pillars,.services,.testimonials{grid-template-columns:1fr 1fr}
.portfolio-grid{grid-template-columns:1fr 1fr}
.steps{grid-template-columns:1fr 1fr;row-gap:2.2rem}
.footer-grid{grid-template-columns:1fr 1fr}
.about-col{grid-column:1 / -1}
.foot-tagline{max-width:46ch}
}
/* ยุบเมนูเป็นปุ่มแฮมเบอร์เกอร์ที่ 1080px (เดิม 860px)
เมนูมี 8 รายการตั้งแต่เพิ่มหน้าข่าวสาร วัดจริงแล้วต้องการจอกว้างอย่างน้อย
1020px (ภาษาไทย) / 1007px (อังกฤษ) จึงจะอยู่บรรทัดเดียวได้ เผื่อไว้สำหรับ
ฟอนต์ที่เรนเดอร์ต่างกันระหว่าง Windows กับ Mac
ถ้ายุบที่ 860px เหมือนเดิม จอ 861–1080px (เช่น iPad แนวนอน) ป้ายเมนูจะหัก
เป็นสองบรรทัด "หน้า / แรก" ดูเหมือนเว็บพัง */
@media (max-width:1080px){
.nav-links{
position:fixed;inset:0;z-index:-1;
flex-direction:column;justify-content:center;align-items:center;gap:1.8rem;
background:rgba(253,248,245,.97);
backdrop-filter:blur(12px);
opacity:0;pointer-events:none;
transition:opacity .4s var(--ease);
}
.nav-links a{font-size:1.25rem}
.nav-open .nav-links{opacity:1;pointer-events:auto;z-index:99}
.nav-toggle{display:block;z-index:100}
.nav-cta .btn{display:none}
}
@media (max-width:860px){
.hero{padding-top:6.5rem}
.hero-stats{gap:1.6rem}
}
@media (max-width:560px){
section{padding:3.8rem 0}
.pillars,.services,.testimonials,.portfolio-grid,.steps{grid-template-columns:1fr}
.steps{row-gap:2.2rem}
.hero-actions .btn{flex:1 1 100%;justify-content:center}
.footer-grid{grid-template-columns:1fr}
.footer-bottom{flex-direction:column;text-align:center}
.brand-name{font-size:.95rem}
}
/* ============================================================
SUBPAGE STYLES — inner-page hero, packages, FAQ, forms,
contact, gallery filters. Shared by all non-home pages.
============================================================ */
/* ---------- Inner page hero ---------- */
.page-hero{
position:relative;overflow:hidden;
padding:9.5rem 0 4rem;
background:
radial-gradient(900px 500px at 82% 15%,#f7e2e4 0%,transparent 60%),
radial-gradient(760px 500px at 8% 90%,#f9ece2 0%,transparent 60%),
linear-gradient(160deg,#fdf9f6 0%,#f6e9e4 60%,#f3e6e6 100%);
text-align:center;
}
.page-hero::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(195,144,121,.4),transparent);
}
.page-hero .container{position:relative;z-index:1}
.breadcrumb{
font-size:.82rem;color:var(--muted);margin-bottom:1rem;letter-spacing:.03em;
}
.breadcrumb a{color:var(--navy-soft);font-weight:600}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{margin:0 .5rem;opacity:.5}
.page-title{
font-family:'Playfair Display',serif;
font-size:clamp(2.1rem,5vw,3.4rem);font-weight:700;color:var(--navy);
line-height:1.15;margin:.3rem auto .9rem;max-width:14ch;
}
.page-title .accent{
font-family:'Great Vibes',cursive;font-weight:400;
font-size:clamp(2.4rem,5.5vw,3.9rem);
background:linear-gradient(120deg,var(--gold) 10%,#a06450 50%,var(--gold) 90%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
display:inline-block;line-height:1;
padding:.34em .24em .2em .06em; /* paint area, see .script-accent */
margin:-.34em -.09em -.2em -.06em;
}
.page-lead{
max-width:640px;margin:0 auto 2rem;color:var(--muted);font-size:1.06rem;
}
.page-hero .hero-actions{justify-content:center;margin-bottom:0}
/* ---------- Left-aligned section head ---------- */
.section-head{max-width:720px;margin:0 auto 2.8rem;text-align:center}
.section-head.left{text-align:left;margin-inline:0}
.section-head .section-title{text-align:inherit}
.section-head.left .section-title{text-align:left}
/* ---------- Split / two-column blocks ---------- */
.split{
display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;
}
.split.narrow{gap:2.4rem}
.split-visual{
border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);
min-height:340px;position:relative;
display:grid;place-items:center;text-align:center;
font-family:'Playfair Display',serif;color:#fff;
font-size:1.4rem;line-height:1.5;text-shadow:0 2px 16px rgba(0,0,0,.35);
padding:2rem;
}
.split-visual.has-img{padding:0}
.split-visual.has-img img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.split-visual.has-img span{display:none}
.founder-visual{
background:linear-gradient(150deg,var(--rose-blush),var(--deep-rose) 65%,#a86a54);
display:grid;place-items:center;
}
/* ช่องรูปผู้ก่อตั้ง — เดิมเป็นพื้นไล่สีกับตัวอักษรลายมือคำว่า "ปุ๊ก" ไว้ยืนแทนชั่วคราว
ตอนนี้ใส่รูปจริงแล้ว ใช้สัดส่วน 4:5 แนวตั้ง เพราะเป็นภาพเต็มตัว
พื้นไล่สียังอยู่ข้างล่างเป็นฉากสำรอง เผื่อรูปโหลดไม่ขึ้น ช่องจะได้ไม่เป็นสี่เหลี่ยมขาว */
.founder-visual{
aspect-ratio:4/5;
/* min-height เดิม 340px จะชนะ aspect-ratio บนจอแคบ ปล่อยให้สัดส่วนคุมแทน */
min-height:0;
/* .split-visual มี padding 32px ไว้เว้นขอบให้ข้อความที่เคยวางตรงกลาง
ถ้าไม่เอาออก จะเห็นพื้นไล่สีโรสเป็นกรอบหนาล้อมรูปอยู่ */
padding:0;
}
.founder-visual img{
width:100%;height:100%;object-fit:cover;display:block;
border-radius:inherit;
}
.founder-initial{
font-family:'Great Vibes',cursive;font-size:5rem;color:#fff;
text-shadow:0 8px 30px rgba(0,0,0,.2);
}
.split-visual .emoji{font-size:3.4rem;display:block;margin-bottom:.6rem;
filter:drop-shadow(0 10px 18px rgba(70,40,50,.35))}
.split h2{
font-family:'Playfair Display',serif;color:var(--navy);
font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.3;margin:.5rem 0 1rem;font-weight:600;
}
.split p{color:var(--muted);margin-bottom:1rem}
.check-list{margin:1.2rem 0 1.6rem;display:grid;gap:.75rem}
.check-list li{
position:relative;padding-left:2rem;color:var(--ink);font-size:.97rem;
}
.check-list li::before{
content:"✓";position:absolute;left:0;top:.05rem;
width:1.4rem;height:1.4rem;border-radius:50%;
display:grid;place-items:center;font-size:.75rem;color:#fff;font-weight:700;
background:linear-gradient(135deg,var(--gold),#a86a54);
}
/* ---------- Packages / pricing ---------- */
.packages{
display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
perspective:1200px;align-items:stretch;
}
.pkg-thumb{
height:150px;margin:-2.2rem -1.9rem 1.4rem;border-radius:var(--radius) var(--radius) 0 0;
overflow:hidden;position:relative;
}
.pkg-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pkg:hover .pkg-thumb img{transform:scale(1.06)}
.pkg-size-note{font-size:.78rem;color:var(--muted);margin:-.9rem 0 1.1rem}
.pkg{
background:#fff;border-radius:var(--radius);padding:2.2rem 1.9rem;
box-shadow:var(--shadow-sm);border:1px solid rgba(195,144,121,.18);
display:flex;flex-direction:column;position:relative;overflow:hidden;
transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.pkg:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.pkg.featured{
border-color:var(--gold);
box-shadow:0 20px 50px rgba(195,144,121,.28);
}
.pkg.featured::before{
content:"";position:absolute;top:0;left:0;right:0;height:5px;
background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold));
}
.pkg-badge{
position:absolute;top:1.1rem;right:1.1rem;z-index:2;
font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:#fff;background:linear-gradient(135deg,var(--gold),#a86a54);
padding:.25rem .7rem;border-radius:999px;
}
.pkg-name{font-size:1.2rem;color:var(--navy);font-weight:700;margin-bottom:.3rem}
.pkg-desc{font-size:.86rem;color:var(--muted);margin-bottom:1rem;min-height:2.4em}
.pkg-price{
font-family:'Playfair Display',serif;font-size:2rem;color:var(--navy);
line-height:1;margin-bottom:.2rem;
}
.pkg-price small{font-size:.9rem;color:var(--muted);font-family:'Sarabun',sans-serif}
.pkg-moq{font-size:.8rem;color:var(--gold);font-weight:600;letter-spacing:.04em;margin-bottom:1.2rem}
.pkg ul{margin-bottom:1.6rem;display:grid;gap:.6rem;flex:1}
.pkg ul li{position:relative;padding-left:1.6rem;font-size:.9rem;color:var(--ink)}
.pkg ul li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700}
.pkg ul li.off{color:var(--muted);opacity:.6}
.pkg ul li.off::before{content:"–";color:var(--muted)}
.pkg .btn{width:100%;justify-content:center}
.price-note{
text-align:center;color:var(--muted);font-size:.86rem;margin-top:1.8rem;
}
/* ---------- FAQ accordion ---------- */
.faq{max-width:780px;margin:0 auto}
.faq-item{
background:#fff;border-radius:14px;margin-bottom:.9rem;
box-shadow:var(--shadow-sm);border:1px solid rgba(150,95,105,.08);
overflow:hidden;
}
.faq-q{
width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
padding:1.2rem 3rem 1.2rem 1.5rem;position:relative;
font-family:'Sarabun',sans-serif;font-size:1rem;font-weight:600;color:var(--navy);
display:flex;align-items:center;gap:.5rem;
}
.faq-q::after{
content:"+";position:absolute;right:1.4rem;top:50%;transform:translateY(-50%);
font-size:1.5rem;color:var(--gold);transition:transform .35s var(--ease);font-weight:400;
}
.faq-item.open .faq-q::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{
max-height:0;overflow:hidden;transition:max-height .4s var(--ease);
}
.faq-a-inner{padding:0 1.5rem 1.3rem;color:var(--muted);font-size:.95rem}
.faq-item.open .faq-a{max-height:400px}
/* ---------- Gallery filter tabs ---------- */
.filter-tabs{
display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2.6rem;
}
.filter-tabs button{
border:1.5px solid rgba(150,95,105,.2);background:rgba(255,255,255,.7);
color:var(--muted);font-family:'Sarabun',sans-serif;font-weight:600;font-size:.88rem;
padding:.5rem 1.3rem;border-radius:999px;cursor:pointer;
transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease);
}
.filter-tabs button:hover{transform:translateY(-2px);border-color:var(--navy)}
.filter-tabs button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.p-item.hide{display:none}
/* ---------- Contact layout ---------- */
.contact-grid{
display:grid;grid-template-columns:1.2fr .8fr;gap:2.4rem;align-items:start;
}
.form-card{
background:#fff;border-radius:var(--radius);padding:2.4rem;
box-shadow:var(--shadow-md);border:1px solid rgba(195,144,121,.16);
}
.form-card h2{font-size:1.3rem;color:var(--navy);margin-bottom:.4rem;font-weight:700}
.form-card .form-sub{color:var(--muted);font-size:.92rem;margin-bottom:1.6rem}
.field{margin-bottom:1.1rem}
.field label{
display:block;font-size:.85rem;font-weight:600;color:var(--navy);margin-bottom:.4rem;
}
.field label .req{color:#c0563f}
.field input,.field select,.field textarea{
width:100%;padding:.8rem 1rem;border-radius:12px;
border:1.5px solid rgba(150,95,105,.18);background:var(--cream);
font-family:'Sarabun',sans-serif;font-size:.95rem;color:var(--ink);
transition:border-color .3s,box-shadow .3s,background .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{
outline:0;border-color:var(--gold);background:#fff;
box-shadow:0 0 0 3px rgba(195,144,121,.15);
}
.field textarea{resize:vertical;min-height:110px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-est{
background:linear-gradient(135deg,var(--cream-2),#efe5d6);
border-radius:14px;padding:1.1rem 1.3rem;margin:.4rem 0 1.4rem;
border:1px dashed rgba(195,144,121,.5);
}
.form-est .est-label{font-size:.82rem;color:var(--muted);letter-spacing:.04em}
.form-est .est-value{
font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--navy);line-height:1.2;
}
.form-est .est-value small{font-size:.85rem;color:var(--muted);font-family:'Sarabun',sans-serif}
.form-note{font-size:.8rem;color:var(--muted);margin-top:1rem;text-align:center}
.form-actions{display:flex;flex-direction:column;gap:.7rem}
.contact-side{display:grid;gap:1.2rem}
.info-card{
background:#fff;border-radius:var(--radius);padding:1.6rem 1.7rem;
box-shadow:var(--shadow-sm);border:1px solid rgba(150,95,105,.08);
display:flex;gap:1rem;align-items:flex-start;
transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.info-ico{
flex:none;width:48px;height:48px;border-radius:14px;
display:grid;place-items:center;font-size:1.3rem;
background:linear-gradient(135deg,var(--navy),var(--navy-soft));color:#fff;
box-shadow:0 8px 18px rgba(150,95,105,.28);
}
.info-card.line .info-ico{background:linear-gradient(135deg,#06c755,#04a145)}
.info-card h3{font-size:1rem;color:var(--navy);margin-bottom:.2rem;font-weight:700}
.info-card p,.info-card a{font-size:.92rem;color:var(--muted);word-break:break-word}
.info-card a:hover{color:var(--gold)}
/* ---------- Stats band (about) ---------- */
.stat-band{
display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;text-align:center;
}
.stat-band .sb{
background:#fff;border-radius:var(--radius);padding:2rem 1rem;
box-shadow:var(--shadow-sm);border:1px solid rgba(195,144,121,.16);
}
.stat-band .sb strong{
display:block;font-family:'Playfair Display',serif;
font-size:2.2rem;color:var(--navy);line-height:1;margin-bottom:.4rem;
}
.stat-band .sb span{font-size:.85rem;color:var(--muted)}
/* ---------- Timeline (about story) ---------- */
.timeline{max-width:760px;margin:0 auto;position:relative;padding-left:2.2rem}
.timeline::before{
content:"";position:absolute;left:.55rem;top:.4rem;bottom:.4rem;width:2px;
background:linear-gradient(180deg,var(--gold),rgba(195,144,121,.2));
}
.tl-item{position:relative;padding-bottom:2rem}
.tl-item::before{
content:"";position:absolute;left:-2.05rem;top:.35rem;width:14px;height:14px;
border-radius:50%;background:var(--gold);border:3px solid var(--cream);
box-shadow:0 0 0 2px var(--gold);
}
.tl-item .tl-year{font-weight:700;color:var(--gold);font-size:.9rem;letter-spacing:.06em}
.tl-item h4{color:var(--navy);font-size:1.1rem;margin:.2rem 0 .4rem;font-weight:700}
.tl-item p{color:var(--muted);font-size:.94rem}
/* ---------- Subpage responsive ---------- */
@media (max-width:1024px){
.packages{grid-template-columns:1fr}
.pkg.featured{order:-1}
.stat-band{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
.split,.contact-grid{grid-template-columns:1fr}
.split-visual{min-height:240px}
.page-hero{padding-top:8rem}
}
@media (max-width:560px){
.field-row{grid-template-columns:1fr}
.stat-band{grid-template-columns:1fr 1fr}
.form-card{padding:1.6rem}
}
/* ============================================================
PREMIUM LAYER — homepage editorial upgrades
Ornaments · petals · marquee · editorial gallery · polish
Kept deliberately restrained per Brand Brief §4:
white space, rose as accent (never a wash), serif elegance.
============================================================ */
/* ---------- Scroll progress ---------- */
.scroll-progress{
position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
background:linear-gradient(90deg,var(--rose-blush),var(--deep-rose) 60%,var(--rose-blush));
box-shadow:0 0 14px rgba(212,138,137,.55);
transition:width .12s linear;
}
/* ---------- Hero: drifting petals ---------- */
.hero-petals{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.petal{
position:absolute;top:-8vh;display:block;
border-radius:62% 38% 55% 45% / 58% 52% 48% 42%;
background:linear-gradient(140deg,rgba(246,216,214,.95),rgba(212,138,137,.6));
box-shadow:0 6px 16px rgba(190,120,120,.16);
opacity:0;
animation-name:petal-drift;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
@keyframes petal-drift{
0% {transform:translate3d(0,-10vh,0) rotate(0deg) scale(1);opacity:0}
8% {opacity:.65}
50% {transform:translate3d(4vw,55vh,0) rotate(180deg) scale(1.05);opacity:.5}
92% {opacity:.28}
100% {transform:translate3d(-2vw,112vh,0) rotate(370deg) scale(.95);opacity:0}
}
@media (prefers-reduced-motion:reduce){ .petal{display:none} }
/* ---------- Ornamental divider ---------- */
.ornament{
display:flex;align-items:center;justify-content:center;gap:.85rem;
max-width:240px;margin:0 auto .9rem;
}
.ornament::before,.ornament::after{
content:"";height:1px;flex:1;
background:linear-gradient(90deg,transparent,rgba(212,138,137,.75));
}
.ornament::after{background:linear-gradient(90deg,rgba(212,138,137,.75),transparent)}
.ornament i{
font-style:normal;color:var(--deep-rose);font-size:.62rem;
letter-spacing:.32em;line-height:1;
}
/* ---------- Accents inside headings ----------
.script-accent = Latin only (Great Vibes has no Thai glyphs)
.accent-grad = language-neutral gradient emphasis, used for Thai */
.script-accent,
.accent-grad{
background:linear-gradient(115deg,var(--deep-rose) 5%,#b06f6c 45%,var(--rose-blush) 95%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
.script-accent{
font-family:'Great Vibes',cursive;font-weight:400;
font-size:1.42em;line-height:.9;display:inline-block;
/* background-clip:text only paints inside the padding box, and Great Vibes'
swashes/descenders reach well past a .9 line box — so pad the paint area out
and pull the same amount back with negative margins to keep the layout identical. */
padding:.24em .18em .22em;
margin:-.24em -.12em -.16em;
}
.accent-grad{
font-style:italic;
/* inline gradient text: pad so the italic lean and Thai vowel marks stay painted */
display:inline-block;padding:.2em .42em .14em .06em;margin:-.2em -.42em -.14em -.06em;
}
/* ---------- Screen-reader-only utility ---------- */
.visually-hidden{
position:absolute !important;width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
/* ---------- Thank-you logo strip ----------
ส่วนนี้ตั้งใจให้อ่านเป็น "คำขอบคุณ" ไม่ใช่การอวดรายชื่อลูกค้า
จึงต่างจากแถบเลื่อนเวอร์ชันแรกตรงที่ แสดงสีจริงของแต่ละองค์กร
ไม่ทำเป็นขาวดำแล้วค่อยติดสีตอนชี้เมาส์ — การลดทอนสีตราสัญลักษณ์
ของผู้อื่นเพื่อให้เข้ากับดีไซน์เรา ขัดกับเจตนาของส่วนนี้
ถ้าไฟล์โลโก้ไฟล์ใดโหลดไม่ขึ้น สคริปต์ในหน้าแรกจะซ่อน ![]()
แล้วโชว์ชื่อองค์กรเป็นตัวหนังสือแทน แถบจึงไม่มีช่องโหว่ */
/* แถบเมนูด้านบนเป็นแบบลอยค้าง สูง 60px เวลากระโดดมาจากลิงก์ #gratitude
หัวข้อจะไปจ่ออยู่ใต้แถบพอดีแบบไม่มีช่องหายใจ เว้นระยะให้หน่อย */
#gratitude{scroll-margin-top:24px}
.grat-head{max-width:44rem;margin:0 auto 2.2rem;text-align:center}
.grat-title{
font-family:'Playfair Display',serif;font-weight:600;
font-size:clamp(1.6rem,3.4vw,2.25rem);line-height:1.25;
color:var(--navy);margin:0 0 .7rem;text-wrap:balance;
}
.grat-lead{
font-size:1.02rem;line-height:1.75;color:var(--navy-soft);
margin:0;text-wrap:pretty;
}
.grat-foot{
margin:2rem auto 0;max-width:40rem;text-align:center;
font-size:1rem;color:var(--navy-soft);font-style:italic;
}
.cred-logo{
flex:0 0 auto;display:inline-grid;place-items:center;
height:78px;min-width:136px;padding:.6rem 1.3rem;
background:var(--white);
border:1px solid rgba(212,138,137,.2);border-radius:14px;
box-shadow:var(--shadow-sm);
transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.cred-logo:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-md);
border-color:rgba(212,138,137,.45);
}
/* ความสูง 3 ระดับตามสัดส่วนโลโก้ (คลาสใส่ตอน build จากขนาดไฟล์จริง)
ถ้าใช้ความสูงเท่ากันหมด โลโก้ทรงยาวจะกินพื้นที่กว้างจนดูเด่นกว่า
ตราวงกลมของหน่วยงานราชการมาก ทั้งที่ควรมีน้ำหนักเท่ากันในส่วนขอบคุณ */
.cred-logo img{
max-height:46px;max-width:190px;width:auto;height:auto;object-fit:contain;
}
.cred-logo img.logo-wide{max-height:38px;max-width:210px}
.cred-logo img.logo-tall{max-height:60px;max-width:150px}
.cred-fallback{
display:none;
font-family:'Playfair Display',serif;font-weight:600;
font-size:.9rem;line-height:1.35;color:var(--navy);
text-align:center;max-width:190px;text-wrap:balance;
}
/* ---------- Client marquee ---------- */
.marquee{
position:relative;overflow:hidden;padding:.4rem 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee + .marquee{margin-top:1rem}
.marquee-track{
display:flex;align-items:center;gap:1rem;width:max-content;
animation:marquee-run 64s linear infinite;
}
.marquee.rev .marquee-track{animation-duration:76s;animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee-run{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){
/* ไม่เลื่อน แล้วจัดเป็นหลายบรรทัดแทน เพื่อให้ยังเห็นครบทุกอัน */
.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
.marquee{-webkit-mask-image:none;mask-image:none}
}
@media (max-width:520px){
.cred-logo{height:66px;min-width:112px;padding:.5rem 1rem}
.cred-logo img{max-height:38px;max-width:150px}
.cred-logo img.logo-wide{max-height:32px;max-width:165px}
.cred-logo img.logo-tall{max-height:50px;max-width:120px}
}
/* ================================================================
ข่าวสาร — หน้ารายการ (news.html) และหน้าข่าวแต่ละเรื่อง (news-*.html)
สร้างโดย tools/build-news.py
================================================================ */
.news-section{padding-top:3.2rem}
.news-filter{margin-bottom:2.2rem}
.news-count{
display:inline-grid;place-items:center;min-width:1.45em;height:1.45em;
margin-left:.35rem;padding:0 .35em;border-radius:999px;
font-size:.74rem;font-weight:700;line-height:1;
background:rgba(150,95,105,.12);color:inherit;
}
.filter-tabs button.active .news-count{background:rgba(255,255,255,.22)}
.news-grid{
display:grid;gap:1.6rem;
grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
}
.news-card{
background:var(--white);border-radius:var(--radius);overflow:hidden;
border:1px solid rgba(150,95,105,.08);box-shadow:var(--shadow-sm);
transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.news-card.hide{display:none}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.news-card > a{display:flex;flex-direction:column;height:100%;color:inherit}
.news-card > a:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:var(--radius)}
.news-thumb{
aspect-ratio:3/2;overflow:hidden;
/* ฉากสำรองถ้ารูปปกโหลดไม่ขึ้น การ์ดจะไม่เป็นช่องขาวโล่ง */
background:linear-gradient(150deg,var(--rose-blush),var(--deep-rose));
}
.news-thumb img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .7s var(--ease);
}
.news-card:hover .news-thumb img{transform:scale(1.04)}
.news-body{display:flex;flex-direction:column;gap:.55rem;flex:1;padding:1.25rem 1.45rem 1.45rem}
.news-meta,.article-meta{
display:flex;align-items:center;flex-wrap:wrap;gap:.45rem .8rem;
font-size:.8rem;color:var(--muted);
}
.news-cat{
display:inline-block;padding:.2rem .65rem;border-radius:999px;
font-size:.74rem;font-weight:700;letter-spacing:.02em;
background:rgba(212,138,137,.14);color:#a4605e;
}
.news-title{
font-size:1.14rem;line-height:1.45;font-weight:700;color:var(--navy);
margin:0;text-wrap:balance;
}
.news-summary{
margin:0;font-size:.93rem;line-height:1.7;color:var(--navy-soft);
/* สรุปยาวเกิน 3 บรรทัดตัดด้วย … การ์ดในแถวเดียวกันจะได้สูงเท่ากัน */
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.news-more{margin-top:auto;padding-top:.35rem;font-size:.88rem;font-weight:700;color:var(--gold)}
/* ยังไม่มีข่าวเลย — บอกตรง ๆ และชี้ไปช่องทางที่มีความเคลื่อนไหวจริง
ดีกว่าปล่อยหน้าว่าง ซึ่งจะอ่านว่าบริษัทเงียบหาย */
.news-empty{
max-width:560px;margin:0 auto;padding:2.6rem 2rem;text-align:center;
background:var(--white);border-radius:var(--radius);
border:1px solid rgba(150,95,105,.1);box-shadow:var(--shadow-sm);
}
.news-empty-k{font-size:1.2rem;font-weight:700;color:var(--navy);margin:0 0 .5rem}
.news-empty-p{color:var(--muted);margin:0 0 1.3rem}
.news-empty-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.news-empty-links a{
display:inline-flex;align-items:center;gap:.55rem;min-height:46px;padding:0 1.25rem 0 1rem;
border-radius:999px;background:var(--white);
border:1.5px solid rgba(150,95,105,.2);font-weight:600;font-size:.9rem;color:var(--navy);
transition:border-color .45s var(--ease),background .45s var(--ease),
box-shadow .45s var(--ease),transform .45s var(--ease);
}
/* ---------- โลโก้โซเชียล: ขาวดำตอนปกติ ชี้เมาส์แล้วค่อย ๆ ขึ้นสีจริง ----------
ไอคอนวาดด้วยสีจริงอยู่แล้ว ตอนปกติแค่ใช้ filter ดึงสีออก
filter เปลี่ยนค่าได้นุ่มนวล และใช้ได้กับไล่สีของ Instagram ด้วย
ทำขาวดำเฉพาะอุปกรณ์ที่มีเมาส์ (hover:hover) เท่านั้น
มือถือกับแท็บเล็ตไม่มีการชี้เมาส์ ถ้าทำขาวดำไว้ด้วย
คนใช้มือถือจะไม่มีวันได้เห็นสีจริงของโลโก้เลย */
.sm-facebook{--sm-brand:#1877f2}
.sm-instagram{--sm-brand:#d6249f}
.sm-line{--sm-brand:#06c755}
.sm-ico{display:grid;place-items:center;width:24px;height:24px;flex:none}
.sm-ico svg{width:24px;height:24px;display:block;
transition:filter .5s var(--ease),opacity .5s var(--ease),transform .5s var(--ease)}
.sm-line .sm-ico svg{width:26px;height:26px} /* ตัวอักษรในโลโก้ LINE ดูเล็กกว่าสองอันในขนาดเท่ากัน */
@media (hover:hover){
.sm-ico svg{filter:grayscale(1);opacity:.55}
.sm-link:hover .sm-ico svg{filter:grayscale(0);opacity:1;transform:scale(1.1)}
.sm-link:hover{
border-color:var(--sm-brand);transform:translateY(-2px);
background:rgba(212,138,137,.06);
background:color-mix(in srgb,var(--sm-brand) 7%,#fff);
box-shadow:0 8px 20px rgba(0,0,0,.07);
box-shadow:0 8px 20px color-mix(in srgb,var(--sm-brand) 22%,transparent);
}
}
/* คนที่ใช้คีย์บอร์ดก็ต้องเห็นสีจริงเหมือนคนที่ใช้เมาส์ */
.sm-link:focus-visible{outline:3px solid var(--sm-brand);outline-offset:3px}
.sm-link:focus-visible .sm-ico svg{filter:grayscale(0);opacity:1}
@media (prefers-reduced-motion:reduce){
.sm-link,.sm-ico svg{transition:none}
.sm-link:hover,.sm-link:hover .sm-ico svg{transform:none}
}
/* ---------- หน้าข่าวแต่ละเรื่อง ---------- */
.article-meta{justify-content:center;margin-bottom:.4rem}
.page-title.article-title{
/* .page-title ตั้ง max-width 14ch ไว้สำหรับหัวข้อสั้น ๆ ของหน้าหลัก
ชื่อข่าวยาวกว่ามาก ถ้าไม่ขยาย จะหักเป็น 5–6 บรรทัด */
max-width:24ch;font-size:clamp(1.7rem,3.8vw,2.6rem);line-height:1.3;
text-wrap:balance;
}
.article-wrap{padding-top:0}
.article-cover{
max-width:980px;margin:-1.2rem auto 2.8rem;
border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);
aspect-ratio:16/9;background:linear-gradient(150deg,var(--rose-blush),var(--deep-rose));
}
.article-cover img{width:100%;height:100%;object-fit:cover;display:block}
.article-body{
max-width:68ch;margin:0 auto;
font-size:1.06rem;line-height:1.9;color:var(--ink);
}
.article-body p{margin:0 0 1.25em}
.article-body h2{font-size:1.38rem;line-height:1.4;color:var(--navy);margin:2em 0 .6em}
.article-body h3{font-size:1.14rem;line-height:1.45;color:var(--navy);margin:1.7em 0 .5em}
.article-body ul{margin:0 0 1.25em;padding-left:1.3em}
.article-body li{margin:.3em 0}
.article-body li::marker{color:var(--gold)}
.article-body strong{color:var(--navy)}
.article-body a{color:#a4605e;text-decoration:underline;text-underline-offset:3px}
.article-body blockquote{
margin:2em 0;padding:.3em 0 .3em 1.3em;
border-left:3px solid var(--gold);
font-size:1.16rem;line-height:1.75;color:var(--navy);font-style:italic;
}
.article-body blockquote p{margin:0}
.article-body figure{margin:2.2em 0}
.article-body figure img{width:100%;height:auto;display:block;border-radius:14px}
.article-body figcaption{margin-top:.65em;font-size:.88rem;line-height:1.6;color:var(--muted);text-align:center}
.article-share{
max-width:68ch;margin:2.8rem auto 0;padding-top:1.6rem;
border-top:1px solid rgba(150,95,105,.14);
display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;
}
.share-k{font-size:.88rem;font-weight:600;color:var(--muted);margin-right:.3rem}
.share-btn{
display:inline-flex;align-items:center;min-height:44px;padding:0 1.15rem;border-radius:999px;
font-size:.88rem;font-weight:700;color:#fff;transition:filter .3s,transform .3s var(--ease);
}
.share-btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
.share-line{background:#06c755}
.share-fb{background:#1877f2}
.article-pager{
max-width:68ch;margin:2rem auto 0;
display:grid;grid-template-columns:1fr 1fr;gap:1rem;
}
.pager-link{
display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.2rem;border-radius:14px;
background:var(--white);border:1px solid rgba(150,95,105,.1);
font-weight:600;line-height:1.45;color:var(--navy);
transition:border-color .3s,box-shadow .3s;
}
.pager-link:hover{border-color:rgba(212,138,137,.45);box-shadow:var(--shadow-sm)}
.pager-older{text-align:right}
.pager-k{font-size:.78rem;font-weight:700;color:var(--gold)}
.article-back{max-width:68ch;margin:1.8rem auto 0;text-align:center}
.article-back a{font-weight:600;color:var(--navy-soft)}
.article-back a:hover{color:var(--gold)}
@media (max-width:560px){
.news-body{padding:1.1rem 1.2rem 1.25rem}
.article-cover{margin-top:-.6rem;border-radius:14px}
.article-body{font-size:1rem}
.article-pager{grid-template-columns:1fr}
.pager-older{text-align:left}
}
/* ---------- Editorial gallery ---------- */
.editorial{display:grid;grid-template-columns:1.32fr 1fr;gap:1.4rem}
.ed-side{display:grid;grid-template-rows:1fr 1fr;gap:1.4rem}
.ed-card{
position:relative;display:block;overflow:hidden;
border-radius:22px;box-shadow:var(--shadow-md);
min-height:270px;isolation:isolate;
}
.ed-feature{min-height:576px}
.ed-card img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform 1.2s var(--ease);
}
.ed-card:hover img{transform:scale(1.06)}
.ed-card::after{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(30,18,20,0) 42%,rgba(30,18,20,.78) 100%);
}
.ed-cap{
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:1.5rem 1.6rem 1.55rem;color:#fff;
transform:translateY(8px);transition:transform .55s var(--ease);
}
.ed-card:hover .ed-cap{transform:translateY(0)}
.ed-cap .k{
display:inline-block;font-size:.66rem;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--rose-blush);
margin-bottom:.45rem;
}
.ed-cap h3{
font-family:'Playfair Display',serif;font-weight:600;
font-size:1.42rem;line-height:1.25;margin-bottom:.28rem;
}
.ed-feature .ed-cap h3{font-size:1.75rem}
.ed-cap p{font-size:.9rem;color:rgba(255,255,255,.84);line-height:1.55}
.ed-badge{
position:absolute;top:1.1rem;left:1.1rem;z-index:2;
background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
color:var(--navy);font-size:.72rem;font-weight:700;letter-spacing:.04em;
padding:.4rem .9rem;border-radius:999px;box-shadow:var(--shadow-sm);
}
/* ---------- Service cards: real photography ---------- */
.sc-bg.has-img{height:210px;overflow:hidden}
.sc-bg.has-img img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform 1.1s var(--ease);
}
.service-card:hover .sc-bg.has-img img{transform:scale(1.07)}
.sc-bg.has-img::after{
background:linear-gradient(180deg,rgba(30,18,20,.05) 40%,rgba(30,18,20,.35) 100%);
}
.sc-tag{
position:absolute;left:1rem;bottom:1rem;z-index:2;
background:rgba(255,255,255,.93);backdrop-filter:blur(6px);
color:var(--navy);font-size:.7rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;padding:.34rem .8rem;border-radius:999px;
box-shadow:var(--shadow-sm);
}
/* ---------- Hero stat separators ---------- */
.hero-stats .stat + .stat{
padding-left:2.6rem;border-left:1px solid rgba(212,138,137,.32);
}
/* ---------- Primary button sheen ---------- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{
content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);
transform:skewX(-18deg);transition:left .75s var(--ease);pointer-events:none;
}
.btn-primary:hover::after{left:125%}
/* ---------- Section heading rhythm ---------- */
.section-title.tight{margin-bottom:.6rem}
@media (max-width:900px){
.editorial{grid-template-columns:1fr}
.ed-feature{min-height:400px}
.ed-card{min-height:240px}
.ed-feature .ed-cap h3{font-size:1.5rem}
}
@media (max-width:560px){
.hero-stats .stat + .stat{padding-left:1.4rem}
.ed-card{min-height:210px}
/* keep the feature image dominant even on phones */
.ed-feature{min-height:320px}
.ed-feature .ed-cap h3{font-size:1.35rem}
}
/* ============================================================
CONTACT PAGE — modern upgrade layer
============================================================ */
/* ---------- Hero trust badges ---------- */
.trust-row{
display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;
}
.trust-badge{
display:inline-flex;align-items:center;gap:.5rem;
background:rgba(255,255,255,.75);backdrop-filter:blur(8px);
border:1px solid rgba(212,138,137,.28);border-radius:999px;
padding:.5rem 1.1rem;font-size:.85rem;font-weight:600;color:var(--navy);
box-shadow:var(--shadow-sm);
}
.trust-badge .tb-ico{font-size:.95rem;line-height:1}
/* ---------- Quick contact strip ---------- */
.quick-contact{
display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2.2rem;
}
.qc-card{
display:flex;align-items:center;gap:.95rem;
background:#fff;border:1px solid rgba(212,138,137,.2);border-radius:16px;
padding:1.1rem 1.25rem;box-shadow:var(--shadow-sm);
transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.qc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(212,138,137,.5)}
.qc-ico{
flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
font-size:1.2rem;color:#fff;
background:linear-gradient(135deg,var(--deep-rose),#a86a54);
box-shadow:0 8px 18px rgba(190,120,120,.3);
}
.qc-card.line .qc-ico{background:linear-gradient(135deg,#06c755,#04a145);box-shadow:0 8px 18px rgba(6,199,85,.32)}
.qc-meta{min-width:0}
.qc-meta .qc-k{
display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);margin-bottom:.15rem;
}
.qc-meta .qc-v{
display:block;font-weight:700;color:var(--navy);font-size:.98rem;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* ---------- Form step labels ---------- */
.form-step{
display:flex;align-items:center;gap:.7rem;
margin:2rem 0 1.1rem;
}
.form-step:first-of-type{margin-top:.4rem}
.form-step .fs-num{
flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
font-family:'Playfair Display',serif;font-weight:700;font-size:.9rem;color:#fff;
background:linear-gradient(135deg,var(--deep-rose),#a86a54);
box-shadow:0 6px 14px rgba(190,120,120,.34);
}
.form-step .fs-txt{font-weight:700;color:var(--navy);font-size:1rem}
.form-step::after{
content:"";flex:1;height:1px;
background:linear-gradient(90deg,rgba(212,138,137,.45),transparent);
}
/* ---------- Modern inputs ---------- */
.field input,.field select,.field textarea{
padding:.92rem 1.05rem;border-radius:14px;
background-color:#fdfbfa;
}
.field input:hover,.field select:hover,.field textarea:hover{
border-color:rgba(212,138,137,.42);
}
.field select{
-webkit-appearance:none;appearance:none;padding-right:2.7rem;cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23D48A89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 1.05rem center;background-size:13px 8px;
}
/* ---------- Estimate panel (hero of the form) ---------- */
.form-est{
position:relative;overflow:hidden;
background:linear-gradient(135deg,#fff 0%,var(--soft-pink) 55%,#f7dedd 100%);
border:1px solid rgba(212,138,137,.42);border-radius:18px;
padding:1.5rem 1.6rem;margin:1.6rem 0;
box-shadow:0 14px 32px rgba(190,120,120,.16);
}
.form-est::before{
content:"";position:absolute;top:-40%;right:-12%;width:230px;height:230px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.75),transparent 70%);pointer-events:none;
}
.form-est .est-label{
position:relative;font-size:.72rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:#a06a66;margin-bottom:.35rem;
}
.form-est .est-value{
position:relative;font-family:'Playfair Display',serif;font-weight:600;
font-size:2rem;color:var(--navy);line-height:1.15;
}
.form-est .est-value small{
display:block;margin-top:.4rem;font-size:.86rem;font-weight:400;
color:#8a6b68;font-family:'Sarabun',sans-serif;line-height:1.5;
}
/* ---------- Info cards (side) ---------- */
.info-card{border-radius:16px}
.info-card.line{
background:linear-gradient(135deg,#fff,#f2fbf5);
border-color:rgba(6,199,85,.28);
}
/* ---------- "What happens next" ---------- */
.next-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:.6rem}
.ns-item{
position:relative;background:#fff;border:1px solid rgba(212,138,137,.18);
border-radius:18px;padding:1.8rem 1.6rem;box-shadow:var(--shadow-sm);
transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.ns-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.ns-num{
font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:700;line-height:1;
background:linear-gradient(120deg,var(--deep-rose),var(--rose-blush));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
margin-bottom:.6rem;display:block;
}
.ns-item h3{font-size:1.05rem;color:var(--navy);font-weight:700;margin-bottom:.4rem}
.ns-item p{font-size:.92rem;color:var(--muted);line-height:1.6}
/* ---------- FAQ polish ---------- */
.faq-item{border-radius:14px;overflow:hidden}
.faq-item.open{border-color:rgba(212,138,137,.4);box-shadow:var(--shadow-sm)}
.faq-q{font-weight:600}
@media (max-width:900px){
.quick-contact{grid-template-columns:1fr}
.next-steps{grid-template-columns:1fr}
}
/* ============================================================
BRAND / CONTACT ICONS (inline SVG — LINE, phone, mobile, mail, pin)
============================================================ */
/* --- contact + quick-contact tiles --- */
.qc-ico,.info-ico{font-size:0}
.qc-ico svg,.info-ico svg{width:23px;height:23px;display:block;color:#fff}
.qc-card.line .qc-ico svg,
.info-card.line .info-ico svg{width:26px;height:26px} /* LINE mark reads smaller optically */
/* --- footer social buttons --- */
.social-row a{color:rgba(255,255,255,.82);font-size:0}
.social-row a svg{width:19px;height:19px;display:block}
.social-row a:hover{color:#fff}
.social-row a[aria-label="LINE"]:hover{background:#06c755;border-color:#06c755}
.social-row a[aria-label="Facebook"]:hover{background:#1877f2;border-color:#1877f2}
.social-row a[aria-label="Instagram"]:hover{
background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7);
border-color:transparent;
}
.social-row a[aria-label="Google Reviews"]:hover{background:#f4b400;border-color:#f4b400;color:#1a1a1a}
/* --- floating LINE button --- */
.float-line{font-size:0}
.float-line svg{width:31px;height:31px;display:block;color:#fff}
/* --- footer contact list --- */
.foot-contact li{margin-bottom:.55rem}
.foot-contact a,.foot-contact .fc-plain{
display:flex;align-items:center;gap:.6rem;
font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.72);
transition:color .3s;
}
.foot-contact a:hover{color:#fff}
.fc-ico{
flex:none;width:28px;height:28px;border-radius:9px;
display:grid;place-items:center;font-size:0;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:var(--gold-light);
transition:background .3s,color .3s,border-color .3s;
}
.fc-ico svg{width:14px;height:14px;display:block}
.fc-ico.is-line svg{width:16px;height:16px}
.foot-contact a:hover .fc-ico{background:var(--gold);border-color:var(--gold);color:#fff}
.foot-contact a:hover .fc-ico.is-line{background:#06c755;border-color:#06c755;color:#fff}
/* --- phone number inside a button --- */
.btn-ico svg{width:17px;height:17px;display:block;flex:none;color:currentColor}
.btn-sm.btn-ico svg{width:15px;height:15px}
/* ============================================================
SOCIAL WALL (ช่องทางโซเชียล — contact page)
Add a channel by copying one .sw-card and giving it a brand class.
============================================================ */
.social-wall{
display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:1.1rem;margin-top:2.2rem;
}
.sw-card{
position:relative;overflow:hidden;
display:flex;align-items:center;gap:1rem;
background:#fff;border:1px solid rgba(212,138,137,.18);border-radius:18px;
padding:1.15rem 1.3rem;box-shadow:var(--shadow-sm);
transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.sw-card::before{
content:'';position:absolute;inset:0;opacity:0;
background:var(--sw-tint,var(--deep-rose));
transition:opacity .35s;
}
.sw-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.sw-card:hover::before{opacity:.06}
.sw-ico{
position:relative;flex:none;width:48px;height:48px;border-radius:14px;
display:grid;place-items:center;font-size:0;color:#fff;
background:var(--sw-tint,var(--deep-rose));
box-shadow:0 8px 18px rgba(0,0,0,.16);
transition:transform .35s var(--ease);
}
.sw-card:hover .sw-ico{transform:scale(1.08) rotate(-4deg)}
.sw-ico svg{width:24px;height:24px;display:block}
.sw-meta{position:relative;min-width:0}
.sw-meta .sw-k{
display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);margin-bottom:.15rem;
}
.sw-meta .sw-v{
display:block;font-weight:700;color:var(--navy);font-size:.97rem;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sw-card .sw-go{
position:relative;margin-left:auto;flex:none;
color:var(--gold);opacity:.45;transition:opacity .3s,transform .35s var(--ease);
font-size:0;
}
.sw-card .sw-go svg{width:16px;height:16px;display:block}
.sw-card:hover .sw-go{opacity:1;transform:translateX(3px)}
/* brand tints — one custom property per channel */
.sw-line{--sw-tint:#06c755}
.sw-facebook{--sw-tint:#1877f2}
.sw-instagram{--sw-tint:#e1306c}
.sw-instagram .sw-ico{background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7)}
.sw-google{--sw-tint:#f4b400}
.sw-tiktok{--sw-tint:#000}
.sw-youtube{--sw-tint:#ff0000}
.sw-x{--sw-tint:#000}
.sw-shopee{--sw-tint:#ee4d2d}
.sw-lazada{--sw-tint:#0f146d}
.sw-pinterest{--sw-tint:#e60023}
.sw-whatsapp{--sw-tint:#25d366}
@media(max-width:560px){
.social-wall{grid-template-columns:1fr;gap:.85rem}
.sw-card{padding:1rem 1.1rem}
.sw-ico{width:44px;height:44px;border-radius:13px}
}
/* ============================================================
QUICK-CONTACT COPY BUTTON + SIDE INFO VARIANTS (contact page)
============================================================ */
.qc-slot{position:relative}
.qc-slot .qc-card{height:100%;padding-right:3.4rem} /* room for the copy button */
.qc-meta{overflow:hidden}
.qc-copy{
position:absolute;top:50%;right:.85rem;transform:translateY(-50%);
width:34px;height:34px;border-radius:10px;
display:grid;place-items:center;font-size:0;cursor:pointer;
background:rgba(212,138,137,.1);border:1px solid rgba(212,138,137,.22);
color:var(--deep-rose);
transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease);
}
.qc-copy:hover{background:var(--deep-rose);border-color:var(--deep-rose);color:#fff}
.qc-copy:active{transform:translateY(-50%) scale(.92)}
.qc-copy:focus-visible{outline:2px solid var(--deep-rose);outline-offset:2px}
.qc-copy svg{width:15px;height:15px;display:block}
.qc-copy .qc-copy-ok{display:none}
.qc-copy.is-done{background:#06c755;border-color:#06c755;color:#fff}
.qc-copy.is-done .qc-copy-i{display:none}
.qc-copy.is-done .qc-copy-ok{display:block}
/* clipboard refused: the value gets selected instead, so say so in a neutral tone */
.qc-copy.is-manual{background:var(--charcoal);border-color:var(--charcoal)}
.qc-copy.is-manual .qc-copy-i{display:block}
.qc-copy.is-manual .qc-copy-ok{display:none}
/* tooltip-ish confirmation */
.qc-copy.is-done::after{
content:attr(data-done);position:absolute;bottom:calc(100% + 8px);right:0;
white-space:nowrap;font-size:.72rem;font-weight:700;letter-spacing:.02em;
background:var(--charcoal);color:#fff;padding:.3rem .55rem;border-radius:7px;
animation:qcPop .25s var(--ease);
}
@keyframes qcPop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* side column: the founder card leads, so give it the brand treatment */
.info-card.person{
background:linear-gradient(150deg,#fff 0%,#fdf4f2 100%);
border-color:rgba(212,138,137,.28);
}
/* ---------- การ์ดผู้ก่อตั้ง ----------
การ์ดใบอื่นเป็นแบบ "ไอคอนซ้าย ข้อความขวา" ซึ่งบังคับให้ไอคอนต้องกว้าง 48px เท่ากันหมด
ไม่งั้นคอลัมน์ข้อความของแต่ละใบจะเยื้องไม่ตรงกัน
ใบนี้จึงเปลี่ยนเป็นวางซ้อนกลาง รูปอยู่บน ข้อความอยู่ล่าง
ทำให้ขยายรูปได้เต็มที่โดยไม่ไปกระทบการจัดแนวของใบอื่นเลย
และตัวการ์ดเองก็อ่านเป็น "คนคนหนึ่ง" ไม่ใช่รายการข้อมูลอีกบรรทัด
ซึ่งตรงกับสิ่งที่หน้านี้ต้องการสื่อ — เจ้าของรับออเดอร์เอง */
.info-card.person{
flex-direction:column;align-items:center;text-align:center;
gap:1.15rem;padding-top:2rem;padding-bottom:1.9rem;
}
.person-photo{
flex:none;width:124px;height:124px;
border-radius:50%;overflow:hidden;
box-shadow:0 12px 28px rgba(150,95,105,.24);
/* วงแหวนโรสกันรูปจมหายไปกับพื้นขาวของการ์ด */
outline:3px solid rgba(212,138,137,.3);outline-offset:-1px;
}
.person-photo img{
width:100%;height:100%;object-fit:cover;display:block;
}
@media(max-width:560px){
.info-card.person{padding-top:1.7rem}
.person-photo{width:104px;height:104px}
}
.info-card p strong{color:var(--navy);font-weight:700}
@media(max-width:560px){
.qc-slot .qc-card{padding-right:3.1rem}
.qc-copy{right:.7rem;width:32px;height:32px}
}
/* ============================================================
ART OF INSPIRE — parent-company mark
images/logo-aoi.png black, for light backgrounds
images/logo-aoi-light.png white, for the dark footer
============================================================ */
.fb-entity{display:flex;align-items:center;gap:.85rem}
.fb-logo{
width:54px;height:auto;flex:none;
opacity:.7;transition:opacity .35s;
}
.fb-entity:hover .fb-logo{opacity:.9}
/* inline mark inside a card / text block */
/* legal-entity block inside the procurement card: the company mark sits beside
the name it belongs to, on a tinted plate, instead of floating under the copy */
.entity-box{
/* Stacked at every width on purpose. A side-by-side mark + Thai company name
only fits in the widest side column, and chasing that with breakpoints kept
missing (the grid's own breakpoint does not line up). Stacked always reads as
a deliberate lockup and the name never wraps. */
display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
margin-top:1rem;padding:.85rem .95rem;
background:linear-gradient(150deg,#fdf6f4 0%,#faeeea 100%);
border:1px solid rgba(212,138,137,.2);border-radius:12px;
}
.entity-mark{
flex:none;width:62px;height:auto;display:block;
opacity:.9;transition:opacity .35s;
}
.info-card:hover .entity-mark{opacity:1}
.entity-meta{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.entity-label{
font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--muted);
}
.entity-name{
font-size:.86rem;font-weight:700;color:var(--navy);line-height:1.45;
/* 861-900px leaves the side column too narrow for this Thai company name at any
readable size, so let it wrap — balanced, not with "จำกัด" orphaned on line 2. */
text-wrap:balance;
}
.entity-tax{font-size:.78rem;color:var(--muted);letter-spacing:.01em}
.entity-mark.lg{width:150px;margin-top:1.4rem;opacity:.55}
/* Two zones squeeze this block: the side column just before it stacks (981-1120px),
and very narrow phones. Shrink the mark in the first, stack it in the second,
so the company name always reads as one deliberate line. */
@media(max-width:390px){
.entity-box{padding:.75rem .8rem}
.entity-mark{width:56px}
.entity-name{font-size:.8rem}
.entity-tax{font-size:.72rem}
}
@media(max-width:560px){
.fb-entity{gap:.65rem}
.fb-logo{width:48px}
.entity-mark.lg{width:124px}
}
/* ---------- Footer responsive ---------- */
@media(max-width:640px){
.footer-grid{grid-template-columns:1fr;gap:2.1rem}
.footer-brand img{width:200px}
.foot-tagline{max-width:none}
.footer-bottom{flex-direction:column;align-items:flex-start;gap:1rem}
.fb-copy{text-align:left}
}
/* ============================================================
CONTACT PAGE — sent confirmation, live hours, credibility wall
============================================================ */
/* ---- live business-hours status ---- */
/* Sits ABOVE the channel strip: "can I call right now?" is decided before
picking a channel. Must stay OUTSIDE .quick-contact — that is a 3-column
grid and a fourth child lands on top of the cards. */
.hours-status{
display:inline-flex;align-items:center;gap:.55rem;
margin:0 0 1.1rem;padding:.5rem .95rem .5rem .8rem;
background:rgba(255,255,255,.7);
border:1px solid rgba(212,138,137,.22);border-radius:999px;
max-width:100%;
font-size:.85rem;line-height:1.4;color:var(--navy);
backdrop-filter:blur(4px);
}
.hours-status[hidden]{display:none !important}
.hs-dot{
flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted);
}
.hours-status.is-open .hs-dot{
background:#06c755;box-shadow:0 0 0 0 rgba(6,199,85,.5);
animation:hsPulse 2.4s infinite;
}
.hours-status.is-closed .hs-dot{background:#c9a227}
@keyframes hsPulse{
0%{box-shadow:0 0 0 0 rgba(6,199,85,.5)}
70%{box-shadow:0 0 0 7px rgba(6,199,85,0)}
100%{box-shadow:0 0 0 0 rgba(6,199,85,0)}
}
/* ---- sent confirmation panel ---- */
.form-sent[hidden]{display:none !important}
.form-sent{
background:#fff;border-radius:var(--radius);padding:2.6rem 2.4rem;
box-shadow:var(--shadow-md);border:1px solid rgba(195,144,121,.16);
text-align:center;
}
.fs-ico{
width:62px;height:62px;border-radius:50%;margin:0 auto 1.2rem;
display:grid;place-items:center;font-size:0;color:#fff;
background:linear-gradient(135deg,#06c755,#04a145);
box-shadow:0 10px 24px rgba(6,199,85,.32);
animation:fsPop .45s var(--ease);
}
.fs-ico svg{width:30px;height:30px;display:block}
@keyframes fsPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.form-sent h3{font-size:1.45rem;color:var(--navy);margin-bottom:.5rem}
.fs-lead{color:var(--muted);max-width:44ch;margin:0 auto 1.6rem;line-height:1.8}
.fs-ref{
display:inline-flex;align-items:center;gap:.75rem;
padding:.6rem 1.15rem;border-radius:12px;margin-bottom:1.6rem;
background:var(--paper-2,#fdf4f2);border:1px dashed rgba(212,138,137,.45);
}
.fs-ref-k{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fs-ref-v{font-weight:700;color:var(--navy);letter-spacing:.06em}
.fs-next{
text-align:left;max-width:46ch;margin:0 auto 1.8rem;padding:0;
list-style:none;counter-reset:fsn;
}
.fs-next li{
position:relative;padding-left:2.1rem;margin-bottom:.85rem;
font-size:.93rem;line-height:1.75;color:var(--muted);counter-increment:fsn;
}
.fs-next li::before{
content:counter(fsn);position:absolute;left:0;top:.1rem;
width:1.5rem;height:1.5rem;border-radius:50%;
display:grid;place-items:center;font-size:.72rem;font-weight:700;
background:rgba(212,138,137,.16);color:var(--deep-rose);
}
.fs-fallback{
border-top:1px solid rgba(150,95,105,.12);padding-top:1.5rem;margin-top:.4rem;
}
.fs-fb-q{font-size:.9rem;font-weight:600;color:var(--navy);margin-bottom:.9rem}
.fs-fb-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.fs-fb-actions .btn svg{width:17px;height:17px;display:block;flex:none}
.fs-again{
margin-top:1.4rem;background:none;border:0;cursor:pointer;
font-family:inherit;font-size:.86rem;color:var(--muted);
text-decoration:underline;text-underline-offset:3px;
}
.fs-again:hover{color:var(--gold)}
/* ---- credibility wall ---- */
/* บรรทัดอ้างอิงผลงานบนหน้าติดต่อ
เคยเป็นกล่องโลโก้ 12 อัน แต่หน้านี้มีของที่สร้างความน่าเชื่อถืออยู่แล้ว 6 จุด
(ป้ายในหัวหน้า, กล่องคุณปุ๊ก, กล่องนิติบุคคล, ขั้นตอนหลังส่งคำขอ, แผนที่, FAQ)
กล่องโลโก้จึงซ้ำซ้อนและดันเนื้อหาสำคัญให้ไกลออกไปจากฟอร์ม
เหลือไว้บรรทัดเดียวเพื่อเก็บสัญญาณ "ทำงานระดับสถาบัน" แล้วส่งคนไปดูของจริงที่หน้าแรก */
.tw-line{
margin:2.6rem auto 0;max-width:44rem;
text-align:center;font-size:.95rem;line-height:1.75;color:var(--muted);
text-wrap:pretty;
}
.tw-line a{
color:var(--gold);font-weight:600;
text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
@media(max-width:560px){
.hours-status{font-size:.8rem;align-items:flex-start;padding:.5rem .8rem}
.hours-status .hs-dot{margin-top:.36rem}
.form-sent{padding:2rem 1.4rem}
.fs-fb-actions .btn{width:100%;justify-content:center}
}
/* ---------- Contact form: backend submission states ---------- */
/* honeypot — kept out of sight and out of the tab order, never display:none
(some bots skip hidden inputs, and screen readers get aria-hidden instead) */
.hp-field{
position:absolute !important;left:-9999px;top:auto;
width:1px;height:1px;overflow:hidden;
}
.btn-spin{
width:15px;height:15px;flex:none;border-radius:50%;
border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
animation:btnSpin .7s linear infinite;
}
@keyframes btnSpin{to{transform:rotate(360deg)}}
.form-card.is-sending,form.is-sending{opacity:.75}
form.is-sending input,form.is-sending select,form.is-sending textarea{pointer-events:none}
/* delivered for real — the tick stays green (default .fs-ico) */
/* delivery failed — recolour the panel so it never reads as success */
.form-sent.is-failed .fs-ico{
background:linear-gradient(135deg,#d98324,#b8651a);
box-shadow:0 10px 24px rgba(217,131,36,.3);
animation:none;
}
.fs-ico .fs-i-warn{display:none}
.form-sent.is-failed .fs-ico .fs-i-ok{display:none}
.form-sent.is-failed .fs-ico .fs-i-warn{display:block}
.form-sent.is-failed .fs-ref{border-style:solid;border-color:rgba(217,131,36,.4)}
.form-sent.is-failed .fs-next{display:none}
.form-sent.is-failed .fs-fallback{border-top:0;padding-top:0}
.form-sent.is-failed .fs-fb-q{color:#a4621c}
/* ---------- Contact form: prep checklist + privacy note ---------- */
/* A so it never pushes the fields down the page for people who
already know what they want — collapsed by default, one tap to read. */
.prep{
margin:0 0 1.9rem;border-radius:14px;
background:linear-gradient(150deg,#fdf6f4 0%,#fbeeea 100%);
border:1px solid rgba(212,138,137,.24);
overflow:hidden;
}
.prep summary{
display:flex;align-items:center;gap:.75rem;
padding:.95rem 1.1rem;cursor:pointer;list-style:none;
font-size:.92rem;font-weight:600;color:var(--navy);
}
.prep summary::-webkit-details-marker{display:none}
.prep summary:hover{background:rgba(212,138,137,.06)}
.prep summary:focus-visible{outline:2px solid var(--deep-rose);outline-offset:-2px}
.prep-ico{
flex:none;width:26px;height:26px;border-radius:8px;font-size:0;
display:grid;place-items:center;color:#fff;
background:linear-gradient(135deg,var(--deep-rose),#b06f6c);
}
.prep-ico svg{width:14px;height:14px;display:block}
.prep-sum{flex:1;min-width:0}
.prep-caret{
flex:none;width:9px;height:9px;border-right:2px solid var(--deep-rose);
border-bottom:2px solid var(--deep-rose);transform:rotate(45deg);
margin-top:-4px;transition:transform .3s var(--ease);
}
.prep[open] .prep-caret{transform:rotate(-135deg);margin-top:2px}
.prep-list{
list-style:none;padding:0 1.1rem;margin:0;
border-top:1px solid rgba(212,138,137,.18);
}
.prep-list li{
padding:.8rem 0;border-bottom:1px dashed rgba(212,138,137,.22);
font-size:.87rem;line-height:1.7;color:var(--muted);
}
.prep-list li:last-child{border-bottom:0}
.prep-list strong{
display:block;color:var(--navy);font-weight:700;
font-size:.9rem;margin-bottom:.1rem;
}
.prep-note{
padding:.85rem 1.1rem;margin:0;
background:rgba(255,255,255,.6);
border-top:1px solid rgba(212,138,137,.18);
font-size:.86rem;color:var(--deep-rose);font-weight:600;
}
.form-privacy{
display:flex;align-items:flex-start;gap:.55rem;
margin-top:.7rem;font-size:.82rem;line-height:1.65;color:var(--muted);
}
.privacy-ico{flex:none;font-size:0;color:var(--muted);opacity:.75;margin-top:.15rem}
.privacy-ico svg{width:14px;height:14px;display:block}
@media(max-width:560px){
.prep summary{font-size:.87rem;padding:.85rem .9rem}
.prep-list{padding:0 .9rem}
.prep-note{padding:.8rem .9rem}
}
/* ============================================================
MAP / VISIT US (contact page)
============================================================ */
.map-wrap{
display:grid;grid-template-columns:1fr 1.15fr;gap:1.8rem;align-items:stretch;
margin-top:2.4rem;
}
.map-info{
background:#fff;border:1px solid rgba(212,138,137,.18);border-radius:var(--radius);
padding:1.9rem;box-shadow:var(--shadow-sm);
display:flex;flex-direction:column;gap:1.35rem;
}
.mi-block{display:flex;gap:.9rem;align-items:flex-start}
.mi-ico{
flex:none;width:38px;height:38px;border-radius:11px;font-size:0;
display:grid;place-items:center;color:#fff;
background:linear-gradient(135deg,var(--deep-rose),#a86a54);
box-shadow:0 6px 14px rgba(190,120,120,.26);
}
.mi-ico svg{width:19px;height:19px;display:block}
.mi-block h3{font-size:.95rem;color:var(--navy);margin-bottom:.25rem;font-weight:700}
.mi-block p{font-size:.88rem;line-height:1.75;color:var(--muted)}
.map-actions{
display:flex;flex-wrap:wrap;gap:.7rem;margin-top:auto;padding-top:.4rem;
}
.map-actions .btn{flex:1 1 auto;justify-content:center}
.map-actions .btn svg{width:16px;height:16px;display:block;flex:none}
.map-frame{
position:relative;border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow-md);border:1px solid rgba(212,138,137,.18);
min-height:340px;background:#eee7e4;
}
.map-frame iframe{
position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
@media(max-width:900px){
.map-wrap{grid-template-columns:1fr}
.map-frame{min-height:300px;order:-1} /* show the map first on narrow screens */
}
@media(max-width:560px){
.map-info{padding:1.4rem}
.map-frame{min-height:260px}
.map-actions .btn{flex:1 1 100%}
}
/* ---------- Form field errors ---------- */
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid{
border-color:#c0563f;
background-color:#fdf4f2;
box-shadow:0 0 0 3px rgba(192,86,63,.12);
}
.field-err{
display:block;margin-top:.4rem;
font-size:.8rem;font-weight:600;color:#c0563f;line-height:1.5;
animation:errIn .25s var(--ease);
}
.field-err[hidden]{display:none !important}
@keyframes errIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
/* ---------- Skip link (keyboard users) ---------- */
.skip-link{
/* fixed, not absolute: absolute would anchor it to the top of the DOCUMENT,
so once the page is scrolled the focused link sits above the viewport */
position:fixed;left:50%;top:-100px;transform:translateX(-50%);
z-index:200;padding:.7rem 1.3rem;border-radius:0 0 12px 12px;
background:var(--charcoal);color:#fff;font-size:.9rem;font-weight:600;
box-shadow:0 8px 20px rgba(0,0,0,.25);
transition:top .25s var(--ease);
}
.skip-link:focus{top:0;color:#fff;outline:2px solid var(--rose-blush);outline-offset:2px}
/* ---------- Very narrow phones (<=340px): keep the quick-contact cards inside ---------- */
@media(max-width:340px){
.container{padding-left:14px;padding-right:14px}
.qc-slot .qc-card{padding:.9rem .95rem;padding-right:2.9rem}
.qc-ico{width:40px;height:40px;border-radius:11px}
.qc-ico svg{width:20px;height:20px}
.qc-card.line .qc-ico svg,.info-card.line .info-ico svg{width:22px;height:22px}
.qc-meta .qc-v{font-size:.9rem}
.qc-copy{right:.55rem;width:30px;height:30px}
}
/* ============================================================
PRIVACY POLICY PAGE
============================================================ */
.pp-wrap{max-width:780px}
.pp-updated{
font-size:.85rem;color:var(--muted);margin-bottom:2.4rem;
padding-bottom:1.1rem;border-bottom:1px solid rgba(150,95,105,.14);
}
.pp-block{margin-bottom:2.6rem}
.pp-block h2{
display:flex;align-items:baseline;gap:.7rem;
font-size:1.2rem;color:var(--navy);margin-bottom:.9rem;line-height:1.45;
}
.pp-num{
flex:none;width:26px;height:26px;border-radius:8px;
display:inline-grid;place-items:center;align-self:flex-start;
font-family:'Sarabun',sans-serif;font-size:.76rem;font-weight:700;
background:linear-gradient(135deg,var(--deep-rose),#b06f6c);color:#fff;
transform:translateY(.15em);
}
.pp-body{color:var(--muted);font-size:.95rem;line-height:1.95}
.pp-body p{margin-bottom:.9rem}
.pp-body p:last-child{margin-bottom:0}
.pp-body strong{color:var(--navy);font-weight:700}
.pp-body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.pp-body a:hover{color:var(--deep-rose)}
.pp-body ul{list-style:none;padding:0;margin:0 0 .9rem}
.pp-body ul li{position:relative;padding-left:1.35rem;margin-bottom:.55rem}
.pp-body ul li::before{
content:"";position:absolute;left:.25rem;top:.72em;
width:5px;height:5px;border-radius:50%;background:var(--rose-blush);
}
/* marks the lines a lawyer still has to confirm — remove the class once signed off */
.pp-check{
display:inline-block;padding:.05rem .45rem;border-radius:5px;
background:#fff4d6;color:#8a6200;font-size:.82rem;font-weight:600;
}
.pp-cta{
margin-top:3rem;padding:1.9rem;border-radius:var(--radius);text-align:center;
background:linear-gradient(150deg,#fdf6f4 0%,#faeeea 100%);
border:1px solid rgba(212,138,137,.2);
}
.pp-cta p{color:var(--navy);font-weight:600;margin-bottom:1.1rem}
@media(max-width:560px){
.pp-block h2{font-size:1.08rem;gap:.55rem}
.pp-body{font-size:.9rem;line-height:1.85}
}
/* ============================================================
COOKIE CONSENT BAR
A bar, not a modal: it never blocks the page, and Accept and Decline
carry equal visual weight so declining is genuinely as easy as accepting.
============================================================ */
.cookie-bar{
position:fixed;left:0;right:0;bottom:0;z-index:120;
display:flex;align-items:center;justify-content:center;gap:1.4rem;flex-wrap:wrap;
padding:.95rem 1.3rem;
padding-bottom:calc(.95rem + env(safe-area-inset-bottom,0px));
background:rgba(26,26,26,.96);
backdrop-filter:blur(8px);
border-top:1px solid rgba(239,182,176,.25);
box-shadow:0 -6px 24px rgba(0,0,0,.2);
animation:cbIn .35s var(--ease);
}
.cookie-bar[hidden]{display:none !important}
@keyframes cbIn{from{transform:translateY(100%)}to{transform:none}}
.cb-text{
margin:0;max-width:62ch;
font-size:.86rem;line-height:1.65;color:rgba(255,255,255,.82);
}
.cb-text a{color:var(--rose-blush);text-decoration:underline;text-underline-offset:3px}
.cb-text a:hover{color:#fff}
.cb-actions{display:flex;gap:.6rem;flex:none}
.cb-btn{
font-family:inherit;font-size:.86rem;font-weight:600;
padding:.6rem 1.4rem;border-radius:999px;cursor:pointer;
border:1.5px solid transparent;transition:background .25s,border-color .25s,transform .25s var(--ease);
}
.cb-btn:active{transform:scale(.97)}
.cb-btn:focus-visible{outline:2px solid var(--rose-blush);outline-offset:2px}
.cb-deny{background:transparent;border-color:rgba(255,255,255,.34);color:rgba(255,255,255,.86)}
.cb-deny:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.cb-accept{background:linear-gradient(135deg,var(--deep-rose),#a86a54);color:#fff}
.cb-accept:hover{background:linear-gradient(135deg,#c8807f,#9c604b)}
/* keep the floating LINE button clear of the bar while it is up */
body.has-cookie-bar .float-line{bottom:6.6rem}
@media(max-width:640px){
.cookie-bar{gap:.85rem;padding:.9rem 1rem;padding-bottom:calc(.9rem + env(safe-area-inset-bottom,0px))}
.cb-text{font-size:.82rem;text-align:center}
.cb-actions{width:100%;justify-content:center}
/* min-height 44px: the accepted minimum touch target, and Decline must be
exactly as easy to hit as Accept */
.cb-btn{flex:1 1 0;max-width:200px;min-height:44px;padding:.7rem 1.2rem}
body.has-cookie-bar .float-line{bottom:9.4rem}
}
/* ============================================================
ABOUT PAGE — professional pass (2026-09-14)
แถบรูปงานจริงใต้หัวหน้า · ขั้นตอนที่คุณปุ๊กดูแล · ตัวเลข 3 ช่อง
ไอคอนเส้น · ไทม์ไลน์สลับซ้าย-ขวา · ปุ่มขอบขาวบนกล่องสีเข้ม
============================================================ */
/* ---------- แถบรูปงานจริงใต้หัวหน้า ---------- */
.about-strip{
display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:1rem;
max-width:1100px;margin:.8rem auto 0;
}
.as-tile{
margin:0;height:300px;border-radius:20px;overflow:hidden;position:relative;
background:var(--cream-2);box-shadow:var(--shadow-md);
}
.as-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.as-tile:hover img{transform:scale(1.04)}
/* ใบกลางยกขึ้นเล็กน้อย แถบจะมีจังหวะ ไม่แบนเป็นแผงเดียว */
.as-tile.as-wide{transform:translateY(-14px)}
@media (max-width:760px){
.about-strip{grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.2rem}
.as-tile{height:170px;border-radius:16px}
.as-tile.as-wide{grid-column:1/-1;order:-1;height:200px;transform:none}
}
/* ---------- ส่วนคุณปุ๊ก: ขั้นตอนที่ดูแลเอง + ปุ่ม LINE ---------- */
.split .care-label{
margin:1.5rem 0 .8rem;
font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--gold);
}
.care-path{
display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;
margin:0 0 1.9rem;padding:0;list-style:none;
}
.care-path li{
position:relative;display:flex;flex-direction:column;align-items:center;gap:.45rem;
text-align:center;font-size:.86rem;font-weight:600;color:var(--navy);line-height:1.35;
}
/* เส้นเชื่อมจากวงกลมนี้ไปวงถัดไป — ความกว้างช่องละ 100% บวกช่องไฟ .5rem, เว้นรัศมีวงกลม 22px สองฝั่ง */
.care-path li:not(:last-child)::after{
content:"";position:absolute;top:17px;height:2px;
left:calc(50% + 22px);right:calc(-50% - .5rem + 22px);
background:linear-gradient(90deg,var(--gold-light),rgba(212,138,137,.3));
}
.cp-num{
width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
font-family:'Playfair Display',serif;font-size:1rem;font-weight:600;color:var(--navy);
background:#fff;border:1.5px solid var(--gold-light);
box-shadow:0 6px 14px rgba(180,110,110,.14);
}
.founder-line svg{width:20px;height:20px;flex:none}
@media (max-width:420px){
.care-path li{font-size:.78rem}
}
/* ---------- ตัวเลข: เหลือ 3 ช่องที่นับได้จริง ---------- */
.stat-band{grid-template-columns:repeat(3,1fr);max-width:940px;margin-inline:auto}
.stat-band .sb strong{font-size:clamp(1.8rem,3.4vw,2.4rem)}
@media (max-width:1024px){
.stat-band{grid-template-columns:repeat(3,1fr);gap:1rem}
}
@media (max-width:560px){
/* สามช่องเรียงแนวนอนแคบเกินไปสำหรับ "10,000+" จึงเปลี่ยนเป็นแถวละช่อง ตัวเลขกับคำอยู่บรรทัดเดียวกัน */
.stat-band{grid-template-columns:1fr;gap:.7rem}
.stat-band .sb{display:flex;align-items:baseline;justify-content:center;gap:.8rem;padding:1.1rem 1rem}
.stat-band .sb strong{margin:0;font-size:1.9rem}
}
/* ---------- ไอคอนคุณค่า: เส้น SVG ชุดเดียวกัน แทนอีโมจิที่หน้าตาเปลี่ยนไปตามเครื่อง ---------- */
.pillar-icon svg{width:30px;height:30px;display:block}
/* ---------- ไทม์ไลน์: การ์ด + สลับซ้าย-ขวาบนจอกว้าง ---------- */
.timeline{margin-top:2.6rem}
.tl-item{
background:#fff;border-radius:var(--radius);padding:1.4rem 1.6rem 1.5rem;margin-bottom:1.2rem;
box-shadow:var(--shadow-sm);border:1px solid rgba(195,144,121,.16);
}
.tl-item::before{top:1.75rem}
.tl-item .tl-year{
display:inline-block;padding:.1rem .75rem;border-radius:999px;
background:var(--soft-pink);color:#9a5251;font-size:.8rem;letter-spacing:.04em;
}
.tl-item h3{color:var(--navy);font-size:1.12rem;margin:.55rem 0 .35rem;font-weight:700}
.tl-item p{margin:0}
@media (min-width:861px){
/* แต่ละการ์ดกินสองแถว และเริ่มช้ากว่าใบก่อนหนึ่งแถว การ์ดจึงเหลื่อมกันครึ่งใบแบบฟันปลา
โดยใบที่อยู่ฝั่งเดียวกันไม่มีทางทับกัน ไม่ว่าข้อความจะยาวแค่ไหน */
.timeline{
max-width:1000px;padding-left:0;
display:grid;grid-template-columns:1fr 1fr;column-gap:5.2rem;
}
.timeline::before{left:50%;margin-left:-1px}
/* align-self:start — ไม่ให้การ์ดยืดเต็มสองแถว การ์ดที่ข้อความสั้นจะได้ไม่มีที่ว่างโหว่ด้านล่าง */
.tl-item{margin:0 0 1.4rem;align-self:start}
.tl-item:nth-child(odd){grid-column:1}
.tl-item:nth-child(even){grid-column:2}
.tl-item:nth-child(1){grid-row:1/3}
.tl-item:nth-child(2){grid-row:2/4}
.tl-item:nth-child(3){grid-row:3/5}
.tl-item:nth-child(4){grid-row:4/6}
.tl-item:nth-child(5){grid-row:5/7}
.tl-item:nth-child(6){grid-row:6/8}
/* จุดบนเส้นกลาง: ช่องไฟ 5.2rem ครึ่งหนึ่งคือ 2.6rem, วงกลมกว้าง 14px */
.tl-item:nth-child(odd)::before{left:auto;right:calc(-2.6rem - 7px)}
.tl-item:nth-child(even)::before{left:calc(-2.6rem - 7px)}
}
/* ---------- ปุ่มขอบขาวบนกล่องชวนติดต่อสีเข้ม ---------- */
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
@media (prefers-reduced-motion:reduce){
.as-tile img{transition:none}
.as-tile:hover img{transform:none}
}
/* ขอบล่างสุดของรูปคุณปุ๊กติดขอบโต๊ะหินอ่อนเป็นเส้นบาง ๆ ย่อลงแล้วดูเหมือนรูปแสดงผลเพี้ยน
ขยายรูป 4% โดยยึดขอบบน เส้นนั้นจะหลุดกรอบไป ใบหน้าและกระเป๋าไม่ขยับ */
.founder-visual img{transform:scale(1.04);transform-origin:50% 0}
/* คำทับศัพท์ที่ตัวตัดคำภาษาไทยไม่รู้จัก เช่น "อินสไปร์" "ออเดอร์" มักถูกหักกลางคำ (อินส / ไปร์)
ห่อด้วย .nw ให้คำนั้นขึ้นบรรทัดใหม่ทั้งคำ */
.nw{white-space:nowrap}
/* ไทม์ไลน์ที่มีคำโปรยใต้หัวข้อ — คำโปรยมีระยะล่าง 3rem อยู่แล้ว ไม่ต้องเว้นซ้ำ */
.section-sub + .timeline{margin-top:0}
/* ---------- รีวิวจริง (2026-09-14) ----------
คำพูดจริงจากลูกค้า ไม่มีชื่อ รูป หรือดาว จึงใช้เครื่องหมายคำพูดตัวใหญ่แทนรูปโปรไฟล์
และบอกที่มาของข้อความไว้ท้ายการ์ด ให้คนอ่านรู้ว่ามาจากไหน */
.testi-real{position:relative;margin:0;padding-top:2.6rem}
.testi-real::before{
content:"\201C";position:absolute;top:.2rem;left:1.5rem;
font-family:'Playfair Display',serif;font-size:4.2rem;line-height:1;color:var(--gold-light);
}
.testi-real blockquote{font-style:normal;font-size:1.04rem;line-height:1.8}
html[data-lang="en"] .testi-real blockquote{font-style:italic}
.testi-src{
display:flex;align-items:center;gap:.5rem;margin-top:1.4rem;padding-top:1rem;
border-top:1px solid rgba(195,144,121,.18);
font-size:.82rem;color:var(--muted);
}
.ts-ico{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;
background:var(--soft-pink);color:#9a5251;font-size:0}
.ts-ico svg{width:15px;height:15px}
/* รูปโปรไฟล์ + ชื่อบัญชีลูกค้า (เจ้าของร้านอนุญาตให้ใส่ 2026-09-14)
รูปครอปจากภาพหน้าจอแชท/อินสตาแกรม ต้นฉบับเล็ก จึงแสดงที่ 44px เพื่อไม่ให้ภาพแตก */
.testi-src{gap:.75rem}
.ts-avatar{
width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;
border:2px solid #fff;box-shadow:0 4px 12px rgba(150,95,105,.22);background:var(--soft-pink);
}
.ts-meta{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ts-name{font-weight:700;font-size:.9rem;color:var(--navy);overflow-wrap:anywhere}
.ts-from{display:flex;align-items:center;gap:.4rem}
.ts-from .ts-ico{width:22px;height:22px}
.ts-from .ts-ico svg{width:12px;height:12px}