/* Keep It G Life Services. Round 4 (Terrell, 2026-10-27): three colours only. White, black, and the yellow of the
   shirt in the Keep It G logo, #FFCB05, sampled from site-src/img/keepitg-logo.png (85% of its yellow pixels are
   exactly that value; the favicon matches). Pale yellow #FFF7D6 is the same yellow mixed into white, used for the
   alternate bands. Every clickable thing is black (or white on black) at rest and turns yellow on hover, keyboard
   focus and tap, the way the old "Meet Terrell" button did. Yellow is never text on white (1.5:1); it is a fill or
   it is text on black.
   Measured contrast: black on yellow 13.8:1, black on pale yellow 19.5:1, #4D4D4D on pale yellow 7.9:1, #4D4D4D
   on white 8.5:1, #4D4D4D on yellow 5.6:1, white on black 21:1, yellow on black 13.8:1, field borders #6B6B6B
   5.3:1. Type: DM Serif Display for display only (h1, h2, the post blocks); Inter for everything else. */
/* Fonts are self-hosted (Fontsource copies of the Google Fonts files, SIL Open Font License), latin subset. The
   serif italic stays for the one italic moment on the site, the hero line. */
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dm-serif-display-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/dm-serif-display-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }
:root {
  --page: #FFFFFF;
  --ink: #000000;
  --body: #1A1A1A;
  --muted: #4D4D4D;
  --yellow: #FFCB05;
  --tint: #FFF7D6;
  --line: #E4E1D6;
  --field-border: #6B6B6B;
  --error: #B42318;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: clamp(40px, 5.6vw, 64px);
  --fs-h2: clamp(30px, 3.6vw, 44px);
  --fs-h3: clamp(21px, 1.8vw, 24px);
  --fs-lead: clamp(18px, 1.5vw, 20px);
  --fs-body: 17px;
  --fs-small: 15px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --radius: 16px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--body); font: 400 var(--fs-body)/1.65 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; border-radius: 3px; transition: background-color 160ms ease, color 160ms ease; }
/* Text links: the yellow arrives as a highlight behind the words, so the text itself stays black. */
a:not(.btn):active, a:not(.btn):focus-visible { background: var(--yellow); color: var(--ink); }
h1, h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0 0 var(--s-4); overflow-wrap: break-word; text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.005em; }
h3 { font: 600 var(--fs-h3)/1.25 var(--sans); color: var(--ink); margin: 0 0 var(--s-2); letter-spacing: -0.01em; text-wrap: balance; }
:where(* + h2) { margin-top: var(--s-7); }
p { margin: 0 0 1em; }
strong { font-weight: 600; color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--yellow); color: var(--ink); }
input, textarea, select { accent-color: var(--ink); caret-color: var(--ink); }
.ico { width: 18px; height: 18px; flex: none; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 50; border-radius: 8px; }
.skip:focus { left: 12px; }
.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.narrow { width: min(720px, 100% - 40px); }
.center { text-align: center; }
.band { padding: clamp(var(--s-8), 8vw, var(--s-9)) 0; }
.band.tint { background: var(--tint); }
.band.dark { background: var(--ink); color: #fff; }
.band.dark :is(h2, h3, .lead, strong) { color: #fff; }
.band.dark a:not(.btn) { color: #fff; }
.band.dark a:not(.btn):is(:hover, :active, :focus-visible), .foot a:not(.btn):is(:hover, :active, :focus-visible) { color: var(--ink); }
.band.dark :focus-visible { outline-color: var(--yellow); }
.page-top { padding-top: var(--s-7); }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--body); max-width: 62ch; }
.center .lead { margin-inline: auto; }
.section-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); }
.section-head h1, .section-head h2 { margin: 0; }
.section-head .lead { margin: 0; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

/* Buttons: black at rest, yellow on hover, focus and tap (Terrell: "the background can change from black to
   yellow"). The ring stays on so a yellow button still reads as a button on a pale yellow band. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 24px;
  border-radius: 999px; border: 0; background: var(--ink); color: #fff; box-shadow: inset 0 0 0 2px var(--ink);
  font: 600 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; text-align: center;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.btn.ghost, .retreat .btn { background: transparent; color: var(--ink); }
.band.dark .btn { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px #fff; }
.band.dark .btn.ghost { background: transparent; color: #fff; }
.btn:active { transform: scale(0.97); }
.btn:is(:active, :focus-visible), .band.dark .btn:is(:active, :focus-visible) { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.band.dark .btn:is(:active, :focus-visible) { box-shadow: inset 0 0 0 2px var(--yellow); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover, .band.dark .btn:hover { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
  .band.dark .btn:hover { box-shadow: inset 0 0 0 2px var(--yellow); }
  a:not(.btn):hover { background: var(--yellow); color: var(--ink); }
}
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.actions.center { justify-content: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; margin-left: -6px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--yellow); }
.link-arrow .ico { transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover .ico, .card-link:hover .link-arrow .ico { transform: translateX(3px); }
}
.pill { display: inline-block; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; }

/* Header: Home, About, a Services dropdown, and the Book dropdown pinned top right. Both dropdowns are <details>,
   so they open on a tap or click (never hover only) and work without JavaScript. */
.nav { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: var(--s-3); min-height: 68px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 600 17px/1.2 var(--sans); min-height: 44px; padding: 0 6px; margin-left: -6px; white-space: nowrap; }
.brand img { width: 48px; height: 48px; flex: none; }
.links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.links > a, .dd-btn { color: var(--ink); text-decoration: none; font: 500 15px/1.2 var(--sans); padding: 10px 12px; border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.links > a[aria-current="page"], .dd-btn.is-current { box-shadow: inset 0 -3px 0 var(--ink); border-radius: 0; }
.dd { position: relative; }
.dd > summary { list-style: none; }
.dd > summary::-webkit-details-marker { display: none; }
.chev { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
.dd[open] > summary .chev { transform: rotate(180deg); }
.dd[open] > .dd-btn, .dd-btn:is(:active, :focus-visible) { background: var(--yellow); color: var(--ink); }
.dd-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 270px; display: grid; gap: 2px; padding: 8px;
  background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.45); }
.dd-right { left: auto; right: 0; }
.dd-menu a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; font-weight: 500; text-decoration: none; color: var(--ink); }
.dd-menu a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--ink); border-radius: 0 8px 8px 0; font-weight: 600; }
.dd-book { flex: none; }
.nav-book { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 18px 8px 22px; margin-left: 6px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 600 15px/1.2 var(--sans); cursor: pointer; box-shadow: inset 0 0 0 2px var(--ink);
  transition: background-color 160ms ease, color 160ms ease; }
.dd-book[open] > .nav-book, .nav-book:is(:active, :focus-visible) { background: var(--yellow); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .links > a:hover, .dd-btn:hover, .dd-menu a:hover, .brand:hover { background: var(--yellow); color: var(--ink); }
  .nav-book:hover { background: var(--yellow); color: var(--ink); }
}
.menu-btn { display: none; width: 48px; height: 48px; border: 0; background: transparent; border-radius: 12px; cursor: pointer; color: var(--ink); padding: 12px; }
.menu-btn:is(:active, :focus-visible), .nav.open .menu-btn { background: var(--yellow); }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover { background: var(--yellow); } }
.menu-btn svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; overflow: visible; }
.menu-btn path { transition: transform 200ms var(--ease-out), opacity 150ms ease; transform-origin: 12px 12px; }
.nav.open .menu-btn .l1 { transform: translateY(5px) rotate(45deg); }
.nav.open .menu-btn .l2 { opacity: 0; }
.nav.open .menu-btn .l3 { transform: translateY(-5px) rotate(-45deg); }

/* Phones and small tablets: Home, About and Services fold into the menu button; Book stays in the bar. */
@media (max-width: 760px) {
  .menu-btn { display: block; flex: none; }
  .dd-book { margin-left: auto; position: static; } /* its menu then spans the bar, not the button */
  .nav-book { margin-left: 0; }
  .links {
    position: absolute; left: -20px; right: -20px; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 20px 20px;
    background: #fff; border-bottom: 2px solid var(--ink); box-shadow: 0 18px 30px -24px rgba(0, 0, 0, 0.45);
    max-height: calc(100vh - 72px); overflow-y: auto; margin: 0;
    opacity: 0; transform: translateY(-6px); visibility: hidden;
    transition: opacity 180ms ease, transform 220ms var(--ease-out), visibility 0s linear 220ms;
  }
  .nav.open .links { opacity: 1; transform: none; visibility: visible; transition: opacity 180ms ease, transform 220ms var(--ease-out); }
  .links > a, .dd-btn { font-size: 19px; padding: 10px 14px; width: 100%; }
  .dd-btn { justify-content: space-between; }
  .links > a[aria-current="page"], .dd-btn.is-current { box-shadow: inset 4px 0 0 var(--ink); }
  .links .dd-menu { position: static; min-width: 0; border: 0; box-shadow: none; padding: 2px 0 6px 18px; }
  .links .dd-menu a { font-size: 17px; }
  .dd-right { position: absolute; top: 100%; right: -20px; left: -20px; margin-top: 0; border-radius: 0; border-width: 0 0 2px; padding: 8px 20px 16px; }
  .dd-right a { font-size: 18px; }
}
/* "Keep It G Life Services" (Terrell 2026-10-29) does not fit beside Book and the menu button on phones, so phones
   show "Keep It G"; the smallest phones show the logo alone. */
@media (max-width: 480px) { .brand-more { display: none; } }
@media (max-width: 360px) { .brand span { display: none; } }

/* Hero: Unsplash photo g13fW6LiKf0 (Hero B, a lone person on a sunlit beach with a long shadow, Unsplash
   License), Terrell's pick 2026-10-29. The text wash is light and stops before the middle so the person stays clear. Black text on the
   washed sand stays well above AA. */
.hero { position: relative; min-height: min(86vh, 820px); display: grid; align-items: center; overflow: hidden; background: #874205; }
.hero-media { position: absolute; inset: 0; }
.hero-media picture, .hero-img { display: block; width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: 50% 50%; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.72) 30%, rgba(255, 255, 255, 0) 50%); }
.hero-inner { position: relative; z-index: 1; padding: var(--s-8) 0; }
.hero-text { max-width: 520px; }
.kicker { font: italic 400 clamp(19px, 1.8vw, 23px)/1.45 var(--serif); color: var(--ink); margin: 0 0 18px; letter-spacing: 0; }
.welcome { font: 400 clamp(30px, 3.4vw, 44px)/1.16 var(--serif); color: var(--ink); margin: 0; text-wrap: balance; }

@media (max-width: 760px) {
  .hero { display: block; min-height: 0; background: #fff; }
  .hero-media { position: relative; aspect-ratio: 1 / 1; max-height: 70vh; width: 100%; overflow: hidden; }
  /* Phones get the square crop as is: it is already cut tight to the subject, so no zoom. */
  .hero-img { object-position: 50% 50%; transform: none; }
  .hero::after { display: none; }
  .hero-media::after { content: ""; position: absolute; inset: auto 0 0; height: 14%; background: linear-gradient(0deg, #fff, rgba(255, 255, 255, 0)); }
  .hero-inner { padding: 0 0 var(--s-7); margin-top: -20px; }
}

/* Entrance: one short staggered moment on the hero text, never hides content for long */
.rise { animation: rise 520ms var(--ease-out) both; }
.rise:nth-child(2) { animation-delay: 70ms; }
.rise:nth-child(3) { animation-delay: 140ms; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Mission with the logo art */
.mission-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.logo-art { width: 100%; max-width: 420px; margin-inline: auto; }
@media (max-width: 760px) { .mission-grid { grid-template-columns: 1fr; } .logo-art { max-width: 280px; } }

/* Cards: only where the items really are parallel (services, retreats, posts). */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 900px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid3, .grid2 { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card-link { color: inherit; text-decoration: none; transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease; }
.card-link:focus-visible { outline-offset: 4px; border-radius: var(--radius); }
.card-link:is(:active, :focus-visible) { background: var(--yellow); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .card-link:hover { color: inherit; background: var(--yellow); transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.45); }
}
.card-link:is(:hover, :active, :focus-visible) .meta { color: var(--ink); }
.card-body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.card-body h2 { font: 600 var(--fs-h3)/1.25 var(--sans); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 var(--s-2); }
.card-body h2 a { color: var(--ink); text-decoration: none; display: inline-block; padding: 10px 0; margin: -10px 0; }

.card-body > p:last-child { margin-bottom: 0; }
.card-actions { margin-top: auto; padding-top: var(--s-2); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.tile .card-body { padding: var(--s-6) var(--s-5) var(--s-5); }
.tile h3 { font-size: clamp(24px, 2.2vw, 28px); }
.tile .link-arrow { margin-top: auto; }
.card-art { aspect-ratio: 3 / 2; background: var(--tint); display: grid; place-items: end center; padding-top: 6%; overflow: hidden; }
.card-art img { height: 100%; width: auto; }
.card-photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--tint); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 20%; }
/* Type blocks stand in for the old stock-look post covers: pale yellow, white, black, so three read as a set. */
.post-block { aspect-ratio: 3 / 2; background: var(--tint); display: flex; align-items: flex-end; padding: var(--s-5); }
.post-block span { font: 400 clamp(28px, 2.6vw, 34px)/1.1 var(--serif); color: var(--ink); max-width: 14ch; }
.post-block.tone-1 { background: #fff; border-bottom: 1px solid var(--line); }
.post-block.tone-2 { background: var(--ink); }
.post-block.tone-2 span { color: #fff; }
.meta { color: var(--muted); font-size: var(--fs-small); margin-top: auto; padding-top: var(--s-2); }
.read-more { margin-top: var(--s-5); font-weight: 500; }

/* Retreats */
.retreat .card-body h3 { margin-bottom: var(--s-3); }
.facts.small { margin: 0 0 var(--s-4); }
.facts.small li { grid-template-columns: 72px 1fr; }

/* Service pages */
.crumbs { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--s-4); }
.crumbs a { display: inline-block; padding: 10px 0; }
.svc-top { max-width: 720px; }
.svc-top > p:not(.lead) { max-width: 66ch; }
.facts { list-style: none; padding: 0; margin: var(--s-5) 0 var(--s-5); display: grid; border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: 88px 1fr; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts span { font: 600 14px/1.65 var(--sans); color: var(--muted); }
.svc-top .actions { margin-top: 0; }
/* Retreats: the tagline words as yellow keyword pills (Terrell's styling, 2026-10-29). */
.keywords { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.keywords li { background: var(--yellow); color: var(--ink); font: 700 clamp(16px, 1.6vw, 19px)/1.2 var(--sans); padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--ink); }
.contact-box { margin-top: var(--s-6); padding: var(--s-5); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.contact-h { font: 600 var(--fs-h3)/1.25 var(--sans); color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.contact-box .actions { margin-top: var(--s-4); }
.contact-box .btn { max-width: 100%; overflow-wrap: anywhere; }

/* Long-form text */
.prose { font-size: 18px; line-height: 1.7; }
.prose p { max-width: 66ch; }
.post-title { font-size: clamp(34px, 4.6vw, 52px); }
.byline { display: flex; align-items: center; gap: var(--s-3); color: var(--muted); font-size: var(--fs-small); line-height: 1.45; margin: 0 0 var(--s-6); }
.byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 55% 18%; }
.sub { font-size: var(--fs-lead); line-height: 1.6; color: var(--body); margin-bottom: var(--s-6); }
/* About photo: Terrell's own portrait photo of his Keep It G banner (2026-10-29), shown whole at its own shape. */
.about-photo { margin: 0; padding: var(--s-7) var(--s-4); display: flex; justify-content: center; }
.about-photo img { display: block; width: min(88vw, 480px); height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }

/* About */
.team h2.center { margin-bottom: var(--s-7); }
.team-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.portrait { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 608 / 685; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 20%; }
.name { font: 600 var(--fs-h3)/1.25 var(--sans); color: var(--ink); margin: 0 0 var(--s-1); }
.role { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--s-5); }
@media (max-width: 760px) { .team-grid { grid-template-columns: 1fr; } .portrait { max-width: 420px; } }

/* Forms: the Cloud Shield Systems pattern on the light Keep It G surfaces */
.kg-form { max-width: 620px; margin: var(--s-5) 0 0; background: var(--tint); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: grid; gap: var(--s-4); }
.band.tint .kg-form { background: #fff; border-color: var(--line); }
.kg-form label { display: grid; gap: 7px; font: 600 15px/1.4 var(--sans); color: var(--ink); }
.kg-form .opt { font-weight: 500; font-size: 13px; color: var(--muted); margin-left: 4px; }
.kg-form input, .kg-form textarea, .kg-form select, .subscribe input {
  font: 400 16px/1.4 var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--field-border);
  border-radius: 10px; padding: 12px 14px; min-height: 48px; width: 100%; }
.kg-form textarea { resize: vertical; min-height: 110px; }
.kg-form input::placeholder, .kg-form textarea::placeholder { color: var(--field-border); }
.kg-form :is(input, textarea, select):focus-visible, .subscribe input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; border-color: var(--ink); border-radius: 10px; }
.kg-form .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.kg-form fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px 20px; margin: 0; display: grid; gap: var(--s-4); min-width: 0; background: rgba(255, 255, 255, 0.55); }
.kg-form legend { font: 600 17px/1.3 var(--sans); color: var(--ink); padding: 0 6px; }
.kg-submit { width: 100%; font-size: 17px; }
.kg-submit[disabled] { opacity: 0.6; cursor: wait; }
.form-msg { margin: 0; min-height: 1.4em; font-weight: 600; text-align: center; color: var(--ink); }
.form-msg.err { color: var(--error); }
.kg-form.done { text-align: center; padding: 40px 28px; }
.kg-form.done h2 { font-size: 26px; margin: 0; }
.kg-form.done h2:focus, .subscribe.done h2:focus { outline: none; }
.kg-form.done p { margin: 10px 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .kg-form { padding: 20px; } .kg-form .f2 { grid-template-columns: 1fr; } }
.other-ways { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.other-ways li { border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 4px 0; }

/* Footer: black, white text, yellow on every touch. */
.foot { background: var(--ink); color: #E6E6E6; padding: var(--s-8) 0 28px; }
.foot h2 { font: 600 var(--fs-h3)/1.25 var(--sans); color: #fff; margin: 0 0 var(--s-3); letter-spacing: -0.01em; }
.foot a { color: #fff; }
.foot :focus-visible { outline-color: var(--yellow); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-7); }
.subscribe label { display: block; font-weight: 500; color: #fff; font-size: var(--fs-small); }
.subscribe input { border-color: #fff; }
.sub-row { display: flex; gap: 10px; margin-top: 6px; max-width: 480px; }
.subscribe .form-msg { text-align: left; margin-top: var(--s-2); color: #fff; }
.subscribe .form-msg.err { color: var(--yellow); }
.foot .btn { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px #fff; }
.foot .btn:is(:active, :focus-visible) { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 2px var(--yellow); }
@media (hover: hover) and (pointer: fine) { .foot .btn:hover { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 2px var(--yellow); } }
.subscribe.done h2 { margin: 0; }
.contact p { margin: 0 0 2px; }
.contact a { display: inline-block; padding: 10px 4px; margin-left: -4px; font-weight: 500; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid rgba(255, 255, 255, 0.25); }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin-left: -6px; font-weight: 500; }
.foot-links a[aria-current="page"] { text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.fine { margin-top: var(--s-3); font-size: 14px; color: #BFBFBF; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } .sub-row { flex-direction: column; } .sub-row .btn { align-self: flex-start; } }

/* Independent Living Arrangements: Terrell's own page and components (round 4b), recoloured: his navy is black,
   his gold #FFCB05, his gold-soft #FFF7D6. */
.eyebrow { display: flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--sans); color: var(--ink); margin: 0 0 var(--s-3); }
.eyebrow::before { content: ""; width: 22px; height: 6px; border-radius: 3px; background: var(--yellow); flex: none; }
.eyebrow + h1, .eyebrow + h2 { margin-top: 0; }
.il-hero { background: linear-gradient(135deg, #000 0%, #000 45%, #2B2B2B 100%); color: #fff; padding: clamp(56px, 8vw, 104px) 0; }
.il-hero-inner { max-width: 760px; }
.il-hero .eyebrow { color: var(--yellow); }
.il-hero h1 { color: #fff; }
.il-hero .lead { color: #F2F2F2; }
.il-hero .btn.ghost { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.il-hero a:not(.btn) { color: #fff; }
.il-hero :focus-visible { outline-color: var(--yellow); }
/* His gold buttons. They are already yellow, so on hover, focus and tap they flip to white with a yellow ring. */
.btn.il-gold { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 2px var(--yellow); }
.btn.il-gold:is(:active, :focus-visible) { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 3px var(--yellow); }
.il-hero .btn.ghost:is(:active, :focus-visible) { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 2px var(--yellow); }
@media (hover: hover) and (pointer: fine) {
  .btn.il-gold:hover, .band.dark .btn.il-gold:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 3px var(--yellow); }
  .il-hero .btn.ghost:hover { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 2px var(--yellow); }
}
.il-status { display: inline-block; margin: var(--s-5) 0 0; padding: 8px 16px; border-radius: 999px; font: 600 14px/1.4 var(--sans);
  color: var(--yellow); background: rgba(255, 203, 5, 0.12); box-shadow: inset 0 0 0 1px var(--yellow); }
.il-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(24px, 5vw, 64px); align-items: start; margin-top: var(--s-5); }
.il-callout { margin: 0; background: var(--tint); border-left: 6px solid var(--yellow); border-radius: 0 12px 12px 0; padding: var(--s-5); }
.il-callout h3 { margin-top: 0; }
.il-callout p:last-child { margin-bottom: 0; }
.il-callout .il-checks { margin: 0 0 var(--s-3); }
.il-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.il-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-5); }
.il-card p:last-child { margin-bottom: 0; }
.il-tag { display: inline-block; font: 600 13px/1 var(--sans); color: var(--ink); background: var(--yellow); padding: 6px 12px; border-radius: 999px; margin: 0 0 var(--s-3); }
.il-steps { list-style: none; margin: var(--s-6) 0 0; padding: 0; counter-reset: step; display: grid; gap: var(--s-4); max-width: 860px; }
.il-steps li { counter-increment: step; display: grid; grid-template-columns: 64px 1fr; gap: var(--s-4); align-items: start; }
.il-steps li::before { content: counter(step); width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--yellow);
  font: 400 28px/56px var(--serif); text-align: center; }
.il-steps h3 { margin: 6px 0 4px; }
.il-steps p { margin: 0; }
.il-checks { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); max-width: 760px; }
.il-checks li { display: flex; gap: 12px; align-items: flex-start; }
.tick { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; margin-top: 1px; }
.tick .ico { width: 16px; height: 16px; }
.il-fine { font-size: var(--fs-small); color: var(--muted); font-weight: 500; }
/* Round 5 (Terrell 2026-10-28): referrals are by phone or email, no online form. His line sits on a yellow-edged
   band so the number and address read as the way in. */
.il-refer { max-width: 62ch; margin: var(--s-5) 0; padding: var(--s-4) var(--s-5); border-left: 6px solid var(--yellow); background: var(--tint);
  border-radius: 0 12px 12px 0; font-size: var(--fs-lead); line-height: 1.6; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.il-refer a { font-weight: 600; text-decoration: underline; }
.il-faqs { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.il-faq { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.il-faq > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 56px;
  padding: 14px 18px; font: 600 18px/1.35 var(--sans); color: var(--ink); cursor: pointer; border-radius: 12px; }
.il-faq > summary::-webkit-details-marker { display: none; }
.il-faq[open] > summary { border-radius: 12px 12px 0 0; }
.il-faq > summary:is(:active, :focus-visible), .il-faq[open] > summary { background: var(--yellow); }
@media (hover: hover) and (pointer: fine) { .il-faq > summary:hover { background: var(--yellow); } }
.pm { position: relative; flex: none; width: 18px; height: 18px; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: currentColor; transition: transform 200ms var(--ease-out); }
.pm::after { transform: rotate(90deg); }
.il-faq[open] .pm::after { transform: rotate(0deg); }
.il-faq-a { padding: var(--s-4) 18px var(--s-5); max-width: 66ch; }
@media (max-width: 900px) { .il-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .il-two, .il-grid { grid-template-columns: 1fr; } .il-steps li { grid-template-columns: 48px 1fr; gap: var(--s-3); }
  .il-steps li::before { width: 44px; height: 44px; font-size: 22px; line-height: 44px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: fade 200ms ease both; }
  .card-link, .btn, .links, .menu-btn path, .link-arrow .ico, .chev, .nav-book, a, .pm::before, .pm::after { transition-duration: 1ms; }
  .card-link:hover { transform: none; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}