.seo-page { background: #f8f7f2; }
.seo-hero { padding: 58px 0; overflow: hidden; background: #eaf0ec; }
.seo-hero__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); gap: clamp(34px, 5vw, 70px); align-items: center; }
.seo-hero h1 { max-width: 760px; margin: 14px 0 20px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(44px, 5.7vw, 72px); font-weight: 400; line-height: .98; letter-spacing: -.055em; }
.seo-hero__lead { max-width: 690px; margin: 0; color: #586a72; font-size: 18px; line-height: 1.6; }
.seo-hero__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.seo-hero__visual { height: 390px; overflow: hidden; border-radius: 32px 8px 32px 8px; box-shadow: 14px 14px 0 #d6e4db, 0 18px 42px rgba(20,38,56,.12); }
.seo-hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.seo-section { padding: 66px 0; }
.seo-section--white { background: rgba(255,255,255,.76); }
.seo-section--sage { background: #eaf0ec; }
.seo-heading { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.65fr); gap: 40px; align-items: end; margin-bottom: 28px; }
.seo-heading h2 { max-width: 760px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(36px, 4.2vw, 52px); font-weight: 400; line-height: 1.02; letter-spacing: -.05em; }
.seo-heading p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.intent-grid, .company-grid, .benefit-grid, .faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.intent-card, .company-card, .benefit-card { display: flex; min-height: 210px; flex-direction: column; padding: 23px; border: 1px solid #dbe3df; border-radius: 20px 7px 20px 7px; background: #fff; box-shadow: 0 9px 24px rgba(20,38,56,.045); }
.intent-card span, .company-card span, .benefit-card span { display: block; margin-bottom: 28px; color: var(--burgundy); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.intent-card h3, .company-card h3, .benefit-card h3 { margin: 0 0 9px; font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 400; line-height: 1.05; letter-spacing: -.04em; }
.intent-card p, .company-card p, .benefit-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.company-card b { margin-top: auto; padding-top: 18px; color: var(--burgundy); font-size: 13px; }
.process-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; padding: 0; list-style: none; counter-reset: process; }
.process-list li { min-height: 205px; padding: 22px; border-top: 1px solid #b9cac1; counter-increment: process; }
.process-list li::before { content: "0" counter(process); display: block; margin-bottom: 34px; color: var(--burgundy); font-family: Georgia, "Times New Roman", serif; font-size: 22px; }
.process-list strong { display: block; margin-bottom: 8px; font-size: 16px; }
.process-list p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.consultation-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(420px,1.2fr); gap: clamp(30px,5vw,70px); align-items: start; }
.consultation-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; padding: 26px; border: 1px solid #dbe3df; border-radius: 24px 8px 24px 8px; background: #fff; box-shadow: 0 20px 50px rgba(20,38,56,.1); }
.consultation-form h2, .consultation-form > p, .consultation-form .full, .consultation-form .form-message, .consultation-form .form-actions { grid-column: 1 / -1; }
.consultation-form h2 { margin: 0; font-size: 34px; }
.consultation-form > p { margin: -5px 0 5px; color: var(--muted); }
.consultation-form label { display: grid; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 700; }
.consultation-form input, .consultation-form select, .consultation-form textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #d5dfda; border-radius: 12px; background: #fffdfa; color: var(--ink); font: inherit; font-weight: 400; }
.consultation-form textarea { min-height: 140px; resize: vertical; }
.consultation-consent { display: grid !important; grid-template-columns: 18px 1fr; gap: 9px !important; align-items: start; font-size: 12px !important; font-weight: 400 !important; line-height: 1.45; }
.consultation-consent input { width: 18px; min-height: 18px; margin: 1px 0 0; }
.consultation-consent a { color: var(--burgundy); text-decoration: underline; }
.consultation-form .form-message { padding: 12px; border-radius: 10px; background: #e5f1eb; color: #1f5b48; }
.consultation-form .form-message.is-error { background: #f7e8e8; color: #8c3038; }
.consultation-form .form-actions { display: flex; align-items: center; gap: 14px; }
.consultation-form .form-actions small { color: var(--muted); line-height: 1.4; }
.plain-list { display: grid; gap: 10px; padding: 0; list-style: none; }
.plain-list li { padding: 15px 0 15px 28px; border-top: 1px solid #dbe3df; position: relative; color: #52636c; line-height: 1.5; }
.plain-list li::before { content: ""; position: absolute; top: 24px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--burgundy); }
.faq-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.faq-grid details { padding: 20px; border: 1px solid #dbe3df; border-radius: 16px 6px 16px 6px; background: #fff; }
.faq-grid summary { cursor: pointer; font-family: Georgia, "Times New Roman", serif; font-size: 21px; line-height: 1.15; }
.faq-grid p { margin: 13px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.seo-note { padding: 24px; border-left: 4px solid var(--burgundy); background: #fff; color: #52636c; line-height: 1.55; }
@media (max-width: 980px) { .seo-hero__grid, .consultation-layout { grid-template-columns: 1fr; } .seo-hero__visual { height: 340px; } .intent-grid, .company-grid, .benefit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .process-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .seo-hero { padding: 46px 0; } .seo-hero h1 { font-size: clamp(43px,12vw,58px); } .seo-heading, .intent-grid, .company-grid, .benefit-grid, .faq-grid, .process-list, .consultation-form { grid-template-columns: 1fr; } .seo-heading { gap: 15px; } .seo-section { padding: 54px 0; } .seo-hero__visual { height: 300px; } .consultation-form { padding: 20px; } .consultation-form h2, .consultation-form > p, .consultation-form .full, .consultation-form .form-message, .consultation-form .form-actions { grid-column: auto; } .consultation-form .form-actions { align-items: stretch; flex-direction: column; } .consultation-form .btn { width: 100%; } }