html[data-design="5"] {
  --ink: #13233f;
  --muted: #57657a;
  --accent: #2058d4;
  --paper: #ffffff;
  --surface: #ffffff;
  --soft: #eef3fb;
  --dark: #13233f;
  --on-dark: #ffffff;
  --dark-muted: #c8d4e9;
  --border: #dce4ef;
  --heading-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 18px;
}
html[data-design="5"] body { font-size: 15px; line-height: 1.6; }
html[data-design="5"] h1 { font-size: clamp(2.7rem, 4.2vw, 4rem); line-height: 1.07; font-weight: 750; }
html[data-design="5"] h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 750; }
html[data-design="5"] h3 { font-weight: 700; }
html[data-design="5"] :focus-visible { outline-color: var(--accent); }
html[data-design="5"] .eyebrow { letter-spacing: .1em; margin-bottom: 14px; }
html[data-design="5"] .topline { background: var(--ink); color: white; border-color: var(--ink); }
html[data-design="5"] .header-inner { min-height: 80px; }
html[data-design="5"] .brand-mark { border-radius: 14px; }
html[data-design="5"] .main-nav { gap: 12px; }
html[data-design="5"] .main-nav > a:not(.button) { padding: 10px 12px; border-radius: 10px; background: var(--soft); }
html[data-design="5"] .button { background: var(--accent); color: white; border-radius: 12px; min-height: 48px; padding: 12px 20px; gap: 10px; }
html[data-design="5"] .button-small { min-height: 42px; padding: 10px 16px; }
html[data-design="5"] .button-light { background: white; color: var(--accent); }
html[data-design="5"] .hero-inner { grid-template-columns: 1.3fr .9fr; gap: 18px; padding-block: 28px; align-items: stretch; }
html[data-design="5"] .hero-copy { padding: 42px; border-radius: 24px; background: var(--ink); color: white; display: flex; flex-direction: column; justify-content: center; }
html[data-design="5"] .hero .eyebrow { color: #afcaff; }
html[data-design="5"] .hero .status-dot { background: #87b1ff; }
html[data-design="5"] .hero h1 { margin-bottom: 22px; }
html[data-design="5"] .hero h1 span { color: #b4caff; }
html[data-design="5"] .hero-description { color: #d3dcef; font-size: 16px; margin-bottom: 24px; }
html[data-design="5"] .hero-actions { gap: 16px; }
html[data-design="5"] .hero-actions > .text-link { font-size: 13px; }
html[data-design="5"] .hero-assurances { color: #c8d4e9; gap: 18px; margin-top: 24px; }
html[data-design="5"] .hero-assurances .icon { color: #a5c5ff; }
html[data-design="5"] .hero-visual { display: flex; flex-direction: column; gap: 16px; }
html[data-design="5"] .hero-image-wrap { flex: 1; }
html[data-design="5"] .hero-image { height: 100%; min-height: 300px; border-radius: 24px; }
html[data-design="5"] .image-label { top: 18px; left: 18px; background: #13233fed; border-radius: 8px; letter-spacing: .08em; }
html[data-design="5"] .hero-note { margin: 0; padding: 24px; border: 0; background: var(--soft); border-radius: 20px; box-shadow: none; }
html[data-design="5"] .note-icon { background: white; color: var(--accent); border-radius: 12px; }
html[data-design="5"] .hero-note a { color: var(--accent); }
html[data-design="5"] .service-strip { background: white; border: 0; }
html[data-design="5"] .strip-inner { padding-block: 0 24px; gap: 12px; }
html[data-design="5"] .strip-inner span { background: var(--soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px 12px; font-size: 11px; }
html[data-design="5"] .section { padding-block: 64px; }
html[data-design="5"] .section-heading { gap: 48px; margin-bottom: 28px; }
html[data-design="5"] .section-heading > p { font-size: 14px; }
html[data-design="5"] .service-grid { grid-template-columns: 1.05fr 1fr; gap: 16px; }
html[data-design="5"] .service-card { padding: 28px; background: var(--soft); border: 0; }
html[data-design="5"] .service-card-top { margin-bottom: 16px; }
html[data-design="5"] .service-card h3 { font-size: 23px; margin-bottom: 12px; }
html[data-design="5"] .service-card p { margin-bottom: 14px; }
html[data-design="5"] .service-card ul { margin-bottom: 18px; }
html[data-design="5"] .service-card .text-link { color: var(--accent); }
html[data-design="5"] .service-card:first-child { grid-row: span 2; background: var(--ink); color: white; }
html[data-design="5"] .service-card:first-child h3 { font-size: 32px; }
html[data-design="5"] .service-card:first-child p,
html[data-design="5"] .service-card:first-child .service-number { color: var(--dark-muted); }
html[data-design="5"] .service-card:first-child li { border-color: #ffffff26; }
html[data-design="5"] .service-card:first-child .icon,
html[data-design="5"] .service-card:first-child .text-link { color: #b4caff; }
html[data-design="5"] .service-card:first-child .text-link { margin-top: 0; margin-bottom: 24px; }
html[data-design="5"] .service-card:first-child::after { content: ""; display: block; min-height: 190px; flex: 1; border-radius: 12px; background: url("../../../images/service-furniture-th.jpg") center / cover; }
html[data-design="5"] .service-card:not(:first-child) ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
html[data-design="5"] .kitchen-section { background: var(--soft); color: var(--ink); }
html[data-design="5"] .kitchen-grid { grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
html[data-design="5"] .kitchen-section .eyebrow { color: var(--accent); }
html[data-design="5"] .kitchen-section h2 span { color: var(--accent); }
html[data-design="5"] .kitchen-copy > p:not(.eyebrow) { color: var(--muted); }
html[data-design="5"] .kitchen-copy .section-lead { color: var(--ink) !important; }
html[data-design="5"] .kitchen-copy .button-light { background: var(--accent); color: white; }
html[data-design="5"] .care-panel { background: var(--ink); color: white; padding: 32px; border: 0; }
html[data-design="5"] .process-grid { gap: 16px; }
html[data-design="5"] .process-grid li { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); }
html[data-design="5"] .step-number { font-weight: 750; margin-bottom: 12px; }
html[data-design="5"] .process-grid h3 { font-size: 18px; }
html[data-design="5"] .labour-panel { padding: 30px; gap: 18px 36px; margin-top: 24px; background: var(--soft); border: 1px solid var(--border); }
html[data-design="5"] .about-section { background: var(--soft); border: 0; }
html[data-design="5"] .about-grid { grid-template-columns: .75fr 1.25fr; gap: 48px; }
html[data-design="5"] .about-image img { height: 300px; border-radius: 20px; }
html[data-design="5"] .about-image > span { background: #13233fed; border-radius: 0 0 20px 20px; letter-spacing: .07em; }
html[data-design="5"] .contact-grid { grid-template-columns: .9fr 1.2fr; gap: 48px; }
html[data-design="5"] .contact-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
html[data-design="5"] .contact-card { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px; margin: 0; background: var(--soft); }
html[data-design="5"] .contact-card strong { font-size: 20px; }
html[data-design="5"] .contact-card .contact-arrow { margin-left: 0; }
html[data-design="5"] .whatsapp-card { background: var(--accent); color: white; border-color: var(--accent); }
html[data-design="5"] .email-link,
html[data-design="5"] .contact-note { grid-column: 1 / -1; }
html[data-design="5"] .email-link { margin-block: 8px 0; }
html[data-design="5"] .site-footer { padding-top: 32px; }

@media (max-width: 1050px) {
  html[data-design="5"] .main-nav { gap: 8px; }
  html[data-design="5"] .main-nav > a:not(.button) { padding-inline: 8px; }
  html[data-design="5"] .hero-copy { padding: 30px; }
  html[data-design="5"] .hero h1 { font-size: 3rem; }
  html[data-design="5"] .hero-image { min-height: 290px; }
  html[data-design="5"] .service-card { padding: 24px; }
  html[data-design="5"] .service-card:not(:first-child) ul { grid-template-columns: 1fr; }
  html[data-design="5"] .section-heading,
  html[data-design="5"] .kitchen-grid,
  html[data-design="5"] .about-grid,
  html[data-design="5"] .contact-grid { gap: 30px; }
  html[data-design="5"] .contact-options { grid-template-columns: 1fr; }
  html[data-design="5"] .contact-card { flex-direction: row; align-items: center; gap: 14px; }
  html[data-design="5"] .contact-card .contact-arrow { margin-left: auto; }
}
@media (max-width: 800px) {
  html[data-design="5"] .header-inner { min-height: auto; }
  html[data-design="5"] .main-nav > a:not(.button) { padding-inline: 10px; }
  html[data-design="5"] .hero-inner { grid-template-columns: 1fr; gap: 16px; padding-block: 24px; }
  html[data-design="5"] .hero-copy { max-width: none; padding: 36px; }
  html[data-design="5"] .hero-visual { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  html[data-design="5"] .hero-image { min-height: 260px; }
  html[data-design="5"] .hero-note { padding: 24px; flex-direction: column; justify-content: center; }
  html[data-design="5"] .strip-inner span { padding: 14px 8px; font-size: 10px; }
  html[data-design="5"] .section { padding-block: 52px; }
  html[data-design="5"] .section-heading,
  html[data-design="5"] .service-grid,
  html[data-design="5"] .kitchen-grid,
  html[data-design="5"] .about-grid,
  html[data-design="5"] .contact-grid { grid-template-columns: 1fr; }
  html[data-design="5"] .service-card:first-child { grid-row: auto; }
  html[data-design="5"] .service-card:first-child::after { min-height: 210px; flex: none; }
  html[data-design="5"] .service-card:not(:first-child) ul { grid-template-columns: 1fr 1fr; }
  html[data-design="5"] .process-grid { gap: 14px; }
  html[data-design="5"] .contact-options { max-width: none; }
  html[data-design="5"] .labour-panel { padding: 28px; }
}
@media (max-width: 480px) {
  html[data-design="5"] .main-nav { gap: 5px; }
  html[data-design="5"] .main-nav > a:not(.button) { padding-inline: 7px; }
  html[data-design="5"] .main-nav .button { padding-inline: 9px; }
  html[data-design="5"] .hero-copy { padding: 26px 22px; border-radius: 20px; }
  html[data-design="5"] .hero h1 { font-size: 2.65rem; }
  html[data-design="5"] .hero-description { font-size: 15px; }
  html[data-design="5"] .hero-actions { gap: 18px; }
  html[data-design="5"] .hero-visual { grid-template-columns: 1fr; }
  html[data-design="5"] .hero-image { height: 240px; min-height: 0; border-radius: 20px; }
  html[data-design="5"] .hero-note { flex-direction: row; justify-content: flex-start; padding: 22px; }
  html[data-design="5"] .strip-inner { grid-template-columns: 1fr; gap: 8px; }
  html[data-design="5"] .strip-inner span { flex-direction: row; justify-content: flex-start; padding: 12px 16px; font-size: 11px; }
  html[data-design="5"] .service-card:not(:first-child) ul { grid-template-columns: 1fr; }
  html[data-design="5"] .service-card:first-child h3 { font-size: 28px; }
  html[data-design="5"] .care-panel,
  html[data-design="5"] .labour-panel { padding: 24px; }
  html[data-design="5"] .about-image img { height: 260px; }
  html[data-design="5"] .contact-card { padding: 22px 16px; gap: 12px; }
  html[data-design="5"] .contact-card strong { font-size: 19px; }
}