:root {
    --marketing-primary: var(--brand-action, #e96745);
    --marketing-primary-hover: var(--brand-action-hover, #dc5b39);
    --marketing-primary-foreground: var(--brand-action-foreground, #ffffff);
    --marketing-primary-ink: var(--brand-action-ink, #a63b26);
    --marketing-primary-soft: #fff1eb;
    --marketing-canvas: #fff9f5;
    --marketing-surface: #ffffff;
    --marketing-soft: #faf9f7;
    --marketing-text: #1a1a1a;
    --marketing-secondary: #374151;
    --marketing-muted: #6b7280;
    --marketing-line: #dee2e6;
    --marketing-line-strong: #c9cfd6;
    --marketing-error: #963b27;
}

body { background: var(--marketing-canvas); color: var(--marketing-text); }

.marketing-page {
    min-height: 70vh;
    background: var(--marketing-canvas);
    color: var(--marketing-text);
    color-scheme: light;
    font-family: var(--font-family-base, "Noto Sans Thai", system-ui, sans-serif);
}

.marketing-shell {
    width: min(calc(100% - 40px), 1120px);
    margin: 0 auto;
}

.marketing-hero {
    padding: clamp(54px, 8vw, 88px) 0;
    border-bottom: 1px solid var(--marketing-line-strong);
    background: var(--marketing-canvas);
}

.marketing-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    gap: clamp(42px, 8vw, 88px);
    align-items: end;
}

.marketing-kicker,
.marketing-section-index {
    margin: 0 0 11px;
    color: var(--marketing-primary-ink);
    font-size: .65rem;
    font-weight: 760;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.marketing-hero h1 {
    max-width: 720px;
    margin: 0;
    color: var(--marketing-text);
    font-size: clamp(2.6rem, 6vw, 4.7rem);
    font-weight: 790;
    letter-spacing: -.05em;
    line-height: 1.05;
}

.marketing-hero-lead {
    margin: 0;
    color: var(--marketing-secondary);
    font-size: .9rem;
    line-height: 1.8;
}

.marketing-hero-actions,
.marketing-card-actions,
.marketing-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.marketing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 41px;
    padding: 8px 13px;
    border: 1px solid var(--marketing-line-strong);
    border-radius: 4px;
    background: var(--marketing-surface);
    color: var(--marketing-secondary);
    font: inherit;
    font-size: .72rem;
    font-weight: 730;
    line-height: 1.3;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}

.marketing-button:hover {
    border-color: var(--marketing-primary);
    background: var(--marketing-primary-soft);
    color: var(--marketing-text);
    text-decoration: none;
}

.marketing-button:disabled {
    opacity: .62;
    cursor: wait;
}

.marketing-button-primary {
    border-color: var(--marketing-primary);
    background: var(--marketing-primary);
    color: var(--marketing-primary-foreground);
}

.marketing-button-primary:hover {
    border-color: var(--marketing-primary-hover);
    background: var(--marketing-primary-hover);
    color: var(--marketing-primary-foreground);
}

.marketing-section {
    padding: clamp(50px, 7vw, 76px) 0;
    border-bottom: 1px solid var(--marketing-line-strong);
    background: var(--marketing-surface);
}

.marketing-section.is-canvas { background: var(--marketing-canvas); }

.marketing-section-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
    gap: 36px;
    align-items: end;
    margin-bottom: 28px;
}

.marketing-section-header h2 {
    max-width: 680px;
    margin: 0;
    color: var(--marketing-text);
    font-size: clamp(1.7rem, 3.5vw, 2.5rem);
    font-weight: 770;
    letter-spacing: -.04em;
    line-height: 1.2;
}

.marketing-section-header > p {
    margin: 0;
    color: var(--marketing-muted);
    font-size: .74rem;
    line-height: 1.65;
}

.marketing-inline-link {
    color: var(--marketing-primary-ink);
    font-weight: 700;
    text-decoration: none;
}
.marketing-inline-link:hover { color: var(--marketing-text); }

/* Services */
.service-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.service-choice-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: clamp(22px, 3vw, 30px);
    border: 1px solid var(--marketing-line-strong);
    border-radius: 8px;
    background: var(--marketing-surface);
}

.service-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.service-card-number { color: var(--marketing-muted); font-size: .63rem; font-weight: 740; }
.service-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--marketing-line-strong); border-radius: 4px; background: var(--marketing-soft); color: var(--marketing-primary-ink); font-size: 1rem; }
.service-choice-card h2 { margin: 0 0 8px; color: var(--marketing-text); font-size: 1.25rem; font-weight: 760; letter-spacing: -.025em; }
.service-choice-card > p { margin: 0; color: var(--marketing-muted); font-size: .75rem; line-height: 1.7; }
.service-fit-label { margin: 22px 0 8px; color: var(--marketing-secondary); font-size: .66rem; font-weight: 730; }

.service-scope-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.service-scope-list li { display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 7px; color: var(--marketing-secondary); font-size: .69rem; line-height: 1.5; }
.service-scope-list i { color: var(--marketing-primary-ink); font-size: .7rem; }
.service-choice-card .marketing-card-actions { margin-top: auto; padding-top: 24px; }

.service-process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--marketing-line-strong);
    border-radius: 6px;
    background: var(--marketing-surface);
}
.service-process-step { padding: 19px; }
.service-process-step + .service-process-step { border-left: 1px solid var(--marketing-line); }
.service-process-step span { color: var(--marketing-primary-ink); font-size: .61rem; font-weight: 760; }
.service-process-step h3 { margin: 13px 0 5px; color: var(--marketing-text); font-size: .78rem; font-weight: 740; }
.service-process-step p { margin: 0; color: var(--marketing-muted); font-size: .67rem; line-height: 1.55; }

/* About */
.about-mission-card {
    padding: 22px;
    border: 1px solid var(--marketing-line-strong);
    border-left: 3px solid var(--marketing-primary);
    border-radius: 4px;
    background: var(--marketing-surface);
}
.about-mission-card blockquote { margin: 0; color: var(--marketing-text); font-size: 1.1rem; font-weight: 720; letter-spacing: -.02em; line-height: 1.5; }
.about-mission-card p { margin: 11px 0 0; color: var(--marketing-muted); font-size: .69rem; line-height: 1.6; }
.about-original-vision { max-width: 820px; }
.about-original-vision .about-mission-card { max-width: 620px; margin: 0 auto; text-align: center; }
.about-original-vision .about-mission-card blockquote { font-size: clamp(1.45rem, 3vw, 2rem); }
.about-original-intro { max-width: 760px; margin: 26px auto 0; color: var(--marketing-secondary); text-align: center; }

.about-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--marketing-line-strong);
    border-radius: 6px;
    background: var(--marketing-surface);
}
.about-principle { padding: 21px; }
.about-principle + .about-principle { border-left: 1px solid var(--marketing-line); }
.about-principle span { color: var(--marketing-primary-ink); font-size: .61rem; font-weight: 760; }
.about-principle h3 { margin: 16px 0 6px; color: var(--marketing-text); font-size: .82rem; font-weight: 740; }
.about-principle p { margin: 0; color: var(--marketing-muted); font-size: .68rem; line-height: 1.6; }

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.team-member-card {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 17px;
    align-items: start;
    padding: 18px;
    border: 1px solid var(--marketing-line-strong);
    border-radius: 6px;
    background: var(--marketing-surface);
}
.team-member-photo,
.team-member-fallback { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border: 1px solid var(--marketing-line-strong); border-radius: 6px; background: var(--marketing-soft); color: var(--marketing-primary-ink); object-fit: cover; font-size: 1.1rem; font-weight: 760; filter: grayscale(.2); }
.team-member-card h3 { margin: 1px 0 3px; color: var(--marketing-text); font-size: .83rem; font-weight: 750; }
.team-member-role { margin: 0 0 8px; color: var(--marketing-primary-ink); font-size: .65rem; font-weight: 700; }
.team-member-bio { margin: 0; color: var(--marketing-muted); font-size: .68rem; line-height: 1.6; }
.team-empty { padding: 24px; border: 1px solid var(--marketing-line-strong); border-left: 3px solid var(--marketing-primary); background: var(--marketing-soft); }
.team-empty h3 { margin: 0 0 4px; color: var(--marketing-text); font-size: .83rem; }
.team-empty p { margin: 0; color: var(--marketing-muted); font-size: .7rem; }

.marketing-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(22px, 4vw, 32px);
    border: 1px solid var(--marketing-line-strong);
    border-radius: 6px;
    background: var(--marketing-surface);
}
.marketing-cta h2 { margin: 0 0 5px; color: var(--marketing-text); font-size: 1.2rem; font-weight: 760; letter-spacing: -.025em; }
.marketing-cta p { margin: 0; color: var(--marketing-muted); font-size: .72rem; line-height: 1.6; }
.marketing-cta-actions { flex: 0 0 auto; margin-top: 0; }

/* Contact */
.contact-layout {
    display: block;
    max-width: 860px;
}

.contact-hero-copy { text-align: center; }
.contact-hero-copy h1 { margin-right: auto; margin-left: auto; }

.contact-form-card,
.contact-aside-card {
    border: 1px solid var(--marketing-line-strong);
    border-radius: 8px;
    background: var(--marketing-surface);
}
.contact-form-card { padding: clamp(21px, 4vw, 32px); }
.contact-form-header { margin-bottom: 22px; }
.contact-form-header h2 { margin: 0 0 6px; color: var(--marketing-text); font-size: 1.25rem; font-weight: 760; letter-spacing: -.025em; }
.contact-form-header p { margin: 0; color: var(--marketing-muted); font-size: .71rem; line-height: 1.6; }

.contact-message,
.contact-form-error { margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--marketing-line); border-radius: 4px; background: var(--marketing-soft); color: var(--marketing-secondary); font-size: .72rem; line-height: 1.5; }
.contact-message.is-error,
.contact-form-error { border-color: #f1b8a8; background: var(--marketing-primary-soft); color: var(--marketing-error); }
.contact-form-error p { margin: 0; }

.contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-field { min-width: 0; }
.contact-field.is-full { grid-column: 1 / -1; }
.contact-label { display: block; margin-bottom: 6px; color: var(--marketing-text); font-size: .72rem; font-weight: 720; }
.contact-form-card .form-control,
.contact-form-card .form-select {
    display: block;
    width: 100%;
    min-height: 43px;
    padding: 9px 11px;
    border: 1px solid var(--marketing-line-strong);
    border-radius: 4px;
    background: var(--marketing-surface);
    color: var(--marketing-text);
    font: inherit;
    font-size: .78rem;
    box-shadow: none;
}
.contact-form-card textarea.form-control { min-height: 130px; resize: vertical; }
.contact-form-card :is(.form-control, .form-select)::placeholder { color: #9ca3af; }
.contact-form-card :is(.form-control, .form-select):focus { border-color: var(--marketing-primary); outline: 2px solid rgba(255, 122, 89, .16); outline-offset: 0; box-shadow: none; }
.contact-form-card [aria-invalid="true"] { border-color: var(--marketing-primary); }
.contact-field-error { display: block; margin-top: 5px; color: var(--marketing-error); font-size: .65rem; line-height: 1.4; }
.contact-form-footer { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--marketing-line); }
.contact-privacy-note { max-width: 360px; margin: 0; color: var(--marketing-muted); font-size: .61rem; line-height: 1.5; }

.contact-direct-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 15px;
    padding: 15px 2px 0;
    border-top: 1px solid var(--marketing-line);
}
.contact-direct-links a { display: inline-flex; align-items: center; gap: 8px; color: var(--marketing-secondary); font-size: .86rem; font-weight: 650; text-decoration: none; }
.contact-direct-links a:hover { color: var(--marketing-primary-ink); }
.contact-direct-links i { color: var(--marketing-muted); }

.contact-map-section { padding-top: clamp(34px, 5vw, 52px); padding-bottom: clamp(34px, 5vw, 52px); }
.contact-map-frame { overflow: hidden; border: 1px solid var(--marketing-line-strong); border-radius: 8px; background: var(--marketing-surface); }
.contact-map-frame iframe { display: block; width: 100%; min-height: 360px; }

.contact-aside { display: grid; gap: 12px; }
.contact-aside-card { padding: 19px; }
.contact-aside-card h2 { margin: 0 0 12px; color: var(--marketing-text); font-size: .85rem; font-weight: 750; }
.contact-channel-list { display: grid; gap: 8px; }
.contact-channel { display: grid; grid-template-columns: 34px minmax(0, 1fr) 15px; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--marketing-line); border-radius: 4px; color: var(--marketing-secondary); text-decoration: none; }
.contact-channel:hover { border-color: var(--marketing-primary); background: var(--marketing-primary-soft); color: var(--marketing-text); }
.contact-channel-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--marketing-line-strong); border-radius: 4px; background: var(--marketing-soft); color: var(--marketing-primary-ink); }
.contact-channel-copy { min-width: 0; }
.contact-channel-copy strong { display: block; color: var(--marketing-text); font-size: .7rem; font-weight: 730; }
.contact-channel-copy > span { display: block; margin-top: 2px; overflow-wrap: anywhere; color: var(--marketing-muted); font-size: .62rem; }
.contact-channel > i { color: var(--marketing-muted); font-size: .65rem; }
.contact-expectation { border-left: 3px solid var(--marketing-primary); }
.contact-expectation p { margin: 0; color: var(--marketing-muted); font-size: .68rem; line-height: 1.65; }
.contact-expectation strong { color: var(--marketing-secondary); }

.marketing-page a:focus-visible,
.marketing-page button:focus-visible,
.marketing-page summary:focus-visible { outline: 2px solid var(--marketing-primary); outline-offset: 3px; }

@media (max-width: 900px) {
    .marketing-hero-grid,
    .contact-layout { grid-template-columns: 1fr; gap: 30px; }
    .marketing-hero-lead { max-width: 680px; }
    .team-grid { grid-template-columns: 1fr; }
    .contact-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .marketing-shell { width: min(calc(100% - 28px), 1120px); }
    .marketing-section-header { display: block; }
    .marketing-section-header > p { margin-top: 12px; }
    .service-choice-grid { grid-template-columns: 1fr; }
    .service-process,
    .about-principles { display: block; }
    .service-process-step + .service-process-step,
    .about-principle + .about-principle { border-top: 1px solid var(--marketing-line); border-left: 0; }
    .marketing-cta { align-items: flex-start; flex-direction: column; }
    .contact-aside { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .marketing-hero h1 { font-size: clamp(2.45rem, 13vw, 3.5rem); }
    .marketing-hero-actions,
    .marketing-card-actions,
    .marketing-cta-actions { flex-direction: column; width: 100%; }
    .marketing-button { width: 100%; }
    .team-member-card { grid-template-columns: 70px minmax(0, 1fr); gap: 13px; padding: 14px; }
    .team-member-photo,
    .team-member-fallback { width: 70px; height: 70px; }
    .contact-form-grid { grid-template-columns: 1fr; }
    .contact-field.is-full { grid-column: auto; }
    .contact-form-footer { align-items: stretch; flex-direction: column; }
    .contact-direct-links { align-items: flex-start; flex-direction: column; }
    .contact-map-frame iframe { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
    .marketing-page * { scroll-behavior: auto !important; }
}