/*
Theme Name: Four Corners Legal Group, PLLC
Author: Barron AI Solutions
Text Domain: cahaba
*/

/* DESIGN_IDENTITY
   Cahaba — two banks and a bend
   1. canvas: stone wool, paper only where the words need a ground
   2. type: Ibarra Real Nova huge + Public Sans
   3. hero: the photograph stays a rectangle; the two sides sit at different heights
   4. one curve, the river, instead of rules and cards
   5. motion: the photograph drifts, type holds
*/

:root {
  --stone: #cfd6cf;
  --paper: #f6f1e6;
  --ink: #161c18;
  --mute: #525b54;
  --ox: #7a2e2a;
  --river: #3d5a52;
  --rule: #737c71;
  --well: min(1120px, calc(100% - 40px));
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--stone);
  background-image: url("textures/paper-grain.svg");
  background-size: 240px 240px;
  color: var(--ink);
  font-family: "Public Sans", "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--ox); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--ox);
  outline-offset: 3px;
}
.skip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 5;
  background: var(--paper);
  color: var(--ink);
  padding: 8px 12px;
  transform: translateY(-120%);
}
.skip:focus {
  transform: none;
  outline: 2px solid var(--ox);
  outline-offset: 3px;
}
#main:focus { outline: none; }
#cahaba-status:focus {
  outline: 2px solid var(--ox);
  outline-offset: 3px;
}
.folio-body a,
.folio p a,
.site-links a,
.bottom a {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: currentColor;
  text-underline-offset: 0.28em;
}
a.roster-card,
a.brand,
.top nav a {
  text-decoration: none;
}

.top {
  background: var(--paper);
}
.top-inner {
  width: var(--well);
  margin: 0 auto;
  padding: 18px 0 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px 28px;
}
.brand {
  font-family: "Ibarra Real Nova", Georgia, serif;
  font-size: 1.35rem;
  text-decoration: none;
  color: var(--ink);
  font-style: italic;
}
a.brand { font-style: normal; line-height: 0; }
.brand-logo { display: block; height: 148px; width: auto; }
.brand span { font-style: normal; font-weight: 600; }
.bottom-logo { display: block; height: 120px; width: auto; }
.river-mark { display: none; }
.top nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: flex-end;
  min-width: 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.top nav a {
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 2px;
}

.split {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: auto 84px auto;
  background: var(--paper);
  min-height: 0;
  align-items: start;
}
.bend {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  height: 84px;
  z-index: 1;
  pointer-events: none;
  display: block;
}
.split-side, .split-river { position: relative; z-index: 1; }
.split-west {
  grid-column: 1;
  grid-row: 1;
  padding: 7vh 8% 0 7%;
}
.split-east {
  grid-column: 1;
  grid-row: 3;
  padding: 0 12% 12vh 7%;
}
.who {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 12px;
}
.split h1,
.split .split-title {
  font-family: "Ibarra Real Nova", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2rem, 3.9vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  color: var(--ink);
  max-width: 16ch;
}
.drop {
  font-family: "Public Sans", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 38ch;
  margin: 0 0 28px;
  color: var(--ink);
}
.drop a { color: var(--ox); }
.text-cta {
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ox);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding-bottom: 4px;
  width: max-content;
}
.text-cta span { transition: transform 240ms ease; }
.text-cta:hover span { transform: translateX(6px); }
.split-river {
  grid-column: 2;
  grid-row: 1 / span 3;
  overflow: hidden;
  height: auto;
  align-self: stretch;
  margin: 6vh 4vw 0 0;
  background: var(--ink);
}
.split-river img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  filter: saturate(0.92) contrast(1.08);
}

.stills {
  position: relative;
  width: min(1180px, calc(100% - 64px));
  height: 92vh;
  min-height: 680px;
  margin: 8vh auto 12vh;
}
.still-bend {
  position: absolute;
  inset: 8% 0 6%;
  width: 100%;
  height: 86%;
  z-index: 0;
  pointer-events: none;
}
.still { position: absolute; margin: 0; overflow: hidden; z-index: 1; }
.still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.1) saturate(0.92);
  transition: transform 700ms ease, filter 700ms ease;
}
.still:hover img { transform: scale(1.08); filter: contrast(1.14) saturate(1); }
.still-a { left: 0; top: 0; width: 30%; height: 64%; }
.still-b { right: 0; top: 7%; width: 52%; height: 40%; }
.still-e { left: 16%; bottom: 0; width: 48%; height: 32%; }
.closer { position: relative; margin: 0; }
.closer img { width: 100%; height: 78vh; object-fit: cover; object-position: center 42%; filter: contrast(1.08); }
.closer figcaption {
  position: absolute;
  left: 7%;
  bottom: 8%;
  max-width: 85%;
  z-index: 1;
  padding: 16px 18px 14px;
  background: rgba(22, 28, 24, .78);
  color: var(--paper);
}
.closer h2 {
  font-family: "Ibarra Real Nova", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 16ch;
  margin: 0 0 18px;
  color: var(--paper);
}
.closer .text-cta { color: var(--paper); }
.story {
  background: transparent;
  padding: 10vh 0 14vh;
}
.story-lead {
  width: var(--well);
  margin: 0 auto 2vh;
}
.story ol {
  width: var(--well);
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.story li {
  display: grid;
  grid-template-columns: min(18vw, 160px) 1fr;
  gap: 24px;
  padding: 7vh 0;
  border: 0;
  align-items: start;
}
.story b {
  font-family: "Ibarra Real Nova", serif;
  font-style: italic;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.8;
  color: var(--river);
  position: sticky;
  top: 18vh;
}
.story h2 {
  font-family: "Ibarra Real Nova", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin: 0 0 10px;
}
.story p { margin: 0; max-width: 38rem; color: var(--ink); font-size: 1.05rem; }

.hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  background-image: var(--hero-img);
  background-position: var(--pos, center);
  background-size: cover;
  background-repeat: no-repeat;
  color: #f6f1e6;
}
.hero-copy {
  width: fit-content;
  max-width: 100%;
  padding: 16px 18px 14px;
  background: rgba(22, 28, 24, .78);
}
.hero-inner {
  position: relative;
  width: var(--well);
  margin: 0 auto;
  padding: 72px 0 48px;
}
.hero-inner.has-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 40px;
  align-items: end;
}
.hero-aside {
  justify-self: end;
  text-align: right;
  max-width: 22rem;
  margin: 0;
  padding: 16px 18px 14px;
  background: rgba(22, 28, 24, .78);
}
.hero-aside .kicker { color: #e7dcc8; margin: 0 0 8px; }
.hero-aside .fact {
  font-family: "Ibarra Real Nova", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.05;
  color: #f6f1e6;
  margin: 0;
}
.hero-aside .fact.is-tight { white-space: nowrap; font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.hero-aside .sub { margin: 8px 0 0; color: #f6f1e6; font-size: .95rem; max-width: 22rem; }
.hero .kicker { color: #e7dcc8; margin: 0 0 10px; }
.hero h1 {
  font-family: "Ibarra Real Nova", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: .95;
  color: #f6f1e6;
  margin: 0;
  max-width: 14ch;
}
.hero .lede {
  max-width: 38rem;
  margin: 16px 0 0;
  color: #f6f1e6;
  font-size: 1.05rem;
}
.hero .lede a { color: #f6f1e6; }
.folio {
  width: var(--well);
  margin: 36px auto 80px;
  background: transparent;
  padding: 8px 0 64px;
  box-shadow: none;
  border: 0;
}
.folio::before {
  content: "";
  display: block;
  height: 42px;
  margin: 0 0 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 42' fill='none'><path d='M4 30C120 6 210 8 340 24C490 42 580 8 756 16' stroke='%233d5a52' stroke-width='1.6'/></svg>") left center / 100% 42px no-repeat;
}
.hero + .folio::before { display: none; }
@media (min-width: 1100px) {
  form.book-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 36px;
    align-items: start;
  }
  .book-cal { grid-column: 1; }
  .book-fields { grid-column: 2; }
  .book-empty { grid-column: 1 / -1; }
}
.folio h1, .folio h2 {
  font-family: "Ibarra Real Nova", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 16px;
}
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  background: var(--river);
  color: var(--paper);
  padding: 12px 22px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.btn:hover { background: #2f4842; color: var(--paper); }
.btn:focus-visible { outline: 2px solid var(--ox); outline-offset: 3px; }
.portrait { float: right; width: min(40%, 240px); margin: 0 0 16px 20px; }
.fees { width: 100%; border-collapse: collapse; }
.fees th, .fees td { text-align: left; padding: 16px 12px 16px 0; border: 0; vertical-align: baseline; }
.fees td:last-child { font-family: "Ibarra Real Nova", serif; font-style: italic; font-size: 1.35rem; }
.field { margin-bottom: 16px; }
.field label { display: flex; flex-direction: column; gap: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  min-height: 44px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--river); }
article.folio > form:not(.book-split), .contact-layout > form, .book-fields { background: var(--paper); padding: 28px; }
.hp { position: absolute; left: -9999px; }
.ok { background: transparent; color: var(--ink); padding: 0 0 16px; }
.err { color: var(--ox); }
.month { margin: 0 0 36px; }
.month h2 {
  font-family: "Ibarra Real Nova", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.8rem;
  margin: 0 0 10px;
}
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--river);
  font-weight: 600;
  text-align: left;
  padding: 0 4px 8px;
}
.cal td {
  vertical-align: top;
  border: 0;
  background: transparent;
  height: auto;
  padding: 10px 4px;
}
.cal td.out { background: transparent; color: var(--mute); border-color: transparent; }
.cal .num { font-family: "Ibarra Real Nova", serif; font-style: italic; font-size: 1.15rem; display: block; }
.cal-time { display: flex; align-items: flex-start; gap: 4px; font-size: .78rem; margin-top: 4px; cursor: pointer; line-height: 1.2; }
.fc {
  --fc-border-color: rgba(22, 28, 24, .16);
  --fc-page-bg-color: #fff;
  --fc-neutral-bg-color: #fff;
  --fc-neutral-text-color: var(--mute);
  --fc-today-bg-color: #fff;
  background: #fff;
}
.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid { border-color: rgba(22, 28, 24, .16); background: #fff; }
.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion { color: var(--ink); text-decoration: none; }
.fc .fc-day-disabled,
.fc .fc-day-other,
.fc .fc-daygrid-day,
.fc .fc-col-header-cell,
.fc .fc-daygrid-day.fc-day-today { background: #fff; }
.fc .fc-day-other .fc-daygrid-day-top { opacity: 1; }
.fc .fc-day-other .fc-daygrid-day-number { color: var(--mute); }
.fc .fc-event:focus-visible { outline: 2px solid var(--ox); outline-offset: 2px; }
.fc .fc-toolbar-title { font-family: "Ibarra Real Nova", serif; font-style: italic; font-weight: 400; font-size: 1.8rem; }
.fc .fc-button {
  background: transparent;
  border: 0;
  color: var(--ink);
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  padding-left: 0;
  padding-right: 14px;
}
.fc .fc-button:hover, .fc .fc-button:focus { background: transparent; color: var(--ox); }
.fc .fc-daygrid-event {
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--river);
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
  margin: 1px 4px;
  padding: 0;
  font-size: .82rem;
  line-height: 1.3;
}
.cal-short { display: none; }
.fc .fc-event.is-picked,
.fc .fc-event.is-booked {
  background: transparent;
  border: 0;
  color: var(--ox);
  font-style: italic;
  text-decoration-color: var(--ox);
}
#cahaba-picked { margin: 14px 0 18px; }
.cal-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 700px) {
  .cal td { height: auto; min-height: 64px; padding: 4px 2px; }
  .cal-time { font-size: .68rem; }
  .cal .num { font-size: 1rem; }
}
.slot-list { display: grid; gap: 8px; }
@media (min-width: 700px) { .slot-list { grid-template-columns: 1fr 1fr; } }
.slot {
  border: 0;
  border-bottom: 1.5px solid var(--river);
  padding: 12px 0;
  background: transparent;
  cursor: pointer;
  display: block;
}
.slot:hover, .slot:has(input:checked) { color: var(--ox); }
.faq details { border: 0; padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.steps { list-style: none; padding: 0; }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 14px 0; border: 0; }
.steps b { font-family: "Ibarra Real Nova", serif; font-style: italic; font-size: 1.4rem; color: var(--river); }

.legal {
  background-color: var(--paper);
  background-image: none;
  padding: 22px 0 28px;
}
.disclaimer, .site-links {
  width: var(--well);
  margin: 0 auto;
  font-size: 0.92rem;
  color: var(--ink);
  background-color: var(--paper);
  background-image: none;
}
.site-links { margin-top: 8px; }
.bottom {
  background: var(--ink);
  color: var(--paper);
  margin-top: 48px;
  padding: 40px 0;
  font-size: 0.9rem;
}
.bottom a { color: #d7c7b4; }
.bottom-inner {
  width: var(--well);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.bottom-place { margin: 0; }
.bottom nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bottom nav li { margin: 0; }
.bottom nav a { text-decoration: none; }
@media (min-width: 800px) {
  .bottom-inner { grid-template-columns: 1.4fr auto; align-items: end; }
  .bottom nav { grid-column: 1 / -1; }
}
.bas-credit { padding: 14px; text-align: center; opacity: 0.6; }
.bas-credit a { color: inherit; text-decoration: none; }

@media (max-width: 860px) {
  .split { display: flex; flex-direction: column; min-height: 0; overflow: visible; }
  .bend { display: none; }
  .split-river { order: 0; height: 42vh; width: 100%; align-self: stretch; margin: 0; }
  .split-river img { width: 100%; height: 42vh; object-fit: cover; }
  .split-west, .split-east { padding: 28px 8% 8px; width: auto; }
  .split-east { padding-bottom: 40px; }
  .top-inner { grid-template-columns: 1fr; align-items: start; }
  .brand-logo { height: 120px; }
  .top nav { justify-content: flex-start; }
  .story li, .story li:nth-child(even) { grid-template-columns: 1fr; margin-left: 0; }
  .story b { position: static; }
  .folio { width: min(760px, calc(100% - 36px)); margin-left: auto; margin-right: auto; padding: 8px 0 48px; }
  .portrait { float: none; width: 100%; }
  .stills { width: 100%; height: auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; margin: 20px 0 36px; }
  .still-bend { display: none; }
  .still, .still-a, .still-b, .still-e { position: static; width: 100%; height: 42vh; }
  .hero { min-height: 380px; }
  .hero h1 { font-size: 2.6rem; }
  .hero-inner.has-aside { grid-template-columns: 1fr; }
  .hero-aside { justify-self: start; text-align: left; max-width: none; margin: 0; padding: 14px 16px; background: rgba(22, 28, 24, .78); }
  .folio { width: min(760px, calc(100% - 36px)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Page copy from the block editor (Process, FAQ, About). */
.folio-body .intro { font-size: 1.18rem; }
.folio-body h2.wp-block-heading { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 44px 0 14px; }
.folio-body h3.wp-block-heading { font-family: "Ibarra Real Nova", serif; font-size: 1.3rem; font-weight: 600; margin: 0 0 6px; }
.folio-body .steps { counter-reset: step; margin: 18px 0 8px; }
.folio-body .steps .step, .folio-body .people .person { margin: 0 0 14px; }
.folio-body .step { counter-increment: step; position: relative; background: #fff; border-left: 3px solid var(--river); padding: 18px 20px 14px 72px; }
.folio-body .step::before { content: counter(step); position: absolute; left: 22px; top: 12px; font-family: "Ibarra Real Nova", serif; font-style: italic; font-size: 2rem; color: var(--river); }
.folio-body .step p { margin: 0; }
.folio-body .faq { border-top: 1px solid var(--rule); }
.folio-body .wp-block-details { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.folio-body .wp-block-details summary { cursor: pointer; font-weight: 600; min-height: 28px; }
.folio-body .wp-block-details > p:first-of-type { margin-top: 10px; }
.folio-body .wp-block-buttons.cta-row { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 8px 0 0; }

.folio-body .tenets { padding-left: 1.2em; }
.folio-body .tenets li { margin: 6px 0; }
.folio-body .people { margin: 0; }
.folio-body .person { background: #fff; padding: 18px 20px; }
.folio-body .person .role { color: var(--mute); margin: 0 0 8px; letter-spacing: 0.04em; }
.folio-body .page-note { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--mute); font-size: 0.92rem; }
@media (max-width: 600px) {
  .folio-body .step { padding: 16px 16px 12px 56px; }
  .folio-body .step::before { left: 16px; font-size: 1.7rem; }
}
.monogram { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; width: 100%; background: var(--river); color: var(--paper); font-family: "Ibarra Real Nova", serif; font-style: italic; font-size: clamp(2.4rem, 6vw, 4rem); }
.roster-card .role { color: var(--mute); margin: 0; }
.folio-body .person h3 a { color: inherit; text-decoration: none; }
.bio-pic .monogram { max-width: 320px; }

/* Tap targets: calendar times and menus are easy to hit on a phone. */
.fc .fc-daygrid-event { min-height: 24px; display: flex; align-items: center; }
.bottom nav a { display: inline-block; min-height: 24px; padding: 3px 0; }
@media (max-width: 700px) {
  .fc .fc-daygrid-event { min-height: 32px; font-size: 14px; }
  .top nav a { font-size: 14px; }
}


/* Inner pages: a photo beside a section of the page text. */
.section-figure { margin: 0; overflow: hidden; }
.section-figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 861px) {
  .hero:not(.hero-plain) { min-height: clamp(460px, 36vw, 680px); }
  body.page-template-page-schedule-php .hero-inner { padding-top: clamp(72px, 19vw, 320px); }
  .split-river img { position: absolute; inset: 0; }
  .section-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 48px; align-items: start; }
  .section-photo .section-text { grid-column: 1; grid-row: 1; }
  .section-photo .section-figure { grid-column: 2; grid-row: 1; margin-top: 52px; }
}
@media (max-width: 860px) {
  .section-photo { display: flex; flex-direction: column; }
  .section-text { order: 1; }
  .section-figure { order: 2; margin: 36px 0 0; }
  /* Phones and small tablets: the photo is a clear band on top, the text boxes sit under it. */
  .hero { display: block; min-height: 0; background-image: none; background-color: var(--ink); }
  .hero:not(.hero-plain)::before { content: ""; display: block; height: min(62vw, 420px); background: var(--hero-img) var(--pos-m, center) / cover no-repeat; }
  .hero-inner { padding: 20px 0 28px; }
  .hero-copy, .hero-aside { background: none; padding-left: 0; padding-right: 0; }
}

/* Home steps: heading and intro across the top, then one straight list with one photo beside it. */
.story-lead { width: var(--well); margin: 0 auto 10px; }
.story-layout { width: var(--well); margin: 0 auto; }
.story ol { width: auto; margin: 0; }
.story li, .story li:nth-child(even) {
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0 8px;
  align-items: baseline;
  margin-left: 0;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}
.story b { position: static; font-size: 1.9rem; line-height: 1; }
.story-aside { margin: 0; overflow: hidden; }
.story-aside img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 45% center; }
@media (min-width: 1100px) {
  .story-layout { display: grid; grid-template-columns: minmax(0, 1fr) 44%; gap: 64px; align-items: start; }
  .story-aside { margin-top: 13px; }
  .story li, .story li:nth-child(even) { padding: 12px 0; }
  .story h2 { margin-bottom: 6px; }
}
@media (max-width: 1099px) {
  .story-layout { display: flex; flex-direction: column; }
  .story-aside { order: -1; margin: 24px 0 8px; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .story-aside img { aspect-ratio: 16 / 9; object-position: center 22%; }
}

/* Contact: the form card with the office facts beside it. */
.contact-aside { margin: 32px 0 0; max-width: 34rem; }
.contact-aside p { margin: 0 0 14px; }
@media (min-width: 1100px) {
  .contact-layout { display: grid; grid-template-columns: 60% minmax(0, 1fr); gap: 56px; align-items: start; }
  .contact-aside { margin: 0; }
}

/* Plain top for the short legal pages and the 404. */
.hero-plain { min-height: 0; background: var(--paper); color: var(--ink); }
.hero-plain .hero-inner { padding: 56px 0 36px; }
.hero-plain .hero-copy, .hero-plain .hero-aside { background: none; padding: 0; }
.hero-plain h1, .hero-plain .lede, .hero-plain .fact, .hero-plain .sub { color: var(--ink); }
.hero-plain .kicker { color: var(--mute); }
@media (max-width: 860px) { .hero-plain { background: var(--paper); } }

/* Fees: three rate cards. */
.rate-cards { display: grid; gap: 20px; margin: 28px 0 32px; }
.rate-card { background: var(--paper); padding: 26px 24px 22px; border-top: 3px solid var(--river); }
.rate-card .kicker { margin: 0 0 10px; }
.rate-card .rate { font-family: "Ibarra Real Nova", serif; font-style: italic; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; margin: 0 0 10px; color: var(--ink); }
.rate-card .when { margin: 0; color: var(--ink); }
.rate-card .rate-note { margin: 8px 0 0; color: var(--mute); font-size: .95rem; }
@media (min-width: 700px) { .rate-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Section grounds: inner sections with a photo alternate paper and stone, full bleed. */
.section-photo { padding: 36px 0 28px; }
.section-photo:nth-of-type(odd) { background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
.section-photo + .section-photo { margin-top: 12px; }
.closer { overflow: hidden; }
.closer img, .split-river img, .story-aside img, .section-figure img { will-change: transform; }

/* Type, option B (2026-10-05): h1 Ibarra italic, h2 Ibarra upright, paragraphs Source Serif 4,
   labels, nav, kickers, buttons and forms Public Sans, prices and numerals Ibarra italic. */
p, li, .lede, .drop, .folio-body, .contact-aside, .story p, .split p { font-family: "Source Serif 4", Georgia, serif; }
.kicker, .who, .tag, .top nav, .bottom, .legal, .disclaimer, .site-links, .btn, .text-cta,
.field, .field label, form > p, .ok, .err, .hero-aside .sub, .rate-card .when, .rate-card .rate-note,
.top nav li, .top nav a, .bottom li, .bottom a, .bottom p, .site-links a, .fc, .cal, .slot, .roster-card p, .bottom-place, .steps li p { font-family: "Public Sans", "Helvetica Neue", sans-serif; }
.folio h2, .folio-body h2.wp-block-heading, .split .split-title, .closer h2, .story h2, .story-lead h2, .month h2, .fc .fc-toolbar-title { font-style: normal; font-weight: 400; }

/* Every action link is a button, site wide (Shane, 2026-10-05): theme links (.text-cta) and editor buttons. */
.btn, .text-cta, .folio-body .wp-block-button__link, .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px;
  width: max-content; min-height: 44px; padding: 12px 22px;
  background: var(--river); color: var(--paper);
  border: 0; border-radius: 0;
  font-family: "Public Sans", "Helvetica Neue", sans-serif; font-size: 0.92rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  transition: background 200ms ease;
}
.btn:hover, .btn:focus-visible, .text-cta:hover, .text-cta:focus-visible, .wp-block-button__link:hover, .wp-block-button__link:focus-visible { background: #2f4842; color: var(--paper); }
.btn:focus-visible, .text-cta:focus-visible, .wp-block-button__link:focus-visible { outline: 2px solid var(--ox); outline-offset: 3px; }
.closer .text-cta { color: var(--paper); }
.folio-body .wp-block-buttons.cta-row { gap: 12px 16px; margin: 16px 0 0; }
.contact-aside .text-cta { margin-top: 4px; }
.folio p a.text-cta, .folio-body a.text-cta, .folio-body a.wp-block-button__link { text-decoration: none; color: var(--paper); }


/* Phone menu (Shane 10-10: "the site needs a nice mobile menu"). The panel opens as a diamond from the star on the button, the shape in the logo. */
.menu-btn, .menu-close, .menu-extra { display: none; }
@media (max-width: 860px) {
  .top-inner { grid-template-columns: auto auto; justify-content: space-between; align-items: center; padding: 10px 0; }
  .brand-logo { height: 88px; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 10px 16px;
    background: transparent; color: var(--ink);
    border: 1px solid var(--rule); border-radius: 0;
    font-family: "Public Sans", "Helvetica Neue", sans-serif;
    font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
    cursor: pointer;
  }
  .menu-star { width: 18px; height: 18px; fill: #b8955a; transition: transform .5s ease; }
  .menu-btn:hover .menu-star, .menu-btn:focus-visible .menu-star { transform: rotate(45deg); }
  .top nav#site-menu {
    position: fixed; inset: 0; z-index: 50;
    justify-self: stretch; align-self: stretch; width: auto;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 0; padding: 88px 32px 40px;
    background: var(--river); color: var(--paper);
    overflow-y: auto;
    --r: 260vmax;
    clip-path: polygon(var(--mx, 90%) var(--my, 40px), var(--mx, 90%) var(--my, 40px), var(--mx, 90%) var(--my, 40px), var(--mx, 90%) var(--my, 40px));
    visibility: hidden;
    transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .55s;
  }
  .menu-open .top nav#site-menu {
    clip-path: polygon(var(--mx) calc(var(--my) - var(--r)), calc(var(--mx) + var(--r)) var(--my), var(--mx) calc(var(--my) + var(--r)), calc(var(--mx) - var(--r)) var(--my));
    visibility: visible;
    transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s;
  }
  .menu-open, .menu-open body { overflow: hidden; }
  .top nav#site-menu ul { list-style: none; margin: 0; padding: 0; display: block; }
  .top nav#site-menu li { margin: 0; opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
  .menu-open .top nav#site-menu li { opacity: 1; transform: none; }
  .menu-open .top nav#site-menu li:nth-child(1) { transition-delay: .18s; }
  .menu-open .top nav#site-menu li:nth-child(2) { transition-delay: .22s; }
  .menu-open .top nav#site-menu li:nth-child(3) { transition-delay: .26s; }
  .menu-open .top nav#site-menu li:nth-child(4) { transition-delay: .30s; }
  .menu-open .top nav#site-menu li:nth-child(5) { transition-delay: .34s; }
  .menu-open .top nav#site-menu li:nth-child(6) { transition-delay: .38s; }
  .menu-open .top nav#site-menu li:nth-child(7) { transition-delay: .42s; }
  .menu-open .top nav#site-menu li:nth-child(n+8) { transition-delay: .46s; }
  .top nav#site-menu a {
    font-family: "Ibarra Real Nova", Georgia, serif; font-style: italic;
    font-size: clamp(1.7rem, 8vw, 2.4rem); letter-spacing: 0; text-transform: none;
    color: var(--paper); min-height: 48px; padding: 4px 0; line-height: 1.15;
  }
  .top nav#site-menu .current-menu-item > a { color: #d9bd86; }
  .top nav#site-menu a:focus-visible { outline: 2px solid #d9bd86; outline-offset: 4px; }
  .menu-close {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 18px; right: 20px;
    width: 48px; height: 48px; padding: 0;
    background: transparent; color: var(--paper);
    border: 1px solid rgba(246, 241, 230, .5); border-radius: 0;
    font-size: 28px; line-height: 1; cursor: pointer;
  }
  #site-menu .menu-item:has(> a[href$="/schedule/"]) { display: none; }
  .menu-extra { display: block; margin-top: 32px; opacity: 0; transition: opacity .3s ease .5s; }
  .menu-open .menu-extra { opacity: 1; }
  .top nav#site-menu .menu-extra .btn {
    font-family: "Public Sans", "Helvetica Neue", sans-serif; font-style: normal;
    font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
    background: var(--paper); color: var(--river); padding: 12px 22px;
  }
  .menu-extra p { margin: 20px 0 0; font-size: 15px; color: rgba(246, 241, 230, .72); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .top nav#site-menu, .menu-open .top nav#site-menu { transition: none; }
  .top nav#site-menu li, .menu-extra, .menu-star { transition: none; }
}

/* Lawmatics intake frame. The form centers itself in whatever height it gets, so each tier is the smallest height
   with no overflow, measured inside the live frame (10-10), plus 60px: frame <480 needs up to 2,882; 480-759 needs 1,700; 760+ needs up to 1,682. */
.lm-embed { container-type: inline-size; }
.lm-frame { display: block; width: 100%; border: 0; background: #fff; height: 1745px; }
@container (max-width: 759px) { .lm-frame { height: 1760px; } }
@container (max-width: 479px) { .lm-frame { height: 2950px; } }

/* Shelbie 10-10: "I don't care for the squiggly line on the home page and the square boxes on top of the photos that are different sizes."
   No wave anywhere. Hero and closer text sit on one fade rising from the photo's bottom edge, no boxes. Phones keep the dark band under the photo. */
.bend, .folio::before { display: none !important; }
.hero:not(.hero-plain)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(16, 21, 18, .82) 0%, rgba(16, 21, 18, .55) 38%, rgba(16, 21, 18, 0) 72%);
}
.hero-inner { z-index: 1; }
.hero-copy, .hero-aside { background: none; padding: 0; }
.hero-inner.has-aside { align-items: end; }
.hero h1, .hero-aside .fact { text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }
.closer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(16, 21, 18, .82) 0%, rgba(16, 21, 18, .5) 35%, rgba(16, 21, 18, 0) 65%);
}
.closer figcaption { background: none; padding: 0; z-index: 2; }
@media (max-width: 860px) {
  .hero:not(.hero-plain)::after { display: none; }
  .hero-aside { background: none; padding: 0; }
}

/* Her photos in the existing home slots (10-10): crop positions only, layout unchanged. */
.split-river img { object-position: center; }
.story-aside img { object-position: center top; }

/* Home (Shane 10-10, his pick of five): her photo 1 across the top, all three blocks clear; the two matching halves sit on the plain wood below, buttons on one line. */
.home-v3 { position: relative; background: #efe6cf; }
.home-v3-photo { display: block; aspect-ratio: 3 / 2; max-height: 78vh; width: 100%; background: var(--hero-img) center 30% / cover no-repeat; }
.split-home { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6vw; align-items: stretch; width: auto; margin: 0; padding: 64px max(20px, calc((100% - 1120px) / 2)) 80px; }
.split-home .split-west, .split-home .split-east { grid-column: auto; grid-row: auto; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }
.split-home .split-title { margin-top: 0; }
.split-home .text-cta { margin-top: auto; }
.split-home.split-one { align-items: end; }
.split-home.split-one .split-east .drop { max-width: 34em; }
.split-home.split-one .text-cta { margin-top: 24px; }
.home-v3 .split-home { background: linear-gradient(#efe6cf, var(--paper)); margin-top: -5vw; position: relative; padding-top: 0; }
.home-v3 .split-home::before { content: ""; position: absolute; left: 0; right: 0; top: -5vw; height: 5vw; background: linear-gradient(to bottom, rgba(239, 230, 207, 0), #efe6cf); pointer-events: none; }
@media (max-width: 860px) {
  .split-home { display: flex; flex-direction: column; gap: 48px; padding: 32px 18px 48px; }
  .home-v3 .split-home { margin-top: 0; }
  .home-v3 .split-home::before { display: none; }
}
/* Home top photo trimmed top and bottom, never the sides (Shane 10-10). */
.home-v3-photo { aspect-ratio: 5 / 2; max-height: none; background-position: center 70%; }
@media (min-width: 861px) { .home-v3-photo { background-position: center 63%; } }
@media (min-width: 861px) { .home-v3-photo { aspect-ratio: 3 / 1; } }


/* Private document link page and the intake note (Shane 10-10). */
.send-docs-note { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); max-width: 640px; }
.send-link .checklist, .send-link .sent-list { list-style: none; padding: 0; margin: 0 0 32px; }
.send-link .checklist li, .send-link .sent-list li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.send-link .checklist li.have { color: var(--river); }
.send-link .checklist li.need { color: var(--ox); }
.send-link h2 { margin-top: 32px; }

/* Section photos hold at the top while their section scrolls, then the next section's photo takes over (Shane 10-10). */
@media (min-width: 861px) {
  .section-photo .section-figure { position: sticky; top: 24px; align-self: start; }
}

/* Depth (Shane 10-11: "the whole site had parallax, and some shadows"). Top photos drift by moving their crop (motion.js sets --py from 0 at scroll 0).
   Shadows are soft and tinted with the ink green, on photos, cards, forms and buttons, never on the text. */
:root {
  --shadow-card: 0 1px 2px rgba(22, 28, 24, .06), 0 8px 18px -6px rgba(22, 28, 24, .16), 0 24px 48px -20px rgba(22, 28, 24, .24);
  --shadow-photo: 0 2px 4px rgba(22, 28, 24, .08), 0 20px 40px -12px rgba(22, 28, 24, .32), 0 48px 90px -36px rgba(22, 28, 24, .34);
}
.home-v3-photo.is-drift, .hero.is-drift { background-position-y: calc(var(--bgy, 50%) + var(--py, 0px)); }
@media (max-width: 860px) {
  .hero.is-drift::before { background-position-y: calc(var(--bgy, 50%) + var(--py, 0px)); }
}
.hero-inner { will-change: transform; }
.top { position: relative; z-index: 3; box-shadow: 0 10px 24px -12px rgba(22, 28, 24, .4); }
.section-figure, .story-aside, .bio-pic img, .bio-pic .monogram, .portrait { box-shadow: var(--shadow-photo); }
.rate-card, .folio-body .step, .folio-body .person,
article.folio > form:not(.book-split), .contact-layout > form, .book-fields, .lm-frame, .fc { box-shadow: var(--shadow-card); }
.btn, .text-cta, .wp-block-button__link {
  box-shadow: 0 1px 2px rgba(22, 28, 24, .14), 0 6px 14px -6px rgba(22, 28, 24, .32);
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.btn:hover, .text-cta:hover, .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(22, 28, 24, .16), 0 12px 24px -8px rgba(22, 28, 24, .4);
}
.top nav#site-menu .menu-extra .btn { box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); }
.closer h2 { text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }
.bottom { box-shadow: inset 0 14px 28px -16px rgba(0, 0, 0, .55); }

/* Shadows where sections meet (Shane 10-11). Each band casts a soft edge onto the next. The paper bands take their
   full-bleed ground from a pseudo-element so their shadow is not clipped; html clips sideways overflow, which keeps sticky working. */
html { overflow-x: clip; }
:root { --edge-down: 0 18px 30px -18px rgba(22, 28, 24, .45); --edge-up: 0 -18px 30px -18px rgba(22, 28, 24, .4); }
.hero:not(.hero-plain), .home-v3, .hero-plain { position: relative; z-index: 2; box-shadow: var(--edge-down); }
.section-photo:nth-of-type(odd) { position: relative; isolation: isolate; background: none; box-shadow: none; clip-path: none; }
.section-photo:nth-of-type(odd)::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1;
  background: var(--paper); box-shadow: var(--edge-up), var(--edge-down); pointer-events: none;
}
.closer { z-index: 1; box-shadow: var(--edge-up); }
.legal { position: relative; z-index: 1; box-shadow: var(--edge-up), var(--edge-down); }

/* The legal band sits right on the footer (Shane 10-11). */
.bottom { margin-top: 0; }

/* Intro line evenly spaced in its band when a photo band follows it (Shane 10-11): 64px above, 64px below. */
.folio-body > .intro:has(+ .section-photo) { margin-bottom: 64px; }

/* Buttons slightly rounded with a shadow you can see (Shane 10-11). */
.btn, .text-cta, .wp-block-button__link, .folio-body .wp-block-button__link, .folio .btn, .folio .text-cta, .menu-btn, .menu-close, .top nav#site-menu .menu-extra .btn { border-radius: 6px; }
.btn, .text-cta, .wp-block-button__link {
  box-shadow: 0 1px 2px rgba(22, 28, 24, .22), 0 4px 10px rgba(22, 28, 24, .22), 0 12px 24px -8px rgba(22, 28, 24, .38);
}
.btn:hover, .text-cta:hover, .wp-block-button__link:hover {
  box-shadow: 0 2px 4px rgba(22, 28, 24, .24), 0 8px 16px rgba(22, 28, 24, .24), 0 18px 32px -10px rgba(22, 28, 24, .45);
}
.closer .text-cta { box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 24px -6px rgba(0, 0, 0, .55); }
.menu-btn { background: var(--paper); box-shadow: 0 1px 2px rgba(22, 28, 24, .16), 0 6px 14px -6px rgba(22, 28, 24, .3); }

/* Header bar casts a shadow you can see onto the page below (Shane 10-11). */
.top { position: relative; z-index: 4; box-shadow: 0 2px 4px rgba(22, 28, 24, .14), 0 10px 20px -4px rgba(22, 28, 24, .32), 0 24px 40px -18px rgba(22, 28, 24, .4); }

/* Hold a date is the call to action: the logo's brass, ink text; other buttons stay river green (Shane 10-11). */
:root { --brass: #d29956; --brass-deep: #bd8443; }
body a.btn[href*="/schedule/"],
body a.text-cta[href*="/schedule/"],
body .closer a.text-cta[href*="/schedule/"],
body .folio-body a.wp-block-button__link[href*="/schedule/"],
body a.wp-block-button__link[href*="/schedule/"],
body .top nav#site-menu .menu-extra a.btn { background: var(--brass); color: var(--ink); }
body a.btn[href*="/schedule/"]:hover, body a.btn[href*="/schedule/"]:focus-visible,
body a.text-cta[href*="/schedule/"]:hover, body a.text-cta[href*="/schedule/"]:focus-visible,
body .closer a.text-cta[href*="/schedule/"]:hover,
body .folio-body a.wp-block-button__link[href*="/schedule/"]:hover, body .folio-body a.wp-block-button__link[href*="/schedule/"]:focus-visible,
body a.wp-block-button__link[href*="/schedule/"]:hover,
body .top nav#site-menu .menu-extra a.btn:hover { background: var(--brass-deep); color: var(--ink); }
@media (min-width: 861px) {
  .top nav .menu-item > a[href$="/schedule/"] { background: var(--brass); color: var(--ink); padding: 8px 14px; border-radius: 6px; box-shadow: 0 1px 2px rgba(22, 28, 24, .14), 0 6px 14px -6px rgba(22, 28, 24, .3); }
  .top nav .menu-item > a[href$="/schedule/"]:hover { background: var(--brass-deep); color: var(--ink); }
}

/* Home middle is Shelbie's own text (10-23): three headed sections, no numbered steps. */
.story-part { padding: 26px 0; border-top: 1px solid var(--rule); }
.story-part p + p, .story-lead p + p { margin-top: 1em; }
@media (min-width: 1100px) { .story-part { padding: 12px 0 24px; } .story-aside { position: sticky; top: 32px; } }

/* Lawmatics appointment calendars refuse to load inside another site, so the Schedule page links to them (10-23). */
.lm-cals { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 40rem; }
.lm-cal { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 22px 26px; background: var(--paper); color: var(--ink); text-decoration: none; border-top: 3px solid var(--brass); box-shadow: var(--shadow-card); }
.lm-cal strong { font-family: "Ibarra Real Nova", Georgia, serif; font-weight: 400; font-size: 1.7rem; line-height: 1.1; }
.lm-cal span { grid-column: 1; color: var(--mute); font-size: .95rem; }
.lm-cal b { grid-column: 2; grid-row: 1 / span 2; font-size: 1.6rem; color: var(--brass-deep); transition: transform 240ms ease; }
.lm-cal:hover b, .lm-cal:focus-visible b { transform: translateX(6px); }
.lm-step { font-family: "Ibarra Real Nova", Georgia, serif; font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 56px 0 6px; }
.lm-step-note { margin: 0 0 20px; max-width: 40rem; color: var(--mute); }