@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Noto+Serif+TC:wght@600;700;900&display=swap');

:root {
    --smart-accent: #157A6E;
    --smart-accent-dark: #0F5F57;
    --smart-gold: #C6A15B;
    --smart-ink: #181410;
    --smart-muted: #6C6254;
    --smart-line: #E9DFD2;
    --smart-paper: #FBF9F5;
    --smart-soft: #F3EEE4;
    --smart-warm: #FBF1E1;
    --smart-radius: 8px;
    --smart-shadow: 0 22px 60px -26px rgba(28, 20, 8, .38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.smart-page-body {
    margin: 0;
    min-width: 320px;
    color: var(--smart-ink);
    background: var(--smart-paper);
    font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
body.smart-page-body.modal-open { overflow: hidden; }
.smart-shell { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }

/* ── Header ─────────────────────────────────────────── */
.smart-header {
    position: sticky; top: 0; z-index: 30;
    border-bottom: 1px solid rgba(24, 20, 16, .1);
    background: rgba(251, 249, 245, .86);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.smart-header-row { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.smart-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--smart-ink); min-width: 0; }
.smart-brand-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid var(--smart-line); background: var(--smart-soft); flex: 0 0 auto; box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.smart-brand-name { font-family: "Noto Serif TC", Georgia, serif; font-size: 19px; font-weight: 900; letter-spacing: .4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-nav { display: flex; align-items: center; gap: 26px; }
.smart-nav a { position: relative; color: var(--smart-muted); text-decoration: none; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.smart-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--smart-gold); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.smart-nav a:hover, .smart-nav a:focus-visible { color: var(--smart-ink); }
.smart-nav a:hover::after, .smart-nav a:focus-visible::after { transform: scaleX(1); }
.smart-header-cta, .smart-primary-action, .smart-secondary-action, .smart-contact-action {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 22px; border-radius: var(--smart-radius);
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: all .2s ease;
}
.smart-header-cta, .smart-primary-action { border: 1px solid var(--smart-accent); color: #fff; background: var(--smart-accent); box-shadow: 0 10px 24px -12px var(--smart-accent); }
.smart-header-cta:hover, .smart-primary-action:hover { background: var(--smart-accent-dark); border-color: var(--smart-accent-dark); transform: translateY(-1px); }
.smart-secondary-action { border: 1px solid rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.08); }
.smart-secondary-action:hover { background: rgba(255,255,255,.16); }
.smart-menu-button { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--smart-line); border-radius: var(--smart-radius); background: #fff; color: var(--smart-ink); font-size: 18px; cursor: pointer; }

/* ── Hero ───────────────────────────────────────────── */
.smart-hero {
    position: relative; min-height: 84vh; display: flex; align-items: flex-end;
    overflow: hidden; color: #fff; background: #161009;
    isolation: isolate;
}
.smart-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.smart-hero-shade { position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(180deg, rgba(16,10,4,.36) 0%, rgba(16,10,4,.30) 40%, rgba(16,10,4,.9) 100%),
    radial-gradient(120% 80% at 75% 10%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(115deg, rgba(16,10,4,.55), transparent 55%);
}
.smart-hero-shade::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 30px 30px; mix-blend-mode: overlay; opacity: .4; }
.smart-hero-content { position: relative; z-index: 1; width: min(1200px, calc(100% - 48px)); margin: 0 auto; padding: 120px 0 92px; animation: smartHeroIn .9s .1s ease both; }
.smart-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 24px; color: #F0E3C6; font-family: "Noto Serif TC", Georgia, serif; font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.smart-eyebrow::before { content: ''; width: 40px; height: 2px; background: var(--smart-gold); }
.smart-hero h1 { max-width: 840px; margin: 0; font-family: "Noto Serif TC", Georgia, serif; font-size: clamp(44px, 6.2vw, 76px); line-height: 1.12; font-weight: 900; letter-spacing: -.5px; }
.smart-hero-summary { max-width: 640px; margin: 24px 0 0; font-size: 19px; line-height: 1.85; color: rgba(255,255,255,.92); }
.smart-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.smart-hero-actions .smart-primary-action { background: #fff; border-color: #fff; color: var(--smart-ink); box-shadow: none; }
.smart-hero-actions .smart-primary-action:hover { color: var(--smart-accent-dark); transform: translateY(-1px); }
.smart-hero-actions .smart-secondary-action { color: #fff; }
@keyframes smartHeroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ── Sections ───────────────────────────────────────── */
.smart-section { position: relative; padding: 104px 0; }
.smart-section.soft { background: linear-gradient(180deg, var(--smart-soft), #EEF2F5); }
.smart-section.warm { background: linear-gradient(180deg, var(--smart-warm), #FFF1DE); }
.smart-section-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(240px, .75fr); gap: 40px; align-items: end; margin-bottom: 44px; }
.smart-section-kicker { margin: 0 0 12px; color: var(--smart-accent); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.smart-section-heading h2 { margin: 0; font-family: "Noto Serif TC", Georgia, serif; font-size: clamp(32px, 3.4vw, 44px); font-weight: 900; line-height: 1.2; letter-spacing: -.4px; }
.smart-section-heading > p, .smart-section-heading > div > p { margin: 0; color: var(--smart-muted); font-size: 16px; }
.smart-rich-copy { max-width: 900px; color: #334155; font-size: 17.5px; overflow-wrap: anywhere; }
.smart-rich-copy p { margin: 0 0 16px; }
.smart-rich-copy p:last-child { margin-bottom: 0; }
.smart-rich-copy h2, .smart-rich-copy h3 { font-family: "Noto Serif TC", Georgia, serif; color: var(--smart-ink); }
.smart-rich-copy h2 { font-size: 28px; margin: 30px 0 12px; }
.smart-rich-copy h3 { font-size: 22px; margin: 24px 0 10px; }
.smart-rich-copy ul, .smart-rich-copy ol { padding-left: 24px; }

/* ── Services ───────────────────────────────────────── */
.smart-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.smart-service { border: 1px solid var(--smart-line); border-radius: var(--smart-radius); background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .25s ease, box-shadow .25s ease; }
.smart-service:hover { transform: translateY(-6px); box-shadow: var(--smart-shadow); }
.smart-service img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.smart-service-copy { padding: 22px 22px 24px; }
.smart-service h3 { margin: 0; font-family: "Noto Serif TC", Georgia, serif; font-size: 19px; font-weight: 900; line-height: 1.4; }
.smart-service p { margin: 10px 0 0; color: var(--smart-muted); font-size: 14.5px; }
.smart-service-meta { margin: 16px 0 0; display: inline-flex; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--smart-accent) 12%, #fff); color: var(--smart-accent-dark); font-size: 13px; font-weight: 700; }

/* ── FAQ ────────────────────────────────────────────── */
.smart-faq-list { border-top: 1px solid var(--smart-line); }
.smart-faq { border-bottom: 1px solid var(--smart-line); }
.smart-faq summary { position: relative; padding: 22px 42px 22px 0; color: var(--smart-ink); font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; transition: color .2s ease; }
.smart-faq summary:hover { color: var(--smart-accent); }
.smart-faq summary::-webkit-details-marker { display: none; }
.smart-faq summary::after { content: '+'; position: absolute; right: 8px; top: 18px; color: var(--smart-accent); font-size: 24px; font-weight: 400; transition: transform .2s ease; }
.smart-faq[open] summary::after { content: '−'; }
.smart-faq > div { padding: 0 0 22px; color: var(--smart-muted); font-size: 16px; }

/* ── Gallery ────────────────────────────────────────── */
.smart-image-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: 190px; gap: 12px; }
.smart-image-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--smart-radius); display: block; }
.smart-image-grid img:first-child { grid-row: span 2; }

/* ── Articles ───────────────────────────────────────── */
.smart-article-list { border-top: 1px solid var(--smart-line); }
.smart-article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; width: 100%; padding: 26px 0; border: 0; border-bottom: 1px solid var(--smart-line); background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; transition: padding .2s ease; }
.smart-article:hover { padding-left: 6px; }
.smart-article-title { display: block; margin: 0 0 8px; font-family: "Noto Serif TC", Georgia, serif; font-size: 22px; font-weight: 900; line-height: 1.4; transition: color .2s ease; }
.smart-article:hover .smart-article-title, .smart-article:focus-visible .smart-article-title { color: var(--smart-accent); }
.smart-article-excerpt { display: -webkit-box; overflow: hidden; color: var(--smart-muted); font-size: 15px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.smart-article-date { color: var(--smart-muted); font-size: 14px; white-space: nowrap; align-self: center; }
.smart-empty { padding: 28px 0; color: var(--smart-muted); border-top: 1px solid var(--smart-line); border-bottom: 1px solid var(--smart-line); }

/* ── Contact ────────────────────────────────────────── */
.smart-contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); gap: 60px; align-items: start; }
.smart-contact-list { display: grid; gap: 2px; }
.smart-contact-line { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(14,20,32,.1); }
.smart-contact-line b { color: var(--smart-muted); font-size: 14px; font-weight: 700; }
.smart-contact-line span, .smart-contact-line a { color: var(--smart-ink); overflow-wrap: anywhere; text-decoration: none; }
.smart-contact-line a:hover { color: var(--smart-accent); }
.smart-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; align-content: start; padding: 26px; border: 1px solid var(--smart-line); border-radius: var(--smart-radius); background: var(--smart-soft); }
.smart-contact-action.outline { color: var(--smart-accent-dark); border-color: color-mix(in srgb, var(--smart-accent) 40%, #fff); background: #fff; }
.smart-contact-action.outline:hover { color: #fff; background: var(--smart-accent); border-color: var(--smart-accent); }
.smart-contact-action.chat { color: var(--smart-ink); border-color: var(--smart-ink); background: #fff; }
.smart-contact-action.chat:hover { color: #fff; background: var(--smart-ink); }

/* ── Brand story / Value props / Closing CTA ────────── */
.smart-story { max-width: 1000px; }
.smart-story .smart-section-kicker { margin-bottom: 20px; }
.smart-story-text { margin: 0; font-family: "Noto Serif TC", Georgia, serif; font-size: clamp(23px, 2.7vw, 33px); line-height: 1.85; color: var(--smart-ink); }
.smart-value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.smart-value { padding: 32px 28px; border: 1px solid var(--smart-line); border-radius: var(--smart-radius); background: #fff; box-shadow: 0 1px 2px rgba(28,20,8,.03); }
.smart-value-mark { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--smart-gold) 18%, #fff); color: var(--smart-gold); font-size: 20px; }
.smart-value h3 { margin: 20px 0 0; font-family: "Noto Serif TC", Georgia, serif; font-size: 21px; font-weight: 900; line-height: 1.4; }
.smart-value p { margin: 12px 0 0; color: var(--smart-muted); font-size: 15.5px; }
.smart-cta-band { background: radial-gradient(120% 160% at 50% -20%, #2A2011, #17110A 68%); color: #fff; text-align: center; }
.smart-cta-band .smart-section-kicker { color: var(--smart-gold); }
.smart-cta-title { max-width: 860px; margin: 0 auto 30px; font-family: "Noto Serif TC", Georgia, serif; font-size: clamp(30px, 4vw, 48px); font-weight: 900; line-height: 1.3; }
.smart-cta-band .smart-primary-action { background: #fff; border-color: #fff; color: var(--smart-ink); box-shadow: none; }
.smart-cta-band .smart-primary-action:hover { color: var(--smart-accent-dark); transform: translateY(-1px); }

/* ── Footer ─────────────────────────────────────────── */
.smart-footer { padding: 34px 0; border-top: 1px solid var(--smart-line); color: var(--smart-muted); font-size: 14px; }
.smart-footer-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.smart-footer-brand { color: var(--smart-muted); text-decoration: none; }
.smart-footer-brand:hover { color: var(--smart-ink); }

/* ── Article dialog ─────────────────────────────────── */
.smart-article-overlay { position: fixed; inset: 0; z-index: 100; display: none; padding: 24px; background: rgba(10, 16, 24, .7); backdrop-filter: blur(4px); overflow-y: auto; }
.smart-article-overlay.is-open { display: grid; place-items: center; }
.smart-article-dialog { width: min(780px, 100%); max-height: min(800px, calc(100vh - 48px)); overflow-y: auto; background: #fff; border-radius: var(--smart-radius); box-shadow: 0 40px 90px -30px rgba(0,0,0,.5); }
.smart-article-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 30px 34px 22px; border-bottom: 1px solid var(--smart-line); }
.smart-article-dialog-head h2 { margin: 0; font-family: "Noto Serif TC", Georgia, serif; font-size: 30px; font-weight: 900; line-height: 1.35; }
.smart-article-dialog-date { margin: 10px 0 0; color: var(--smart-muted); font-size: 14px; }
.smart-dialog-close { flex: 0 0 auto; min-height: 38px; padding: 7px 14px; border: 1px solid var(--smart-line); border-radius: var(--smart-radius); background: #fff; color: var(--smart-ink); font: inherit; cursor: pointer; }
.smart-dialog-close:hover { border-color: var(--smart-ink); }
.smart-article-dialog-image { display: block; width: 100%; max-height: 430px; object-fit: cover; }
.smart-article-dialog-body { padding: 30px 34px 38px; }
.smart-article-dialog-link { display: inline-flex; margin-top: 26px; color: var(--smart-accent-dark); font-weight: 700; text-decoration: none; }

/* ── Template variants ─────────────────────────────── */
.smart-tpl-bold { --smart-ink:#0B0B0C; --smart-paper:#0B0B0C; --smart-muted:#B9BEC8; --smart-line:#2A2B30; --smart-soft:#121317; --smart-warm:#17181D; color:#fff; }
.smart-tpl-bold .smart-header { background: rgba(11,11,12,.92); border-color: rgba(255,255,255,.08); }
.smart-tpl-bold .smart-brand, .smart-tpl-bold .smart-brand-name { color:#fff; }
.smart-tpl-bold .smart-nav a { color:#C6C9D1; }
.smart-tpl-bold .smart-nav a:hover { color:#fff; }
.smart-tpl-bold .smart-header-cta, .smart-tpl-bold .smart-primary-action { background:#fff; color:#0B0B0C; border-color:#fff; box-shadow:none; }
.smart-tpl-bold .smart-section { padding: 112px 0; }
.smart-tpl-bold .smart-section-heading h2 { font-size: clamp(36px, 4.2vw, 56px); }
.smart-tpl-bold .smart-service, .smart-tpl-bold .smart-value { background:#121317; border-color:#2A2B30; }
.smart-tpl-bold .smart-service h3, .smart-tpl-bold .smart-value h3, .smart-tpl-bold .smart-article-title, .smart-tpl-bold .smart-faq summary { color:#fff; }
.smart-tpl-bold .smart-service p, .smart-tpl-bold .smart-value p { color:#B9BEC8; }
.smart-tpl-bold .smart-rich-copy { color:#D3D6DC; }
.smart-tpl-bold .smart-cta-band { background: radial-gradient(120% 160% at 50% -20%, #23252B, #0B0B0C 72%); }

.smart-tpl-minimal { --smart-paper:#FFFFFF; --smart-ink:#1A1A1A; --smart-muted:#8A8A8A; --smart-line:#EEEEEE; --smart-soft:#FAFAFA; --smart-warm:#FAFAFA; --smart-accent:#1A1A1A; --smart-accent-dark:#000; }
.smart-tpl-minimal .smart-hero { min-height: 70vh; }
.smart-tpl-minimal .smart-hero h1 { font-family: "Noto Sans TC", sans-serif; font-weight: 400; letter-spacing: -1.5px; }
.smart-tpl-minimal .smart-eyebrow { letter-spacing: .3em; }
.smart-tpl-minimal .smart-header-cta, .smart-tpl-minimal .smart-primary-action { background:#1A1A1A; border-color:#1A1A1A; box-shadow:none; }
.smart-tpl-minimal .smart-section { padding: 84px 0; }
.smart-tpl-minimal .smart-nav a { font-weight: 400; }
.smart-tpl-minimal .smart-service, .smart-tpl-minimal .smart-value { box-shadow:none; border-color:#EEEEEE; }
.smart-tpl-minimal .smart-value-mark { background:#fff; color:#1A1A1A; border:1px solid #EEEEEE; }
.smart-tpl-minimal .smart-contact-actions { background:#FAFAFA; }

.smart-tpl-gallery { --smart-paper:#0E0E0F; --smart-ink:#F4F4F5; --smart-muted:#A0A0A6; --smart-line:#26262B; --smart-soft:#141416; --smart-warm:#141416; color:#F4F4F5; }
.smart-tpl-gallery .smart-header { background: rgba(14,14,15,.92); border-color: rgba(255,255,255,.08); }
.smart-tpl-gallery .smart-brand, .smart-tpl-gallery .smart-brand-name { color:#F4F4F5; }
.smart-tpl-gallery .smart-nav a { color:#A0A0A6; }
.smart-tpl-gallery .smart-nav a:hover { color:#fff; }
.smart-tpl-gallery .smart-header-cta, .smart-tpl-gallery .smart-primary-action { background:#fff; color:#0E0E0F; border-color:#fff; box-shadow:none; }
.smart-tpl-gallery .smart-hero { min-height: 92vh; }
.smart-tpl-gallery .smart-image-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; }
.smart-tpl-gallery .smart-section-heading h2 { font-size: clamp(34px, 4vw, 52px); }
.smart-tpl-gallery .smart-service, .smart-tpl-gallery .smart-value { background:#141416; border-color:#26262B; color:#F4F4F5; }
.smart-tpl-gallery .smart-service h3, .smart-tpl-gallery .smart-service p, .smart-tpl-gallery .smart-value h3, .smart-tpl-gallery .smart-value p { color:#F4F4F5; }
.smart-tpl-gallery .smart-rich-copy { color:#E5E5E8; }
.smart-tpl-gallery .smart-faq summary, .smart-tpl-gallery .smart-article-title, .smart-tpl-gallery .smart-contact-line span, .smart-tpl-gallery .smart-contact-line a { color:#F4F4F5; }
.smart-tpl-gallery .smart-footer { border-color:#26262B; color:#A0A0A6; }

/* ── Inline editor chrome (owner / preview only) ────── */
.smart-edit-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 60; padding: 11px 18px; border: 1px solid var(--smart-accent); border-radius: 999px; background: var(--smart-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px -14px var(--smart-accent); }
.smart-edit-toggle:hover { background: var(--smart-accent-dark); }
.smart-edit-bar { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 80; display: none; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--smart-line); border-radius: 999px; background: rgba(251,249,245,.96); box-shadow: 0 18px 40px -20px rgba(15,23,42,.35); }
.smart-edit-title { padding: 0 6px; color: var(--smart-muted); font-size: 13px; font-weight: 700; }
.smart-edit-btn { min-height: 38px; padding: 7px 16px; border: 1px solid var(--smart-accent); border-radius: 999px; background: var(--smart-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.smart-edit-btn:hover { background: var(--smart-accent-dark); }
.smart-edit-btn--ghost { border-color: var(--smart-line); background: #fff; color: var(--smart-ink); }
.smart-edit-btn--ghost:hover { border-color: var(--smart-ink); background: #fff; color: var(--smart-ink); }
.smart-section-controls { position: absolute; top: 14px; right: 14px; z-index: 12; display: none; gap: 4px; padding: 4px; border: 1px solid var(--smart-line); border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 8px 20px -12px rgba(15,23,42,.3); }
.smart-section-controls button { width: 32px; height: 32px; border: 1px solid var(--smart-line); border-radius: 6px; background: #fff; color: var(--smart-ink); font: inherit; cursor: pointer; }
.smart-section-controls button:hover { border-color: var(--smart-accent); color: var(--smart-accent); }
body.smart-editing .smart-section-controls { display: flex; }
body.smart-editing [contenteditable] { outline: 1px dashed color-mix(in srgb, var(--smart-accent) 55%, transparent); outline-offset: 4px; border-radius: 3px; min-width: 8px; }
body.smart-editing [contenteditable]:focus { outline: 2px solid var(--smart-accent); background: rgba(255,255,255,.5); }
.smart-img-editable { outline: 2px dashed color-mix(in srgb, var(--smart-accent) 60%, transparent); outline-offset: -4px; cursor: pointer; }
.smart-img-editable:hover { outline: 3px solid var(--smart-accent); }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
    .smart-shell, .smart-hero-content { width: min(100% - 32px, 1200px); }
    .smart-header-row { min-height: 66px; }
    .smart-menu-button { display: inline-flex; align-items: center; justify-content: center; }
    .smart-nav { display: none; position: absolute; top: 66px; left: 0; right: 0; padding: 12px 16px 18px; border-bottom: 1px solid var(--smart-line); background: #fff; flex-wrap: wrap; gap: 6px 22px; box-shadow: 0 18px 30px -20px rgba(15,23,42,.2); }
    .smart-nav.is-open { display: flex; }
    .smart-nav a { padding: 7px 0; }
    .smart-header-cta { display: none; }
    .smart-hero { min-height: 74vh; }
    .smart-hero-content { padding: 96px 0 62px; }
    .smart-hero h1 { font-size: clamp(38px, 8vw, 54px); }
    .smart-hero-summary { font-size: 17px; }
    .smart-section { padding: 68px 0; }
    .smart-section-heading { grid-template-columns: 1fr; gap: 12px; margin-bottom: 30px; }
    .smart-section-heading h2 { font-size: clamp(30px, 7vw, 38px); }
    .smart-service-grid { grid-template-columns: 1fr 1fr; }
    .smart-value-grid { grid-template-columns: 1fr 1fr; }
    .smart-image-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
    .smart-image-grid img:first-child { grid-column: 1 / -1; grid-row: auto; }
    .smart-contact-layout { grid-template-columns: 1fr; gap: 30px; }
    .smart-footer-row { align-items: flex-start; flex-direction: column; gap: 6px; }
}

@media (max-width: 560px) {
    .smart-brand-name { font-size: 16px; max-width: 185px; }
    .smart-hero { min-height: 68vh; }
    .smart-hero h1 { font-size: 32px; }
    .smart-hero-summary { font-size: 16px; }
    .smart-service-grid { grid-template-columns: 1fr; }
    .smart-value-grid { grid-template-columns: 1fr; }
    .smart-story-text { font-size: 22px; }
    .smart-section-heading h2 { font-size: 28px; }
    .smart-contact-line { grid-template-columns: 1fr; gap: 2px; }
    .smart-article { grid-template-columns: 1fr; gap: 6px; }
    .smart-article-date { align-self: auto; }
    .smart-article-overlay { padding: 14px; }
    .smart-article-dialog-head { padding: 22px 20px 16px; }
    .smart-article-dialog-head h2 { font-size: 24px; }
    .smart-article-dialog-body { padding: 22px 20px 30px; }
}