/* Self-hosted Prompt subsets: removes the render-blocking Google Fonts chain. */
@font-face{font-family:'Prompt';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/prompt-400-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/prompt-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/prompt-500-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/prompt-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/prompt-600-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/prompt-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/prompt-700-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/prompt-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Prompt';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/prompt-800-thai.woff2') format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Prompt';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/prompt-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
--bg: #f8f5ef;
--paper: #ffffff;
--ink: #171717;
--muted: #66645f;
--line: #e7dfd4;
--gold: #b58642;
--gold-dark: #8d642e;
--charcoal: #121212;
--soft: #f0ebe3;
--radius: 8px;
--shadow: 0 18px 50px rgba(20, 20, 20, .10);
--shadow-strong: 0 28px 80px rgba(20, 20, 20, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--ink);
background: var(--bg);
font-family: "Prompt", "Sukhumvit Set", "Sukhumvit", "Leelawadee UI", "Segoe UI", Tahoma, Arial, sans-serif;
line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .menu, .btn, .eyebrow, .stat b, .chip { font-family: "Prompt", "Sukhumvit Set", "Sukhumvit", "Leelawadee UI", "Segoe UI", Tahoma, Arial, sans-serif; }
.wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.topbar {
position: sticky;
top: 0;
z-index: 20;
background: rgba(255, 255, 255, .92);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(14px);
}
.nav {
min-height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand { display: flex; align-items: center; flex: 0 0 auto; width: 178px; height: 58px; overflow: hidden; }
.brand-logo { width: 178px; height: auto; object-fit: contain; object-position: left top; transform: translateY(-1px); }
.menu { display: flex; align-items: center; gap: 26px; color: #3a3936; font-size: 14px; font-weight: 700; }
.menu a:hover, .menu a.active { color: var(--gold-dark); }
.mobile-note { display: none; color: var(--muted); font-size: 13px; font-weight: 700; }
.menu-toggle {
display: none;
width: 44px;
height: 44px;
border: 1px solid var(--line);
border-radius: 4px;
background: rgba(255, 253, 248, .9);
padding: 10px;
}
.menu-toggle span {
display: block;
height: 2px;
margin: 5px 0;
background: var(--ink);
transition: transform .18s ease, opacity .18s ease;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
gap: 10px;
padding: 13px 20px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: var(--radius);
font-weight: 800;
line-height: 1.2;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { color: #fff; background: var(--gold); border-color: var(--gold); box-shadow: 0 10px 22px rgba(181, 134, 66, .22); }
.btn.primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.btn.ghost { color: #fff; background: rgba(255, 255, 255, .08); }
.btn.light { color: var(--ink); background: #fff; border-color: var(--line); }

.hero, .page-hero, .cta-band {
color: #fff;
background:
linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .36), rgba(0, 0, 0, .08)),
var(--hero-image) center/cover;
}
.hero { min-height: 560px; display: flex; align-items: center; overflow: hidden; }
.hero-inner { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 86px 0 92px; }
.page-hero { min-height: 420px; display: flex; align-items: end; padding: 92px 0 76px; }
.eyebrow { margin-bottom: 14px; color: #d7b071; font-size: 13px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
h1 { max-width: 840px; margin-bottom: 22px; font-size: clamp(38px, 6vw, 76px); line-height: 1.13; letter-spacing: 0; }
h2 { margin-bottom: 0; font-size: clamp(28px, 4vw, 46px); line-height: 1.18; letter-spacing: 0; }
h3 { margin-bottom: 10px; line-height: 1.25; }
.hero p, .page-hero p { max-width: 720px; margin-bottom: 32px; color: rgba(255, 255, 255, .9); font-size: clamp(17px, 2vw, 20px); }
.hero-actions, .contact-row { display: flex; flex-wrap: wrap; gap: 14px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); box-shadow: var(--shadow); transform: translateY(-44px); }
.stat { min-height: 132px; padding: 24px 26px; background: #fff; }
.stat b { display: block; margin-bottom: 4px; color: var(--gold); font-size: 27px; line-height: 1.15; }
.stat span { color: var(--muted); font-size: 14px; }
section { padding: 58px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.section-head p { max-width: 580px; margin-bottom: 0; color: var(--muted); }
.intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 42px; align-items: center; }
.card, .intro-card, .service, .step, .project, .contact-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.intro-card { padding: 38px; box-shadow: var(--shadow); }
.intro-card p { margin: 16px 0 0; color: var(--muted); }
.vision-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; }
.vision-points div { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .68); }
.vision-points b { display: block; margin-bottom: 5px; color: var(--gold-dark); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.vision-points span { color: var(--muted); font-size: 14px; line-height: 1.6; }
.intro img, .image-panel { width: 100%; height: 390px; border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.chip { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); color: #4a453e; background: var(--soft); font-size: 13px; font-weight: 700; }
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.service { min-height: 238px; padding: 26px; }
.icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--gold); background: #fffaf3; font-size: 18px; font-weight: 900; }
.service h3 { font-size: 20px; }
.service p, .step p, .project p, .contact-card p, .card p { margin-bottom: 0; color: var(--muted); font-size: 15px; }
.dark { color: #fff; background: var(--charcoal); }
.dark .section-head p { color: #bdb8ae; }
.portfolio-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.project { overflow: hidden; color: var(--ink); border-color: rgba(255, 255, 255, .10); }
.project img { width: 100%; height: 220px; object-fit: cover; background: #d8d0c5; }
.project-body { padding: 22px; }
.project h3 { font-size: 21px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.meta span { padding: 5px 9px; border: 1px solid #e6ded3; border-radius: var(--radius); color: #5d574f; background: #f2eee8; font-size: 12px; font-weight: 700; }
.case-link { display: inline-block; margin-top: 16px; color: var(--gold-dark); font-weight: 800; }
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.step { min-height: 190px; padding: 22px; }
.num { margin-bottom: 10px; color: var(--gold); font-weight: 900; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card, .contact-card { padding: 26px; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: start; }
.home-contact { align-items: stretch; }
.home-contact .contact-card { height: 100%; }
.check-list { display: grid; gap: 10px; margin: 24px 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding: 12px 14px 12px 36px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); background: rgba(255, 255, 255, .72); font-size: 14px; }
.check-list li::before { content: ""; position: absolute; left: 14px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.field { display: grid; gap: 7px; color: var(--muted); font-size: 14px; font-weight: 700; }
.field.full { grid-column: 1 / -1; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; font: inherit; color: var(--ink); background: #fff; }
textarea { min-height: 130px; resize: vertical; }
.cta-band { padding: 72px 0; --hero-image: url("images/nagase-cover.webp"); }
.cta-band h2 { max-width: 820px; font-size: clamp(30px, 4vw, 54px); }
.cta-band p { max-width: 700px; color: rgba(255, 255, 255, .82); font-size: 18px; }
footer { padding: 36px 0; border-top: 1px solid var(--line); color: #5e5b56; background: #fff; }
.foot { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; }
.footer-logo { width: 210px; height: auto; margin-bottom: 14px; }
.foot b { color: var(--ink); }

.projects-page .page-hero {
min-height: 520px;
background:
linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .45) 52%, rgba(0, 0, 0, .12)),
var(--hero-image) center/cover;
}
.projects-page .page-hero h1 { max-width: 760px; }
.projects-page .page-hero p { max-width: 640px; }
.projects-page .portfolio-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.projects-page .project {
box-shadow: var(--shadow);
transition: transform .2s ease, box-shadow .2s ease;
}
.projects-page .project:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-strong);
}
.projects-page .project img { height: 330px; }
.projects-page .project-body { padding: 28px; }
.projects-page .project h3 { font-size: 25px; }
.projects-page .meta span { background: #fbf7ef; }
.feature-strip {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 28px;
align-items: stretch;
}
.feature-strip img {
width: 100%;
min-height: 430px;
height: 100%;
object-fit: cover;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.feature-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 42px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow);
}
.feature-copy p { color: var(--muted); }
.quiet-band {
background: #fff;
border-block: 1px solid var(--line);
}

@media (max-width: 980px) {
.topbar { position: sticky; }
.nav { position: relative; }
.menu-toggle { display: block; margin-left: auto; }
.menu {
position: absolute;
left: 0;
right: 0;
top: 100%;
display: grid;
gap: 0;
padding: 10px;
background: rgba(255, 253, 248, .98);
border: 1px solid var(--line);
box-shadow: var(--shadow);
transform: translateY(-8px);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
.menu a {
padding: 14px 12px;
border-bottom: 1px solid var(--line);
font-size: 16px;
}
.menu a:last-child { border-bottom: 0; }
.menu a.active::after,
.menu a:hover::after { display: none; }
.menu-open .menu {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-note { display: none; }
.nav { min-height: 70px; }
.hero { min-height: auto; }
.hero-inner { padding: 64px 0 78px; }
.stats { grid-template-columns: repeat(2, 1fr); transform: translateY(-28px); }
.intro, .split, .contact-grid { grid-template-columns: 1fr; }
.services, .portfolio-grid, .process, .cards-3, .projects-page .portfolio-grid, .feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
.wrap, .hero-inner { width: min(100% - 28px, 1180px); }
.brand { min-width: 138px; }
.brand-logo { width: 132px; max-height: 44px; }
.mobile-note, .nav .btn { display: none; }
h1 { font-size: 38px; }
.hero p { font-size: 16px; }
.btn { width: 100%; }
.stats { grid-template-columns: 1fr; }
.stat { min-height: auto; padding: 18px 20px; }
section { padding: 42px 0; }
.section-head { display: block; }
.section-head p { margin-top: 12px; }
.vision-points { grid-template-columns: 1fr; }
.intro-card, .card, .contact-card { padding: 24px; }
.intro img, .image-panel { height: 260px; }
.services, .portfolio-grid, .process, .foot, .cards-3, .form-grid, .projects-page .portfolio-grid, .feature-strip { grid-template-columns: 1fr; }
.project img { height: 210px; }
.projects-page .project img { height: 240px; }
.feature-copy { padding: 24px; }
.feature-strip img { min-height: 260px; }
.cta-band, .page-hero { padding: 56px 0; }
}

/* Premium design pass */
:root {
--bg: #f6f1e8;
--paper: #fffdf8;
--ink: #241a10;
--muted: #746a5c;
--line: #e3d5c2;
--gold: #b9843c;
--gold-dark: #8a5e2c;
--charcoal: #3a2716;
--soft: #ede2d1;
--shadow: 0 18px 48px rgba(58, 39, 22, .12);
--shadow-strong: 0 30px 90px rgba(42, 27, 14, .24);
}

body {
background:
radial-gradient(circle at 80% 0%, rgba(173, 124, 53, .08), transparent 28rem),
linear-gradient(180deg, #f8f5ef 0%, #f1ece4 100%);
}

.topbar {
background: rgba(255, 253, 248, .88);
}

.nav { min-height: 96px; }
.brand { width: 200px; height: 64px; }
.brand-logo { width: 200px; max-height: none; }
.menu {
gap: 30px;
color: #474139;
font-size: 15px;
font-weight: 700;
letter-spacing: .01em;
}
.menu a {
position: relative;
padding: 32px 0;
}
.menu a.active::after,
.menu a:hover::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 22px;
height: 2px;
background: var(--gold);
}

.btn {
border-radius: 4px;
letter-spacing: .01em;
}
.btn.primary {
background: var(--charcoal);
border-color: var(--charcoal);
box-shadow: 0 10px 24px rgba(58, 39, 22, .22);
}
.btn.primary:hover {
background: var(--gold-dark);
border-color: var(--gold-dark);
}

.hero,
.page-hero,
.cta-band {
background:
linear-gradient(90deg, rgba(38, 24, 12, .86), rgba(38, 24, 12, .56) 48%, rgba(38, 24, 12, .16)),
var(--hero-image) center/cover;
}

.hero { min-height: 680px; }
.page-hero { min-height: 520px; }
.hero-inner { padding: 112px 0 120px; }
.eyebrow {
color: #e3bb7c;
letter-spacing: .18em;
font-size: 12px;
}
h1 {
max-width: 860px;
font-size: clamp(34px, 5vw, 68px);
line-height: 1.08;
font-weight: 800;
}
h2 {
font-size: clamp(24px, 3.2vw, 42px);
line-height: 1.15;
}
.hero p,
.page-hero p {
max-width: 660px;
color: rgba(255, 255, 255, .82);
}

section { padding: 86px 0; }
.section-head {
margin-bottom: 42px;
align-items: start;
}
.section-head p {
padding-top: 8px;
font-size: 16px;
}

.card,
.intro-card,
.service,
.step,
.project,
.contact-card {
background: rgba(255, 253, 248, .94);
border-color: rgba(120, 97, 68, .18);
}
.intro-card,
.feature-copy,
.project,
.contact-card {
box-shadow: var(--shadow);
}
.chip,
.meta span {
border-radius: 999px;
}

.projects-page .page-hero {
min-height: 640px;
align-items: center;
}
.projects-page .page-hero h1 {
max-width: 850px;
}
.projects-page .feature-strip {
width: min(1220px, calc(100% - 40px));
gap: 0;
padding-top: 96px;
}
.feature-strip img {
border-radius: 0;
min-height: 560px;
box-shadow: var(--shadow-strong);
}
.feature-copy {
border-radius: 0;
padding: 56px;
box-shadow: none;
border-left: 0;
}

.projects-page .portfolio-grid {
display: grid;
grid-template-columns: 1fr;
gap: 34px;
}
.projects-page .project {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
min-height: 470px;
border: 0;
border-radius: 0;
background: var(--charcoal);
color: #fff;
box-shadow: var(--shadow-strong);
}
.projects-page .project:nth-child(even) img { order: 2; }
.projects-page .project img {
width: 100%;
height: 100%;
min-height: 470px;
}
.projects-page .project-body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 52px;
}
.projects-page .project h3 {
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.12;
}
.projects-page .project p {
color: rgba(255,255,255,.72);
font-size: 16px;
}
.projects-page .meta span {
border-color: rgba(216, 176, 119, .34);
background: rgba(216, 176, 119, .10);
color: #e5c795;
}
.projects-page .case-link {
color: #e5c795;
}
.projects-page .dark {
background: #271808;
}
.projects-page .dark .step {
background: rgba(255,255,255,.045);
border-color: rgba(255,255,255,.10);
}
.projects-page .dark .step p { color: rgba(255,255,255,.68); }

@media (max-width: 980px) {
.projects-page .project,
.projects-page .project:nth-child(even) img {
display: block;
}
.projects-page .project:nth-child(even) img { order: initial; }
.projects-page .project img { min-height: 360px; height: 360px; }
}

@media (max-width: 620px) {
.nav { min-height: 78px; }
.brand { width: 160px; height: 52px; min-width: 160px; }
.brand-logo { width: 160px; max-height: none; }
.hero { min-height: auto; }
h1 { font-size: 32px; }
h2 { font-size: 24px; }
.section-head h2 { font-size: clamp(17px, 5.4vw, 22px); white-space: nowrap; }
section { padding: 54px 0; }
.projects-page .page-hero { min-height: 440px; }
.projects-page .feature-strip { width: min(100% - 28px, 1180px); padding-top: 54px; }
.feature-copy { padding: 26px; }
.projects-page .project-body { padding: 28px; }
.projects-page .project img { min-height: 260px; height: 260px; }
}

/* Mobile polish */
@media (max-width: 760px) {
.topbar {
background: rgba(255, 253, 248, .96);
}
.wrap,
.hero-inner {
width: min(100% - 30px, 1180px);
}
.hero,
.page-hero,
.projects-page .page-hero {
min-height: calc(100vh - 70px);
align-items: end;
background:
linear-gradient(180deg, rgba(8, 8, 7, .24), rgba(8, 8, 7, .88)),
var(--hero-image) center/cover;
}
.hero-inner,
.page-hero .wrap {
padding: 72px 0 44px;
}
h1 {
max-width: 100%;
font-size: clamp(30px, 9vw, 44px);
line-height: 1.12;
}
.hero p,
.page-hero p,
.cta-band p {
font-size: 16px;
line-height: 1.75;
}
.hero-actions,
.contact-row {
gap: 10px;
}
.btn {
width: 100%;
min-height: 48px;
}
.stats {
margin-top: 0;
transform: none;
border-radius: 0;
}
.stat b {
font-size: 22px;
}
.section-head {
margin-bottom: 24px;
}
.portfolio-grid,
.projects-page .portfolio-grid {
gap: 20px;
}
.project,
.projects-page .project {
border-radius: 0;
}
.projects-page .project h3 {
font-size: 28px;
}
.feature-strip,
.projects-page .feature-strip {
gap: 0;
}
.feature-copy {
border-top: 0;
}
.foot {
gap: 18px;
}
.footer-logo {
width: 170px;
}
}

/* Executive premium pass */
.hero {
position: relative;
}
.hero::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 34%;
background: linear-gradient(180deg, transparent, rgba(244, 241, 235, .96));
pointer-events: none;
}
.hero-inner {
position: relative;
z-index: 1;
}
.hero-proof {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 920px;
margin-top: 44px;
border: 1px solid rgba(255, 255, 255, .22);
background: rgba(9, 9, 8, .36);
backdrop-filter: blur(14px);
}
.hero-proof div {
min-height: 108px;
padding: 22px 24px;
border-right: 1px solid rgba(255, 255, 255, .16);
}
.hero-proof div:last-child {
border-right: 0;
}
.hero-proof b {
display: block;
margin-bottom: 7px;
color: #f5d8a6;
font-size: 15px;
}
.hero-proof span {
color: rgba(255, 255, 255, .78);
font-size: 14px;
}

.stats {
border-radius: 0;
transform: translateY(-58px);
}
.stat {
position: relative;
min-height: 150px;
padding: 30px;
}
.stat::before {
content: "";
position: absolute;
left: 30px;
top: 22px;
width: 34px;
height: 2px;
background: var(--gold);
}
.stat b {
margin-top: 18px;
color: var(--charcoal);
font-size: 22px;
}

.intro {
align-items: stretch;
}
.intro-card {
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 0;
box-shadow: none;
}
.intro img {
height: 100%;
min-height: 520px;
border-radius: 0;
box-shadow: var(--shadow-strong);
}
.vision-points div {
border-radius: 0;
background: #f7f1e8;
}

.services {
gap: 0;
border: 1px solid rgba(120, 97, 68, .18);
background: rgba(120, 97, 68, .18);
}
.service {
min-height: 300px;
border: 0;
border-radius: 0;
box-shadow: none;
transition: background .2s ease, transform .2s ease;
}
.service:hover {
background: #fff;
transform: translateY(-4px);
}
.service h3 {
max-width: 220px;
font-size: 24px;
}
.icon {
border-radius: 50%;
background: var(--charcoal);
border-color: var(--charcoal);
color: #f3cf93;
}

.dark {
background:
radial-gradient(circle at 85% 10%, rgba(185, 132, 60, .18), transparent 24rem),
#2c1d10;
}
.project-feature {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
margin-bottom: 28px;
background: #fffdf8;
color: var(--ink);
box-shadow: var(--shadow-strong);
}
.project-feature img {
width: 100%;
height: 560px;
object-fit: cover;
}
.project-feature-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 54px;
}
.project-feature-copy h3 {
margin-bottom: 18px;
font-size: clamp(26px, 3vw, 40px);
line-height: 1.08;
}
.project-feature-copy p {
color: #3c342b;
}
.dark .portfolio-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dark .project {
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 0;
background: rgba(255, 255, 255, .055);
color: #fff;
box-shadow: none;
}
.dark .project img {
height: 250px;
}
.dark .project p {
color: rgba(255, 255, 255, .88);
}
.dark .meta span {
border-color: rgba(216, 176, 119, .28);
background: rgba(216, 176, 119, .10);
color: #e9ca96;
}
.dark .case-link {
color: #e9ca96;
}

.process {
counter-reset: step;
}
.step {
position: relative;
min-height: 190px;
border-radius: 0;
overflow: hidden;
}
.step::after {
content: "";
position: absolute;
right: -34px;
bottom: -34px;
width: 96px;
height: 96px;
border: 1px solid rgba(173, 124, 53, .22);
transform: rotate(45deg);
}
.step h3 {
font-size: 22px;
}

.assurance {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 0;
padding-top: 0;
}
.assurance-copy,
.assurance-grid {
border: 1px solid rgba(120, 97, 68, .18);
background: var(--charcoal);
}
.assurance-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 46px;
color: #fff;
}
.assurance-copy h2 {
font-size: clamp(30px, 3vw, 44px);
}
.assurance-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-left: 0;
}
.assurance-grid div {
padding: 34px 30px;
border-right: 1px solid rgba(255, 255, 255, .12);
}
.assurance-grid div:last-child {
border-right: 0;
}
.assurance-grid b {
display: block;
margin-bottom: 10px;
color: #f3cf93;
}
.assurance-grid span {
color: rgba(255, 255, 255, .70);
font-size: 14px;
}

.cta-band {
min-height: 400px;
display: flex;
align-items: center;
}

@media (max-width: 980px) {
.hero-proof,
.project-feature,
.assurance,
.assurance-grid {
grid-template-columns: 1fr;
}
.hero-proof div {
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.hero-proof div:last-child {
border-bottom: 0;
}
.project-feature img {
height: 380px;
}
.project-feature-copy {
padding: 36px;
}
.dark .portfolio-grid {
grid-template-columns: 1fr;
}
.assurance-grid {
border-left: 1px solid rgba(120, 97, 68, .18);
border-top: 0;
}
.assurance-grid div {
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
}

@media (max-width: 620px) {
.hero-proof {
margin-top: 28px;
}
.hero-proof div,
.stat,
.service,
.step,
.assurance-copy,
.assurance-grid div {
padding: 24px;
}
.intro img {
min-height: 320px;
}
.project-feature img {
height: 280px;
}
.project-feature-copy {
padding: 28px;
}
.dark .project img {
height: 220px;
}
}

/* --- Premium polish: micro-interactions --- */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
main { animation: fadeInUp .6s ease both; }

.card, .intro-card, .service, .step, .project, .contact-card {
transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover, .intro-card:hover, .service:hover, .step:hover, .project:hover, .contact-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-strong);
}

.project, .portfolio-grid a {
overflow: hidden;
}
.project img, .portfolio-grid img {
transition: transform .4s ease;
}
.project:hover img, .portfolio-grid a:hover img {
transform: scale(1.05);
}

a, .btn, .card, .service, .project, .step {
-webkit-tap-highlight-color: transparent;
}

/* --- Thai sub-label under service name --- */
.service-th {
margin: -6px 0 12px;
color: var(--gold-dark);
font-size: 15px;
font-weight: 700;
}

/* --- Project case galleries (1 lead image + 4 thumbs) --- */
.case {
margin-bottom: 56px;
padding-bottom: 46px;
border-bottom: 1px solid var(--line);
}
.case:last-child { border-bottom: 0; margin-bottom: 0; }
.case h3 {
margin-bottom: 8px;
font-size: clamp(20px, 2.2vw, 28px);
color: var(--charcoal);
}
.case > p {
max-width: 780px;
margin-bottom: 22px;
color: var(--muted);
font-size: 15px;
}
.case-gallery {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.case-gallery figure {
display: flex;
flex-direction: column;
margin: 0;
background: var(--paper);
box-shadow: var(--shadow);
overflow: hidden;
}
.case-gallery img {
width: 100%;
height: 190px;
object-fit: cover;
background: var(--soft);
transition: transform .35s ease;
}
.case-gallery figcaption {
padding: 10px 12px;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.case-gallery figure.lead {
grid-column: span 2;
grid-row: span 2;
}
.case-gallery figure.lead img {
height: 100%;
min-height: 392px;
}
.case-gallery figure.lead figcaption {
font-size: 14px;
padding: 12px 14px;
}
.case-gallery figure:hover img { transform: scale(1.02); }

@media (max-width: 980px) {
.case-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-gallery figure.lead { grid-column: span 2; grid-row: auto; }
.case-gallery figure.lead img { min-height: 300px; height: 300px; }
}
@media (max-width: 620px) {
.case-gallery img { height: 150px; }
.case-gallery figure.lead img { min-height: 230px; height: 230px; }
.case-gallery figcaption { font-size: 12px; padding: 9px 10px; }
}

/* --- Social channel cards --- */
.social-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}
.social-card {
display: block;
padding: 30px 26px;
border: 1px solid var(--line);
background: var(--paper);
box-shadow: var(--shadow);
transition: transform .2s ease, box-shadow .2s ease;
}
.social-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-strong); }
.social-card b { display: block; margin-bottom: 6px; font-size: 19px; color: var(--charcoal); }
.social-card span { color: var(--muted); font-size: 14px; }

/* --- Map --- */
.map-wrap {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 26px;
align-items: center;
}
.map-wrap iframe {
width: 100%;
height: 380px;
border: 1px solid var(--line);
box-shadow: var(--shadow);
}
.map-info { color: var(--muted); font-size: 15px; line-height: 1.9; }
.map-info b { color: var(--charcoal); }
@media (max-width: 980px) { .map-wrap { grid-template-columns: 1fr; } }

/* Final responsive and accessibility fixes */
.case { scroll-margin-top: 112px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid rgba(173, 124, 53, .55);
outline-offset: 3px;
}

@media (max-width: 980px) {
.nav { min-height: 70px; }
.brand { width: 148px; height: 52px; }
.brand-logo { width: 148px; }
.menu {
gap: 0;
max-height: calc(100vh - 78px);
overflow-y: auto;
padding: 8px 12px;
}
.menu a {
padding: 17px 10px;
font-size: 15px;
}
}

@media (max-width: 620px) {
.hero,
.page-hero,
.projects-page .page-hero { min-height: 520px; }
h1,
.page-hero h1 {
font-size: clamp(28px, 8vw, 36px) !important;
line-height: 1.18;
white-space: normal !important;
}
.section-head h2 {
font-size: clamp(22px, 7vw, 30px);
white-space: normal;
}
.case-gallery { grid-template-columns: 1fr; }
.case-gallery figure.lead { grid-column: auto; }
.case-gallery img,
.case-gallery figure.lead img {
height: 230px;
min-height: 230px;
}
.social-grid { grid-template-columns: 1fr; }
}

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

/* Final corrections from the approved PDF list */
h1 {
font-size: clamp(32px, 4.4vw, 56px);
}

h2 {
font-size: clamp(24px, 2.8vw, 38px);
}

.hero,
.page-hero,
.cta-band,
.projects-page .page-hero {
background:
linear-gradient(90deg, rgba(61, 39, 20, .78), rgba(61, 39, 20, .48) 52%, rgba(61, 39, 20, .24)),
var(--hero-image) center/cover;
}

.cta-band {
background:
linear-gradient(90deg, rgba(67, 42, 21, .80), rgba(67, 42, 21, .52) 56%, rgba(67, 42, 21, .28)),
var(--hero-image) center/cover;
}

.projects-page .dark {
background: #806044;
}

.projects-page .dark .step {
background: rgba(255, 253, 248, .12);
border-color: rgba(255, 255, 255, .22);
}

.projects-page .dark .step p,
.dark .section-head p {
color: rgba(255, 255, 255, .84);
}

.image-panel {
object-position: center;
}

@media (max-width: 760px) {
.hero,
.page-hero,
.projects-page .page-hero {
background:
linear-gradient(180deg, rgba(61, 39, 20, .24), rgba(61, 39, 20, .88)),
var(--hero-image) center/cover;
}

.cta-band {
background:
linear-gradient(180deg, rgba(61, 39, 20, .34), rgba(61, 39, 20, .88)),
var(--hero-image) center/cover;
}
}

/* Mobile polish: compact first view and swipeable project galleries */
@media (max-width: 620px) {
  section { padding: 36px 0; }

  .brand,
  .brand-logo { width: 138px; }

  .home-page .hero {
    min-height: 600px !important;
    align-items: flex-end;
  }

  .home-page .hero-inner {
    padding: 54px 0 42px !important;
  }

  .home-page .hero h1 {
    max-width: 350px;
    margin-bottom: 16px;
    font-size: clamp(29px, 7.7vw, 32px) !important;
    line-height: 1.16;
  }

  .home-page .hero p {
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.65;
  }

  .home-page .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .home-page .hero-actions .btn {
    min-height: 48px;
    padding-inline: 10px;
    font-size: 14px;
  }

  .home-page .hero-proof {
    display: flex;
    gap: 0;
    width: 100%;
    margin-top: 22px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .home-page .hero-proof::-webkit-scrollbar { display: none; }

  .home-page .hero-proof div {
    flex: 0 0 78%;
    min-height: 92px;
    padding: 18px 20px;
    border-right: 1px solid rgba(255,255,255,.16);
    border-bottom: 0;
    scroll-snap-align: start;
  }

  .home-page .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    transform: translateY(-20px);
  }

  .home-page .stat {
    min-height: 168px;
    padding: 20px 18px;
  }

  .home-page .stat::before {
    left: 18px;
    top: 18px;
  }

  .home-page .stat b {
    margin-top: 14px;
    font-size: 17px;
  }

  .home-page .stat span {
    font-size: 13px;
    line-height: 1.55;
  }

  .home-page .intro-card p {
    font-size: 14px;
    line-height: 1.75;
  }

  .page-hero,
  .projects-page .page-hero {
    min-height: 480px;
  }

  .projects-page .case {
    margin-bottom: 38px;
    padding-bottom: 34px;
  }

  .projects-page .case > p {
    margin-bottom: 16px;
  }

  .projects-page .case-gallery {
    display: flex;
    gap: 10px;
    margin-right: -14px;
    padding: 0 14px 8px 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .projects-page .case-gallery::-webkit-scrollbar { display: none; }

  .projects-page .case-gallery figure,
  .projects-page .case-gallery figure.lead {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }

  .projects-page .case-gallery img,
  .projects-page .case-gallery figure.lead img {
    height: 230px;
    min-height: 230px;
  }

  .projects-page .case::after {
    content: "ปัดซ้าย–ขวาเพื่อดูภาพเพิ่มเติม";
    display: block;
    margin-top: 9px;
    color: var(--gold-dark);
    font-size: 12px;
    font-weight: 700;
  }

  .contact-grid,
  .form-card,
  .contact-card {
    scroll-margin-top: 84px;
  }
}

/* About process cards — compact, readable rhythm on desktop and mobile. */
body.about-page .process .step .num { color: #80531f; }
body.about-page .process .step p { color: #665f56; }

@media (min-width: 621px) {
  body.about-page .section-head { margin-bottom: 28px; }
  body.about-page .process { gap: 14px; }
  body.about-page .process .step {
    min-height: 0;
    padding: 16px 18px 15px;
  }
  body.about-page .process .step .num {
    margin-bottom: 7px;
    font-size: 14px;
  }
  body.about-page .process .step h3 {
    margin-bottom: 7px;
    font-size: 19px;
    line-height: 1.3;
  }
  body.about-page .process .step p {
    font-size: 13.5px;
    line-height: 1.58;
  }
}

/* Compact process cards on phones */
@media (max-width: 620px) {
  .services,
  .cards-3,
  .contact-grid {
    gap: 12px;
  }

  .services .service,
  .home-page .services .service {
    min-height: 0;
    padding: 20px;
  }

  .services .service .icon {
    margin-bottom: 14px;
  }

  .cards-3 > .card,
  .contact-card,
  .intro-card {
    padding-bottom: 20px;
  }

  .process {
    gap: 12px;
  }

  .process .step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 5px;
    min-height: 0;
    padding: 20px 44px 16px 18px;
    align-items: start;
  }

  .process .step .num {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 3px 0 0;
    font-size: 15px;
    line-height: 1.2;
  }

  .process .step h3 {
    grid-column: 2;
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
  }

  .process .step p {
    grid-column: 2;
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
  }

  .process .step::after {
    right: -27px;
    bottom: -27px;
    width: 72px;
    height: 72px;
  }
}

/* Client correction round 1 - 2026-08-11 */
.case-link.case-link-strong { color: #5f3b17; }
.case-link.case-link-strong:hover { color: #2f1d0c; }
.eyebrow.about-eyebrow-large { font-size: 14px; }


/* Card height balance - 20260812 */
@media (min-width: 981px) {
  .intro img {
    min-height: 400px;
  }

  .project-feature img {
    height: 460px;
  }
}

@media (min-width: 621px) and (max-width: 980px) {
  .intro img {
    height: 360px;
    min-height: 0;
  }
}


/* Contact channels - 20260812 */
.contact-channels {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.contact-channel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 10px 14px;
  border: 1px solid rgba(120, 97, 68, .18);
  background: rgba(255, 253, 248, .76);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s, background .2s, transform .2s;
}

.contact-channel:hover {
  border-color: rgba(173, 124, 53, .55);
  background: #fff;
  transform: translateY(-2px);
}

.contact-channel-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--charcoal);
  color: #fff;
}

.contact-channel-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.contact-channel small,
.contact-channel strong {
  display: block;
}

.contact-channel small {
  margin-bottom: 1px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.contact-channel strong {
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.4;
}

.contact-channel-arrow {
  color: var(--gold-dark);
  font-size: 22px;
  line-height: 1;
  text-align: center;
}

.contact-channel-facebook:hover .contact-channel-icon { background: #1877f2; }
.contact-channel-line:hover .contact-channel-icon { background: #06c755; }
.contact-channel-phone:hover .contact-channel-icon { background: #d92d20; }
.contact-channel-email:hover .contact-channel-icon { background: var(--gold-dark); }

@media (max-width: 620px) {
  .contact-channels {
    gap: 8px;
    margin-top: 18px;
  }

  .contact-channel {
    grid-template-columns: 40px minmax(0, 1fr) 20px;
    gap: 12px;
    min-height: 62px;
    padding: 9px 11px;
  }

  .contact-channel-icon {
    width: 40px;
    height: 40px;
  }

  .contact-channel-icon svg {
    width: 20px;
    height: 20px;
  }

  .contact-channel strong {
    font-size: 14px;
  }
}

/* Three-part project confidence strip — 2026-08-25 */
.home-page .hero-proof {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 1180px;
}
.home-page .hero-proof div {
  min-width: 0;
  padding-inline: 20px;
}
.home-page .hero-proof-secondary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  background: rgba(255, 253, 248, .94);
  border-color: rgba(120, 97, 68, .24);
}
.home-page .hero-proof-secondary div {
  border-right-color: rgba(120, 97, 68, .18);
}
.home-page .hero-proof-secondary div:last-child { border-right: 0; }
.home-page .hero-proof-secondary b { color: #80531f; }
.home-page .hero-proof-secondary span { color: #665f56; line-height: 1.55; }
.home-page .hero-proof-secondary div {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: 30px 24px;
}
.home-page .hero-proof-secondary b {
  min-height: 23px;
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.home-page .hero-proof-secondary span {
  font-size: 16px;
  line-height: 1.55;
}
@media (max-width: 980px) {
  .home-page .hero-proof-secondary div { border-right-color: rgba(120, 97, 68, .18); }
}
@media (min-width: 621px) and (max-width: 980px) {
  .home-page .hero-proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-page .hero-proof div {
    border-right: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }
  .home-page .hero-proof div:nth-child(2n) { border-right: 0; }
  .home-page .hero-proof div:last-child { border-bottom: 0; }
  .home-page .hero-proof-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .home-page .hero-proof {
    display: flex;
    max-width: none;
  }
  .home-page .hero-proof div {
    flex-basis: 82%;
  }
  .home-page .hero-proof-secondary { margin-top: 10px; }
  .home-page .hero-proof-secondary div { min-height: 0; padding: 18px 18px; }
  .home-page .hero-proof-secondary b { min-height: 0; font-size: 16px; }
  .home-page .hero-proof-secondary span { font-size: 14px; }
}

/* Project gallery typography and spacing — 2026-08-13 */
.projects-page .case {
  margin-bottom: 64px;
  padding-bottom: 56px;
}
.projects-page .case h3 {
  margin: 0 0 10px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.projects-page .case > p {
  margin: 0 0 26px;
  line-height: 1.75;
}
.projects-page .case-gallery {
  gap: 16px;
}
.projects-page .case-gallery figure {
  border: 1px solid rgba(120, 97, 68, .14);
  background: #fffdf8;
  box-shadow: 0 14px 34px rgba(54, 38, 23, .10);
}
.projects-page .case-gallery figcaption {
  display: flex;
  flex: 1;
  align-items: center;
  min-height: 64px;
  padding: 13px 16px;
  color: #4a4036;
  background: #fffdf8;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}
.projects-page .case-gallery figure.lead figcaption {
  min-height: 68px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 650;
}
@media (max-width: 620px) {
  .projects-page .case {
    margin-bottom: 42px;
    padding-bottom: 36px;
  }
  .projects-page .case h3 {
    margin-bottom: 8px;
    font-size: 24px;
  }
  .projects-page .case > p {
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.7;
  }
  .projects-page .case-gallery { gap: 12px; }
  .projects-page .case-gallery figcaption,
  .projects-page .case-gallery figure.lead figcaption {
    min-height: 62px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
  }
}

/* Center project captions — 2026-08-13 */
.projects-page .case-gallery figcaption {
  justify-content: center;
  text-align: center;
}

/* Balanced Thai caption wrapping — 2026-08-13 */
.projects-page .case-gallery figcaption {
  line-break: auto;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
  hyphens: none;
}

/* Social and contact vector icons — 2026-08-13 */
.social-card{display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:4px;align-items:center}
.social-card::before{content:"";grid-column:1;grid-row:1/3;width:42px;height:42px;background:var(--social-color);-webkit-mask:var(--social-icon) center/contain no-repeat;mask:var(--social-icon) center/contain no-repeat;transition:transform .2s ease}
.social-card:hover::before{transform:scale(1.08)}
.social-card b,.social-card span{grid-column:2;min-width:0}.social-card b{margin:0}
.social-card[href*="facebook.com"]{--social-color:#1877f2;--social-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h3V4h-3c-3.2 0-5 2-5 5v3H6v4h3v8h4v-8h3.5l.5-4h-4V9c0-.7.3-1 1-1Z'/%3E%3C/svg%3E")}
.social-card[href*="tiktok.com"]{--social-color:#171717;--social-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 3c.5 2.2 1.8 3.5 4 4v4a8 8 0 0 1-4-1.2V16a6 6 0 1 1-6-6h1v4c-.3-.1-.6-.1-1-.1A2.1 2.1 0 1 0 12 16V3h4Z'/%3E%3C/svg%3E")}
.social-card[href*="line.me"]{--social-color:#06c755;--social-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3C6.5 3 2 6.7 2 11.3c0 4.1 3.6 7.5 8.5 8.2.4.1.9.3 1 .7.1.4.1.9 0 1.3l-.2 1.1c-.1.4-.3 1.6 1.4.9 1.7-.7 7.1-4.2 9.1-7.2 1.4-1.6 2.2-3.4 2.2-5C24 6.7 18.5 3 12 3Zm-5 7.2h2v2H7v-2Zm4 0h2v2h-2v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E")}
.foot>div:nth-child(2) a,.map-info a{display:inline-flex;align-items:center;gap:7px}
.foot>div:nth-child(2) a::before,.map-info a::before{content:"";flex:0 0 19px;width:19px;height:19px;background:currentColor;-webkit-mask:var(--contact-icon) center/contain no-repeat;mask:var(--contact-icon) center/contain no-repeat}
.foot a[href*="facebook.com"],.map-info a[href*="facebook.com"]{color:#1877f2;--contact-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h3V4h-3c-3.2 0-5 2-5 5v3H6v4h3v8h4v-8h3.5l.5-4h-4V9c0-.7.3-1 1-1Z'/%3E%3C/svg%3E")}
.foot a[href*="line.me"],.map-info a[href*="line.me"]{color:#06a943;--contact-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.7 2 11.3c0 4.1 3.6 7.5 8.5 8.2.4.1.9.3 1 .7.1.4.1.9 0 1.3l-.2 1.1c-.1.4-.3 1.6 1.4.9 1.7-.7 7.1-4.2 9.1-7.2 1.4-1.6 2.2-3.4 2.2-5C24 6.7 18.5 3 12 3Z'/%3E%3C/svg%3E")}
.foot a[href^="tel:"],.map-info a[href^="tel:"]{--contact-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 3 3 4-2 2c1.3 2.8 3.2 4.7 6 6l2-2 4 3-1.5 4c-.3.7-1 1.1-1.8 1C9.2 20 4 14.8 3 7.3 2.9 6.5 3.3 5.8 4 5.5L7 3Z'/%3E%3C/svg%3E")}
.foot a[href^="mailto:"],.map-info a[href^="mailto:"]{--contact-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3V5Zm2 2v1l7 5 7-5V7l-7 5-7-5Z'/%3E%3C/svg%3E")}
.foot a[href^="tel:"]:hover,.map-info a[href^="tel:"]:hover{color:#c9362b}
@media(max-width:620px){.social-card{grid-template-columns:40px minmax(0,1fr);column-gap:13px}.social-card::before{width:36px;height:36px}}

/* Icon-only footer contact labels — 2026-08-13 */
.foot > div:nth-child(2) { font-size: 0; }
.foot > div:nth-child(2) > b { display: block; margin-bottom: 8px; font-size: 14px; }
.foot > div:nth-child(2) > br { display: none; }
.foot > div:nth-child(2) > a { display: flex; width: max-content; margin-top: 6px; font-size: 14px; line-height: 1.75; }

/* Balanced social-card copy — 2026-08-13 */
.social-card span { line-break: auto; text-wrap: balance; }

/* Correct LINE brand mark — 2026-08-13 */
.social-card[href*="line.me"]{--social-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 5.8 2 10.4c0 4.1 3.6 7.5 8.4 8.2.3.1.8.3.9.7.1.4.1 1 .1 1.4l-.2 1.3c-.1.4-.3 1.6 1.4.9 1.8-.7 9.6-5.7 9.6-12.5C22 5.8 17.5 2 12 2Zm-4 11H6V8h2v3.3h2V13H8Zm3.3 0H9.7V8h1.6v5Zm5.2 0H15l-1.8-2.5V13h-1.6V8h1.5l1.8 2.5V8h1.6v5Zm3.5-3.4h-1.8v.7H20v1.4h-1.8v.7H20V14h-3.4V8H20v1.6Z'/%3E%3C/svg%3E")}
.foot a[href*="line.me"],.map-info a[href*="line.me"]{--contact-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 5.8 2 10.4c0 4.1 3.6 7.5 8.4 8.2.3.1.8.3.9.7.1.4.1 1 .1 1.4l-.2 1.3c-.1.4-.3 1.6 1.4.9 1.8-.7 9.6-5.7 9.6-12.5C22 5.8 17.5 2 12 2Zm-4 11H6V8h2v3.3h2V13H8Zm3.3 0H9.7V8h1.6v5Zm5.2 0H15l-1.8-2.5V13h-1.6V8h1.5l1.8 2.5V8h1.6v5Zm3.5-3.4h-1.8v.7H20v1.4h-1.8v.7H20V14h-3.4V8H20v1.6Z'/%3E%3C/svg%3E")}

/* Neutral contact links; reveal brand color on interaction — 2026-08-13 */
.foot>div:nth-child(2)>a{color:inherit}
.foot a[href*="facebook.com"]:hover,.foot a[href*="facebook.com"]:focus-visible,.foot a[href*="facebook.com"]:active{color:#1877f2}
.foot a[href*="line.me"]:hover,.foot a[href*="line.me"]:focus-visible,.foot a[href*="line.me"]:active{color:#06a943}
.foot a[href^="tel:"]:hover,.foot a[href^="tel:"]:focus-visible,.foot a[href^="tel:"]:active{color:#c9362b}
.foot a[href^="mailto:"]:hover,.foot a[href^="mailto:"]:focus-visible,.foot a[href^="mailto:"]:active{color:#8d642e}

/* Google Maps pin icon — 2026-08-13 */
.map-info a[href*="google.com/maps"],.map-info a[href*="maps.google"]{--contact-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z'/%3E%3C/svg%3E")}

/* Contact-channel breathing room — 2026-08-13 */
.contact-channels{gap:10px}
.contact-card .contact-channels+.btn{margin-top:20px}
@media(max-width:620px){.contact-channels{gap:10px}.contact-card .contact-channels+.btn{margin-top:18px}}

/* Self-hosted project and career forms */
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-status{grid-column:1/-1;margin:16px 0 2px;padding:13px 15px;border-radius:10px;font-size:15px;font-weight:700;line-height:1.55}
.form-status.success{color:#285c3a;background:#edf8f0;border:1px solid #b9dec3}
.form-status.error{color:#8a3027;background:#fff0ee;border:1px solid #efc2bd}
.form-note{font-size:12px;font-weight:500;line-height:1.5;color:var(--muted)}
.consent-field{display:flex;grid-template-columns:22px 1fr;align-items:flex-start;gap:10px;font-weight:500;line-height:1.55}
.consent-field input{width:18px;height:18px;margin-top:2px;accent-color:var(--brown)}
.site-form button[type="submit"]:disabled{cursor:wait;opacity:.68}

/* Refined footer services list — 2026-08-13 */
.footer-services{display:grid;gap:8px;margin:11px 0 0;padding:0;list-style:none}
.footer-services li{position:relative;padding-left:17px;color:var(--muted);font-size:14px;line-height:1.45}
.footer-services li::before{content:"";position:absolute;left:1px;top:.62em;width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg)}
@media(max-width:620px){.footer-services{gap:9px;margin-top:12px}.footer-services li{font-size:14px}}

/* Premium dark footer — 2026-08-13 */
footer{position:relative;padding:54px 0 46px;overflow:hidden;border-top:3px solid var(--gold);background:radial-gradient(circle at 8% 0%,rgba(181,134,66,.17),transparent 26rem),#24180f;color:rgba(255,255,255,.72)}
.foot{position:relative;z-index:1;grid-template-columns:1.25fr .9fr .9fr;gap:0;align-items:start}
.foot>div{min-width:0;padding:0 32px;border-left:1px solid rgba(255,255,255,.11)}
.foot>div:first-child{padding-left:0;border-left:0;line-height:1.8}.foot>div:last-child{padding-right:0}
.footer-logo{width:195px;margin-bottom:18px;filter:grayscale(1) brightness(0) invert(1);opacity:.94}
.foot b{display:block;margin-bottom:12px;color:#edc98f;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.foot>div:nth-child(2)>b{margin-bottom:12px}.foot>div:nth-child(2)>a{margin-top:8px;color:rgba(255,255,255,.72)}
.footer-services{margin-top:0}.footer-services li{color:rgba(255,255,255,.68)}.footer-services li::before{border-color:#d9ad68;background:rgba(217,173,104,.12)}
@media(max-width:980px){.foot{grid-template-columns:1.15fr .85fr;row-gap:34px}.footer-services-wrap{grid-column:1/-1;padding:28px 0 0!important;border-top:1px solid rgba(255,255,255,.11);border-left:0!important}.footer-services{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px}}
@media(max-width:620px){footer{padding:42px 0 30px}.foot{grid-template-columns:1fr;row-gap:0}.foot>div,.footer-services-wrap{grid-column:auto;padding:25px 0!important;border-top:1px solid rgba(255,255,255,.11);border-left:0!important}.foot>div:first-child{padding-top:0!important;border-top:0}.foot>div:last-child{padding-bottom:0!important}.footer-logo{width:178px}.footer-services{grid-template-columns:1fr;gap:9px}}

/* Full-width phone CTA — 2026-08-13 */
.contact-card .contact-channels+.btn{display:flex;width:100%;min-height:56px;justify-content:center;text-align:center}

/* Clean contact cards without arrows — 2026-08-13 */
.contact-channel{grid-template-columns:44px minmax(0,1fr)}
.contact-channel-arrow{display:none}
@media(max-width:620px){.contact-channel{grid-template-columns:40px minmax(0,1fr)}}

/* Restore original light footer — 2026-08-13 */
footer{padding:36px 0;overflow:visible;border-top:1px solid var(--line);background:#fff;color:#5e5b56}
.foot{grid-template-columns:1.2fr 1fr 1fr;gap:24px;align-items:start}
.foot>div,.footer-services-wrap{grid-column:auto;padding:0!important;border:0!important}
.foot>div:first-child{line-height:1.65}
.footer-logo{width:210px;margin-bottom:14px;filter:none;opacity:1}
.foot b{display:block;margin-bottom:8px;color:var(--ink);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none}
.foot>div:nth-child(2)>b{margin-bottom:8px}.foot>div:nth-child(2)>a{color:inherit}
.footer-services{grid-template-columns:1fr;gap:8px;margin-top:11px}.footer-services li{color:var(--muted)}.footer-services li::before{border-color:var(--gold);background:transparent}
@media(max-width:980px){.foot{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:620px){footer{padding:36px 0}.foot{grid-template-columns:1fr;gap:18px}.footer-logo{width:170px}.footer-services{gap:9px}}

/* Footer services as hashtag chips — 2026-08-13 */
.footer-services{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.footer-services li{display:inline-flex;align-items:center;width:auto;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--soft);color:#5e5549;font-size:12px;font-weight:500;line-height:1.35;white-space:nowrap}
.footer-services li::before{content:"#";position:static;width:auto;height:auto;margin-right:3px;border:0;background:transparent;color:var(--gold-dark);font-weight:700;transform:none}
@media(max-width:620px){.footer-services{gap:7px}.footer-services li{padding:7px 10px;font-size:12px}}

/* Service chips without hash marks — 2026-08-13 */
.footer-services li::before{content:none}

/* Final handoff polish — 2026-08-14 */
@media (max-width: 620px) {
  .nav { min-height: 63px; }
}

/* Compact final project spacing on mobile — 2026-08-14 */
@media (max-width: 620px) {
  .projects-page .case:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}


/* Site-wide column rhythm — 2026-08-14 */
@media (min-width: 981px) {
  .intro { gap: 32px; }
}

@media (min-width: 621px) and (max-width: 980px) {
  .intro,
  .split,
  .contact-grid,
  .map-wrap { gap: 24px; }

  .portfolio-grid,
  .process,
  .cards-3,
  .social-grid { gap: 16px; }
}

@media (max-width: 620px) {
  .intro,
  .split,
  .map-wrap { gap: 20px; }

  .services,
  .portfolio-grid,
  .process,
  .cards-3,
  .social-grid { gap: 12px; }

  .services {
    border: 0;
    background: transparent;
  }

  .form-grid { gap: 12px; }
  .foot { gap: 0; }
}

/* SEO, privacy and final footer pass — 2026-08-21 */
.footer-company{margin:14px 0 0;color:var(--muted);font-size:13px;line-height:1.75}
.footer-bottom{display:flex;justify-content:space-between;gap:18px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.5}
.footer-bottom a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(181,134,66,.55);text-underline-offset:4px}
.footer-bottom a:hover,.footer-bottom a:focus-visible{color:var(--gold-dark)}
.consent-field a{color:var(--gold-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.legal-content{max-width:960px;margin-inline:auto}
.legal-content .card{padding:clamp(24px,4vw,48px)}
.legal-content h2{margin:34px 0 10px;font-size:clamp(21px,3vw,30px)}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{margin:22px 0 8px;font-size:18px}
.legal-content p,.legal-content li{color:var(--muted);line-height:1.85}
.legal-content ul{margin:8px 0 0;padding-left:22px}
.not-found{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:80px 0;text-align:center;background:linear-gradient(135deg,#f7f2eb,#fff)}
.not-found .error-code{color:var(--gold-dark);font-size:clamp(64px,14vw,140px);font-weight:800;line-height:.9}
.not-found h1{margin:18px 0 10px;font-size:clamp(30px,5vw,54px)}
.not-found p{max-width:620px;margin:0 auto 28px;color:var(--muted);font-size:18px;line-height:1.7}
@media(max-width:620px){.footer-bottom{flex-direction:column;margin-top:22px;padding-top:16px}.footer-company{font-size:12px}.not-found{padding:56px 0}}

/* Balanced mobile footer rhythm — 2026-08-21 */
@media (max-width: 620px) {
  footer { padding: 32px 0 28px; }
  .foot { gap: 0; }
  .footer-logo { width: 172px; margin-bottom: 12px; }
  .foot > div:nth-child(2),
  .footer-services-wrap { margin-top: 24px; }
  .foot > div:nth-child(2) > b,
  .footer-services-wrap > b { margin-bottom: 10px; }
  .foot > div:nth-child(2) > a { margin-top: 7px; line-height: 1.65; }
  .footer-services { gap: 8px; margin-top: 12px; }
  .footer-bottom { gap: 10px; margin-top: 26px; padding-top: 18px; }
}

/* Unified site spacing system — 2026-08-21 */
.home-page .hero { padding: 0; }

@media (min-width: 981px) {
  section { padding: 64px 0; }
  .hero-inner { padding: 72px 0 58px; }
  .hero::after { height: 20%; }
  .hero-proof div { min-height: 96px; padding-block: 18px; }
  .page-hero,
  .projects-page .page-hero {
    min-height: 460px;
    padding: 64px 0 52px;
    align-items: end;
  }
  .cta-band { min-height: 340px; padding: 56px 0; }
  .section-head { margin-bottom: 28px; }
  main > section.wrap + section.wrap { padding-top: 0; }
  .intro,
  .split,
  .contact-grid,
  .map-wrap { gap: 28px; }
  .portfolio-grid,
  .process,
  .cards-3,
  .social-grid { gap: 18px; }
  .services-page .services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }
  .services-page .service { min-height: 260px; height: 100%; }
  .projects-page .case { margin-bottom: 42px; padding-bottom: 42px; }
  .projects-page .case > p { margin-bottom: 22px; }
}

@media (min-width: 621px) and (max-width: 980px) {
  section { padding: 48px 0; }
  .hero::after { height: 20%; }
  .hero-inner { padding: 64px 0 48px; }
  .hero-proof { margin-top: 28px; }
  .hero-proof div { min-height: 86px; padding: 16px 18px; }
  .page-hero,
  .projects-page .page-hero { min-height: 440px; padding: 56px 0 44px; }
  .cta-band { min-height: 330px; padding: 48px 0; }
  .section-head { margin-bottom: 26px; }
  main > section.wrap + section.wrap { padding-top: 0; }
  .services-page .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }
  .services-page .service { height: 100%; }
}

@media (max-width: 620px) {
  section { padding: 34px 0; }
  .hero::after { height: 20%; }
  .home-page .hero-inner { padding: 46px 0 24px !important; }
  .home-page .hero-proof div { min-height: 82px; padding: 15px 16px; }
  .page-hero,
  .projects-page .page-hero { min-height: 400px; padding: 0; }
  .page-hero .wrap { padding: 42px 0 28px; }
  .cta-band { min-height: 320px; padding: 40px 0; }
  .section-head { margin-bottom: 22px; }
  main > section.wrap + section.wrap { padding-top: 0; }
  .services-page .services { grid-template-columns: 1fr; }
  .services-page .service { min-height: 0; }
  .projects-page .case { margin-bottom: 34px; padding-bottom: 30px; }
  .projects-page .case > p { margin-bottom: 16px; }
}

/* Compact project gallery rhythm — 2026-08-21 */
.projects-page main > section.wrap { padding-bottom: 40px; }
.projects-page .case-gallery { gap: 10px; }
.projects-page .case:last-child { margin-bottom: 0; padding-bottom: 0; }

@media (min-width: 981px) {
  .projects-page .case { margin-bottom: 24px; padding-bottom: 24px; }
  .projects-page .case > p { margin-bottom: 16px; }
}

@media (min-width: 621px) and (max-width: 980px) {
  .projects-page main > section.wrap { padding-bottom: 34px; }
  .projects-page .case { margin-bottom: 22px; padding-bottom: 22px; }
  .projects-page .case > p { margin-bottom: 16px; }
  .projects-page .case-gallery { gap: 10px; }
}

@media (max-width: 620px) {
  .projects-page main > section.wrap { padding-bottom: 28px; }
  .projects-page .case { margin-bottom: 18px; padding-bottom: 18px; }
  .projects-page .case > p { margin-bottom: 14px; }
  .projects-page .case-gallery {
    gap: 8px;
    margin-right: -10px;
    padding-right: 10px;
  }
  .projects-page .case-gallery figure,
  .projects-page .case-gallery figure.lead { flex-basis: 84%; }
  .projects-page .case::after { margin-top: 7px; }
}

/* Thai typography guard — keep combining marks such as ้ clear and unclipped */
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3 {
  font-synthesis: none;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

html[lang="th"] h1 { line-height: 1.18; }
html[lang="th"] h2 { line-height: 1.24; }
html[lang="th"] h3 { line-height: 1.34; }

@media (max-width: 620px) {
  html[lang="th"] h1 { line-height: 1.24 !important; }
  html[lang="th"] h2 { line-height: 1.28; }
  html[lang="th"] h3 { line-height: 1.38; }
}

/* PageSpeed handoff pass — responsive heroes and WCAG AA contrast. */
.project-feature-copy .eyebrow { color: #80531f; }
.section-head .eyebrow,
.assurance-copy .eyebrow { color: #fff; }
.process .step .num { color: #fff; }
.process .step p,
body.home-page .assurance-grid span { color: #fff; }
#pdpa .b.ac { background: #744515; color: #fff; }
.pv-section .pv-num { background: #744515; color: #fff; }
body.projects-page .dark .step {
  background: rgba(22, 14, 8, .18);
}
body.projects-page .dark .step p,
body.projects-page .dark .step .num { color: #fff; }

/* Final About process-card correction — keep copy readable and cards compact. */
body.about-page .process { align-items: stretch; }
body.about-page .process .step {
  min-height: 0;
  align-self: start;
}
body.about-page .process .step p {
  color: #665f56 !important;
}
body.home-page .home-process .step .num { color: #80531f; }
body.home-page .home-process .step p { color: #665f56 !important; }
body.home-page .home-process .step { min-height: 0; align-self: start; }
body.home-page .home-process { padding-top: 48px; padding-bottom: 48px; }
/* The homepage keeps the light process cards; restore readable dark copy
   after the global dark-section contrast rules. */
body.home-page .process .step .num { color: #80531f !important; }
body.home-page .process .step p { color: #665f56 !important; }
/* Keep the four process cards visually balanced on desktop without forcing
   headings onto one line. Text can wrap naturally while every card shares
   the same comfortable footprint. */
@media (min-width: 981px) {
  body.about-page .process { gap: 18px; }
  body.about-page .process .step,
  body.home-page .home-process .step,
  body.home-page .process .step {
    min-height: 225px;
    align-self: stretch;
    padding: 16px 18px 15px;
  }
  body.about-page .process,
  body.home-page .home-process .process,
  body.home-page .process {
    align-items: stretch;
  }
}
@media (min-width: 621px) and (max-width: 980px) {
  body.about-page .process .step,
  body.home-page .home-process .step {
    min-height: 225px;
    align-self: stretch;
  }
  body.about-page .process,
  body.home-page .home-process .process {
    align-items: stretch;
  }
}
/* About page layout polish — balanced section rhythm on every viewport. */
body.about-page .intro { gap: 28px; }
body.about-page .section-head { align-items: center; }
body.about-page .vision-points { margin-top: 20px; }

@media (max-width: 620px) {
  body.about-page section { padding-block: 30px; }
  body.about-page .page-hero .wrap { padding: 36px 0 26px; }
  body.about-page .page-hero h1 { font-size: clamp(30px, 9vw, 40px); line-height: 1.12; }
  body.about-page .intro-card { padding: 22px 20px; }
  body.about-page .intro img { height: 260px; min-height: 260px; }
  body.about-page .section-head h2 { white-space: normal; font-size: clamp(28px, 8vw, 38px); line-height: 1.16; }
  body.about-page .section-head p { font-size: 15px; line-height: 1.65; }
  body.about-page .vision-points { gap: 10px; margin-top: 16px; }
  body.home-page .home-process { padding-top: 26px; padding-bottom: 30px; }
}

@media (max-width: 620px) {
  .hero,
  .page-hero,
  .projects-page .page-hero,
  .cta-band {
    background:
      linear-gradient(90deg, rgba(18, 17, 15, .68), rgba(18, 17, 15, .24)),
      var(--hero-mobile-image, var(--hero-image)) center/cover;
  }
}