/* Owner review pass: readable type, balanced diagram, concrete examples. */
:root { --muted: #566151; }
body { font-size: 17px; }
.brand img { width: 220px; height: 84px; }
.header { height: 126px; }
.header nav { font-size: 15px; gap: 26px; }
.review-bar { font-size: 12px; line-height: 1.5; letter-spacing: .8px; }
.eyebrow, .hero .eyebrow, .about-copy .eyebrow {
  font-size: 12px; line-height: 1.6; letter-spacing: 1.4px;
}
.hero-summary { font-size: 18px; max-width: 450px; line-height: 1.75; }
.button { font-size: 16px; padding: 18px 22px; }
.hero-note { font-size: 14px; }
.principles { font-size: 16px; gap: 30px; }
.principles-end { font-size: 12px; letter-spacing: 1px; }
.intro-text, .service p, .process-list p, .about-copy > p,
.contact-heading > p:last-child { font-size: 17px; line-height: 1.8; }
.service-top, .step { font-size: 14px; }
.service .service-tag { font-size: 12px; letter-spacing: .8px; line-height: 1.6; }
.about-copy .about-note { font-size: 14px; line-height: 1.7; }
.contact-form, .contact-form label { font-size: 15px; }
input, textarea { font-size: 16px; }
.form-note { font-size: 13px; color: #56634e; }
.footer-top p { font-size: 15px; }
.footer-top > a:last-child, .footer-bottom { font-size: 12px; line-height: 1.7; }
.footer-bottom { color: #566151; }
dialog, dialog p { font-size: 16px; line-height: 1.8; }
.contact-card { border: 1px solid var(--line); background: #e9eddf; border-radius: 18px; padding: 34px; }
.contact-card h3 { font-size: 30px; }
.contact-card > p:not(.eyebrow):not(.form-note) { font-size: 17px; color: var(--muted); }
.contact-form label { margin-bottom: 20px; }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form input:not([type="hidden"]), .contact-form textarea { display: block; box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid #9da696; border-radius: 8px; background: #fdfcf6; color: var(--ink); font: inherit; font-size: 16px; padding: 12px 14px; margin-top: 8px; }
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid #526c24; outline-offset: 2px; }
.contact-form .optional { color: var(--muted); font-weight: 400; }
.contact-form .contact-honey { display: none; }
.contact-form button { cursor: pointer; }
.thank-you { max-width: 720px; margin: 15vh auto; padding: 30px; }
@media (max-width: 560px) { .contact-fields { grid-template-columns: 1fr; gap: 0; } }
.contact-email { display: block; margin-top: 22px; font-size: 17px; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 4px; }

/* Grid placement replaces independent offsets so all four cards align. */
.hero-visual {
  height: 560px;
  padding: 72px 22px 82px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr 104px 1fr;
  column-gap: 20px;
}
.visual-topline { font-size: 12px; line-height: 1.4; letter-spacing: .7px; }
.visual-live { display: none; }
.flow-card {
  position: relative;
  align-self: center;
  width: auto;
  min-width: 0;
  min-height: 98px;
  padding: 16px 13px;
  gap: 9px;
  box-shadow: 0 9px 27px #27321d08;
}
.inquiry, .followup, .knowledge, .handoff {
  top: auto; bottom: auto; left: auto; right: auto; width: auto;
}
.inquiry { grid-column: 1; grid-row: 1; }
.followup { grid-column: 2; grid-row: 1; }
.knowledge { grid-column: 1; grid-row: 3; }
.handoff { grid-column: 2; grid-row: 3; }
.flow-label { font-size: 12px; letter-spacing: .5px; line-height: 1.4; color: #58654d; }
.flow-card strong { display: block; font-size: 15px; line-height: 1.45; letter-spacing: -.2px; }
.card-icon { width: 28px; height: 32px; font-size: 20px; }
.mini-dot { display: none; }
.flow-center { top: 50%; }
.flow-center img { width: 94px; height: 94px; }
.visual-bottom { bottom: 20px; }
.visual-bottom p, .diagram-caption { font-size: 12px; line-height: 1.5; }
.diagram-caption { letter-spacing: .4px; color: #546449; max-width: 120px; text-align: right; }

.examples-heading {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 42px;
}
.examples-heading > p { max-width: 450px; font-size: 17px; color: #c3cfbc; line-height: 1.8; }
.examples-heading h2 { margin-bottom: 0; }
.scenario-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.scenario {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px 25px;
  border: 1px solid #5c6b54;
  border-radius: 14px;
  background: #283429;
}
.scenario .scenario-label { font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: .8px; color: var(--lime); margin-bottom: 24px; }
.scenario h3 { font-size: 25px; letter-spacing: -.8px; line-height: 1.35; color: var(--paper); }
.scenario > p { font-size: 16px; color: #d3dccd; line-height: 1.75; }
.scenario p strong { font-weight: 600; color: #f5f4ed; }
.scenario-payoff { border-top: 1px solid #5c6b54; padding-top: 23px; margin-top: auto; }
.scenario-payoff > span { display: block; font-size: 13px; color: #c3cfbc; margin-bottom: 8px; }
.scenario-payoff > strong { display: block; font-family: Manrope, Arial, sans-serif; font-weight: 500; font-size: 28px; line-height: 1.25; letter-spacing: -.8px; color: var(--lime); }
.scenario-payoff > p { font-size: 16px; color: #d3dccd; line-height: 1.75; margin: 17px 0 0; }
.scenario .scenario-check { border-top: 1px solid #5c6b54; padding-top: 20px; margin: 23px 0 0; font-size: 14px; color: #c3cfbc; }
.possibilities .example-footnote { font-size: 14px; line-height: 1.8; color: #c3cfbc; max-width: 950px; margin: 28px 0 0; }

@media (min-width: 1101px) {
  .scenario-grid { row-gap: 0; }
  .scenario { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; }
  .scenario-payoff { margin-top: 12px; }
}

@media (min-width: 1450px) {
  .hero-summary { font-size: 18px; }
}
@media (max-width: 1100px) {
  .header nav { font-size: 14px; gap: 20px; }
  .hero-summary { font-size: 18px; }
  .hero-visual { height: 560px; padding-left: 17px; padding-right: 17px; column-gap: 14px; }
  .flow-card { padding: 14px 11px; }
  .card-icon { display: none; }
  .principles-end { display: none; }
  .examples-heading { gap: 45px; }
  .scenario-grid { grid-template-columns: 1fr; }
  .scenario { display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; padding: 30px; }
  .scenario-label, .scenario h3 { grid-column: 1 / -1; }
  .scenario h3 br { display: none; }
  .scenario-payoff { grid-column: 2; grid-row: 3 / 6; border-top: 0; border-left: 1px solid #5c6b54; padding: 0 0 0 28px; margin: 0; }
  .scenario .scenario-check { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .header { height: 108px; }
  .brand img { width: 200px; height: 77px; }
  .header nav { font-size: 14px; gap: 18px; }
  .hero-visual { height: 520px; padding: 70px 24px 78px; }
  .flow-card { min-height: 90px; }
  .card-icon { display: grid; }
  .principles { font-size: 15px; gap: 18px; }
  .examples-heading { grid-template-columns: 1fr; gap: 20px; }
  .examples-heading > p { margin-bottom: 0; max-width: 570px; }
  .intro-text, .service p { font-size: 16px; }
  .service .service-tag { font-size: 12px; }
  .about-copy > p, .contact-heading > p:last-child, .process-list p { font-size: 17px; }
  .footer-top p { font-size: 14px; }
}
@media (max-width: 560px) {
  .header { height: 102px; }
  .brand img { width: 190px; height: 73px; }
  .menu-toggle { font-size: 14px; gap: 10px; padding: 10px 12px; }
  .header nav { top: 94px; font-size: 16px; }
  .eyebrow, .hero .eyebrow, .about-copy .eyebrow { font-size: 12px; letter-spacing: 1px; }
  .hero-summary { font-size: 17px; max-width: none; line-height: 1.8; }
  .hero h1 { font-size: clamp(40px, 12.3vw, 68px); letter-spacing: -2.8px; line-height: 1.08; }
  .hero-note { font-size: 14px; }
  .button { font-size: 16px; gap: 20px; }
  .hero-visual { height: 490px; padding: 65px 16px 80px; column-gap: 14px; border-radius: 18px; }
  .visual-topline { font-size: 12px; left: 17px; top: 20px; }
  .flow-card { padding: 14px 10px; min-height: 100px; border-radius: 8px; }
  .flow-label { font-size: 12px; letter-spacing: .3px; }
  .flow-card strong { font-size: 14px; }
  .card-icon { display: none; }
  .flow-center { top: 50%; }
  .flow-center img { width: 82px; height: 82px; }
  .visual-bottom p, .diagram-caption { font-size: 12px; }
  .visual-bottom { left: 16px; right: 16px; bottom: 17px; gap: 8px; }
  .diagram-caption { max-width: 105px; }
  .principles { font-size: 13px; gap: 10px; line-height: 1.5; }
  .intro-text, .service p, .process-list p, .about-copy > p, .contact-heading > p:last-child { font-size: 17px; }
  .service-top, .step { font-size: 14px; }
  .service .service-tag { font-size: 12px; }
  .scenario { display: flex; padding: 25px 22px; }
  .scenario h3 { font-size: 26px; }
  .scenario h3 br { display: none; }
  .scenario-payoff { border-left: 0; border-top: 1px solid #5c6b54; padding: 22px 0 0; margin-top: 10px; }
  .scenario-payoff > strong { font-size: 30px; }
  .scenario > p, .scenario-payoff > p { font-size: 17px; }
  .scenario .scenario-check { font-size: 15px; }
  .scenario .scenario-label { font-size: 12px; }
  .examples-heading > p { font-size: 17px; }
  .possibilities .example-footnote { font-size: 14px; }
  .about-copy .about-note { font-size: 14px; }
  .contact-form label { font-size: 15px; }
  .contact-card { padding: 26px 22px; }
  .form-note { font-size: 13px; }
  .footer-top p { font-size: 14px; }
  .footer-top > a:last-child, .footer-bottom { font-size: 12px; }
}