/* Hyoboram — warm, clear, and close to home. */
:root {
  --paper: #faf9f5;
  --white: #fffefa;
  --green: #285448;
  --green-dark: #203f35;
  --sage: #e9eee7;
  --sage-deep: #dbe5da;
  --ink: #263e35;
  --muted: #596a5f;
  --line: #dfe4db;
  --coral: #b9674f;
  --serif: "Noto Serif KR", "Batang", serif;
  --sans: "Noto Sans KR", "Malgun Gothic", sans-serif;
  --shadow: 0 16px 45px rgb(30 58 44 / 7%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 0; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.8; letter-spacing: -.035em; word-break: keep-all; -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: cover; }
svg { display: block; flex-shrink: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { cursor: pointer; }
button:disabled { cursor: default; }
::selection { background: #d2e1ce; color: var(--green-dark); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 5px; border-radius: 3px; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 118px; }
.container { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.arrow { display: inline-block; margin-left: 9px; transition: transform .2s ease; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 20px; padding: 12px 22px; transform: translateY(-160%); background: var(--green); color: white; border-radius: 4px; }
.skip-link:focus { transform: translateY(0); }

/* Masthead */
.topbar { min-height: 32px; display: flex; align-items: center; background: var(--green); color: #f5f7ee; font-size: 11px; line-height: 1.6; letter-spacing: -.01em; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar a { white-space: nowrap; }
.topbar span + span { opacity: .75; }
.site-header { position: sticky; top: 0; z-index: 100; background: rgb(250 249 245 / 96%); border-bottom: 1px solid rgb(40 84 72 / 10%); backdrop-filter: blur(16px); }
.header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; line-height: 1.3; }
.brand-symbol { width: 42px; height: 45px; display: grid; place-items: center; color: var(--green); }
.brand-symbol svg { width: 100%; height: 100%; }
.brand-name { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.065em; }
.brand-en { display: block; margin-top: 5px; color: var(--green); font-size: 9px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; }
.desktop-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-link { position: relative; padding-block: 14px; font-size: 13px; font-weight: 500; color: #59665c; white-space: nowrap; }
.nav-link::after { position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; content: ""; background: var(--green); transform: scaleX(0); transition: transform .2s; }
.nav-link:hover, .nav-link.active, .nav-link.is-active { color: var(--green); }
.nav-link:hover::after, .nav-link.active::after, .nav-link.is-active::after { transform: scaleX(1); }
.header-call { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #c6d1c6; padding: 10px 17px; border-radius: 5px; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .2s; }
.header-call .icon { width: 16px; height: 16px; }
.header-call:hover { background: var(--sage); }
.menu-toggle { display: none; border: 0; background: none; width: 44px; height: 44px; padding: 10px; }
.menu-toggle svg { width: 24px; height: 24px; }
.mobile-nav { padding: 10px 24px 22px; background: var(--paper); border-top: 1px solid var(--line); }
.mobile-nav a { display: block; padding: 12px 2px; font-weight: 500; border-bottom: 1px solid var(--line); }

/* Reusable elements */
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 25px; border: 1px solid transparent; border-radius: 5px; font-size: 14px; font-weight: 600; line-height: 1.5; text-align: center; transition: background .2s, transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--green); color: white; }
.button-primary:hover { background: var(--green-dark); box-shadow: 0 6px 20px rgb(40 84 72 / 12%); }
.button-outline { border-color: #bccbbd; background: transparent; color: var(--green); }
.button-outline:hover { background: var(--sage); }
.button-light { background: var(--paper); color: var(--green); }
.button-light:hover { background: white; }
.button-sm { min-height: 44px; padding: 10px 19px; font-size: 13px; }
.eyebrow { display: block; margin-bottom: 16px; color: var(--green); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 10px; background: currentColor; vertical-align: middle; }
.section-heading { font-family: var(--serif); font-size: clamp(29px, 3vw, 40px); font-weight: 500; line-height: 1.5; letter-spacing: -.065em; }
.section-heading em { color: var(--green); font-style: normal; }
.section-intro { margin-top: 18px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.section-note { margin-top: 26px; color: var(--muted); font-size: 12px; line-height: 1.85; }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--green); }
.text-link:hover .arrow { transform: translateX(4px); }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.section-head-row > p { max-width: 375px; margin-bottom: 7px; }

/* First welcome */
.hero { position: relative; padding: 60px 0 0; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 55px; }
.hero-copy { padding: 16px 0 40px; position: relative; z-index: 2; }
.hero-location { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 25px; color: var(--green); font-size: 12px; font-weight: 500; letter-spacing: -.02em; }
.hero-location .icon { width: 15px; height: 15px; }
.hero-location::before { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); content: ""; }
.hero-location > span:empty { display: none; }
.hero-title { font-size: clamp(42px, 4.4vw, 61px); font-weight: 500; letter-spacing: -.075em; line-height: 1.4; }
.hero-title em { color: var(--green); font-family: var(--serif); font-weight: 500; font-style: normal; }
.hero-description { margin-top: 25px; font-size: 15px; color: #6b786e; line-height: 2; letter-spacing: -.035em; }
.hero-description strong { color: var(--ink); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 31px; }
.hero-actions .button { min-height: 54px; }
.hero-note { margin-top: 14px; color: #859084; font-size: 11px; display: flex; align-items: center; gap: 6px; }
.hero-note .icon { width: 14px; height: 14px; }
.hero-visual { min-width: 0; position: relative; margin: 0 15px 22px 0; }
.hero-photo { height: 500px; width: 100%; border-radius: 240px 240px 18px 18px; background: #dce2d5; object-position: center; }
.hero-visual::before { content: ""; z-index: -1; position: absolute; inset: -16px -16px 15px 16px; border: 1px solid #d8dfd0; border-radius: 250px 250px 22px 22px; }
.since-badge { position: absolute; right: -24px; top: 43px; width: 94px; height: 94px; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 50%; background: var(--green); color: #f4f6ee; border: 5px solid var(--paper); font-size: 10px; letter-spacing: .07em; line-height: 1.5; box-shadow: 0 3px 10px rgb(40 84 72 / 5%); }
.since-badge strong { font-family: Georgia, var(--serif); font-size: 27px; font-weight: 400; line-height: 1.3; letter-spacing: -.03em; }
.since-badge span:last-child { font-size: 9px; opacity: .75; }
.hero-photo-label { position: absolute; bottom: 20px; right: 21px; color: white; font-size: 10px; background: rgb(30 45 33 / 38%); padding: 3px 9px; border-radius: 3px; backdrop-filter: blur(5px); }
.hero-mini-card { position: absolute; bottom: 35px; left: -43px; max-width: 290px; display: flex; gap: 13px; align-items: center; padding: 17px 20px; background: var(--white); border: 1px solid #e4e7dc; border-radius: 8px; box-shadow: var(--shadow); transform: rotate(-3deg); }
.hero-mini-card p { font-size: 12px; line-height: 1.65; color: var(--muted); }
.hero-mini-card strong { display: block; color: var(--green); font-size: 14px; font-weight: 600; }
.hero-mini-card > div > span { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.mini-card-icon { display: grid; place-items: center; width: 37px; height: 37px; flex-shrink: 0; background: var(--sage); border-radius: 50%; color: var(--green); }
.mini-card-icon .icon { width: 20px; height: 20px; }
.hero-mini-card > .icon { width: 29px; height: 29px; color: var(--green); }
.mini-avatars { display: flex; min-width: 63px; }
.mini-avatars img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid white; background: var(--sage); }
.mini-avatars img + img { margin-left: -12px; }
.hero-sprig { position: absolute; width: 83px; height: 103px; right: -28px; bottom: -22px; color: #8f9e84; opacity: .75; transform: rotate(11deg); pointer-events: none; }
.hero-bottom { margin-top: 30px; padding: 22px 0 25px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); color: #7f887c; font-size: 11px; }
.hero-bottom strong { color: var(--green); font-weight: 500; }
.hero-bottom .icon { width: 16px; height: 16px; }
.hero-bottom > span { display: inline-flex; align-items: center; gap: 6px; }
.hero-bottom > :last-child { margin-left: auto; }

/* Quiet reassurance */
.trust-bar { padding: 30px 0; background: var(--sage); border-top: 1px solid #e0e6da; border-bottom: 1px solid #e0e6da; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.trust-item { display: flex; align-items: center; gap: 14px; padding: 0 26px; border-right: 1px solid #cdd8ca; }
.trust-item:first-child { padding-left: 0; }
.trust-item:last-child { border-right: 0; padding-right: 0; }
.trust-icon { color: var(--green); width: 33px; height: 35px; display: grid; place-items: center; flex-shrink: 0; }
.trust-icon svg { width: 31px; height: 31px; stroke-width: 1.3; }
.trust-copy { font-size: 11px; color: #72816e; line-height: 1.8; }
.trust-copy strong { display: block; font-size: 14px; font-weight: 600; color: var(--green); }

/* Services */
.services { padding: 76px 0 70px; }
.services .section-head-row { margin-bottom: 28px; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.service-card { min-width: 0; padding: 24px; background: #fffefa; border: 1px solid var(--line); border-radius: 10px; }
.service-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.service-icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--sage); color: var(--green); }
.service-icon svg { width: 23px; height: 23px; stroke-width: 1.5; }
.service-card:nth-child(2) .service-icon { background: #f3eae0; color: #9a7757; }
.service-card:nth-child(3) .service-icon { background: #edece3; color: #8a8962; }
.service-card h3 { font-size: 21px; font-weight: 600; line-height: 1.45; letter-spacing: -.06em; }
.service-card > p { color: var(--muted); font-size: 15px; line-height: 1.8; }
.service-list { display: grid; gap: 12px; margin-top: 17px; padding-top: 16px; border-top: 1px solid #e8ebe2; list-style: none; }
.service-list li { color: var(--muted); font-size: 14px; line-height: 1.75; }
.service-list strong { display: block; margin-bottom: 2px; color: var(--green); font-size: 14px; font-weight: 600; }

/* Who we can help */
.audience { padding: 65px 0; background: #eef1e9; }
.audience-grid { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 70px; }
.audience .section-heading { font-size: 30px; }
.audience .section-intro { font-size: 13px; }
.audience .text-link { margin-top: 21px; font-size: 12px; }
.audience-card { padding: 27px 31px; border-radius: 9px; background: #fffefa; box-shadow: 0 5px 25px rgb(40 84 72 / 3%); }
.audience-card-label { display: block; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 11px; color: #86967b; }
.check-list { list-style: none; }
.check-list li { display: flex; align-items: flex-start; gap: 13px; color: #657361; font-size: 13px; line-height: 1.9; }
.check-list li + li { margin-top: 16px; }
.check-list li > .icon { width: 18px; height: 18px; margin-top: 4px; color: var(--green); }
.check-list strong { color: var(--ink); font-weight: 600; }
.audience-card > p { margin-top: 19px; padding-top: 17px; border-top: 1px solid var(--line); font-size: 11px; color: #88917e; }
.audience-card .text-link { margin-top: 18px; }

/* Insurance and simple guidance */
.guide { padding: 100px 0 95px; }
.guide-top { text-align: center; margin-bottom: 50px; }
.guide-top .section-intro { max-width: 650px; margin-inline: auto; }
.cost-layout { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 75px; }
.cost-copy { padding-left: 32px; }
.cost-copy h3 { font-size: 19px; font-weight: 500; }
.cost-kicker { display: block; font-size: 14px; color: #7e8b74; }
.support-stat { margin: 7px 0 10px; color: var(--green); font-family: Georgia, var(--serif); font-size: clamp(62px, 7vw, 88px); line-height: 1.35; letter-spacing: -.065em; }
.support-stat > strong { font-weight: 400; }
.support-stat > strong > span { font-size: .65em; margin-inline: 3px; font-weight: 400; }
.support-stat > strong > small { font-family: var(--sans); font-size: .4em; margin-left: 5px; font-weight: 400; }
.support-stat > span { display: block; font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: -.04em; margin: 5px 0 25px; }
.cost-copy > p:not(.support-stat) { margin-top: 13px; font-size: 13px; color: var(--muted); line-height: 1.9; }
.cost-copy > p:not(.support-stat) strong { color: var(--ink); font-weight: 500; }
.cost-copy > .text-link { margin-top: 22px; font-size: 12px; }
.cost-copy .section-note { max-width: 390px; margin-top: 20px; font-size: 11px; }
.cost-panel { padding: 30px 32px; border: 1px solid #d7dfd2; background: #fffefa; border-radius: 10px; box-shadow: 0 8px 40px rgb(40 84 72 / 4%); }
.cost-panel h3 { margin-bottom: 21px; font-size: 15px; font-weight: 600; }
.cost-panel-heading { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; }
.cost-panel-heading .icon { width: 20px; height: 20px; color: #8c9b80; }
.cost-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-top: 16px; border: 1px solid #e3e8dc; background: #f2f4ed; border-radius: 5px; }
.cost-tab { padding: 9px 5px; border: 0; background: transparent; font-size: 12px; color: #7b8577; border-radius: 3px; transition: background .2s, color .2s; }
.cost-tab[aria-pressed="true"] { background: var(--green); color: white; box-shadow: 0 2px 6px rgb(40 84 72 / 10%); }
.cost-tab:hover:not([aria-pressed="true"]) { background: #e3eadd; color: var(--green); }
.cost-example { margin-top: 22px; color: var(--muted); font-size: 11px; }
.cost-result { margin: 14px 0 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; }
.cost-result > span { color: #697862; font-size: 12px; padding-bottom: 4px; }
.cost-result > p:first-child { font-size: 11px; color: #78856e; line-height: 1.8; }
.cost-result > p:first-child span { display: block; color: #9bA48f; font-size: 10px; }
.cost-amount { color: var(--green); font-size: 37px; line-height: 1.35; font-weight: 600; letter-spacing: -.07em; }
.cost-amount strong { font-weight: 600; }
.cost-amount > span { font-size: 14px; margin-left: 4px; font-weight: 400; }
.cost-amount small { font-size: 14px; margin-left: 3px; font-weight: 500; }
.cost-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #8b9485; font-size: 10px; line-height: 1.7; }
.cost-caption > span { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cost-caption i { width: 6px; height: 6px; background: #69815e; border-radius: 2px; }
.cost-caption > span:last-child i { background: #bd8b64; }
.cost-caption strong { font-weight: 500; }
.cost-bar { display: flex; height: 8px; overflow: hidden; margin: 14px 0 11px; border-radius: 10px; background: #e3e9dd; }
.cost-insurance { min-width: 0; background: #69815e; transition: width .35s; }
.cost-self { background: #bd8b64; transition: width .35s; }
.cost-panel .cost-legend { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: #7b8573; }
.cost-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cost-legend span::before { content: ""; width: 7px; height: 7px; background: #69815e; border-radius: 2px; }
.cost-legend span:last-child::before { background: #bd8b64; }
.cost-disclaimer { padding-top: 17px; margin-top: 20px; border-top: 1px solid var(--line); font-size: 10px; line-height: 1.85; color: #91998b; }
.process-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.process-heading h3 { font-size: 17px; font-weight: 500; }
.process-heading p { font-size: 11px; color: #8d9981; }
.process-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-top: 26px; list-style: none; }
.process-step { min-width: 0; position: relative; padding-right: 20px; }
.process-step:not(:last-child)::after { content: "→"; position: absolute; right: 2px; top: 10px; font-size: 20px; color: #bac5b4; }
.step-number { width: 33px; height: 33px; display: grid; place-items: center; margin-bottom: 14px; background: var(--sage); border-radius: 50%; color: var(--green); font-family: Georgia, serif; font-size: 13px; }
.process-step h3, .process-step h4 { font-size: 14px; font-weight: 600; }
.process-step p { max-width: 220px; margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.85; }
.family-banner { margin-top: 44px; display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 30px 37px; border-radius: 9px; background: var(--sage); }
.family-banner > .icon { width: 32px; height: 32px; color: var(--green); }
.family-banner-icon { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: #dbe5d4; color: var(--green); }
.family-banner-icon .icon { width: 26px; height: 26px; }
.family-banner > div { flex: 1; }
.family-banner h3 { font-size: 17px; font-weight: 600; }
.family-banner p { margin-top: 6px; color: #73806d; font-size: 12px; line-height: 1.8; }
.family-banner .text-link { flex-shrink: 0; }
.family-banner .button { flex-shrink: 0; }
.family-banner .section-note { display: block; margin-top: 7px; color: #89977e; font-size: 9px; }
.official-source { font-size: 10px; }
.official-source a { text-decoration: underline; text-underline-offset: 3px; }

/* A familiar face */
.greeting { padding: 95px 0; background: #efeee7; }
.greeting-grid { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 77px; }
.director-figure { position: relative; min-width: 0; }
.director-photo-wrap { position: relative; overflow: hidden; border-radius: 160px 160px 8px 8px; }
.director-photo { height: 460px; border-radius: 160px 160px 8px 8px; object-position: center 23%; background: #dddcd1; }
.director-photo-label { position: absolute; bottom: 21px; left: 14px; right: 14px; text-align: center; color: white; font-size: 10px; text-shadow: 0 1px 5px rgb(0 0 0 / 45%); }
.director-caption { position: static; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 7px 11px; padding: 18px 0 0; text-align: center; }
.director-caption strong { font-size: 17px; font-weight: 600; }
.director-caption > span { margin-left: 0; font-size: 10px; color: #78816f; }
.director-caption > .image-edit-note { flex-basis: 100%; margin-top: 0; font-size: 8px; color: #9b9f91; }
.director-caption small { display: block; margin-top: 2px; color: #88907c; font-size: 10px; }
.image-edit-note { margin-top: 9px; font-size: 9px; color: #9b9f91; line-height: 1.7; }
.greeting-copy { min-width: 0; }
.greeting-copy > .greeting-quote { margin: 20px 0 21px; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.8; letter-spacing: -.065em; color: #657856; }
.greeting-quote em { font-style: normal; color: var(--green); }
.greeting-copy > p { font-size: 13px; color: #78816f; line-height: 2; }
.greeting-copy > p + p { margin-top: 13px; }
.director-sign { display: flex; align-items: center; justify-content: flex-end; gap: 15px; margin-top: 24px; font-size: 11px; color: #818977; }
.director-sign strong { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: .16em; color: var(--green); }
.credentials { margin-top: 23px; border-top: 1px solid #d5dbcd; border-bottom: 1px solid #d5dbcd; }
.credentials summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; cursor: pointer; list-style: none; color: #52664c; font-size: 11px; font-weight: 500; }
.credentials summary::-webkit-details-marker { display: none; }
.credentials summary > span { display: none; }
.credentials summary::after { content: "+"; font-size: 19px; font-weight: 300; }
.credentials[open] summary::after { content: "−"; }
.credential-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 0 0 20px; }
.credential-grid ul { list-style: none; }
.credential-grid h3 { font-size: 11px; font-weight: 600; margin-top: 13px; }
.credential-grid li { position: relative; margin-top: 6px; padding-left: 8px; font-size: 10px; line-height: 1.9; color: #7a8370; }
.credential-grid li::before { content: "·"; position: absolute; left: 0; }

/* Real moments */
.stories { padding: 100px 0 90px; }
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.story-card { min-width: 0; display: block; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: transparent; text-align: left; transition: transform .25s; }
.story-card:hover { transform: translateY(-5px); }
.story-image-wrap { display: block; aspect-ratio: 4 / 3; position: relative; overflow: hidden; border-radius: 8px; background: var(--sage); }
.story-image { height: 100%; transition: transform .6s; }
.story-card:hover .story-image { transform: scale(1.045); }
.story-category { position: absolute; left: 15px; bottom: 14px; padding: 4px 11px; border-radius: 3px; background: rgb(255 254 250 / 94%); color: var(--green); font-size: 10px; font-weight: 500; }
.story-content { display: block; padding: 21px 2px 0; }
.story-title { display: block; font-size: 17px; font-weight: 600; line-height: 1.6; }
.story-excerpt { display: block; margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.story-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; color: #8c977f; font-size: 10px; }
.story-more .icon { width: 13px; height: 13px; }
.privacy-note { margin-top: 30px; display: flex; align-items: flex-start; gap: 7px; color: #929b8a; font-size: 10px; line-height: 1.8; }
.privacy-note .icon { width: 13px; height: 13px; margin-top: 3px; }

/* Calm answers */
.faq { padding: 73px 0 83px; background: #f0f2ea; }
.faq-layout { display: grid; grid-template-columns: .85fr 1.5fr; gap: 75px; }
.faq .section-heading { font-size: 31px; }
.faq .section-intro { font-size: 12px; }
.faq .text-link { margin-top: 22px; font-size: 11px; }
.faq-list { border-top: 1px solid #ccd7c6; }
.faq-list details { border-bottom: 1px solid #d3dccb; }
.faq-list summary { position: relative; padding: 20px 35px 20px 0; font-size: 13px; line-height: 1.7; font-weight: 500; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { display: none; }
.faq-list summary::before { content: "Q"; color: #889d7a; margin-right: 14px; font-family: Georgia, serif; font-size: 15px; }
.faq-list summary::after { content: "+"; position: absolute; top: 18px; right: 5px; color: #88997c; font-size: 21px; font-weight: 300; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p, .faq-list .faq-answer { padding: 0 25px 22px 28px; font-size: 12px; line-height: 1.95; color: #7d8873; }
.faq-list details p + p { padding-top: 0; }

/* Make the call */
.contact { padding: 100px 0; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 75px; align-items: center; }
.contact-copy .section-heading { font-size: 35px; }
.contact-copy .section-intro { font-size: 13px; }
.contact-phone { display: inline-flex; align-items: center; gap: 11px; margin: 21px 0 15px; color: var(--green); font-family: Georgia, serif; font-size: clamp(33px, 3.6vw, 47px); line-height: 1.3; letter-spacing: -.055em; white-space: nowrap; }
.contact-phone .icon { width: 25px; height: 25px; }
.contact-phone:hover { color: #557549; }
.contact-hours { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12px; color: #7a8670; }
.contact-hours .icon { width: 15px; height: 15px; }
.contact-message { color: #8a947e; font-size: 11px; line-height: 1.9; }
.contact-hours strong { color: #465e3e; font-weight: 500; }
.contact-address { max-width: 360px; font-size: 13px; font-style: normal; line-height: 1.9; color: #64745b; }
.contact-address .icon { display: inline; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.visit-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 21px; color: #7e8d71; font-size: 11px; line-height: 1.85; }
.visit-note > .icon { width: 16px; height: 16px; margin-top: 4px; }
.visit-note p span { font-size: 10px; color: #9aa28e; }
.location-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fffefa; }
.location-image { width: 100%; aspect-ratio: 16 / 9; object-position: center 52%; background: var(--sage); }
.location-info { padding: 21px 24px 22px; }
.location-info h3 { margin-bottom: 5px; font-size: 14px; font-weight: 600; }
.location-kicker { display: block; margin-bottom: 7px; font-size: 9px; color: #9aa68a; letter-spacing: .04em; }
.location-info p { color: #88917d; font-size: 11px; line-height: 1.8; }
.location-links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); }
.location-links a, .copy-address { display: inline-flex; align-items: center; gap: 6px; padding: 0; color: #617756; border: 0; background: transparent; font-size: 11px; }
.location-links .icon { width: 14px; height: 14px; }
.location-links a:hover, .copy-address:hover { color: var(--green-dark); text-decoration: underline; text-underline-offset: 4px; }

/* Our next colleague */
.recruit { padding: 0 0 80px; }
.recruit-inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: 38px 43px; border-radius: 10px; background: #e8ede2; }
.recruit-label { display: block; margin-bottom: 9px; color: #839374; font-size: 10px; letter-spacing: .08em; }
.recruit-copy h2 { color: var(--green); font-size: 23px; font-weight: 500; letter-spacing: -.06em; }
.recruit-copy p { margin-top: 10px; color: #7c8970; font-size: 12px; line-height: 1.9; }
.recruit-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.recruit-tags span { padding: 3px 9px; border: 1px solid #ccd6c2; border-radius: 3px; color: #7f8b72; font-size: 10px; line-height: 1.6; }
.recruit-action { flex-shrink: 0; }
.recruit-action-icon { display: grid; place-items: center; margin: 0 auto 20px; width: 44px; height: 44px; color: #8f9f80; }
.recruit-action-icon .icon { width: 38px; height: 38px; stroke-width: 1.1; }
.recruit-action p { margin-top: 8px; text-align: center; color: #8c977f; font-size: 10px; }

/* Footer */
.site-footer { padding: 48px 0 22px; background: var(--green-dark); color: #dfe6d8; }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 55px; padding-bottom: 32px; border-bottom: 1px solid rgb(234 240 224 / 12%); }
.footer-brand { min-width: 215px; }
.footer-brand .brand-symbol, .footer-brand .brand-en { color: #d0ddc8; }
.footer-brand .brand-name { color: #f2f3eb; font-size: 21px; }
.footer-brand p { margin-top: 17px; font-family: var(--serif); font-size: 12px; color: #a9bba0; line-height: 1.9; }
.footer-info { max-width: 680px; font-size: 10px; line-height: 2.05; color: #a4b59b; }
.footer-info p + p { margin-top: 3px; }
.footer-info span { display: inline-block; margin-right: 16px; }
.footer-info strong { color: #c5d2bb; font-weight: 400; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; color: #87a07b; font-size: 9px; letter-spacing: .015em; }
.footer-bottom a { color: #adc09f; }
.footer-bottom a:hover { color: white; }
.mobile-contact { display: none; }
.back-to-top { position: fixed; right: 25px; bottom: 26px; z-index: 70; display: grid; place-items: center; width: 39px; height: 39px; background: var(--white); border: 1px solid #d1dbca; border-radius: 50%; color: var(--green); box-shadow: 0 3px 15px rgb(30 58 44 / 8%); transition: background .2s, transform .2s; }
.back-to-top .icon { width: 17px; height: 17px; }
.back-to-top:hover { transform: translateY(-3px); background: var(--sage); }
.toast { position: fixed; z-index: 500; left: 50%; bottom: 28px; transform: translateX(-50%); max-width: calc(100% - 40px); padding: 12px 23px; background: var(--green-dark); border: 1px solid #60785a; color: #f7f7ec; border-radius: 7px; box-shadow: var(--shadow); font-size: 12px; text-align: center; }

/* Story reader */
.story-dialog { width: min(680px, calc(100% - 40px)); max-height: 90dvh; padding: 0; overflow-y: auto; border: 0; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 80px rgb(18 35 25 / 24%); }
.story-dialog::backdrop { background: rgb(24 42 30 / 60%); backdrop-filter: blur(5px); }
.dialog-inner { position: relative; }
.dialog-close { position: absolute; right: 15px; top: 15px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgb(255 255 255 / 50%); border-radius: 50%; background: rgb(250 249 245 / 94%); color: var(--green); }
.dialog-close .icon { width: 19px; height: 19px; }
.dialog-photo { width: 100%; height: auto; max-height: 65vh; aspect-ratio: auto; object-fit: contain; background: var(--sage); }
.dialog-body { padding: 30px 34px 35px; }
.dialog-category { display: block; margin-bottom: 11px; color: #86967a; font-size: 11px; }
.dialog-title { font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1.6; }
.dialog-text { margin-top: 20px; color: #72816a; font-size: 14px; line-height: 2; }
.dialog-text p + p { margin-top: 15px; }
.dialog-body .privacy-note { margin-top: 22px; padding-top: 19px; border-top: 1px solid var(--line); }
.dialog-body > .button { margin-top: 21px; }

@media (min-width: 1600px) {
  .hero { padding-top: 72px; }
  .hero-photo { height: 545px; }
  .hero-copy { padding-bottom: 45px; }
}

@media (max-width: 1199px) {
  .container { width: calc(100% - 64px); }
  .header-inner { gap: 20px; }
  .desktop-nav { gap: 17px; }
  .nav-link { font-size: 12px; }
  .header-call { padding-inline: 12px; font-size: 12px; }
  .brand-name { font-size: 20px; }
  .brand-symbol { width: 36px; height: 40px; }
  .hero-grid { gap: 35px; }
  .hero-title { font-size: 49px; }
  .hero-photo { height: 470px; }
  .hero-mini-card { left: -26px; padding: 14px 17px; }
  .trust-item { padding-inline: 18px; gap: 10px; }
  .trust-copy strong { font-size: 12px; }
  .trust-copy { font-size: 10px; }
  .service-card { padding: 22px; }
  .service-card h3 { font-size: 20px; }
  .cost-layout, .greeting-grid, .contact-grid { gap: 45px; }
  .greeting-quote { font-size: 28px; }
  .director-photo { height: 430px; }
  .faq-layout { gap: 45px; }
}

@media (max-width: 1023px) {
  .header-inner { min-height: 78px; }
  .desktop-nav { gap: 15px; }
  .header-call { display: none; }
  .hero { padding-top: 45px; }
  .hero-grid { grid-template-columns: 1.08fr 1fr; gap: 28px; }
  .hero-title { font-size: 43px; }
  .hero-location { font-size: 11px; margin-bottom: 21px; }
  .hero-description { margin-top: 21px; font-size: 13px; }
  .hero-photo { height: 420px; }
  .hero-actions { margin-top: 25px; gap: 8px; }
  .hero-actions .button { font-size: 12px; padding-inline: 18px; min-height: 49px; }
  .hero-mini-card { bottom: 28px; left: -20px; padding: 12px 15px; gap: 9px; }
  .hero-mini-card strong { font-size: 12px; }
  .hero-mini-card p { font-size: 10px; }
  .since-badge { width: 82px; height: 82px; right: -18px; }
  .since-badge strong { font-size: 24px; }
  .trust-bar { padding: 24px 0; }
  .trust-icon { width: 25px; }
  .trust-icon svg { width: 26px; height: 26px; }
  .trust-item { padding-inline: 14px; }
  .services, .guide, .stories, .contact { padding-top: 80px; padding-bottom: 75px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .service-card:last-child { grid-column: 1 / -1; }
  .service-card { padding-inline: 20px; }
  .service-card:last-child .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .audience-grid { gap: 40px; }
  .audience .section-heading { font-size: 27px; }
  .audience-card { padding: 25px; }
  .check-list li { font-size: 12px; }
  .cost-copy { padding-left: 0; }
  .cost-layout { gap: 35px; }
  .cost-panel { padding: 26px 25px; }
  .cost-amount { font-size: 32px; }
  .family-banner { padding: 27px; gap: 20px; }
  .greeting { padding: 75px 0; }
  .greeting-grid { gap: 36px; }
  .director-photo { height: 425px; }
  .greeting-quote { font-size: 26px; }
  .greeting-copy > p { font-size: 12px; }
  .director-caption { padding: 12px; }
  .director-caption span { display: block; margin: 2px 0 0; }
  .story-grid { gap: 18px; }
  .story-title { font-size: 15px; }
  .story-excerpt { font-size: 11px; }
  .faq-layout { gap: 35px; grid-template-columns: .8fr 1.4fr; }
  .faq .section-heading { font-size: 28px; }
  .contact-grid { gap: 35px; }
  .contact-copy .section-heading { font-size: 31px; }
  .contact-phone { font-size: 36px; }
  .recruit-inner { padding: 33px; gap: 28px; }
  .recruit-copy h2 { font-size: 21px; }
  .footer-top { gap: 35px; }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 0; }
  body { font-size: 14px; padding-bottom: 68px; }
  .container { width: calc(100% - 42px); }
  section[id] { scroll-margin-top: 84px; }
  .topbar { min-height: 28px; font-size: 9px; }
  .topbar .container { justify-content: center; width: calc(100% - 28px); gap: 7px; }
  .topbar .container > :last-child { display: none; }
  .header-inner { min-height: 72px; gap: 15px; }
  .brand { gap: 8px; }
  .brand-symbol { width: 33px; height: 37px; }
  .brand-name { font-size: 20px; }
  .brand-en { margin-top: 4px; font-size: 7px; letter-spacing: .24em; }
  .desktop-nav { display: none; }
  .menu-toggle { display: grid; place-items: center; margin-right: -9px; }
  .site-header:has(.mobile-nav:not([hidden])) { box-shadow: 0 12px 25px rgb(32 63 53 / 6%); }
  .button { min-height: 50px; padding: 13px 21px; font-size: 13px; }
  .eyebrow { margin-bottom: 12px; font-size: 10px; letter-spacing: .1em; }
  .section-heading { font-size: 30px; line-height: 1.55; }
  .section-intro { margin-top: 14px; font-size: 13px; }
  .section-head-row { display: block; margin-bottom: 30px; }
  .section-head-row > p { max-width: none; margin-top: 15px; font-size: 12px; }
  .section-head-row > .text-link { margin-top: 19px; }
  .section-note { font-size: 11px; }
  .hero { padding-top: 37px; }
  .hero-grid { display: flex; flex-direction: column; gap: 29px; align-items: stretch; }
  .hero-copy { padding: 0; }
  .hero-location { margin-bottom: 19px; font-size: 10px; }
  .hero-title { font-size: clamp(35px, 10vw, 48px); line-height: 1.45; letter-spacing: -.075em; }
  .hero-description { margin-top: 20px; font-size: 13px; line-height: 1.95; }
  .hero-actions { margin-top: 24px; gap: 9px; }
  .hero-actions .button { min-height: 49px; padding-inline: 20px; font-size: 12px; }
  .hero-note { margin-top: 12px; font-size: 9px; }
  .hero-visual { width: calc(100% - 28px); align-self: center; margin: 12px 0 15px; }
  .hero-photo { height: 370px; max-height: 112vw; border-radius: 180px 180px 12px 12px; }
  .hero-visual::before { inset: -10px -10px 12px 10px; border-radius: 200px 200px 16px 16px; }
  .since-badge { right: -13px; top: 24px; width: 77px; height: 77px; border-width: 4px; font-size: 9px; }
  .since-badge strong { font-size: 23px; }
  .since-badge span:last-child { font-size: 8px; }
  .hero-mini-card { left: -17px; bottom: 25px; max-width: 244px; padding: 12px 15px; }
  .hero-mini-card strong { font-size: 12px; }
  .hero-mini-card p { font-size: 10px; }
  .hero-mini-card > div > span { font-size: 10px; }
  .mini-card-icon { width: 31px; height: 31px; }
  .mini-card-icon .icon { width: 17px; height: 17px; }
  .hero-photo-label { bottom: 14px; right: 13px; font-size: 8px; }
  .hero-sprig { width: 58px; height: 82px; right: -17px; bottom: -12px; }
  .hero-bottom { flex-wrap: wrap; margin-top: 17px; padding-block: 19px; gap: 7px; font-size: 9px; }
  .hero-bottom > :last-child { margin-left: 0; }
  .trust-bar { padding: 23px 0; }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
  .trust-item { gap: 10px; padding: 0 8px 0 0; border-right: 0; }
  .trust-item:nth-child(even) { padding-left: 13px; border-left: 1px solid #ccd6c7; }
  .trust-item:last-child { grid-column: 1 / -1; justify-content: center; padding: 17px 0 0; border-top: 1px solid #ccd6c7; }
  .trust-copy { font-size: 9px; line-height: 1.8; }
  .trust-copy strong { font-size: 11px; }
  .trust-icon { width: 24px; height: 29px; }
  .trust-icon svg { width: 25px; height: 25px; }
  .services { padding: 56px 0 50px; }
  .services .section-head-row { margin-bottom: 24px; }
  .service-grid { grid-template-columns: 1fr; gap: 12px; }
  .service-card { padding: 20px; }
  .service-card-heading { gap: 11px; margin-bottom: 12px; }
  .service-card h3 { font-size: 20px; }
  .service-list { gap: 10px; margin-top: 14px; padding-top: 13px; }
  .service-card:last-child .service-list { grid-template-columns: 1fr; gap: 10px; }
  .audience { padding: 45px 0; }
  .audience-grid { grid-template-columns: 1fr; gap: 25px; }
  .audience .section-heading { font-size: 27px; }
  .audience .section-intro { font-size: 12px; }
  .audience-card { padding: 24px 22px; }
  .check-list li { padding-left: 0; gap: 11px; font-size: 12px; }
  .check-list li + li { margin-top: 15px; }
  .audience-card > p { font-size: 10px; }
  .guide { padding: 62px 0 58px; }
  .guide-top { text-align: left; margin-bottom: 30px; }
  .guide-top .section-intro { font-size: 12px; }
  .cost-layout { grid-template-columns: 1fr; gap: 28px; }
  .cost-copy { padding-left: 0; }
  .cost-copy h3 { font-size: 17px; }
  .support-stat { margin: 4px 0 9px; font-size: 70px; }
  .support-stat > span { margin-bottom: 19px; font-size: 13px; }
  .cost-copy > p:not(.support-stat) { font-size: 12px; }
  .cost-copy .section-note { margin-top: 13px; font-size: 10px; }
  .cost-panel { padding: 24px 21px; }
  .cost-panel h3 { font-size: 14px; margin-bottom: 16px; }
  .cost-tab { padding: 9px 4px; font-size: 11px; }
  .cost-amount { font-size: 33px; }
  .cost-caption { font-size: 9px; }
  .cost-disclaimer { font-size: 9px; }
  .process-heading { display: block; margin-top: 34px; padding-top: 25px; }
  .process-heading h3 { font-size: 15px; }
  .process-heading p { font-size: 10px; margin-top: 7px; }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; margin-top: 25px; padding-top: 0; }
  .process-step { padding-right: 3px; }
  .process-step:not(:last-child)::after { right: -7px; top: 6px; font-size: 17px; }
  .process-step:nth-child(2)::after { display: none; }
  .step-number { margin-bottom: 12px; width: 30px; height: 30px; font-size: 12px; }
  .process-step h3, .process-step h4 { font-size: 13px; }
  .process-step p { font-size: 10px; margin-top: 7px; }
  .family-banner { align-items: flex-start; flex-wrap: wrap; margin-top: 33px; padding: 25px 22px; gap: 13px; }
  .family-banner > .icon { width: 26px; height: 26px; margin-top: 2px; }
  .family-banner-icon { width: 31px; height: 31px; }
  .family-banner-icon .icon { width: 22px; height: 22px; }
  .family-banner > div { flex-basis: calc(100% - 44px); }
  .family-banner h3 { font-size: 15px; }
  .family-banner p { font-size: 11px; }
  .family-banner .text-link { margin-left: 39px; font-size: 11px; }
  .family-banner .button { margin-left: 44px; min-height: 42px; font-size: 11px; }
  .greeting { padding: 60px 0; }
  .greeting-grid { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
  .director-figure { width: min(300px, 85%); align-self: center; }
  .director-photo { height: 365px; border-radius: 150px 150px 7px 7px; }
  .director-caption { left: 14px; right: 14px; bottom: 36px; padding: 13px 15px; }
  .director-caption > span { display: inline; margin-left: 0; }
  .director-caption > .image-edit-note { margin-top: 0; }
  .director-caption strong { font-size: 16px; }
  .director-caption small { font-size: 9px; }
  .image-edit-note { font-size: 8px; margin-top: 8px; }
  .greeting-quote { margin-bottom: 20px; font-size: 27px; line-height: 1.7; }
  .greeting-copy > .greeting-quote { font-size: 19px; }
  .greeting-copy > p { font-size: 12px; line-height: 2; }
  .director-sign { margin-top: 21px; font-size: 10px; }
  .director-sign strong { font-size: 21px; }
  .credentials { margin-top: 22px; }
  .credential-grid { grid-template-columns: 1fr; gap: 0; }
  .credential-grid li { font-size: 10px; margin-top: 5px; }
  .stories { padding: 63px 0 55px; }
  .story-grid { grid-template-columns: 1fr; gap: 30px; }
  .story-image-wrap { aspect-ratio: 4 / 3; }
  .story-category { font-size: 10px; }
  .story-content { padding-top: 17px; }
  .story-title { font-size: 17px; }
  .story-excerpt { font-size: 12px; margin-top: 8px; }
  .story-more { margin-top: 12px; font-size: 10px; }
  .privacy-note { font-size: 9px; margin-top: 26px; }
  .faq { padding: 48px 0 52px; }
  .faq-layout { grid-template-columns: 1fr; gap: 27px; }
  .faq .section-heading { font-size: 28px; }
  .faq .text-link { margin-top: 15px; }
  .faq-list summary { padding-top: 18px; padding-bottom: 18px; font-size: 12px; }
  .faq-list summary::before { margin-right: 9px; font-size: 14px; }
  .faq-list summary::after { top: 16px; }
  .faq-list details p, .faq-list .faq-answer { padding-left: 22px; padding-right: 14px; font-size: 11px; }
  .contact { padding: 60px 0 48px; }
  .contact-grid { grid-template-columns: 1fr; gap: 33px; }
  .contact-copy .section-heading { font-size: 30px; }
  .contact-copy .section-intro { font-size: 12px; }
  .contact-phone { margin: 19px 0 14px; font-size: clamp(32px, 9.6vw, 44px); gap: 9px; }
  .contact-phone .icon { width: 22px; height: 22px; }
  .contact-hours { font-size: 11px; }
  .contact-address { font-size: 12px; }
  .contact-actions { margin-top: 21px; }
  .contact-actions .button { font-size: 12px; }
  .visit-note { font-size: 10px; }
  .location-info { padding: 20px; }
  .location-links { gap: 15px; }
  .location-links a, .copy-address { font-size: 10px; }
  .recruit { padding-bottom: 50px; }
  .recruit-inner { display: block; padding: 28px 24px; }
  .recruit-copy h2 { font-size: 21px; }
  .recruit-copy p { font-size: 11px; }
  .recruit-action { margin-top: 24px; }
  .recruit-action-icon { display: none; }
  .recruit-action .button { width: 100%; }
  .recruit-action p { font-size: 9px; }
  .site-footer { padding: 34px 0 22px; }
  .footer-top { display: block; padding-bottom: 23px; }
  .footer-brand p { margin-top: 13px; font-size: 11px; }
  .footer-info { margin-top: 24px; font-size: 9px; line-height: 2; }
  .footer-info span { margin-right: 10px; }
  .footer-bottom { flex-direction: column; gap: 8px; font-size: 8px; padding-top: 16px; }
  .mobile-contact { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: grid; grid-template-columns: 1fr 2fr; gap: 9px; padding: 9px 17px max(9px, env(safe-area-inset-bottom)); min-height: 68px; background: rgb(250 249 245 / 98%); border-top: 1px solid #d7dfcf; box-shadow: 0 -3px 18px rgb(32 63 53 / 5%); backdrop-filter: blur(10px); }
  .mobile-contact a { display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 5px; font-size: 12px; font-weight: 500; line-height: 1.5; min-height: 47px; }
  .mobile-contact a:first-child { border: 1px solid #c4d0bc; color: var(--green); }
  .mobile-contact a:last-child { background: var(--green); color: white; }
  .mobile-contact .icon { width: 17px; height: 17px; }
  .back-to-top { right: 15px; bottom: 82px; width: 34px; height: 34px; }
  .back-to-top .icon { width: 15px; height: 15px; }
  .toast { bottom: 84px; padding: 11px 17px; font-size: 11px; }
  .story-dialog { width: calc(100% - 26px); max-height: 88dvh; border-radius: 10px; }
  .dialog-close { width: 34px; height: 34px; right: 11px; top: 11px; }
  .dialog-body { padding: 24px 23px 28px; }
  .dialog-category { font-size: 10px; }
  .dialog-title { font-size: 23px; }
  .dialog-text { font-size: 12px; margin-top: 16px; }
}

@media (max-width: 359px) {
  .container { width: calc(100% - 32px); }
  .hero-title { font-size: 33px; }
  .hero-actions { gap: 7px; }
  .hero-actions .button { padding-inline: 15px; font-size: 11px; }
  .trust-item { gap: 7px; }
  .trust-item:nth-child(even) { padding-left: 9px; }
  .trust-copy strong { font-size: 10px; }
  .trust-copy { font-size: 8px; }
  .trust-icon { width: 21px; }
  .trust-icon svg { width: 22px; height: 22px; }
  .cost-panel { padding-inline: 17px; }
  .contact-phone { font-size: 34px; }
}

/* Comfortable reading for older visitors, including on a small phone. */
.hero-description, .section-intro, .section-head-row > .section-intro,
.service-card > p, .audience .section-intro, .check-list li,
.cost-copy > p:not(.support-stat),
.greeting-copy > p:not(.eyebrow):not(.greeting-quote):not(.director-sign),
.family-banner p, .recruit-copy > p:not(.recruit-label),
.faq-list details p, .contact-copy .section-intro, .dialog-text {
  font-size: 15px;
  color: #596a5f;
}
.text-link, .audience .text-link, .cost-copy > .text-link,
.story-excerpt, .contact-hours, .contact-address,
.location-links a, .copy-address, .faq-list summary,
.process-step p, .process-heading p,
.visit-note, .visit-note p span, .contact-message {
  font-size: 14px;
  color: #596a5f;
}
.section-note, .audience-card > p, .cost-disclaimer, .cost-caption,
.cost-example, .image-edit-note, .director-caption > .image-edit-note,
.privacy-note, .credential-grid li, .family-banner .section-note,
.location-info .image-edit-note, .hero-note, .recruit-action p {
  font-size: 12px;
  color: #687761;
}
.cost-tab { min-height: 44px; font-size: 13px; }
.cost-result > p:first-child, .cost-result > p:first-child span { font-size: 13px; color: #687761; }
.cost-caption { flex-wrap: wrap; }
.location-links a, .copy-address { min-height: 44px; }
.process-step h4, .trust-copy strong { font-size: 15px; }
.trust-copy, .trust-copy > span { font-size: 12px; }
.footer-info { font-size: 12px; color: #bdcbb7; }
.footer-bottom { font-size: 11px; color: #afc2a5; }
.button, .hero-actions .button, .contact-actions .button { font-size: 15px; }
.button-sm, .family-banner .button { font-size: 14px; }
.nav-link { font-size: 14px; }
@media (max-width: 1023px) and (min-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; max-width: 680px; gap: 30px; }
  .hero-visual { width: 78%; margin: 0 auto 40px; }
  .hero-copy { padding-bottom: 0; }
  .hero-title { font-size: 49px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  body { padding: 0; background: white; color: black; font-size: 11px; }
  .site-header { position: static; }
  .topbar, .desktop-nav, .header-call, .menu-toggle, .mobile-contact, .back-to-top, .toast, .hero-actions, .contact-actions, .recruit-action { display: none !important; }
  .container { width: 100%; }
  section { break-inside: avoid; padding-block: 28px !important; }
  .hero-photo { height: 300px; }
  .hero-title { font-size: 35px; }
  .site-footer { background: white; color: black; }
  .story-card { break-inside: avoid; }
}

/* Browse real care stories at a comfortable pace. */
.story-carousel { position: relative; min-width: 0; }
.story-carousel .story-grid {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 52px) / 3);
  gap: 26px;
  width: calc(100% + 12px);
  max-width: calc(100% + 12px);
  margin-inline: -6px;
  padding: 8px 6px 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.story-carousel .story-grid::-webkit-scrollbar { display: none; }
.story-carousel .story-card { scroll-snap-align: start; scroll-margin-inline: 6px; }
.story-carousel .story-card:focus-visible { outline-offset: 3px; }
.story-carousel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; }
.story-carousel-controls { display: flex; align-items: center; gap: 9px; }
.story-carousel-controls button, .story-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid #bfcdbf;
  border-radius: 50%;
  background: var(--paper);
  color: var(--green);
  transition: background .2s, border-color .2s;
}
.story-carousel-controls button:hover, .story-nav-arrow:hover { background: var(--sage); border-color: var(--green); }
.story-carousel-controls button:disabled { opacity: .45; }
.story-carousel-controls .icon, .story-nav-arrow .icon { width: 20px; height: 20px; }
.story-nav-arrow { position: absolute; top: clamp(105px, 11vw, 150px); z-index: 2; box-shadow: 0 3px 13px rgb(32 63 53 / 12%); }
#stories-prev { left: -21px; }
#stories-next { right: -21px; }
.story-nav-arrow:disabled { opacity: .45; }
.story-progress { display: inline-flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; }
#story-current { color: var(--green); font-size: 18px; font-weight: 600; }
@media (min-width: 768px) and (max-width: 1023px) {
  .story-carousel .story-grid { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; }
}
@media (max-width: 767px) {
  .story-carousel .story-grid { grid-auto-columns: 100%; gap: 20px; }
  .story-carousel-toolbar { gap: 12px; margin-top: 10px; }
  .story-carousel-controls { gap: 7px; }
  .story-carousel-controls button { min-width: 44px; height: 44px; }
  #stories-prev { left: -14px; }
  #stories-next { right: -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-carousel .story-grid { scroll-behavior: auto; }
}
@media print {
  .story-carousel .story-grid { width: 100%; max-width: 100%; margin: 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; }
  .story-carousel-toolbar { display: none; }
  .story-nav-arrow { display: none; }
}

.hero-story-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; border-radius: 240px 240px 18px 18px; }
.hero-story-button:focus-visible { outline-offset: 6px; }
.hero-visual .since-badge, .hero-mini-card, .hero-photo-label { pointer-events: none; }
.hero-mini-card { max-width: 330px; min-height: 90px; }
.hero-mini-card > div { min-width: 0; }
#hero-story-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.55; }
#hero-story-excerpt { line-height: 1.6; }
#hero-story-category { display: block; margin-top: 1px; text-align: right; color: #f7e4b3; }
/* Clearer introduction and a dedicated family-care guide. */
.hero-grid { grid-template-columns: 1.24fr 1fr; gap: 42px; }
.hero-title { font-size: clamp(34px, 3.2vw, 44px); line-height: 1.55; }
.hero-title-lead, .hero-title em { display: block; }
.hero-title em { font-size: .95em; letter-spacing: -.075em; }
.hero-description { font-size: 17px; line-height: 1.95; }
.desktop-nav { gap: 23px; }
.greeting-grid { align-items: start; }
.credentials summary { font-size: 15px; }
.credential-grid h3 { font-size: 14px; }
.credential-grid li { font-size: 13px; }
.story-carousel-toolbar { margin-bottom: 18px; }
.story-carousel-hint { font-size: 14px; color: var(--muted); }
.story-arrow-prev { transform: rotate(180deg); }
.family-care-section { padding: 96px 0; background: #e9eee7; }
.family-care-heading { max-width: 680px; margin-bottom: 44px; }
.family-care-heading .section-intro { font-size: 17px; }
.family-care-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.family-care-explanation { min-width: 0; }
.family-care-symbol { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #cbd7c8; border-radius: 50%; margin-bottom: 26px; color: var(--green); background: #f4f6ef; }
.family-care-symbol .icon { width: 32px; height: 32px; stroke-width: 1.4; }
.family-care-explanation > h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.65; letter-spacing: -.055em; }
.family-care-explanation > p { font-size: 15px; line-height: 2; color: #53685b; margin-top: 18px; }
.family-care-reassurance { margin-top: 25px; padding-top: 24px; border-top: 1px solid #cbd6c6; display: flex; gap: 12px; align-items: flex-start; }
.family-care-reassurance > .icon { margin-top: 4px; }
.family-care-reassurance p { font-size: 14px; color: #53685b; line-height: 1.9; }
.family-care-reassurance strong { font-weight: 500; color: var(--green-dark); }
.family-care-panel { min-width: 0; padding: 36px; border-radius: 12px; background: var(--green); color: #f7f7f0; box-shadow: 0 16px 36px rgb(32 63 53 / 10%); }
.family-care-panel-label { display: block; color: #d8e1cf; font-size: 13px; letter-spacing: .04em; margin-bottom: 8px; }
.family-care-panel > h3 { font-size: 23px; font-weight: 500; margin-bottom: 28px; line-height: 1.6; }
.family-care-panel .button { margin-top: 30px; width: 100%; color: var(--green-dark); }
.family-care-panel-note { margin-top: 12px; font-size: 12px; line-height: 1.8; color: #d7e1d7; text-align: center; }
.family-care-footnote { color: #596a5f; margin-top: 25px; max-width: 950px; }
.family-care-benefits { display: grid; gap: 19px; margin-top: 28px; padding-top: 26px; border-top: 1px solid #cad7c8; }
.family-care-benefits > div { display: flex; align-items: flex-start; gap: 13px; }
.family-care-benefits > div > .icon { width: 22px; height: 22px; margin-top: 5px; color: var(--green); }
.family-care-benefits p { margin: 0; font-size: 14px; line-height: 1.85; color: #53685b; }
.family-care-benefits strong, .family-care-benefits span { display: block; }
.family-care-benefits strong { color: var(--green-dark); font-size: 16px; font-weight: 500; margin-bottom: 2px; }
.family-care-invitation { padding: 42px 36px; }
.family-care-panel-icon { width: 54px; height: 54px; color: #eedbb6; stroke-width: 1.2; margin-bottom: 28px; }
.family-care-invitation > h3 { font-family: var(--serif); font-size: 27px; line-height: 1.65; margin-bottom: 24px; }
.family-care-invitation-copy { font-size: 15px; line-height: 1.95; color: #e2ebe0; }
.family-care-invitation-copy + .family-care-invitation-copy { margin-top: 18px; }
.guide-faq { margin-top: 58px; padding: 42px 34px; border-radius: 12px; }
.guide-faq .faq-layout { grid-template-columns: .78fr 1.5fr; gap: 40px; }
.guide-faq .section-intro { font-size: 14px; }
.director-photo-label { width: fit-content; max-width: calc(100% - 28px); margin-inline: auto; padding: 6px 12px; border-radius: 4px; background: rgb(32 63 53 / 78%); text-shadow: none; }
@media (max-width: 1050px) {
  .desktop-nav, .header-call { display: none; }
  .menu-toggle { display: grid; place-items: center; }
  .hero-grid { grid-template-columns: 1fr; max-width: 710px; gap: 32px; }
  .hero-copy { padding-bottom: 0; }
  .hero-visual { width: 78%; margin: 0 auto 40px; }
  .hero-title { font-size: 44px; }
  .hero-photo { height: 450px; }
  .family-care-layout { gap: 32px; }
  .family-care-panel { padding: 26px; }
  .family-care-explanation > h3 { font-size: 23px; }
}
@media (max-width: 767px) {
  .hero-grid { gap: 22px; }
  .hero-title { font-size: clamp(28px, 8.1vw, 36px); line-height: 1.55; }
  .hero-title em { font-size: 1em; }
  .hero-description { font-size: 16px; }
  .hero-visual { width: 94%; margin-bottom: 30px; }
  .hero-photo { height: 370px; }
  .hero-mini-card { max-width: 275px; min-height: 88px; bottom: 48px; }
  .family-care-section { padding: 62px 0; }
  .family-care-heading { margin-bottom: 30px; }
  .family-care-heading .section-intro { font-size: 16px; }
  .family-care-layout { grid-template-columns: 1fr; gap: 28px; }
  .family-care-explanation > h3 { font-size: 23px; }
  .family-care-panel { padding: 27px 23px; }
  .family-care-panel > h3 { font-size: 21px; }
  .family-care-panel .button { padding-inline: 12px; font-size: 14px; }
  .family-care-invitation { padding: 32px 24px; }
  .family-care-invitation > h3 { font-size: 24px; }
  .guide-faq { margin-top: 38px; padding: 28px 22px; }
  .guide-faq .faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .story-carousel-toolbar { flex-wrap: wrap; gap: 14px; }
  .story-carousel-controls { width: 100%; justify-content: flex-end; }
  .story-progress { margin-right: auto; }
}

.director-photo { height: auto; aspect-ratio: 3 / 4; object-position: center; }