/* mycratherapy.org. Every colour is taken from the room on Walnut Street: the navy wall, the honey oak trim, the velvet
   chair, the green side table, the coral armoire, the black rug, and the gold of the window's light.
   Motion moves only transform and opacity, pauses off screen, and becomes a composed still under reduced motion. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/fraunces-soft-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-var.woff2') format('woff2');
}

:root {
  --wall: #1b2b45;
  --wall-deep: #121d33;
  --gold: #e8b54a;
  --gold-soft: #f3d79a;
  --plum: #45204c;
  --plum-deep: #2e1433;
  --violet: #a77bc4;
  --ink: #15171f;
  --oak: #e2a24e;
  --oak-deep: #c27d2c;
  --green: #1f4237;
  --green-deep: #142c25;
  --coral: #e0685c;
  --cream: #f7efe2;
  --cream-70: rgba(247, 239, 226, .78);
  --navy-ink: #13203a;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --wrap: 1400px;          /* one content edge for nav, hero and every band */
  --gutter: clamp(20px, 5vw, 64px);
  --band-y: clamp(88px, 12vw, 168px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--wall);
  color: var(--cream);
  font: 400 1.0625rem/1.65 var(--sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ol, ul { margin: 0; padding: 0; list-style: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--gold); color: var(--navy-ink); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.eyebrow {
  font: 600 .78rem/1.2 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
  display: flex; align-items: center; gap: .8em;
}
.eyebrow::before { content: ""; width: 2.2em; height: 1px; background: currentColor; opacity: .7; }
.display {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(2.3rem, 4.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  font-variation-settings: "opsz" 144;
}
.display + .lede, .display + p { margin-top: 1.4rem; }
.lede { font-size: clamp(1.08rem, 1.3vw, 1.22rem); color: var(--cream-70); max-width: 36em; }

/* Buttons: pills with a soft lift */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.5em;
  border-radius: 999px; border: 1.5px solid transparent;
  font: 600 .98rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: transform .35s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--gold { background: var(--gold); color: var(--navy-ink); box-shadow: 0 10px 30px -12px rgba(232, 181, 74, .7); }
.btn--gold:hover { background: #f1c45f; }
.btn--line { border-color: rgba(247, 239, 226, .55); color: var(--cream); }
.btn--line:hover { border-color: var(--cream); background: rgba(247, 239, 226, .08); }
.btn--navy { background: var(--navy-ink); color: var(--cream); }
.btn--navy:hover { background: #1d2d50; }
.btn--cream { background: var(--cream); color: var(--green-deep); }
.btn--line-dark { border-color: var(--navy-ink); color: var(--navy-ink); }
.btn--line-dark:hover { background: rgba(19, 32, 58, .08); }

/* Grain baked into every colour field as its top background layer (no blend layers: they made the compositor paint late) */
.band, .hero, .ticker, .footer { position: relative; --grain: url('img/grain-a.webp'); }
.band { padding-block: var(--band-y); }
.band > .wrap { position: relative; z-index: 1; }
.band__deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: transform .5s var(--ease), background-color .4s, box-shadow .4s;
}
.nav__inner { display: flex; align-items: center; gap: 24px; width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; height: 76px; }
.nav.is-scrolled { background: rgba(18, 29, 51, .95); box-shadow: 0 1px 0 rgba(247, 239, 226, .08); }   /* navy over every band, no backdrop filter */
.nav.is-tucked { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; gap: 12px; font: 600 1.02rem/1 var(--sans); letter-spacing: .01em; color: var(--cream); text-decoration: none; margin: 0; }
.brand__mark { flex: none; color: var(--cream); }
.nav__links { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__links a:not(.btn) { font: 500 .95rem/1 var(--sans); color: var(--cream-70); text-decoration: none; padding: 12px 0; position: relative; }
.nav__links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav__links a:not(.btn):hover { color: var(--cream); }
.nav__links a:not(.btn):hover::after { transform: scaleX(1); }
.nav__cta { margin-left: 8px; min-height: 44px; }
.nav__toggle { display: none; }

@media (max-width: 899px) {
  .nav__inner { height: 64px; }
  .nav__toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 7px;
    margin-left: auto; width: 48px; height: 48px; padding: 0 12px; border: 0; border-radius: 999px;
    background: rgba(18, 29, 51, .55); cursor: pointer;
  }
  .nav__toggle span { display: block; height: 1.5px; background: var(--cream); border-radius: 2px; transition: transform .35s var(--ease); }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  .nav__links {
    position: fixed; inset: 64px 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--gutter) 28px; background: var(--wall-deep); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .3s, transform .35s var(--ease), visibility 0s .35s;
  }
  .nav__links.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .3s, transform .35s var(--ease); }
  .nav__links a:not(.btn) { padding: 16px 0; font-size: 1.1rem; border-bottom: 1px solid rgba(247, 239, 226, .08); }
  .nav__cta { margin: 20px 0 0; }
}

/* ── Hero: the navy wall, the window, the light ─────────────────────── */
.hero {
  min-height: max(640px, min(100svh, 1000px));
  background: var(--grain) 0 0 / 160px, var(--wall);
  display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); align-items: center;
  overflow: clip; container-type: inline-size;
  --edge: max(var(--gutter), (100cqw - var(--wrap)) / 2);
}
.hero__copy { grid-column: 1; grid-row: 1; position: relative; z-index: 2; padding: 120px 0 88px var(--edge); padding-right: clamp(16px, 3vw, 48px); }
.hero__room { grid-column: 2; grid-row: 1; align-self: stretch; position: relative; z-index: 0; container-type: size; overflow: hidden; min-height: 100%; margin-left: -9vw; }
.hero::before {   /* one vignette over wall and photo together, so they read as one room */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 110% at 62% 45%, rgba(10, 16, 30, 0) 55%, rgba(10, 16, 30, .45) 100%);
}
.hero__title {
  font-family: var(--serif); font-weight: 360; font-variation-settings: "opsz" 144;
  font-size: clamp(2.9rem, 5.7vw, 6rem); line-height: .98; letter-spacing: -.02em; margin-bottom: 2rem;
}
.hero__title .line { display: block; overflow-x: visible; overflow-y: clip; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__title .line > span { display: inline-block; }
.hero__title em { font-style: normal; color: var(--gold); font-weight: 420; }
.hero__copy { text-shadow: 0 1px 2px rgba(12, 20, 38, .35), 0 0 28px rgba(12, 20, 38, .55); }
.hero__copy .btn { text-shadow: none; }
.hero__lede { font-size: clamp(1.1rem, 1.35vw, 1.3rem); color: var(--cream-70); max-width: 30em; margin-bottom: 2.2rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* The room: a 3:4 frame that always covers its panel; the live window sits over the still in the same coordinates */
.room {
  position: absolute; right: 0; top: 50%;
  width: max(100cqw, 75cqh); aspect-ratio: 3 / 4;
  transform: translateY(-50%);
}
.room picture, .room__still { position: absolute; inset: 0; width: 100%; height: 100%; }
.room__live {
  position: absolute; left: 51.111%; top: 13.333%; width: 48.889%; height: 70%;
  object-fit: fill; opacity: 0; transition: opacity 1.2s var(--ease);
}
.room__live.is-playing { opacity: 1; }
.hero__room::before {   /* the wall in the photo runs into the wall of the page */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--grain) 0 0 / 160px, linear-gradient(90deg, var(--wall) 0%, var(--wall) 4%, rgba(27, 43, 69, .93) 11%, rgba(27, 43, 69, .78) 17%, rgba(27, 43, 69, .55) 23%, rgba(27, 43, 69, .3) 29%, rgba(27, 43, 69, .12) 35%, rgba(27, 43, 69, 0) 42%),
              linear-gradient(0deg, rgba(18, 29, 51, .55) 0%, rgba(18, 29, 51, 0) 22%),
              linear-gradient(180deg, rgba(18, 29, 51, .6) 0%, rgba(18, 29, 51, 0) 18%);
}
.room__sun {   /* the egg's glow over the room: invisible until the sun comes out */
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(55% 42% at 70% 36%, rgba(255, 206, 128, .2), rgba(255, 196, 120, 0) 72%);
  transition: opacity 5s var(--ease);
}

/* The window's light on the wall, between the words and the photo: sun through his leaded glass, with the sill plants' leaves
   moving in it. One small screen-blended group (the page's only blend): light brightens what it lands on, and the black leaves
   inside the group take light away, so they show only where the light is. */
.hero__light { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.hero__light-img {
  position: absolute; top: -6%;   /* high on the clean wall, right of "Where", clear of every line of type */
  left: calc(var(--edge) + 3.45 * clamp(2.9rem, 5.7vw, 6rem));
  width: clamp(280px, 22vw, 440px); aspect-ratio: 1;
  background: url('img/window-light-2.webp') no-repeat center / contain;
  transform-origin: 80% 10%;
}
.hero__sunlight { position: absolute; inset: 0; opacity: .78; transition: opacity 5s var(--ease), transform 7s var(--ease); }
.leaf { position: absolute; display: block; pointer-events: none; background: no-repeat center / contain; }
.leaf--a { left: 4%; top: 6%; width: 78%; aspect-ratio: 700 / 560; background-image: url('img/leaves-a.webp'); transform-origin: 90% 0; }
.leaf--b { left: 24%; top: 38%; width: 70%; aspect-ratio: 700 / 560; background-image: url('img/leaves-b.webp'); transform-origin: 100% 10%; }
.hero.is-sun .hero__sunlight { opacity: 1; transform: translate3d(2%, 6%, 0); }
.hero.is-sun .room__sun { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hero__title .line > span { animation: rise 1.1s var(--ease) both; }
  .hero__title .line:nth-child(2) > span { animation-delay: .09s; }
  .hero__title .line:nth-child(3) > span { animation-delay: .18s; }
  .hero__eyebrow, .hero__lede, .hero__ctas { animation: fade-up 1s var(--ease) both; }
  .hero__eyebrow { animation-delay: .05s; }
  .hero__lede { animation-delay: .38s; }
  .hero__ctas { animation-delay: .5s; }
  .room picture { animation: settle 2.4s var(--ease) both; }
  .hero__light { animation: light-in 3.2s var(--ease) .4s both; }
  .hero__light-img { animation: light-drift 19s ease-in-out infinite alternate; }
  .leaf--a { animation: sway-a 6.5s ease-in-out infinite alternate; }
  .leaf--b { animation: sway-b 8.3s ease-in-out -3s infinite alternate; }
}
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }
@keyframes light-in { from { opacity: 0; } }
@keyframes light-drift {   /* the sun moves: a few percent of travel and a breath of brightness, visible within seconds */
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .78; }
  50% { opacity: 1; }
  100% { transform: translate3d(-6%, 5%, 0) rotate(2deg); opacity: .84; }
}
@keyframes sway-a { from { transform: rotate(-2.2deg) translate3d(0, 0, 0); } to { transform: rotate(3deg) translate3d(-3%, 2%, 0); } }
@keyframes sway-b { from { transform: rotate(2deg) translate3d(0, 0, 0); } to { transform: rotate(-3.4deg) translate3d(3%, -2%, 0); } }
.is-off .hero__light, .is-off .hero__light-img, .is-off .leaf, .is-off .ticker__track { animation-play-state: paused !important; }

@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; align-items: start; }
  .hero__room { grid-column: 1; grid-row: 1; height: min(50svh, 520px); min-height: 340px; margin-left: 0; }
  .room { width: max(150cqw, 75cqh); }
  .hero__eyebrow { display: block; }
  .hero__eyebrow::before { display: inline-block; vertical-align: middle; margin-right: .8em; }
  .hero__eyebrow .hero__dot { margin-inline: .5em; }
  .hero__room::before {
    background: var(--grain) 0 0 / 160px, linear-gradient(0deg, var(--wall) 0%, var(--wall) 7%, rgba(27, 43, 69, .75) 18%, rgba(27, 43, 69, 0) 44%),
                linear-gradient(180deg, rgba(18, 29, 51, .7) 0%, rgba(18, 29, 51, 0) 24%);
  }
  .room { top: 58%; }
  .hero__copy { grid-column: 1; grid-row: 2; padding: 0 var(--gutter) 64px; margin-top: -4px; }
  .hero__title { font-size: clamp(2.6rem, 11.4vw, 3.6rem); margin-bottom: 1.4rem; }
  .hero__lede { margin-bottom: 1.6rem; }
  .hero__light-img { left: auto; right: -8%; top: 4%; width: 62%; }
  .hero__sunlight { opacity: .5; }
  .hero.is-sun .hero__sunlight { opacity: .9; transform: translate3d(-6%, 4%, 0); }
  .hero__eyebrow { color: var(--gold-soft); }
}
@media (max-width: 599px) {   /* the eyebrow stacks on purpose: name, then place, no hanging dot */
  .hero__eyebrow .hero__dot { display: none; }
  .hero__eyebrow > span:last-child { display: block; margin-top: .55em; padding-left: 3em; }
}

/* ── Ticker: the gold band ───────────────────────────────────────────── */
.ticker { background: var(--grain) 0 0 / 160px, var(--gold); color: var(--navy-ink); overflow: hidden; padding: 20px 0; }
.ticker__track { display: flex; width: max-content; align-items: center; gap: 28px; font: 400 clamp(1.25rem, 2vw, 1.7rem)/1 var(--serif); font-variation-settings: "opsz" 48; white-space: nowrap; }
.ticker__track i { width: 9px; height: 9px; border-radius: 50%; background: var(--navy-ink); opacity: .55; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .ticker__track { animation: tick 70s linear infinite; }
  .ticker:hover .ticker__track { animation-play-state: paused; }
}
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { width: auto; flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); } .ticker__track > :nth-child(n+11) { display: none; } }

/* ── Services: velvet ────────────────────────────────────────────────── */
.band--plum { background: var(--grain) 0 0 / 160px, radial-gradient(90% 70% at 15% 10%, #5a2a62 0%, var(--plum) 45%, var(--plum-deep) 100%); }
.services__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.services__head { position: sticky; top: 120px; }
.services__head .eyebrow { color: var(--gold-soft); }
.service { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 44px); padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid rgba(247, 239, 226, .18); }
.service:last-child { border-bottom: 1px solid rgba(247, 239, 226, .18); }
.service__n { font: 300 clamp(3rem, 6vw, 5.4rem)/.85 var(--serif); font-variation-settings: "opsz" 144; color: var(--violet); min-width: 1.4em; }
.service h3 { font: 400 clamp(1.6rem, 2.6vw, 2.3rem)/1.1 var(--serif); font-variation-settings: "opsz" 72; margin-bottom: .6rem; }
.service p { color: var(--cream-70); max-width: 32em; }
.service .service__detail { margin: 0; font: 600 .78rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); }
.services__glow {   /* a patch of window light that crosses the velvet as you scroll */
  position: absolute; left: -10%; top: 10%; width: 70%; height: 80%; pointer-events: none;
  background: url('img/window-light-2.webp') no-repeat center / contain; opacity: .3;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .services__glow { animation: glow-cross linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes glow-cross { from { transform: translate3d(-12%, 18%, 0) rotate(4deg); } to { transform: translate3d(70%, -14%, 0) rotate(-6deg); } }
@media (max-width: 899px) {
  .services__grid { grid-template-columns: 1fr; }
  .services__head { position: static; }
  .services__glow { width: 110%; left: -20%; }
}

/* ── The space: the black of the rug ─────────────────────────────────── */
.band--ink { background: var(--grain) 0 0 / 160px, radial-gradient(80% 60% at 80% 0%, #232838 0%, var(--ink) 60%); }
.space__photos {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(24px, 4vw, 64px); align-items: start;
  grid-template-areas: "door head" "door chair";
  grid-template-rows: auto 1fr;
}
.space__head { grid-area: head; padding-top: clamp(8px, 2vw, 32px); margin-bottom: clamp(40px, 5vw, 72px); }
.photo--door { grid-area: door; display: flex; flex-direction: column; align-self: stretch; }   /* spans both rows: the columns end together */
.photo--door picture { flex: 1 1 auto; position: relative; min-height: 420px; }
.photo--door picture img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 58% 50%; }
.photo--chair { grid-area: chair; }
.photo { margin: 0; }
.photo picture { display: block; overflow: hidden; border-radius: 4px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); background: #222634; }
.photo img { width: 100%; height: auto; }
.photo figcaption { margin-top: 14px; font: 500 .9rem/1.4 var(--sans); color: var(--cream-70); display: flex; gap: .7em; align-items: baseline; text-wrap: balance; }
.photo figcaption::before { content: ""; width: 1.6em; height: 1px; background: var(--gold); transform: translateY(-.3em); flex: none; }
@media (max-width: 899px) {
  .space__photos { grid-template-columns: 1fr; grid-template-areas: "head" "door" "chair"; grid-template-rows: auto; row-gap: 36px; }
  .space__head { margin-bottom: 0; padding-top: 0; }
  .photo--door picture { flex: none; min-height: 0; aspect-ratio: 4 / 5; }
}

/* ── About: honey oak ────────────────────────────────────────────────── */
.band--oak { background: var(--grain) 0 0 / 160px, linear-gradient(115deg, #eab062 0%, var(--oak) 40%, var(--oak-deep) 100%); color: var(--navy-ink); }
.band--oak .eyebrow { color: var(--navy-ink); }
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.about__window { width: min(100%, 420px); justify-self: start; }
.about__window picture { background: #8a5a2a; box-shadow: 0 40px 70px -36px rgba(60, 30, 5, .75); }
.about__body h2 { margin-bottom: 1.6rem; }
.about__lede { font: 400 clamp(1.3rem, 2vw, 1.75rem)/1.35 var(--serif); font-variation-settings: "opsz" 36; }
.about__body p { max-width: 34em; }
.about__body .btn { margin-top: .8rem; }
@media (max-width: 899px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__window { width: min(78%, 340px); justify-self: start; order: -1; }
}

/* ── Telehealth: the green of the side table, with a screen's glow ───── */
.band--green { background: var(--grain) 0 0 / 160px, radial-gradient(70% 70% at 90% 20%, #2b5a4b 0%, var(--green) 45%, var(--green-deep) 100%); }
.telehealth__top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-bottom: clamp(56px, 7vw, 96px); }
.telehealth__head { max-width: 40rem; }
/* The real video room, in a quiet browser frame */
.device { margin: 0; border-radius: 14px; background: #f3efe8; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(247, 239, 226, .12); overflow: hidden; }
.device__bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #e6e0d6; color: #4a4f5c; }
.device__bar i { width: 10px; height: 10px; border-radius: 50%; background: #c9c1b4; flex: none; }
.device__bar span { margin-left: 12px; flex: 1; max-width: 22em; height: 24px; border-radius: 999px; background: #f6f2ec; font: 500 .74rem/24px var(--sans); text-align: center; letter-spacing: .02em; }
.device picture { display: block; }
.device img { width: 100%; height: auto; }
.device figcaption { padding: 12px 16px; background: var(--green-deep); font: 500 .85rem/1.4 var(--sans); color: var(--cream-70); }
.telehealth .eyebrow { color: var(--gold-soft); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); counter-reset: s; }
.step { padding-top: 28px; border-top: 1px solid rgba(247, 239, 226, .22); }
.step__n { display: block; font: 300 clamp(3.4rem, 6vw, 5.6rem)/.9 var(--serif); font-variation-settings: "opsz" 144; color: var(--gold); margin-bottom: 18px; }
.step h3 { font: 500 1.35rem/1.2 var(--serif); font-variation-settings: "opsz" 36; margin-bottom: .5rem; }
.step p { color: var(--cream-70); }
.join { margin-top: clamp(48px, 6vw, 80px); }
.join__note { display: flex; gap: 12px; align-items: center; color: var(--cream); font-weight: 500; }
.join__note svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.join__card { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: rgba(10, 26, 21, .4); border: 1px solid rgba(247, 239, 226, .14); }
.join__card h3 { font: 500 1.5rem/1.2 var(--serif); margin-bottom: .4rem; }
.join__card p { margin: 0; color: var(--cream-70); max-width: 34em; }
@media (max-width: 899px) { .steps { grid-template-columns: 1fr; } .telehealth__top { grid-template-columns: 1fr; } }

/* ── Visit and book: the coral armoire ───────────────────────────────── */
.band--coral { background: var(--grain) 0 0 / 160px, linear-gradient(160deg, #f08a7c 0%, var(--coral) 55%, #de6457 100%); color: var(--navy-ink); }
.band--coral .eyebrow { color: var(--navy-ink); }
.visit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: end; }
.visit__number { font: 300 clamp(6rem, 16vw, 15rem)/.8 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.04em; margin: 0 0 1.6rem; color: var(--navy-ink); }
.visit__addr { font: 400 clamp(1.3rem, 2vw, 1.7rem)/1.3 var(--serif); }
.visit__addr a, .visit__phone a { text-decoration-thickness: 1.5px; }
.visit__phone { font-weight: 600; }
.visit__book h2 { margin-bottom: 1.2rem; }
.visit__book .lede { color: var(--navy-ink); }
.visit__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6rem; }
.visit :focus-visible { outline-color: var(--navy-ink); }
/* The street map: OpenStreetMap ways around 1147 E. Walnut St, drawn in the armoire's coral and the wall's navy */
.map { grid-column: 1 / -1; margin: clamp(40px, 6vw, 88px) 0 0; }
.map__svg { width: 100%; height: auto; aspect-ratio: 1200 / 460; border-top: 1px solid rgba(19, 32, 58, .35); border-bottom: 1px solid rgba(19, 32, 58, .35); overflow: hidden; }
.map__bld path { fill: rgba(19, 32, 58, .13); }
.map__parks path { fill: rgba(19, 32, 58, .06); }
.map__st path, .map__st-mid path, .map__st-major path, .map__home-street path, .map__rail path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map__st path { stroke: rgba(19, 32, 58, .42); stroke-width: 2.2; }
.map__st-mid path { stroke: rgba(19, 32, 58, .55); stroke-width: 3.6; }
.map__st-major path { stroke: rgba(19, 32, 58, .7); stroke-width: 5.5; }
.map__rail path { stroke: rgba(19, 32, 58, .3); stroke-width: 1.5; stroke-dasharray: 6 5; }
.map__home-street path { stroke: var(--navy-ink); stroke-width: 7; }
.map__label { font: 600 15px var(--sans); letter-spacing: .14em; text-transform: uppercase; fill: var(--navy-ink); opacity: .8; }
.map__dot { fill: var(--navy-ink); }
.map__ring { fill: none; stroke: var(--cream); stroke-width: 3; }
.map__pulse { fill: rgba(247, 239, 226, .55); opacity: 0; transform-box: fill-box; transform-origin: center; }
.map figcaption { margin-top: 12px; font: 500 .85rem/1.4 var(--sans); color: var(--navy-ink); }
@media (prefers-reduced-motion: no-preference) {
  .map.is-in .map__pulse { animation: pulse 3.6s var(--ease) 1s infinite; }
}
@keyframes pulse { 0% { transform: scale(.4); opacity: .9; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
@media (max-width: 899px) {
  .map__svg { aspect-ratio: 4 / 3; }
  .map__label { font-size: 22px; }
}
.band--oak :focus-visible { outline-color: var(--navy-ink); }
@media (max-width: 899px) { .visit__grid { grid-template-columns: 1fr; } }

/* ── Footer: ink ─────────────────────────────────────────────────────── */
.footer { background: var(--grain) 0 0 / 160px, var(--ink); padding: 80px 0 40px; color: var(--cream-70); font-size: .95rem; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer__about { max-width: 26em; margin-top: 16px; }
.footer__h { font: 600 .75rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.footer li { margin-bottom: 4px; }
.footer li a { display: inline-block; padding: 6px 0; text-decoration: none; }
.footer li a:hover { color: var(--cream); text-decoration: underline; }
.footer__meta { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(247, 239, 226, .1); font-size: .85rem; }
@media (max-width: 700px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid > :first-child { grid-column: 1 / -1; } }

/* ── Text halo: a broad, barely visible glow in each band's own colour ──
   Owner, 2026-11-04: "a very, very soft text shadow, very, very broad ... hardly perceivable ... just a little bit of extra
   distinction." Light text on a dark band gets a darker halo; dark text on a light band gets a lighter one. Buttons keep none. */
.band, .ticker, .footer, .nav { --halo: rgba(9, 15, 29, .38); --halo-near: rgba(9, 15, 29, .16); }
.band--plum  { --halo: rgba(26, 8, 30, .42);    --halo-near: rgba(26, 8, 30, .18); }
.band--ink, .footer { --halo: rgba(0, 0, 0, .40); --halo-near: rgba(0, 0, 0, .18); }
.band--green { --halo: rgba(5, 19, 15, .42);    --halo-near: rgba(5, 19, 15, .18); }
.band--oak   { --halo: rgba(255, 228, 180, .42); --halo-near: rgba(255, 228, 180, .20); }
.band--coral { --halo: rgba(255, 200, 188, .42); --halo-near: rgba(255, 200, 188, .20); }
.ticker      { --halo: rgba(255, 238, 198, .42); --halo-near: rgba(255, 238, 198, .20); }
:is(.band, .ticker, .footer, .nav) :is(h1, h2, h3, h4, p, li, dt, dd, figcaption, address, small, .eyebrow, .ticker__track span, a:not(.btn)) {
  text-shadow: 0 0 2px var(--halo-near), 0 0 26px var(--halo);
}
:is(.band, .ticker, .footer, .nav) .btn, :is(.band, .ticker, .footer, .nav) .btn * { text-shadow: none; }

/* ── Reveals: words and photos arrive once, whole ────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
  .js .reveal-photo { opacity: 0; transition: opacity 1.4s var(--ease); }
  .js .reveal.is-in, .js .reveal-photo.is-in { opacity: 1; transform: none; }
  .js .services__list .service:nth-child(2) { transition-delay: .08s; }
  .js .services__list .service:nth-child(3) { transition-delay: .16s; }
  .js .steps .step:nth-child(2) { transition-delay: .1s; }
  .js .steps .step:nth-child(3) { transition-delay: .2s; }
}

@media print {
  .nav, .ticker, .hero__light, .room__live, .services__glow { display: none !important; }
  body, .band, .hero, .footer { background: #fff !important; color: #000 !important; }
  * { text-shadow: none !important; }
}