:root {
  --navy: #10263e;
  --navy-deep: #071827;
  --burgundy: #7b2432;
  --burgundy-dark: #551622;
  --cream: #f3eee5;
  --paper: #fbfaf7;
  --gold: #b89250;
  --ink: #17202a;
  --muted: #6e7479;
  --line: rgba(16, 38, 62, .17);
  --max: 1280px;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  cursor: url('/assets/gavel-cursor.png') 28 28, auto;
}

a,
button,
input,
select,
textarea,
summary,
.btn {
  cursor: url('/assets/gavel-cursor.png') 28 28, pointer;
}

body:active,
a:active,
button:active,
.btn:active {
  cursor: url('/assets/gavel-strike.png') 28 20, pointer !important;
}

/* Impact Ring Ripple Effect on Click */
.gavel-impact-ring {
  position: fixed;
  pointer-events: none;
  width: 36px;
  height: 36px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0.9;
  z-index: 99999;
  animation: gavelImpact 0.4s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes gavelImpact {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 1;
    border-color: var(--gold);
    box-shadow: 0 0 12px var(--gold);
  }

  50% {
    opacity: 0.8;
    border-color: var(--burgundy);
  }

  100% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
    border-color: transparent;
  }
}

body.nav-open {
  overflow: hidden
}

a {
  color: inherit
}

img {
  max-width: 100%;
  height: auto
}

.wrap {
  width: min(var(--max), calc(100% - 3rem));
  margin: auto
}

.skip {
  position: absolute;
  left: -9999px
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  background: #fff;
  padding: .75rem;
  z-index: 9999
}

.eyebrow {
  font-size: 1rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 800
}

.display {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.045em
}

.gold {
  color: var(--gold)
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase
}

.text-link:after {
  content: "";
  width: 42px;
  height: 1px;
  background: currentColor;
  transition: .25s
}

.text-link:hover:after {
  width: 72px
}

/* Overlay header */
.site-header {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  color: #fff
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.6rem 0
}

.wordmark {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem
}

.wordmark-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .55);
  font-family: Georgia, serif;
  font-size: 1.55rem;
  letter-spacing: -.12em
}

.wordmark-text strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .02em
}

.wordmark-text small {
  display: block;
  margin-top: .15rem;
  font-size: 1rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72)
}

.header-phone {
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800
}

.menu-toggle {
  appearance: none;
  border: 0;
  background: none;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
  font: 700 1rem Arial;
  letter-spacing: .15em;
  text-transform: uppercase
}

body.nav-open .menu-toggle {
  opacity: 0;
  pointer-events: none
}

.menu-lines {
  width: 30px;
  display: grid;
  gap: 6px
}

.menu-lines i {
  height: 1px;
  background: #fff;
  display: block
}

.full-menu {
  position: fixed;
  inset: 0;
  background: var(--navy-deep);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: .3s;
  z-index: 1000;
  padding-top: 90px;
  overflow-y: auto
}

.full-menu.open {
  visibility: visible;
  opacity: 1
}

.full-menu-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 4rem;
  min-height: calc(100vh - 120px);
  align-items: center;
  padding-bottom: 2rem
}

.full-menu nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .6rem 2rem
}

.full-menu nav a {
  display: block;
  text-decoration: none;
  font: 400 clamp(1.15rem, 2.2vw, 1.75rem)/1.3 Georgia, serif;
  padding: .3rem 0;
  color: rgba(255, 255, 255, .9);
  transition: color .2s ease;
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.full-menu nav a:hover {
  color: var(--gold)
}

.menu-aside {
  border-left: 1px solid rgba(255, 255, 255, .2);
  padding-left: 2rem
}

.menu-aside p {
  color: rgba(255, 255, 255, .7)
}

.menu-close {
  position: fixed;
  right: max(1.5rem, calc((100vw - var(--max))/2));
  top: 1.8rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  cursor: pointer;
  z-index: 1010;
  transition: background .2s, border-color .2s
}

.menu-close:hover {
  background: var(--burgundy);
  border-color: var(--burgundy)
}

/* Full-screen opening */
.hero {
  min-height: 100svh;
  position: relative;
  display: grid;
  align-items: end;
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7, 24, 39, .98) 0%, rgba(7, 24, 39, .82) 47%, rgba(16, 38, 62, .44) 100%),
    radial-gradient(circle at 76% 30%, rgba(184, 146, 80, .35), transparent 27%),
    linear-gradient(135deg, var(--burgundy-dark), var(--navy) 52%, #29475b)
}

.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .21;
  background-image:
    linear-gradient(115deg, transparent 0 57%, rgba(255, 255, 255, .14) 57% 57.2%, transparent 57.2%),
    linear-gradient(25deg, transparent 0 62%, rgba(255, 255, 255, .10) 62% 62.15%, transparent 62.15%)
}

.hero:after {
  content: "STEVENS";
  position: absolute;
  right: -.02em;
  bottom: -.23em;
  font: 400 clamp(8rem, 20vw, 22rem)/1 Georgia, serif;
  color: rgba(255, 255, 255, .035);
  letter-spacing: -.08em
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 320px;
  gap: 4rem;
  align-items: end;
  padding: 11rem 0 5rem
}

.hero-copy {
  max-width: 920px
}

.hero .eyebrow {
  color: #e4c78f;
  margin-bottom: 1.4rem
}

.hero h1 {
  font: 400 clamp(3.8rem, 8.5vw, 8.4rem)/.88 Georgia, serif;
  letter-spacing: -.065em;
  margin: 0;
  max-width: 1000px
}

.hero h1 span {
  display: block;
  color: var(--cream);
  font-style: italic;
  margin-left: 8vw
}

.hero-intro {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1.4rem;
  align-items: start;
  max-width: 620px;
  margin: 2.4rem 0 0 10vw
}

.hero-intro:before {
  content: "";
  height: 1px;
  background: var(--gold);
  margin-top: .8rem
}

.hero-intro p {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, .78);
  margin: 0
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2.2rem 0 0 10vw
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 54px;
  padding: 0 1.35rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: .25s
}

.btn-primary {
  background: var(--burgundy);
  color: #fff;
  border-color: var(--burgundy)
}

.btn-primary:hover {
  background: #932c3d
}

.btn-outline {
  border-color: rgba(255, 255, 255, .55);
  color: #fff
}

.btn-outline:hover {
  background: #fff;
  color: var(--navy)
}

.hero-panel {
  border-top: 1px solid rgba(255, 255, 255, .35);
  padding-top: 1.4rem
}

.hero-image-fade {
  position: absolute;
  bottom: 30%;
  right: 15%;
  height: 80%;
  max-height: 720px;
  width: auto;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateX(30px);
  animation: heroImageFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.2s;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.4));
}

@keyframes heroImageFadeIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 920px) {
  .hero-image-fade {
    display: none;
  }
}

.hero-panel strong {
  display: block;
  font: 400 1.55rem Georgia, serif;
  margin-bottom: 1rem
}

.hero-panel a {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  padding: .9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase
}

.scroll-cue {
  position: absolute;
  z-index: 3;
  bottom: 2rem;
  right: 2.5rem;
  writing-mode: vertical-rl;
  font-size: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6)
}

.scroll-cue:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 55px;
  background: rgba(255, 255, 255, .4);
  margin-top: .8rem
}

/* Editorial homepage */
.statement {
  background: var(--cream);
  padding: 9rem 0
}

.statement-grid {
  display: grid;
  grid-template-columns: .62fr 1.38fr;
  gap: 5rem
}

.statement h2 {
  font: 400 clamp(3rem, 6vw, 6.8rem)/.96 Georgia, serif;
  letter-spacing: -.06em;
  margin: 0;
  color: var(--navy)
}

.statement h2 em {
  color: var(--burgundy);
  font-weight: 400
}

.statement-copy {
  padding-top: 1rem
}

.statement-copy p {
  font-size: 1.18rem;
  max-width: 680px
}

.mini-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line)
}

.mini-facts strong {
  display: block;
  font: 400 2.2rem Georgia, serif;
  color: var(--burgundy)
}

.mini-facts span {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted)
}

.practice-intro {
  background: var(--navy);
  color: #fff;
  padding: 8rem 0
}

.practice-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 4rem
}

.practice-head h2 {
  font: 400 clamp(3rem, 6vw, 6.5rem)/.92 Georgia, serif;
  letter-spacing: -.055em;
  margin: 0
}

.practice-head p {
  color: rgba(255, 255, 255, .68);
  max-width: 560px
}

.practice-list {
  border-top: 1px solid rgba(255, 255, 255, .22)
}

.practice-item {
  display: grid;
  grid-template-columns: 80px 1fr 1fr auto;
  gap: 2rem;
  align-items: center;
  text-decoration: none;
  padding: 2.2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  transition: .25s
}

.practice-item:hover {
  padding-left: 1rem;
  background: rgba(255, 255, 255, .025)
}

.practice-num {
  font-size: 1rem;
  letter-spacing: .15em;
  color: var(--gold)
}

.practice-item h3 {
  font: 400 clamp(1.8rem, 3vw, 3.4rem)/1 Georgia, serif;
  margin: 0
}

.practice-item p {
  color: rgba(255, 255, 255, .62);
  margin: 0
}

.practice-arrow {
  font-size: 1.8rem;
  color: var(--gold)
}

.story {
  padding: 9rem 0;
  background: var(--paper)
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7rem;
  align-items: center
}

.story-visual {
  min-height: 450px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid var(--gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25)
}

.story-visual:before {
  content: "";
  position: absolute;
  width: 74%;
  height: 74%;
  border: 1px solid rgba(255, 255, 255, .46);
  left: 13%;
  top: 13%
}

.story-visual:after {
  content: "LOCAL\\A COUNSEL";
  white-space: pre;
  position: absolute;
  left: 8%;
  bottom: 7%;
  font: 400 clamp(4rem, 8vw, 8rem)/.76 Georgia, serif;
  color: rgba(255, 255, 255, .16);
  letter-spacing: -.06em
}

.story-copy .eyebrow {
  color: var(--burgundy)
}

.story-copy h2 {
  font: 400 clamp(3rem, 5.2vw, 5.7rem)/.95 Georgia, serif;
  letter-spacing: -.055em;
  margin: .7rem 0 1.7rem;
  color: var(--navy)
}

.story-copy p {
  font-size: 1.12rem;
  max-width: 590px
}

.quote-band {
  padding: 8rem 0;
  background: var(--burgundy);
  color: #fff;
  text-align: center
}

.quote-band blockquote {
  font: 400 clamp(2.7rem, 5.5vw, 6rem)/1.02 Georgia, serif;
  letter-spacing: -.045em;
  margin: 0 auto;
  max-width: 1100px
}

.quote-band p {
  margin-top: 2rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #ead4c1
}

.process {
  padding: 9rem 0;
  background: var(--cream)
}

.process-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 6rem;
  align-items: start
}

.process h2 {
  font: 400 clamp(3rem, 5vw, 5.5rem)/1.1 Georgia, serif;
  letter-spacing: -.04em;
  margin: 0;
  color: var(--navy);
  position: sticky;
  top: 4rem
}

.steps {
  counter-reset: steps;
  display: flex;
  flex-direction: column;
  gap: 3.5rem
}

.step {
  counter-increment: steps;
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: 2.5rem
}

.step:before {
  content: "0" counter(steps);
  display: block;
  color: var(--burgundy);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .2em;
  margin-bottom: 1.2rem
}

.step h3 {
  font: 400 clamp(1.8rem, 2.8vw, 2.4rem)/1.25 Georgia, serif;
  color: var(--navy);
  margin: 0 0 1.2rem
}

.step p {
  margin: 0;
  color: #4f575e;
  font-size: 1.15rem;
  line-height: 1.85;
  max-width: 620px
}

.cta {
  background: var(--navy-deep);
  color: #fff;
  padding: 8rem 0
}

.cta-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 5rem;
  align-items: end
}

.cta h2 {
  font: 400 clamp(3.5rem, 7vw, 7.5rem)/.9 Georgia, serif;
  letter-spacing: -.06em;
  margin: 0
}

.cta p {
  color: rgba(255, 255, 255, .66)
}

.cta .btn {
  width: 100%;
  margin-top: 1rem
}

/* Interior pages */
.inner-header {
  position: relative;
  background: var(--navy-deep)
}

.inner-header .site-header {
  position: relative
}

.pagehead {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--navy-deep), var(--navy) 65%, var(--burgundy-dark));
  color: #fff;
  padding: 2rem 0 2rem
}

.pagehead:after {
  content: "";
  position: absolute;
  right: -10vw;
  top: -20vw;
  width: 55vw;
  height: 55vw;
  border: 1px solid rgba(255, 255, 255, .09);
  transform: rotate(35deg)
}

.pagehead-img-wrap {
  margin: 1.25rem 0 1.75rem;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid var(--gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35)
}

.pagehead-img-wrap img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  display: block
}

.pagehead h1 {
  font: 400 clamp(3.4rem, 7vw, 7.5rem)/.92 Georgia, serif;
  letter-spacing: -.06em;
  margin: .5rem 0;
  max-width: 1050px
}

.pagehead p {
  max-width: 740px;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, .72)
}

.breadcrumbs {
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62)
}

.breadcrumbs a {
  text-decoration: none
}

.section {
  padding: 7rem 0
}

.section.mist {
  background: var(--cream)
}

.two {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: 6rem;
  align-items: start
}

.profile-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 4rem;
  align-items: start
}

.content {
  max-width: 850px
}

.content h2 {
  font: 400 clamp(2rem, 3.5vw, 3.5rem)/1.05 Georgia, serif;
  color: var(--navy);
  letter-spacing: -.035em;
  margin: 2.3rem 0 1rem
}

.content h2:first-child {
  margin-top: 0
}

.content p,
.content li {
  font-size: 1.06rem
}

.aside {
  background: var(--cream);
  border-top: 5px solid var(--burgundy);
  padding: 2rem;
  position: sticky;
  top: 2rem
}

.aside h2,
.aside h3 {
  font: 400 1.8rem Georgia, serif;
  color: var(--navy)
}

.sidebar-form {
  display: grid;
  gap: .8rem;
  margin-top: 1rem
}

.sidebar-form input {
  background: #fff;
  border: 1px solid #ccc;
  padding: .8rem;
  font-size: 1rem;
  border-radius: 2px
}

.sidebar-form .btn {
  width: 100%;
  min-height: 46px;
  font-size: 1rem
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  background: transparent
}

.card {
  background: var(--paper);
  padding: 2.1rem;
  min-height: 260px;
  border: 1px solid var(--line)
}

.card.profile-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  min-height: auto
}

.profile-photo {
  aspect-ratio: 3/4;
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  background: #0c1e30
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform .4s ease
}

.profile-card:hover .profile-photo img {
  transform: scale(1.03)
}

.profile-info {
  padding: 2.1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between
}

.profile-page-photo {
  width: 100%;
  max-width: 380px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .08)
}

.profile-page-photo img {
  width: 100%;
  height: auto;
  display: block
}

.card h2,
.card h3 {
  font: 400 2rem/1.1 Georgia, serif;
  color: var(--navy)
}

.card a {
  color: var(--burgundy);
  font-weight: 800
}

form {
  display: grid;
  gap: 1rem
}

label {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800
}

input,
textarea,
select {
  display: block;
  width: 100%;
  padding: .95rem 0;
  border: 0;
  border-bottom: 1px solid #879099;
  background: transparent;
  font: 1rem Arial;
  margin-top: .25rem
}

textarea {
  min-height: 130px
}

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: var(--burgundy)
}

.check {
  padding-left: 1.2rem
}

.band {
  background: var(--burgundy);
  color: #fff;
  padding: 3rem 0
}

.band .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem
}

.band h2 {
  font: 400 2.6rem Georgia, serif;
  margin: 0
}

footer {
  background: #06131f;
  color: #d8dde0;
  padding: 5rem 0 1.5rem
}

.foot {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 4rem
}

footer strong {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400
}

footer a {
  color: #fff
}

.legal {
  font-size: 1rem;
  line-height: 1.55;
  color: #9ca7ae;
  border-top: 1px solid rgba(255, 255, 255, .15);
  margin-top: 3rem;
  padding-top: 1.4rem
}

.hero-form-panel {
  background: rgba(7, 24, 39, .95);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 4px;
  padding: 2rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .3)
}

.hero-form-panel strong {
  color: var(--cream);
  font: 400 1.6rem Georgia, serif;
  margin-bottom: 1.2rem;
  display: block
}

.hero-form {
  display: grid;
  gap: 1rem
}

.hero-form input,
.hero-form select {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  padding: .9rem 1rem;
  font-size: 1rem;
  border-radius: 2px
}

.hero-form select option {
  background: var(--navy-deep);
  color: #fff
}

.hero-form input:focus,
.hero-form select:focus {
  outline: 0;
  border-color: var(--gold)
}

.results-band {
  background: var(--navy-deep);
  color: #fff;
  padding: 6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.results-band h2 {
  font: 400 clamp(2.2rem, 4vw, 3.5rem)/1.1 Georgia, serif;
  margin: .5rem 0 3rem
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem
}

.result-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 2rem;
  border-radius: 4px
}

.result-card strong {
  display: block;
  font: 400 1.8rem Georgia, serif;
  color: var(--gold);
  margin-bottom: .6rem
}

.result-card p {
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: 1rem
}

.testimonials {
  padding: 7rem 0;
  background: var(--paper)
}

.testimonials h2 {
  font: 400 clamp(2.5rem, 4.5vw, 4rem)/1.1 Georgia, serif;
  color: var(--navy);
  margin: .5rem 0 3rem
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem
}

.testimonial-card {
  background: var(--cream);
  padding: 2.5rem;
  border-left: 4px solid var(--burgundy);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .03)
}

.testimonial-card .stars {
  color: #d4a359;
  margin-bottom: 1rem;
  font-size: 1.2rem
}

.testimonial-card p {
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.7;
  margin: 0 0 1.5rem
}

.testimonial-card small {
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 700
}

.location-links {
  margin-top: 1.8rem;
  font-size: 1rem;
  color: var(--muted)
}

.location-links strong {
  color: var(--navy);
  font-family: Georgia, serif;
  font-size: 1.1rem
}

.location-links a {
  color: var(--burgundy);
  font-weight: 700;
  text-decoration: underline
}

.sticky-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--navy-deep);
  padding: .8rem 1rem;
  gap: .8rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .25)
}

.sticky-mobile-bar .btn {
  flex: 1;
  min-height: 48px;
  font-size: 1rem;
  padding: 0 .5rem
}

@media(max-width:920px) {
  .wrap {
    width: min(100% - 2rem, var(--max))
  }

  .header-phone {
    display: none
  }

  .header-inner {
    grid-template-columns: 1fr auto
  }

  .hero-grid {
    grid-template-columns: 1fr;
    padding: 9rem 0 4rem
  }

  .hero h1 span,
  .hero-intro,
  .hero-actions {
    margin-left: 0
  }

  .hero-panel {
    display: block
  }

  .statement-grid,
  .practice-head,
  .story-grid,
  .process-grid,
  .cta-grid,
  .two,
  .full-menu-grid,
  .results-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .practice-item {
    grid-template-columns: 45px 1fr auto
  }

  .practice-item p {
    display: none
  }

  .mini-facts,
  .grid3,
  .foot {
    grid-template-columns: 1fr
  }

  .story-visual {
    min-height: 440px
  }

  .process h2 {
    position: static
  }

  .menu-aside {
    display: none
  }
}

@media(max-width:560px) {
  .wordmark-text small {
    display: none
  }

  .hero h1 {
    font-size: clamp(3.25rem, 16vw, 5rem)
  }

  .hero-intro {
    grid-template-columns: 50px 1fr
  }

  .hero-actions .btn {
    width: 100%
  }

  .statement,
  .practice-intro,
  .story,
  .process,
  .cta,
  .section {
    padding: 5rem 0
  }

  .mini-facts {
    gap: 1.4rem
  }

  .band .wrap {
    display: block
  }

  .band .btn {
    margin-top: 1rem
  }

  .emergency-box {
    background: var(--burgundy);
    color: #fff;
    padding: 2rem;
    border-radius: 4px;
    margin-bottom: 3rem
  }

  .emergency-box h3 {
    color: #fff;
    font: 400 1.6rem Georgia, serif;
    margin: 0 0 1.2rem
  }

  .emergency-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap
  }

  .emergency-actions .btn-outline {
    border-color: #fff;
    color: #fff
  }

  .emergency-actions .btn-outline:hover {
    background: #fff;
    color: var(--burgundy)
  }

  .calculator-box {
    background: var(--cream);
    border: 1px solid var(--gold);
    padding: 2.5rem;
    border-radius: 4px;
    margin: 3rem 0
  }

  .calculator-box h2 {
    font: 400 2rem Georgia, serif;
    color: var(--navy);
    margin-top: 0
  }

  .calc-form {
    display: grid;
    gap: 1.2rem;
    margin-top: 1.5rem
  }

  .calc-form label {
    font-size: 1rem;
    color: var(--navy)
  }

  .calc-form input {
    background: #fff;
    border: 1px solid #ccc;
    padding: .8rem 1rem;
    font-size: 1rem;
    border-radius: 2px;
    margin-top: .4rem
  }

  .calc-result {
    background: var(--navy-deep);
    color: var(--gold);
    padding: 1.5rem;
    border-radius: 3px;
    font-size: 1.1rem;
    margin-top: 1rem
  }

  .faq-accordion {
    display: grid;
    gap: 1rem;
    margin: 2rem 0 3rem
  }

  .faq-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 1.2rem 1.5rem
  }

  .faq-item summary {
    font: 400 1.25rem Georgia, serif;
    color: var(--navy);
    cursor: pointer;
    font-weight: 600
  }

  .faq-item summary:focus {
    outline: 0
  }

  .faq-item p {
    margin: 1rem 0 0;
    color: #4f575e;
    font-size: 1.05rem;
    line-height: 1.7
  }
}

/* Scroll-reveal animations */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}