/* rose social. — components. Panels, nav, ticker, accordion, packages, quotes, footer, form.
   Square corners and no shadows, everywhere (see DESIGN.md §8). */

/* ==========================================================================
   Panels & grids
   Hairlines between panels are the 1px grid gap showing the grid's own
   background — so they stay correct whatever order panels stack in.
   ========================================================================== */
.split, .cols-3, .cols-4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--grid-line, var(--line));
}
.is-dark { --grid-line: var(--line-on-dark); --rule: var(--line-on-dark); }

@media (min-width: 900px) {
  .split--55 { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
  .split--60 { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
  .split--40 { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
  .split--50 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 899px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* below 900px every split stacks photo-over-text */
@media (max-width: 899px) {
  .split > .panel--photo { order: -1; }
}

.panel {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--pad);
  background: var(--cream);
  color: var(--burgundy);
}
.panel--end { justify-content: flex-end; }
.panel--between { justify-content: space-between; }
.panel--flush { padding: 0; }
.panel__foot { display: flex; flex-direction: column; gap: var(--s4); }

.bg-burgundy { background: var(--burgundy); color: var(--cream); }
.bg-butter { background: var(--butter); color: var(--burgundy); }
.bg-sky { background: var(--sky); color: var(--burgundy); }
.bg-burgundy .muted { color: var(--muted-on-dark); }

/* top hairline that draws in (scaleX) when its panel enters */
.rule-t { position: relative; }
.rule-t::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 3;
  height: 1px;
  background: var(--rule, var(--line));
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease);
  pointer-events: none;
}
html.motion .rule-t:not(.is-in)::before { transform: scaleX(0); }

/* ==========================================================================
   Photos — full bleed, warm grade, parallax-ready
   ========================================================================== */
.panel--photo {
  padding: 0;
  min-height: clamp(380px, 110vw, 560px);
  overflow: hidden;
  background: rgb(87 3 1 / 0.08);
}
@media (min-width: 900px) { .panel--photo { min-height: 0; } }
.photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.photo__inner {
  position: absolute;
  inset: 0;
  transition: transform 1.4s var(--ease);
}
.photo img {
  position: absolute;
  left: 0; top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tint);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.photo:hover .photo__inner, a:hover .photo__inner { transform: scale(1.04); }
.photo:hover::after, a:hover .photo::after { opacity: 1; }

/* ==========================================================================
   Wordmark
   ========================================================================== */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}
.wordmark__text {
  font-family: var(--f-mark);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.05em;
  line-height: 0.9;
  white-space: nowrap;
}
.wordmark__tag {
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.3em;
  margin-top: 0.6em;
  margin-right: -0.16em;
  white-space: nowrap;
}

/* ==========================================================================
   Buttons & links
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid var(--burgundy);
  border-radius: 0;
  background: var(--burgundy);
  color: var(--cream);
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn:hover { background: var(--butter); color: var(--burgundy); border-color: var(--burgundy); }
.btn__arrow { transition: transform 0.45s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--line { background: transparent; color: var(--burgundy); }
.btn--cream { background: var(--cream); color: var(--burgundy); border-color: var(--cream); }
.btn--cream:hover { border-color: var(--butter); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding-bottom: 5px;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.55s var(--ease);
}
.link:hover::after, a:hover > .link::after, .link:focus-visible::after { transform: scaleX(1); }
.link--rest::after { transform: scaleX(1); opacity: 0.35; }
.link--rest:hover::after { opacity: 1; }

.text-link {
  background: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: currentColor;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--pad-x);
  background: var(--cream);
  color: var(--burgundy);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.nav__logo { margin-right: auto; }
.nav__logo .wordmark__text { font-size: 20px; }
.nav__logo .wordmark__tag { display: none; font-size: 6.5px; }
.nav__links { display: none; gap: var(--s4); }
.nav__link {
  position: relative;
  padding: 6px 0;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.55s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { display: none; min-height: 42px; }
.nav__toggle {
  width: 44px; height: 44px;
  margin-right: -12px;
  display: grid;
  place-items: center;
}
.nav__toggle span:not(.sr-only),
.nav__toggle span:not(.sr-only)::before {
  display: block;
  width: 24px; height: 1px;
  background: currentColor;
  transition: transform 0.5s var(--ease);
}
.nav__toggle span:not(.sr-only) { position: relative; transform: translateY(-4px); }
.nav__toggle span:not(.sr-only)::before { content: ""; position: absolute; top: 8px; }
html.menu-open .nav__toggle span:not(.sr-only) { transform: rotate(45deg); }
html.menu-open .nav__toggle span:not(.sr-only)::before { transform: translateY(-8px) rotate(-90deg); }
html.menu-open .nav { background: var(--burgundy); color: var(--cream); border-color: var(--line-on-dark); }

@media (min-width: 900px) {
  .nav__logo .wordmark__text { font-size: 22px; }
  .nav__logo .wordmark__tag { display: block; }
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  /* Home: transparent over the hero until 40px of scroll */
  body[data-nav="over"] .nav:not(.is-solid) { background: transparent; color: var(--cream); border-color: var(--line-on-dark); }
  body[data-nav="over"] .nav:not(.is-solid) .nav__cta { background: var(--cream); color: var(--burgundy); border-color: var(--cream); }
  body[data-nav="over"] .nav:not(.is-solid) .nav__cta:hover { background: var(--butter); border-color: var(--butter); }
}

main { padding-top: var(--nav-h); }
@media (min-width: 900px) { body[data-nav="over"] main { padding-top: 0; } }

/* Mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + var(--s4)) var(--pad-x) var(--s4);
  background: var(--burgundy);
  color: var(--cream);
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform 0.8s var(--ease), visibility 0s linear 0.8s;
  overflow-y: auto;
}
html.menu-open .menu { visibility: visible; transform: none; transition: transform 0.8s var(--ease), visibility 0s; }
.menu__links { border-bottom: 1px solid var(--line-on-dark); margin-top: var(--s3); }
.menu__links li { border-top: 1px solid var(--line-on-dark); overflow: hidden; }
.menu__links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0 12px;
  font-family: var(--f-serif);
  font-size: clamp(2.5rem, 12vw, 3.5rem);
  line-height: 1;
}
.menu__links a[aria-current="page"] { font-style: italic; }
.menu__links .label { color: var(--muted-on-dark); }
.menu__foot { margin-top: auto; padding-top: var(--s5); display: grid; gap: 6px; }
.menu__foot .label { color: var(--muted-on-dark); margin-bottom: 6px; }
.menu .btn { margin-top: var(--s4); align-self: flex-start; }
@media (min-width: 900px) { .menu { display: none; } }

/* ==========================================================================
   Ticker strip
   ========================================================================== */
.ticker {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  overflow: hidden;
  background: var(--butter);
  color: var(--burgundy);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ticker__track { display: flex; width: max-content; animation: ticker var(--speed, 70s) linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; flex-shrink: 0; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__item::after { content: "◆"; font-size: 7px; margin: 0 28px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ==========================================================================
   Hero (split: photo / burgundy)
   ========================================================================== */
.hero { min-height: calc(100svh - var(--nav-h)); }
@media (min-width: 900px) {
  body[data-nav="over"] .hero { min-height: 100svh; }
  .hero > .panel { min-height: inherit; }
  body[data-nav="over"] .hero > .panel:not(.panel--photo) { padding-top: calc(var(--nav-h) + var(--pad)); }
}
@media (max-width: 899px) {
  .hero > .panel--photo { min-height: 58svh; }
}
.hero h1 { max-width: 12ch; }
.hero .copy { max-width: 44ch; }

/* ==========================================================================
   Section head row (eyebrow + headline left, copy bottom-right)
   ========================================================================== */
.head > .panel { min-height: clamp(260px, 30vw, 420px); }
.head h2 { max-width: 16ch; }
.head .copy { max-width: 44ch; }

/* Statement band — the one centered section */
.statement {
  padding: clamp(96px, 14vw, 208px) var(--pad-x);
  text-align: center;
  background: var(--cream);
}
.statement .eyebrow { margin-bottom: var(--s4); }
.statement h2 { font-size: var(--t-display); line-height: 1.02; }
.statement p { max-width: 46ch; margin: var(--s4) auto 0; }

/* ==========================================================================
   Home — service rows (50/50, alternating)
   ========================================================================== */
.svc > .panel:not(.panel--photo) { min-height: min(92vh, 880px); justify-content: space-between; }
.svc h3 { font-size: var(--t-h2); line-height: 1.04; max-width: 14ch; }
.svc .copy { max-width: 46ch; }
@media (max-width: 899px) { .svc > .panel:not(.panel--photo) { min-height: 0; } }

/* Mini accordion (What is it? / What's included? / What's the investment?) */
.mini { border-bottom: 1px solid var(--line-soft); }
.mini__item { border-top: 1px solid var(--line-soft); }
.mini__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  padding: 16px 0;
  text-align: left;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.35s var(--ease), padding 0.35s var(--ease);
}
.mini__btn:hover { background: var(--butter); padding-inline: 12px; }
.mini__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease); }
.mini__panel > div { overflow: hidden; min-height: 0; }
.is-open > .mini__panel { grid-template-rows: 1fr; }
.mini__body { padding: 0 0 var(--s3); max-width: 52ch; }
.mini__body ul { display: grid; gap: 6px; }
.mini__body li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.mini__body li::before { content: "◆"; font-size: 7px; line-height: 2.6; }

.plus {
  position: relative;
  flex-shrink: 0;
  width: 13px; height: 13px;
}
.plus::before, .plus::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 1px;
  background: currentColor;
  transition: transform 0.5s var(--ease);
}
.plus::after { transform: rotate(90deg); }
[aria-expanded="true"] .plus::after { transform: rotate(0deg); }

/* ==========================================================================
   "Is this you?"
   ========================================================================== */
.isyou > .panel:not(.panel--photo) { min-height: min(100vh, 920px); justify-content: space-between; }
.stars { border-bottom: 1px solid var(--line-on-dark); }
.stars li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--s2);
  padding: 16px 0;
  border-top: 1px solid var(--line-on-dark);
  font-family: var(--f-serif);
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  line-height: 1.3;
}
.stars li::before { content: "★"; font-family: var(--f-sans); font-size: 11px; line-height: 2.4; color: var(--butter); }
.isyou__close { font-family: var(--f-serif); font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.2; max-width: 22ch; }
.isyou__close .mark { font-size: 0.72em; letter-spacing: -0.05em; }

/* ==========================================================================
   Packages (three-column bento)
   ========================================================================== */
.pkg { min-height: clamp(460px, 44vw, 620px); justify-content: space-between; }
.pkg__tier { font-family: var(--f-mark); font-weight: 900; font-stretch: 125%; letter-spacing: -0.03em; font-size: 20px; line-height: 1; text-transform: lowercase; }
.pkg__price { display: flex; align-items: baseline; gap: 8px; }
.pkg__price strong { font-family: var(--f-mark); font-weight: 900; font-stretch: 125%; letter-spacing: -0.05em; font-size: var(--t-price); line-height: 1; }
.pkg__price span { font-size: var(--t-small); color: var(--muted); }
.pkg__list { border-bottom: 1px solid var(--line-soft); font-size: 14px; line-height: 1.45; }
.pkg__list li { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.pkg__note { font-size: var(--t-small); color: var(--muted); }
.pkg .btn { margin-top: var(--s2); }

/* Full price list (Services) — longer columns */
.pkg--full { min-height: 0; }
.pkg--full .pkg__list { font-size: 14px; }
.pkg--full .pkg__list li { padding: 10px 0; }

/* ==========================================================================
   Process (four columns)
   ========================================================================== */
.step { min-height: clamp(320px, 30vw, 440px); justify-content: space-between; }
.step__num { font-family: var(--f-mark); font-weight: 900; font-stretch: 125%; letter-spacing: -0.05em; font-size: var(--t-num); line-height: 0.9; }
.step h3 { font-size: var(--t-h3); line-height: 1.1; margin-bottom: 10px; }
.step p { font-size: 14px; max-width: 30ch; }

/* ==========================================================================
   Testimonial (one at a time)
   ========================================================================== */
.quotes { padding: var(--pad); min-height: clamp(520px, 56vw, 760px); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6); }
.quotes__top, .quotes__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.quotes__stage { display: grid; }
.quote {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease), visibility 0s linear 0.7s;
}
.quote.is-active { visibility: visible; opacity: 1; transform: none; transition: opacity 0.9s var(--ease) 0.15s, transform 1.1s var(--ease) 0.15s, visibility 0s; }
.quote blockquote p { font-family: var(--f-serif); font-size: var(--t-quote); line-height: 1.12; letter-spacing: -0.01em; max-width: 26ch; }
.quote figcaption { margin-top: var(--s4); display: flex; align-items: center; gap: 12px; }
.quote__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--burgundy); }
.quote__who { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.quote__who span { font-weight: 400; }
.quotes__ctrl { display: flex; }
.quotes__ctrl button {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  transition: background-color 0.35s var(--ease);
}
.quotes__ctrl button + button { border-left: 0; }
.quotes__ctrl button:hover { background: var(--butter); }
.quotes__count { font-family: var(--f-mark); font-weight: 900; font-stretch: 125%; font-size: 14px; letter-spacing: -0.02em; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta { padding: clamp(96px, 12vw, 176px) var(--pad); display: grid; gap: var(--s5); align-items: end; }
.cta h2 { font-size: var(--t-display); line-height: 1.02; max-width: 14ch; }
.cta__side { display: grid; gap: var(--s3); justify-items: start; max-width: 36ch; }
@media (min-width: 900px) { .cta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--burgundy); color: var(--cream); }
.footer .cols-3 { --grid-line: var(--line-on-dark); }
.footer__brand { min-height: clamp(260px, 30vw, 420px); justify-content: flex-end; }
.footer__brand .wordmark__text { font-size: min(9rem, calc((100vw - 2 * var(--pad)) / 7.2)); }
.footer__brand .wordmark__tag { font-size: clamp(8px, 1vw, 14px); }
@media (min-width: 900px) {
  .footer__brand { grid-column: span 2; }
  .footer__brand .wordmark__text { font-size: min(9rem, calc((66vw - 2 * var(--pad)) / 7.2)); }
}
.footer h2 { font-family: var(--f-sans); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-on-dark); }
.footer ul { display: grid; gap: 8px; font-size: 15px; }
.footer__email { font-family: var(--f-serif); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.1; word-break: break-word; }
.footer__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  padding: var(--s3) var(--pad);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--t-small);
  color: var(--muted-on-dark);
}
.placeholder { outline: 1px dashed var(--muted-on-dark); outline-offset: 2px; padding: 0 4px; }

/* ==========================================================================
   Accordion (dense numbered list) — services + FAQ
   ========================================================================== */
.acc { border-bottom: 1px solid var(--line); }
.acc__item { position: relative; }
.acc__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  column-gap: var(--s2);
  row-gap: 6px;
  align-items: baseline;
  padding: 24px var(--pad);
  text-align: left;
  transition: background-color 0.35s var(--ease);
}
.acc__btn:hover, .acc__item.is-open .acc__btn { background: var(--butter); }
.acc__num { font-family: var(--f-mark); font-weight: 900; font-stretch: 125%; font-size: 13px; letter-spacing: -0.02em; }
.acc__title { font-family: var(--f-serif); font-size: var(--t-h3); line-height: 1.1; }
.acc__meta { grid-column: 2; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.acc__btn .plus { grid-column: 3; grid-row: 1; align-self: center; }
@media (min-width: 900px) {
  .acc__btn { grid-template-columns: 56px minmax(0, 1fr) auto 20px; column-gap: var(--s4); padding-block: 28px; }
  .acc__meta { grid-column: 3; grid-row: 1; }
  .acc__btn .plus { grid-column: 4; }
}
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease); background: var(--butter); }
.acc__panel > div { overflow: hidden; min-height: 0; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__body {
  display: grid;
  gap: var(--s4);
  padding: 4px var(--pad) var(--s5) calc(var(--pad) + 40px + var(--s2));
}
.acc__body .copy { max-width: 48ch; }
.acc__includes .label { margin-bottom: 12px; }
.acc__includes ul { display: grid; gap: 0 var(--s4); font-size: 14px; line-height: 1.45; }
.acc__includes li { padding: 9px 0; border-top: 1px solid var(--line-soft); }
@media (min-width: 640px) { .acc__includes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .acc__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); padding-left: calc(var(--pad) + 56px + var(--s4)); }
}
.acc--faq .acc__body { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899px) { .acc__body { padding-left: var(--pad); } }

/* ==========================================================================
   Services sub-nav — thin hairline row
   ========================================================================== */
.subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  display: flex;
  overflow-x: auto;
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 var(--s3);
  border-right: 1px solid var(--line-soft);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.subnav a span { font-family: var(--f-mark); font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; }
.subnav a:hover { background: var(--butter); }
.subnav a.is-active { background: var(--burgundy); color: var(--cream); }
.anchor { scroll-margin-top: calc(var(--nav-h) + 48px); }

/* ==========================================================================
   About
   ========================================================================== */
.story > .panel:first-child { justify-content: space-between; }
@media (min-width: 900px) { .story__aside { position: sticky; top: calc(var(--nav-h) + var(--pad)); } }
.story .copy { font-size: 16px; }
.dropcap::first-letter {
  float: left;
  font-family: var(--f-serif);
  font-size: 5.6em;
  line-height: 0.78;
  padding: 0.08em 0.1em 0 0;
}
.lead { font-family: var(--f-serif); font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.25; max-width: 30ch; }
.signature { font-family: var(--f-serif); font-style: italic; font-size: 2rem; line-height: 1; }
.strip > .panel--photo { min-height: clamp(380px, 46vw, 680px); }
.value { min-height: clamp(320px, 30vw, 460px); justify-content: space-between; }
.value .step__num { font-size: var(--t-num); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact > .panel { min-height: calc(100svh - var(--nav-h)); }
.contact h1 { font-size: clamp(3.5rem, 8vw, 7rem); line-height: 0.95; }
.details { border-bottom: 1px solid var(--line-soft); }
.details li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line-soft); }
.details a, .details strong { font-family: var(--f-serif); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.15; word-break: break-word; }
@media (max-width: 899px) { .contact > .panel { min-height: 0; } }

.form { display: grid; gap: var(--s4); }
.form__row { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 4px; }
.field label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.field label .opt { color: var(--muted); font-weight: 400; letter-spacing: 0.08em; text-transform: none; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  color: var(--burgundy);
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.4s var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.field select {
  padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23570301'/%3E%3C/svg%3E") right 2px center / 12px no-repeat;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--burgundy); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--burgundy); border-bottom-width: 2px; padding-bottom: 9px; }
.field.has-error input, .field.has-error textarea { border-bottom-color: var(--burgundy); }
.field__error { font-size: var(--t-small); font-weight: 600; }
.field__error:empty { display: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.form__status { font-weight: 600; font-size: 14px; }
.form__status:empty { display: none; }
.success { display: none; padding: var(--pad) 0; border-top: 1px solid var(--line); }
.success.is-visible { display: grid; gap: var(--s3); }
.success h2 { font-size: var(--t-h2); }
.book { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.book h2 { font-size: var(--t-h3); }

/* ==========================================================================
   Intro + page-change overlay
   ========================================================================== */
.intro { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
html.is-intro .intro, html.is-wipe-in .intro, html.is-wipe-out .intro { visibility: visible; pointer-events: auto; }
html.is-intro, html.is-intro body { overflow: hidden; }
.intro__bg { position: absolute; inset: 0; background: var(--butter); }
html.is-wipe-out .intro__bg { transform: translateY(100%); }
.intro__rule {
  position: absolute;
  left: 0; right: 0;
  top: calc(50% + min(4rem, calc((100vw - 48px) / 18)) + 40px);
  height: 1px;
  background: var(--burgundy);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.intro__mark { position: absolute; inset: 0; display: grid; place-items: center; }
html.is-wipe-in .intro__mark, html.is-wipe-out .intro__mark, html.is-wipe-in .intro__rule, html.is-wipe-out .intro__rule { display: none; }
.intro__lockup { display: inline-flex; flex-direction: column; align-items: flex-end; color: var(--burgundy); }
.intro__mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.intro__word {
  display: block;
  font-family: var(--f-mark);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-size: min(8rem, calc((100vw - 48px) / 9));
  white-space: nowrap;
  transform-origin: 0 0;
}
.intro__tag {
  margin-top: 1.2em;
  margin-right: -0.16em;
  font-size: clamp(9px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  clip-path: inset(0 100% 0 0);
}
html.is-intro .nav__logo { opacity: 0; }

/* ==========================================================================
   Cursor (desktop, fine pointer only)
   ========================================================================== */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor .cursor {
    position: fixed;
    left: 0; top: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--burgundy);
    color: var(--cream);
    pointer-events: none;
    transition: width 0.45s var(--ease), height 0.45s var(--ease), margin 0.45s var(--ease), background-color 0.3s, opacity 0.3s;
  }
  html.has-cursor .cursor.is-hidden { opacity: 0; }
  html.has-cursor .cursor.is-label { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  html.has-cursor .cursor.is-dark { background: var(--cream); color: var(--burgundy); }
  .cursor__label { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0; transition: opacity 0.3s; }
  .cursor.is-label .cursor__label { opacity: 1; }
  .cursor__label.is-plus { font-size: 22px; font-weight: 400; letter-spacing: 0; }
}

/* ==========================================================================
   Motion pre-states & reduced motion
   ========================================================================== */
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line__inner { display: block; }
html.js.motion [data-lines]:not(.is-split) { visibility: hidden; }
/* The hero stays painted under the intro / page overlay (fast LCP) and animates at handoff */
html.is-intro [data-lines][data-hero]:not(.is-split), html.is-wipe-in [data-lines][data-hero]:not(.is-split) { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* ---------- small-screen rhythm ---------- */
.footer__brand .wordmark { align-self: flex-start; }
@media (max-width: 899px) {
  .head > .panel { min-height: 0; }
  .head > .panel:first-child:has(> .eyebrow:only-child) { padding-bottom: 0; }
  .step, .value { min-height: 240px; }
  .pkg { min-height: 0; }
}
.acc__item > h3 { font: inherit; letter-spacing: normal; line-height: inherit; }
.note-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s4) var(--pad); border-top: 1px solid var(--line); }
.note-row p { font-family: var(--f-serif); font-size: var(--t-h3); line-height: 1.15; }
.pkg--full { justify-content: flex-start; }
.pkg--full .btn { margin-top: auto; }

/* ---------- phone safe areas (notch / status bar) ---------- */
.nav { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }
.menu { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + var(--s4)); padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px)); }
.subnav { top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }