:root {
  --navy: #164d69;
  --navy-2: #0f3d56;
  --blue: #249bd2;
  --green: #19ce2f;
  --orange: #ffa31a;
  --cream: #fffaf0;
  --white: #ffffff;
  --ink: #163345;
  --muted: #557080;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: "Nunito", sans-serif; font-size: 1rem; line-height: 1.65; }
a { color: inherit; }
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 2rem; min-height: 82px; padding: .6rem clamp(1.25rem, 5vw, 5rem); background: rgba(255,255,255,.97); border-bottom: 5px solid; border-image: linear-gradient(90deg,var(--blue) 0 33%,var(--green) 33% 66%,var(--orange) 66%) 1; backdrop-filter: blur(14px); }
.brand { display: block; margin-right: auto; }
.brand img { display: block; width: 138px; height: 64px; object-fit: contain; }
nav { display: flex; gap: 1.8rem; }
nav a { text-decoration: none; font-weight: 800; }
nav a:hover, nav a:focus-visible { color: var(--blue); }
nav a.active { color: var(--blue); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { cursor: pointer; list-style: none; padding: .62rem 1rem; color: white; background: var(--navy); border: 3px solid var(--blue); border-radius: 999px; font-weight: 900; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::before { content: "☰"; margin-right: .45rem; }
.mobile-menu[open] summary::before { content: "×"; }
.mobile-menu > div { position: absolute; top: calc(100% + .8rem); right: 0; min-width: 210px; overflow: hidden; background: white; border: 4px solid var(--orange); border-radius: 18px 6px 18px 18px; box-shadow: 0 18px 45px rgba(15,61,86,.22); }
.mobile-menu a { display: block; padding: .85rem 1.1rem; color: var(--navy); font-weight: 900; text-decoration: none; }
.mobile-menu a + a { border-top: 1px solid #dce7ec; }
.mobile-menu a.active { color: white; background: var(--blue); }
.header-call { padding: .72rem 1.2rem; color: var(--white); background: var(--orange); border: 3px solid #e98c00; border-radius: 999px; font-weight: 900; text-decoration: none; box-shadow: 0 5px 0 #bd7000; }

.hero { min-height: 670px; display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: 5rem clamp(1.25rem, 7vw, 7rem); overflow: hidden; background: radial-gradient(circle at 8% 8%, rgba(255,163,26,.18) 0 5%, transparent 5.3%), radial-gradient(circle at 92% 12%, rgba(36,155,210,.18) 0 8%, transparent 8.3%), radial-gradient(circle at 85% 90%, rgba(25,206,47,.14) 0 9%, transparent 9.3%), linear-gradient(135deg, #fff 0%, var(--cream) 100%); }
.eyebrow { margin: 0 0 .8rem; color: var(--blue); font-size: .82rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
h1 { max-width: 780px; margin: 0; color: var(--navy-2); font-size: clamp(3.1rem, 6.5vw, 6.4rem); line-height: .96; letter-spacing: -.055em; }
h1 span { display: inline; }
.word-grow { color: var(--blue); }
.word-learn { color: var(--green); }
.word-thrive { color: var(--orange); }
.hero-text { max-width: 650px; margin: 1.8rem 0 2rem; color: var(--muted); font-size: 1.18rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.button { display: inline-block; padding: .95rem 1.4rem; border: 2px solid var(--navy); border-radius: 999px; font-weight: 900; text-decoration: none; }
.button.primary { color: var(--white); background: var(--blue); border-color: #167aa8; box-shadow: 0 5px 0 #126a92; }
.button.secondary { color: var(--navy); background: var(--white); border-color: var(--orange); box-shadow: 0 5px 0 #db890a; }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18,63,88,.12); }
.hero-visual { position: relative; min-height: 520px; display: grid; place-items: center; }
.logo-board { position: relative; z-index: 2; width: min(430px, 84%); padding: 1.3rem 1.3rem 1.6rem; text-align: center; background: white; border: 8px solid var(--orange); border-radius: 46% 54% 48% 52% / 52% 45% 55% 48%; box-shadow: 0 26px 0 rgba(36,155,210,.16), 0 34px 60px rgba(15,61,86,.18); transform: rotate(-2deg); }
.logo-board::after { content: ""; position: absolute; inset: 14px; z-index: -1; border: 4px dashed rgba(25,206,47,.5); border-radius: inherit; }
.logo-arc-text { position: absolute; inset: 8px; z-index: 3; width: calc(100% - 16px); height: calc(100% - 16px); overflow: visible; pointer-events: none; }
.logo-arc-text text { font-family: "Nunito", sans-serif; font-weight: 900; letter-spacing: .08em; }
.arc-welcome { fill: var(--blue); font-size: 23px; }
.arc-care { fill: var(--navy); font-size: 18px; letter-spacing: .025em !important; }
.logo-board img { display: block; width: 100%; height: 290px; object-fit: contain; mix-blend-mode: multiply; }
.value-card { position: absolute; z-index: 4; min-width: 165px; padding: .85rem 1rem; background: white; border-radius: 18px 18px 18px 5px; box-shadow: 0 18px 45px rgba(18,63,88,.16); transform: rotate(2deg); }
.value-card strong, .value-card span { display: block; }
.value-card strong { color: var(--navy); font-size: 1.12rem; }
.value-card span { color: var(--muted); font-size: .82rem; }
.card-one { top: 5%; left: 0; border-left: 7px solid var(--blue); transform: rotate(-4deg); }
.card-two { top: 44%; right: -2%; border-left: 7px solid var(--green); transform: rotate(4deg); }
.card-three { bottom: 1%; left: 6%; border-left: 7px solid var(--orange); transform: rotate(-2deg); }

.play-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; padding: 1.1rem 1.5rem; color: white; background: var(--navy); font-weight: 900; letter-spacing: .16em; }
.play-strip span:nth-of-type(3n+1) { color: #8cdefb; }
.play-strip span:nth-of-type(3n+2) { color: #8df19a; }
.play-strip span:nth-of-type(3n) { color: #ffc567; }
.play-strip i { color: white; font-style: normal; }

.photo-feature { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(2.5rem,6vw,7rem); padding: 6.5rem clamp(1.25rem,7vw,7rem); }
.photo-feature.about-photo { grid-template-columns: .82fr 1.18fr; background: #fffaf0; }
.photo-frame { position: relative; }
.photo-frame::before { content: ""; position: absolute; inset: -14px 18px 18px -14px; z-index: 0; background: linear-gradient(135deg,var(--blue),var(--green),var(--orange)); border-radius: 38px 38px 12px 38px; transform: rotate(-2deg); }
.about-photo .photo-frame::before { inset: 18px -14px -14px 18px; transform: rotate(2deg); }
.photo-frame img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; border: 7px solid white; border-radius: 32px 32px 8px 32px; box-shadow: 0 24px 55px rgba(15,61,86,.18); }
.about-photo .photo-frame img { border-radius: 32px 8px 32px 32px; }
.photo-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.1rem; }
.photo-copy .button { margin-top: .7rem; }

.welcome { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 7rem); padding: 6.5rem clamp(1.25rem, 7vw, 7rem) 3rem; }
h2 { margin: 0; color: var(--navy); font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.08; letter-spacing: -.035em; }
.welcome > p { margin: 0; color: var(--muted); font-size: 1.12rem; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0 clamp(1.25rem, 7vw, 7rem) 7rem; }
.pillars article { padding: 2rem; background: white; border: 4px solid; border-radius: 28px 28px 10px 28px; box-shadow: 0 12px 0 rgba(15,61,86,.08); }
.pillars article + article { padding-left: 2rem; }
.pillars .pillar-blue { border-color: var(--blue); background: #effaff; }
.pillars .pillar-green { border-color: var(--green); background: #f2fff4; transform: translateY(16px); }
.pillars .pillar-orange { border-color: var(--orange); background: #fff8e9; }
.number { display: grid; place-items: center; width: 46px; height: 46px; color: white; background: var(--navy); border-radius: 14px; font-size: 1.35rem; font-weight: 900; }
h3 { margin: .45rem 0; color: var(--navy); font-size: 1.45rem; }
.pillars p { margin: 0; color: var(--muted); }

.mission { display: grid; grid-template-columns: .28fr 1fr; gap: 1rem; padding: 6rem clamp(1.25rem, 9vw, 10rem); color: white; background: linear-gradient(135deg,var(--navy-2),var(--navy)); border-top: 12px solid var(--green); }
.mission-mark { color: var(--orange); font-size: clamp(8rem, 18vw, 16rem); font-weight: 900; line-height: .8; }
.mission .eyebrow { color: #8bdcf6; }
blockquote { max-width: 950px; margin: 0 0 1.5rem; font-size: clamp(2rem, 3.5vw, 3.6rem); font-weight: 800; line-height: 1.14; letter-spacing: -.025em; }
.mission p:last-child { max-width: 800px; color: #d4e6ef; font-size: 1.08rem; }
.mission .text-link { display: inline-block; margin-top: .75rem; color: white; font-weight: 900; text-decoration-color: var(--orange); text-underline-offset: 5px; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 8rem); padding: 7rem clamp(1.25rem, 7vw, 7rem); background: linear-gradient(145deg,#fffaf0,#eefaff); }
.contact > div:first-child > p:last-child { max-width: 580px; color: var(--muted); }
.contact-card { overflow: hidden; align-self: center; background: white; border: 5px solid var(--orange); border-radius: 28px 28px 8px 28px; box-shadow: 12px 12px 0 rgba(36,155,210,.2); }
.contact-card > * { display: block; padding: 1.25rem 1.5rem; text-decoration: none; }
.contact-card > * + * { border-top: 1px solid #e1e9ed; }
.contact-card a:hover { background: #f1faff; }
.contact-card span, .contact-card strong { display: block; overflow-wrap: anywhere; }
.contact-card span { color: var(--blue); font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.contact-card strong { color: var(--navy); font-size: 1.1rem; }
footer { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 2rem; padding: 2rem clamp(1.25rem, 7vw, 7rem); color: #dbe9f0; background: var(--navy-2); }
footer img { width: 150px; height: 70px; object-fit: contain; background: white; border-radius: 12px; }
footer p { margin: 0; font-size: .9rem; }
.image-note { margin: 0; padding: .65rem 1rem; color: #6c818d; background: #f2f7f9; text-align: center; font-size: .78rem; }

.page-hero { min-height: 510px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 4rem; padding: 5rem clamp(1.25rem, 8vw, 9rem); overflow: hidden; }
.page-hero > div { max-width: 850px; }
.page-hero h1 { font-size: clamp(3.5rem, 6vw, 6rem); }
.page-hero p:last-child { max-width: 680px; color: var(--muted); font-size: 1.2rem; }
.page-hero img { width: min(370px,100%); padding: 1rem; background: white; border: 7px solid var(--orange); border-radius: 50% 44% 51% 46%; box-shadow: 16px 18px 0 rgba(22,77,105,.13); transform: rotate(3deg); }
.page-hero-blue { background: radial-gradient(circle at 92% 15%,rgba(255,163,26,.25),transparent 24%),#eefaff; }
.page-hero-green { background: radial-gradient(circle at 8% 80%,rgba(36,155,210,.2),transparent 24%),#effff1; }
.page-hero-orange { background: radial-gradient(circle at 90% 80%,rgba(25,206,47,.18),transparent 22%),#fff8e9; }
.story-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,7vw,8rem); padding: 7rem clamp(1.25rem,8vw,9rem); }
.story-grid p { color: var(--muted); font-size: 1.1rem; }
.inner-pillars { margin-bottom: 7rem; }
.page-cta { padding: 6rem 1.25rem; text-align: center; background: linear-gradient(135deg,#eefaff,#fff8e9); border-top: 9px solid var(--orange); }
.page-cta h2 { max-width: 840px; margin: 0 auto 2rem; }
.mission-page { border-top-color: var(--blue); }
.development { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; padding: 6rem clamp(1.25rem,7vw,7rem); background: var(--cream); }
.development div { padding: 1.5rem; background: white; border-radius: 24px 24px 8px 24px; border-top: 7px solid var(--blue); box-shadow: 0 10px 25px rgba(15,61,86,.08); }
.development div:nth-child(2) { border-color: var(--green); }
.development div:nth-child(3) { border-color: var(--orange); }
.development div:nth-child(4) { border-color: var(--navy); }
.development span { color: var(--navy); font-size: 1.25rem; font-weight: 900; }
.development p { margin-bottom: 0; color: var(--muted); }
.contact-page { padding-top: 6rem; padding-bottom: 6rem; }
.contact-card small { display: block; margin-top: .2rem; color: var(--muted); font-weight: 700; }
.contact-note { display: grid; grid-template-columns: .35fr 1fr; align-items: center; gap: 3rem; padding: 5rem clamp(1.25rem,10vw,12rem); background: white; }
.abc-badge { display: grid; place-items: center; width: 190px; height: 190px; color: white; background: var(--green); border: 12px solid var(--blue); outline: 10px solid var(--orange); border-radius: 34% 66% 58% 42%; font-size: 3.1rem; font-weight: 900; transform: rotate(-5deg); }

@media (max-width: 880px) {
  nav { display: none; }
  .mobile-menu { display: block; }
  .hero { grid-template-columns: 1fr; padding-top: 3rem; }
  .hero-visual { min-height: 430px; }
  .welcome, .contact { grid-template-columns: 1fr; }
  .page-hero, .story-grid, .contact-note { grid-template-columns: 1fr; }
  .photo-feature, .photo-feature.about-photo { grid-template-columns: 1fr; }
  .about-photo .photo-copy { order: 2; }
  .about-photo .photo-frame { order: 1; }
  .page-hero img { width: 280px; justify-self: center; }
  .development { grid-template-columns: 1fr 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .pillars article + article { padding-left: 0; border-left: 0; border-top: 1px solid #dce7ec; }
  .mission { grid-template-columns: 1fr; }
  .mission-mark { height: 85px; }
  footer { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

@media (max-width: 520px) {
  .site-header { min-height: 72px; gap: .8rem; padding: .4rem 1rem; }
  .brand img { width: 112px; height: 58px; }
  .header-call { display: none; }
  .hero { min-height: auto; padding: 3.5rem 1.1rem 4rem; }
  h1 { font-size: clamp(2.75rem, 15vw, 4rem); }
  .hero-visual { min-height: auto; grid-template-columns: 1fr 1fr; gap: .75rem; padding: 1rem 0 .5rem; }
  .logo-board { width: min(270px, 82vw); padding: 1.1rem 1rem 1.25rem; margin: 0 auto; transform: none; }
  .hero-visual .logo-board { grid-column: 1 / -1; justify-self: center; }
  .logo-board img { height: 190px; }
  .logo-arc-text { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
  .arc-welcome { font-size: 21px; }
  .arc-care { font-size: 15px; }
  .value-card { min-width: 0; width: 100%; padding: .55rem .65rem; }
  .value-card strong { font-size: 1rem; }
  .value-card span { font-size: .73rem; line-height: 1.35; }
  .hero-visual .value-card { position: static; transform: none; }
  .hero-visual .card-three { grid-column: 1 / -1; width: calc(50% - .375rem); justify-self: center; }
  .welcome { padding-top: 4.5rem; }
  .pillars { margin-bottom: 4.5rem; }
  .mission { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .contact { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .page-hero { min-height: auto; padding: 4rem 1.1rem; gap: 2.5rem; }
  .page-hero h1 { font-size: clamp(2.8rem,14vw,4rem); }
  .development { grid-template-columns: 1fr; padding-top: 4rem; padding-bottom: 4rem; }
  .contact-note { justify-items: center; text-align: center; }
  .photo-feature { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .abc-badge { width: 150px; height: 150px; }
}