/* ============================================================
   Michelle Hollingshead — Practice Small
   Shared across all five pages. Cream canvas, navy ink, brass accent.
   Fonts: Cormorant Garamond (display) + Jost (body)
   ============================================================ */

:root {
  --ivory: #FAF6EF;
  --ivory-deep: #F3EDE2;
  --ink: #16233F;
  --ink-lift: #22335A;   /* one step up from --ink, so the closing CTA reads as its own band */
  --ink-soft: #44506B;
  --brass: #B08A47;
  --brass-deep: #8C6B32;
  --brass-soft: #E9DCC3;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --pad-x: 22px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans); font-weight: 300;
  background: var(--ivory); color: var(--ink);
  line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--brass-soft); color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.1; text-wrap: balance; }
h2 { font-size: clamp(2rem, 5.4vw, 3.1rem); letter-spacing: -0.01em; }
h2 em, h1 em { font-style: italic; color: var(--brass-deep); }
h3 { font-size: 1.6rem; }

.center { text-align: center; }
.lead { max-width: 36em; margin-inline: auto; color: var(--ink-soft); text-wrap: pretty; }
.section { padding: clamp(4rem, 10vw, 7.5rem) var(--pad-x); position: relative; }
.wrap { max-width: 1120px; margin-inline: auto; }
.wrap--narrow { max-width: 760px; margin-inline: auto; }

.eyebrow {
  font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase;
  font-weight: 500; color: var(--brass-deep); margin-bottom: 1.1rem; display: block;
}
.eyebrow--center { text-align: center; }
.eyebrow--light { color: rgba(255, 253, 245, 0.85); }

.prose p { color: var(--ink-soft); margin-bottom: 1.2rem; font-size: 1.04rem; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose p strong { color: var(--ink); font-weight: 500; }

/* ---------- grain + veil ---------- */
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 60; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-2%,3%); }
  40% { transform: translate(3%,-2%); }
  60% { transform: translate(-3%,-3%); }
  80% { transform: translate(2%,2%); }
}
.page-veil {
  position: fixed; inset: 0; background: var(--ivory); z-index: 70; pointer-events: none;
  transform-origin: top; animation: veil 1s var(--ease-lux) 0.1s forwards;
}
@keyframes veil { to { transform: scaleY(0); } }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad-x); height: 68px;
  transition: transform 0.5s var(--ease-lux), background 0.4s, box-shadow 0.4s;
}
.nav--scrolled {
  background: rgba(250, 246, 239, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(22, 35, 63, 0.07);
}
.nav--hidden { transform: translateY(-100%); }
.nav__logo {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 600;
  color: var(--ink); text-decoration: none; letter-spacing: 0.01em; line-height: 1.1;
}
.nav__links { display: none; }
.nav__burger {
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
  display: grid; place-content: center; gap: 7px; z-index: 55;
}
.nav__burger span {
  display: block; width: 26px; height: 1.5px; background: var(--ink);
  transition: transform 0.4s var(--ease-lux), opacity 0.3s;
}
.nav__burger.open span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 45; background: var(--ink); color: var(--ivory);
  display: flex; flex-direction: column; justify-content: center; padding: 0 8vw;
  clip-path: circle(0% at calc(100% - 44px) 34px);
  transition: clip-path 0.8s var(--ease-lux); visibility: hidden;
}
.mobile-menu.open { clip-path: circle(150% at calc(100% - 44px) 34px); visibility: visible; }
.mobile-menu a {
  font-family: var(--serif); font-size: clamp(1.7rem, 7.5vw, 2.6rem);
  color: var(--ivory); text-decoration: none; display: block;
  padding: 0.28em 0; line-height: 1; opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.6s var(--ease-lux), color 0.3s;
}
.mobile-menu.open a { opacity: 1; transform: none; transition-delay: calc(0.25s + var(--i) * 0.06s); }
.mobile-menu a:hover { color: var(--brass); }
.mobile-menu__foot {
  position: absolute; bottom: 5vh; left: 8vw;
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brass);
}

/* ---------- buttons ---------- */
.btn {
  /* inline-flex + line-height:1 centres the cap-height in the pill; with the
     inherited 1.65 line-height the reserved descender space pushed the
     uppercase label visibly high. */
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; text-align: center;
  text-decoration: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 1.05em 2.1em; border-radius: 99px; border: 1px solid transparent;
  transition: transform 0.35s var(--ease-lux), background 0.35s, color 0.35s, border-color 0.35s, box-shadow 0.35s;
  will-change: transform;
}
.btn--primary { background: var(--ink); color: var(--ivory); box-shadow: 0 14px 30px -14px rgba(22, 35, 63, 0.5); }
.btn--primary:hover { background: #0F1B33; box-shadow: 0 18px 34px -14px rgba(22, 35, 63, 0.6); }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(22, 35, 63, 0.28); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(22, 35, 63, 0.04); }
.btn--ghost-light { background: transparent; color: #FFFDF5; border-color: rgba(255, 253, 245, 0.5); }
.btn--ghost-light:hover { border-color: #FFFDF5; background: rgba(255, 253, 245, 0.12); }
.btn--gold { background: var(--brass); color: #fff; border: 0; box-shadow: 0 16px 32px -14px rgba(176, 138, 71, 0.7); }
.btn--gold:hover { background: #C29A55; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.btn-row--center { justify-content: center; }

/* Amazon's dark button treatment */
.btn-amazon {
  display: inline-flex; align-items: center; gap: 0.62em;
  background: #232F3E; color: #FFFFFF; text-decoration: none;
  font-family: var(--sans); font-size: 1rem; font-weight: 400; letter-spacing: 0.01em;
  padding: 0.85em 1.7em; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 36px -16px rgba(16, 24, 40, 0.75);
  transition: background 0.3s, transform 0.35s var(--ease-lux), box-shadow 0.35s;
  will-change: transform;
}
.btn-amazon:hover { background: #2F3E52; }
.btn-amazon__mark { width: 2.1em; height: auto; fill: #FF9900; flex-shrink: 0; margin-top: 0.35em; }

/* ---------- page hero ---------- */
.hero {
  min-height: 92svh; display: flex; flex-direction: column; justify-content: center;
  text-align: center; align-items: center;
  padding: 7rem var(--pad-x) 4rem; position: relative; overflow: hidden;
}
.hero--page { min-height: 0; padding: 9rem var(--pad-x) clamp(3rem, 7vw, 5rem); }
.aurora { position: absolute; inset: 0; overflow: hidden; filter: blur(60px); }
.aurora__blob { position: absolute; border-radius: 50%; opacity: 0.5; }
.aurora__blob--1 {
  width: 55vmax; height: 55vmax; left: -15vmax; top: -12vmax;
  background: radial-gradient(circle, #EAD9BC 0%, transparent 65%);
  animation: drift1 18s ease-in-out infinite alternate;
}
.aurora__blob--2 {
  width: 46vmax; height: 46vmax; right: -14vmax; top: 8vmax;
  background: radial-gradient(circle, #E7C9BF 0%, transparent 65%);
  animation: drift2 22s ease-in-out infinite alternate;
}
.aurora__blob--3 {
  width: 42vmax; height: 42vmax; left: 22vw; bottom: -18vmax;
  background: radial-gradient(circle, #C4CFE2 0%, transparent 65%);
  animation: drift3 26s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(9vmax, 7vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-8vmax, 9vmax) scale(0.9); } }
@keyframes drift3 { to { transform: translate(6vmax, -8vmax) scale(1.2); } }

.hero__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase;
  font-weight: 500; color: var(--brass-deep); margin-bottom: 1.4rem; position: relative;
}
.hero__title {
  font-size: clamp(2.7rem, 10vw, 5.6rem); font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.02; position: relative; max-width: 12em;
}
/* Home headline is a sentence, not two words, so it runs a size down. */
.hero__title--story { font-size: clamp(2.5rem, 8.4vw, 4.8rem); max-width: 11em; }
.hero__title .line { display: block; overflow: hidden; }
/* The reveal mask (overflow + clip-path) cut off descenders like the g in
   "being". Room below each line, taken back with a negative margin so the
   line spacing is unchanged. */
.hero__title .line { padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero__title .line > * { display: inline; }
.hero__title .line {
  clip-path: inset(0 0 110% 0); transform: translateY(0.6em);
  animation: lineUp 1.1s var(--ease-lux) forwards;
}
.hero__title .line:nth-child(1) { animation-delay: 0.45s; }
.hero__title .line:nth-child(2) { animation-delay: 0.58s; }
@keyframes lineUp { to { clip-path: inset(0 0 -20% 0); transform: none; } }
.shimmer {
  background: linear-gradient(100deg, var(--brass-deep) 20%, #E3C68B 40%, var(--brass-deep) 60%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 4.5s linear 1.6s infinite; font-style: italic;
}
@keyframes shimmer { to { background-position: -220% 0; } }
.hero__sub { max-width: 32em; color: var(--ink-soft); font-size: clamp(0.98rem, 2.6vw, 1.12rem); position: relative; }
.hero__intro {
  display: flex; align-items: center; gap: 1.3rem;
  margin-top: 1.7rem; text-align: left; max-width: 40em; position: relative;
}
.hero__avatar {
  width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; object-position: center;
  border: 1px solid rgba(22, 35, 63, 0.18);
}
@media (max-width: 500px) { .hero__avatar { width: 68px; height: 68px; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 1.9rem; position: relative; }
.reveal-line { opacity: 0; animation: fadeUp 1s var(--ease-lux) forwards; }
.hero__eyebrow.reveal-line { animation-delay: 0.3s; }
.hero__sub.reveal-line, .hero__intro.reveal-line { animation-delay: 0.95s; }
.hero__actions.reveal-line { animation-delay: 1.15s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero__scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 1px; height: 52px; overflow: hidden; }
.hero__scroll span { display: block; width: 1px; height: 100%; background: linear-gradient(var(--ink), transparent); animation: scrollHint 2s var(--ease-lux) infinite; }
@keyframes scrollHint { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* ---------- client logos ---------- */
.clients { background: var(--ink); padding: 2.6rem 0; overflow: hidden; }
.clients__label { text-align: center; font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(250, 246, 239, 0.55); margin-bottom: 1.8rem; }
.clients__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.clients__track:hover { animation-play-state: paused; }
.clients__set { display: flex; align-items: center; gap: 3.4rem; padding-right: 3.4rem; }
.clients__set img {
  height: 30px; width: auto; opacity: 0.72;
  filter: brightness(0) invert(1); transition: opacity 0.3s;
}
.clients__set img:hover { opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- split feature ---------- */
.split { display: grid; gap: 2.4rem; align-items: center; }
.split__media img { border-radius: 20px; box-shadow: 0 40px 80px -40px rgba(22, 35, 63, 0.45); }
.split h2 { margin-bottom: 1.3rem; }

/* ---------- media placeholder (video / reel) ---------- */
.media-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(90% 120% at 20% 10%, rgba(233, 220, 195, 0.5) 0%, transparent 55%),
    linear-gradient(160deg, #1D2C4E 0%, #101E3B 100%);
  display: grid; place-content: center; gap: 0.9rem; text-align: center;
  border: 1px solid rgba(176, 138, 71, 0.3);
}
.media-frame__play {
  width: 74px; height: 74px; border-radius: 50%; margin-inline: auto;
  border: 1px solid rgba(250, 246, 239, 0.55); color: var(--ivory);
  display: grid; place-content: center; font-size: 1.1rem;
  transition: background 0.35s, transform 0.5s var(--ease-lux);
}
.media-frame:hover .media-frame__play { background: rgba(176, 138, 71, 0.85); transform: scale(1.08); }
.media-frame__label { color: rgba(250, 246, 239, 0.8); font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; }
/* Real video: native player underneath, our cover on top until first play. */
.media-frame--video { display: block; background: #101E3B; }
.media-frame--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Play control sits bottom-left so it never covers the speaker's face. */
.media-frame__cover {
  position: absolute; inset: 0; display: grid; grid-auto-flow: column;
  justify-content: start; align-content: end; align-items: center; gap: 1rem;
  border: 0; padding: clamp(1.1rem, 3.5vw, 1.8rem); cursor: pointer; font: inherit; text-align: left;
  background: linear-gradient(180deg, rgba(16, 30, 59, 0) 45%, rgba(16, 30, 59, 0.7) 100%);
  transition: opacity 0.4s;
}
.media-frame__cover .media-frame__play { margin: 0; width: 60px; height: 60px; background: rgba(16, 30, 59, 0.35); }
.media-frame__cover:hover .media-frame__play, .media-frame__cover:focus-visible .media-frame__play { background: rgba(176, 138, 71, 0.85); transform: scale(1.08); }
.media-frame__cover:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; }
.media-frame--video.is-playing .media-frame__cover { opacity: 0; pointer-events: none; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 1.4rem; }
.card {
  background: #FFFDF8; border: 1px solid rgba(22, 35, 63, 0.09);
  border-radius: 20px; padding: 2.2rem 1.8rem;
  transition: transform 0.5s var(--ease-lux), box-shadow 0.5s;
}
.card:hover { box-shadow: 0 30px 60px -30px rgba(22, 35, 63, 0.25); }
.card__num { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--brass); letter-spacing: 0.1em; }
.card h3 { margin: 0.5rem 0 0.7rem; font-size: 1.7rem; }
.card p { color: var(--ink-soft); font-size: 0.97rem; }
.card--gold { background: linear-gradient(165deg, #FFFDF8 0%, #F6EBD6 100%); }

/* "What I'm up to now": a navy band, three columns split by fine brass rules */
.now-band { background: var(--ink); color: var(--ivory); }
.now-band .eyebrow { color: var(--brass); }
.now-band h2 { color: var(--ivory); }
.now-band h2 em { color: var(--brass); }
.now-grid { display: grid; margin-top: clamp(2.6rem, 6vw, 4rem); }
.now-col { display: flex; flex-direction: column; padding: 2.2rem 0; border-top: 1px solid rgba(233, 220, 195, 0.18); text-decoration: none; }
.now-col__role { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass); margin-bottom: 1.3rem; }
.now-col__title { font-family: var(--serif); font-weight: 500; font-size: 2rem; line-height: 1.1; color: var(--ivory); margin-bottom: 0.9rem; }
.now-col__desc { color: rgba(250, 246, 239, 0.72); line-height: 1.65; flex: 1 0 auto; margin-bottom: 1.8rem; }
.now-col__go { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory); display: inline-flex; gap: 0.6em; align-items: center; }
.now-col__go span { color: var(--brass); display: inline-block; transition: transform 0.5s var(--ease-lux); }
a.now-col:hover .now-col__go span { transform: translate(4px, -4px); }
a.now-col:hover .now-col__title { color: var(--brass-soft); }
.now-col__title { transition: color 0.4s; }
.now-col__soon { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--brass-soft); }
@media (min-width: 860px) {
  .now-grid { grid-template-columns: repeat(3, 1fr); }
  .now-col { padding: 0.4rem 2.6rem 0; border-top: 0; border-left: 1px solid rgba(233, 220, 195, 0.18); }
  .now-col:first-child { border-left: 0; padding-left: 0; }
  .now-col:last-child { padding-right: 0; }
}

/* Testimonial wall (after Magnetic's card wall): navy section, one aligned
   row of fixed-width cards you drag sideways or step with the arrows. The
   row bleeds off the right edge as the cue that there is more. Cards stretch
   to the tallest quote, so long ones never clip. */
.qwall { background: var(--ink); color: var(--ivory); overflow: hidden; --edge: max(var(--pad-x), calc((100vw - 1120px) / 2)); }
.qwall__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.6rem 2rem; flex-wrap: wrap; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.qwall .eyebrow { color: var(--brass); }
.qwall h2 { color: var(--ivory); max-width: 12em; font-size: clamp(2.2rem, 5.6vw, 3.8rem); }
.qwall h2 em { color: var(--brass); }
.qwall__nav { display: flex; gap: 1.2rem; padding-bottom: 0.6rem; }
.qwall__arrow { width: 84px; padding: 0.4rem 0; background: none; border: 0; cursor: pointer; color: var(--ivory); opacity: 0.7; transition: opacity 0.3s, color 0.3s; }
.qwall__arrow svg { display: block; width: 100%; height: auto; }
.qwall__arrow--prev svg { transform: scaleX(-1); }
.qwall__arrow:hover { opacity: 1; color: var(--brass); }
.qwall__arrow[disabled] { opacity: 0.22; cursor: default; color: var(--ivory); }
.qtrack {
  display: flex; align-items: stretch; gap: 1.5rem;
  overflow-x: auto; padding: 0.5rem var(--edge) 1rem;
  /* bleed past the section padding to both screen edges */
  margin-inline: calc(-1 * var(--pad-x));
  cursor: grab; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.qtrack::-webkit-scrollbar { display: none; }
.qtrack.is-drag { cursor: grabbing; user-select: none; }
.qtrack.is-drag .quote-card { pointer-events: none; }
.qtrack .quote-card {
  flex: 0 0 min(460px, 84vw); min-height: 520px;
  display: flex; flex-direction: column; gap: 1.8rem;
  background: var(--ivory); border: 0; border-radius: 18px;
  padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.5rem, 4vw, 2.4rem) clamp(1.6rem, 3.6vw, 2.2rem);
}
/* Phones: drop the fixed minimum; cards still match the tallest quote. */
@media (max-width: 600px) { .qtrack .quote-card { min-height: 0; } }
.qtrack .quote-card p {
  font-family: var(--serif); font-style: normal; font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.32rem); line-height: 1.45; color: var(--ink);
  margin: 0; flex: 1 0 auto;
}
/* Fixed footer height (fits a two-line role) so every card's divider line
   sits at the same height across the row. */
.qtrack .quote-card .attrib { margin-top: auto; min-height: 5.1rem; align-items: flex-start; }
.qtrack .quote-card:first-child { background: var(--brass-deep); }
.qtrack .quote-card:first-child p { color: var(--ivory); }
.qtrack .quote-card:first-child .attrib { border-top-color: rgba(250, 246, 239, 0.25); }
.qtrack .quote-card:first-child .attrib__name { color: var(--ivory); }
.qtrack .quote-card:first-child .attrib__role { color: rgba(250, 246, 239, 0.75); }
.qtrack .quote-card:first-child .attrib__photo { background: rgba(250, 246, 239, 0.92); border-color: transparent; }

/* keynote cards */
.keynote h3 { font-size: 1.85rem; margin-bottom: 0.2rem; }
.keynote__q {
  font-family: var(--serif); font-style: italic; font-size: 1.2rem;
  color: var(--brass-deep); margin-bottom: 0.9rem; display: block;
}

/* testimonials */
.quote-card { display: flex; flex-direction: column; }
.quote-card p {
  font-family: var(--serif); font-style: italic; font-size: 1.18rem; line-height: 1.5;
  color: var(--ink); margin-bottom: 1.4rem; flex: 1 0 auto;
}
/* Attribution: photo, then name, then role on its own line.
   Sentence case here on purpose — the old all-caps run-on was unreadable. */
.attrib {
  display: flex; align-items: center; gap: 0.85rem;
  padding-top: 1.1rem; border-top: 1px solid rgba(22, 35, 63, 0.1);
}
.attrib__photo {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-content: center;
  background: linear-gradient(160deg, #F2E9D8 0%, #E2D0AE 100%);
  border: 1px dashed rgba(140, 107, 50, 0.5);
  color: var(--brass-deep); font-family: var(--serif); font-size: 0.95rem;
  letter-spacing: 0.06em; line-height: 1;
}
.attrib__who { font-style: normal; display: block; min-width: 0; }
.attrib__name {
  display: block; font-size: 0.95rem; font-weight: 500; color: var(--ink);
  letter-spacing: 0.01em; line-height: 1.3;
}
.attrib__role {
  display: block; font-size: 0.8rem; color: var(--ink-soft);
  line-height: 1.45; margin-top: 0.15rem;
}
.attrib__role i { font-style: italic; }
.gold .attrib { border-top-color: rgba(255, 253, 245, 0.25); }
.gold .attrib__name { color: #FFFDF5; }
.gold .attrib__role { color: rgba(255, 253, 245, 0.8); }

/* ---------- book / gold section ---------- */
.gold {
  background:
    radial-gradient(100% 130% at 18% 12%, rgba(255, 246, 222, 0.4) 0%, transparent 55%),
    radial-gradient(80% 100% at 85% 90%, rgba(90, 62, 18, 0.35) 0%, transparent 60%),
    linear-gradient(160deg, #CBA45B 0%, #B08A47 48%, #8A6528 100%);
  color: #FFFDF5; overflow: hidden;
}
.gold h2, .gold h3 { color: #FFFDF5; }
.gold h2 em { color: #FFFDF5; }
.gold p { color: rgba(255, 253, 245, 0.88); }
.book__inner { display: flex; flex-direction: column; align-items: center; gap: 3rem; text-align: center; position: relative; }
.book__media { position: relative; transform-style: preserve-3d; transition: transform 0.6s var(--ease-lux); }
.book__rays, .book__rays--2 {
  position: absolute; left: 50%; top: 50%; width: min(88vmin, 780px); height: min(88vmin, 780px);
  transform: translate(-50%, -50%);
  background: url('../img/sunburst.svg') center / contain no-repeat;
  -webkit-mask-image: radial-gradient(circle, black 40%, transparent 62%);
  mask-image: radial-gradient(circle, black 40%, transparent 62%);
  animation: raysSpin 160s linear infinite; pointer-events: none;
}
.book__rays--2 { width: min(64vmin, 560px); height: min(64vmin, 560px); opacity: 0.55; animation: raysSpinBack 110s linear infinite; }
@keyframes raysSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes raysSpinBack { to { transform: translate(-50%, -50%) rotate(-360deg); } }
.book__glow {
  position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 252, 240, 0.55) 0%, transparent 65%);
  animation: glowPulse 5s ease-in-out infinite; pointer-events: none;
}
@keyframes glowPulse { 50% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.12); } }
.book__drift { display: block; transform: translateY(var(--px, 0px)); }
.book__object {
  position: relative; width: min(70vw, 320px);
  animation: bookFloat 6s ease-in-out infinite;
  filter: drop-shadow(22px 32px 40px rgba(74, 52, 13, 0.55));
}
@keyframes bookFloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(0.5deg); } }
.book__copy { position: relative; }
.book__tagline { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 3.2vw, 1.45rem); color: rgba(255, 253, 245, 0.9); margin-bottom: 1.3rem; }
.book__stars { font-size: 1.05rem; letter-spacing: 0.35em; color: #FFFDF5; margin-bottom: 0.3rem; text-shadow: 0 0 18px rgba(255, 250, 230, 0.8); }
.book__rating { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 253, 245, 0.75); margin-bottom: 1.6rem; }
.book__sparks { position: absolute; inset: 0; pointer-events: none; }
.book__sparks span {
  position: absolute; left: var(--x); top: var(--y);
  color: rgba(255, 253, 245, 0.95); font-size: var(--s, 0.9rem);
  opacity: 0; animation: twinkle 4.5s ease-in-out var(--d) infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(24deg); }
}

/* ---------- dimensions list ---------- */
.dims { display: grid; gap: 1.4rem; }
.dim { border-top: 1px solid rgba(22, 35, 63, 0.14); padding-top: 1.4rem; }
.dim h3 { font-size: 1.75rem; margin-bottom: 0.5rem; }
.dim p { color: var(--ink-soft); font-size: 0.99rem; }

/* ---------- list chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; }
.chips li {
  border: 1px solid rgba(22, 35, 63, 0.22); border-radius: 99px;
  padding: 0.6em 1.3em; font-size: 0.86rem; color: var(--ink);
  transition: border-color 0.3s, background 0.3s;
}
.chips li:hover { border-color: var(--brass); background: rgba(176, 138, 71, 0.08); }

/* ---------- CTA band ---------- */
.cta-band {
  background: radial-gradient(90% 70% at 80% 0%, rgba(176, 138, 71, 0.2) 0%, transparent 60%), var(--ink-lift);
  color: var(--ivory); text-align: center;
}
.cta-band h2 { color: var(--ivory); margin-bottom: 1rem; }
.cta-band h2 em { color: var(--brass); }
.cta-band p { color: rgba(250, 246, 239, 0.75); max-width: 32em; margin: 0 auto 2.2rem; text-wrap: pretty; }
.cta-band--light {
  background: radial-gradient(90% 70% at 80% 0%, rgba(176, 138, 71, 0.14) 0%, transparent 60%), var(--ivory-deep);
  color: var(--ink);
}
.cta-band--light h2 { color: var(--ink); }
.cta-band--light h2 em { color: var(--brass-deep); }
.cta-band--light p { color: var(--ink-soft); }

/* Headline made of two sentences: keep each whole, break between them.
   Sized so the first sentence fits on one line rather than orphaning a word. */
.h2--pair { font-size: clamp(1.75rem, 4.3vw, 2.6rem); }
.h2--pair .s { display: inline-block; }

/* ---------- forms ---------- */
.form { display: grid; gap: 1.1rem; grid-template-columns: 1fr; text-align: left; }
.field { position: relative; }
.field input, .field textarea, .field select {
  width: 100%; background: #FFFDF8;
  border: 1px solid rgba(22, 35, 63, 0.22); border-radius: 12px;
  color: var(--ink); font-family: var(--sans); font-weight: 300;
  font-size: 1rem; padding: 1.3rem 1.1rem 0.6rem;
  outline: none; transition: border-color 0.3s, background 0.3s; appearance: none;
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { cursor: pointer; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brass); background: #fff; }
.field label {
  position: absolute; left: 1.1rem; top: 1rem;
  font-size: 0.95rem; color: var(--ink-soft);
  pointer-events: none; transition: all 0.25s var(--ease-lux);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field .label--static {
  top: 0.42rem; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-deep);
}
.field .label--static { position: absolute; }
.form__note { font-size: 0.78rem; color: var(--ink-soft); }
.form__done { display: none; padding: 2rem 0 0.5rem; text-align: center; }
.form__done.show { display: block; animation: fadeUp 0.8s var(--ease-lux); }
.form__done-mark { font-size: 2rem; color: var(--brass); margin-bottom: 0.6rem; }
.form__done h3 { font-size: 1.9rem; margin-bottom: 0.6rem; }
.form__done p { color: var(--ink-soft); max-width: 26em; margin-inline: auto; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--ivory); padding: 4.5rem var(--pad-x) 2.5rem; text-align: center;
  border-top: 1px solid rgba(250, 246, 239, 0.09); }
.footer__big { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 8vw, 4rem); color: var(--ivory); line-height: 1.05; margin-bottom: 1.6rem; }
.footer__big em { color: var(--brass); font-style: italic; }
.footer__signup { max-width: 460px; margin: 0 auto 2.6rem; display: grid; gap: 0.8rem; }
.footer__signup .field input { background: rgba(250, 246, 239, 0.07); border-color: rgba(250, 246, 239, 0.25); color: var(--ivory); }
.footer__signup .field input:focus { border-color: var(--brass); background: rgba(250, 246, 239, 0.12); }
.footer__signup .field label { color: rgba(250, 246, 239, 0.6); }
.footer__signup .field input:focus + label, .footer__signup .field input:not(:placeholder-shown) + label { color: var(--brass); }
.footer__socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-bottom: 2rem; }
.footer__socials a {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(176, 138, 71, 0.45); color: var(--brass-soft);
  display: grid; place-content: center; text-decoration: none;
  transition: background 0.3s, transform 0.4s var(--ease-lux), color 0.3s;
}
.footer__socials a:hover { background: rgba(176, 138, 71, 0.18); transform: translateY(-4px); color: #fff; }
.footer__socials svg { width: 20px; height: 20px; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-bottom: 2.4rem; }
.footer__links a {
  color: rgba(250, 246, 239, 0.75); text-decoration: none;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; transition: color 0.3s;
}
.footer__links a:hover { color: var(--brass); }
.footer__fine { font-size: 0.7rem; color: rgba(250, 246, 239, 0.4); letter-spacing: 0.08em; }
.footer__fine a { color: rgba(250, 246, 239, 0.55); text-decoration: none; border-bottom: 1px solid rgba(176, 138, 71, 0.5); }

/* ---------- reveal + per-section motion ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s ease, transform 1s var(--ease-lux); }
.reveal.in { opacity: 1; transform: none; }
.reveal--left { transform: translateX(-46px); }
.reveal--right { transform: translateX(46px); }
.reveal--scale { transform: scale(0.92); }
.reveal--rise { transform: translateY(60px) scale(0.97); }
.reveal.in { transform: none; }

.stagger > * { opacity: 0; transform: translateY(30px); transition: opacity 0.75s ease, transform 0.85s var(--ease-lux); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger > *:nth-child(1) { transition-delay: 0.04s; }
.stagger > *:nth-child(2) { transition-delay: 0.12s; }
.stagger > *:nth-child(3) { transition-delay: 0.20s; }
.stagger > *:nth-child(4) { transition-delay: 0.28s; }
.stagger > *:nth-child(5) { transition-delay: 0.36s; }
.stagger > *:nth-child(6) { transition-delay: 0.44s; }
.stagger > *:nth-child(7) { transition-delay: 0.52s; }
.stagger > *:nth-child(8) { transition-delay: 0.60s; }
.stagger--pop > * { transform: scale(0.88) translateY(24px); }
.stagger--slide > * { transform: translateX(-44px); }

.book__media { opacity: 0; transform: translateY(70px) scale(0.86) rotate(-7deg); transition: opacity 1.1s ease, transform 1.5s var(--ease-lux); }
.book__media.in { opacity: 1; transform: none; }
.book__media.settled { transition: transform 0.6s var(--ease-lux); }

/* portrait wipe: driven by the unclipped parent, never the clipped image */
.split__media img.wipe { clip-path: inset(100% 0 0 0); transform: scale(1.1); transition: clip-path 1.3s var(--ease-lux), transform 1.6s var(--ease-lux); }
.split__media.in img.wipe { clip-path: inset(0 0 0 0); transform: none; }

.footer__big { opacity: 0; letter-spacing: 0.14em; transform: translateY(20px); transition: opacity 1s ease, letter-spacing 1.4s var(--ease-lux), transform 1.2s var(--ease-lux); }
.footer__big.in { opacity: 1; letter-spacing: normal; transform: none; }
.parallax { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .stagger > *, .book__media, .footer__big {
    opacity: 1 !important; transform: none !important; clip-path: none !important; letter-spacing: normal !important;
  }
  .split__media img.wipe { clip-path: none !important; transform: none !important; }
  .clients__track { animation: none !important; }
}

/* ============================================================
   Desktop
   ============================================================ */
@media (min-width: 800px) {
  :root { --pad-x: 6vw; }
  .nav { height: 84px; }
  .nav__links { display: flex; gap: 1.7rem; align-items: center; }
  .nav__links a {
    color: var(--ink); text-decoration: none; font-size: 0.76rem;
    letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400;
    position: relative; padding: 0.3em 0;
  }
  .nav__links a::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
    background: var(--brass-deep); transform: scaleX(0); transform-origin: right;
    transition: transform 0.45s var(--ease-lux);
  }
  .nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
  .nav__links a[aria-current="page"] { color: var(--brass-deep); }
  .nav__burger { display: none; }
  .mobile-menu { display: none; }

  .split { grid-template-columns: minmax(300px, 440px) 1fr; column-gap: clamp(3rem, 5vw, 5rem); align-items: center; }
  .split--flip .split__media { order: 2; }
  .cards--2 { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .cards--3 { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
  .cards--4 { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
  .dims { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 3rem; }
  .card { padding: 2.6rem 2rem 2.2rem; }
  .book__inner { flex-direction: row; text-align: left; gap: 6vw; }
  .book__media { flex: 0 0 320px; }
  .book__copy .btn-row { justify-content: flex-start; }
  .form--2col { grid-template-columns: 1fr 1fr; }
  .form--2col .field--full, .form--2col .btn, .form--2col .form__note { grid-column: 1 / -1; }
  .footer__signup { grid-template-columns: 1fr auto; align-items: start; }
  .footer__signup .btn { width: auto; }
  .footer__signup .form__note { grid-column: 1 / -1; }
  .clients__set img { height: 34px; }
}

/* ---------- plugin-style guard ----------
   On the WordPress build, Elementor's global kit styles colour every <a>.
   These selectors are one class stronger so the nav keeps the brand colours
   regardless of stylesheet order. Harmless on the static build. */
.nav .nav__logo, .nav .nav__logo:visited { color: var(--ink); }
.nav .nav__links a, .nav .nav__links a:visited { color: var(--ink); }
.nav .nav__links a[aria-current="page"] { color: var(--brass-deep); }
.footer .footer__links a, .footer .footer__links a:visited { color: rgba(250, 246, 239, 0.75); }
.footer .footer__socials a { color: var(--brass-soft); }
.btn.btn--primary, .btn.btn--primary:visited, .btn.btn--primary:hover { color: var(--ivory); }
.btn.btn--ghost, .btn.btn--ghost:visited, .btn.btn--ghost:hover { color: var(--ink); }
.btn.btn--ghost-light, .btn.btn--ghost-light:visited, .btn.btn--ghost-light:hover { color: #FFFDF5; }
.btn.btn--gold, .btn.btn--gold:visited, .btn.btn--gold:hover { color: #fff; }
a.now-col, a.now-col:visited, a.now-col:hover { color: var(--ivory); }
/* Elementor's kit also styles every <button> (.elementor-kit-N button):
   her old brand font at 800 weight, 41px radius, a gold hover fill, and
   20-26px text on tablet/phone. Restate ours one class stronger. */
button.btn.btn {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 500; font-style: normal;
  line-height: 1; letter-spacing: 0.16em; word-spacing: normal; text-transform: uppercase;
  border-radius: 99px;
}
button.btn.btn--gold, button.btn.btn--gold:focus { background-color: var(--brass); color: #fff; }
button.btn.btn--gold:hover { background-color: #C29A55; color: #fff; }
button.btn.btn--primary, button.btn.btn--primary:focus { background-color: var(--ink); color: var(--ivory); }
button.btn.btn--primary:hover { background-color: #0F1B33; color: var(--ivory); }
.media-frame button.media-frame__cover,
.media-frame button.media-frame__cover:hover,
.media-frame button.media-frame__cover:focus {
  background-color: transparent; color: inherit; border-radius: 0;
  font-family: var(--sans); font-size: 1rem; font-weight: 400; line-height: 1.2;
  letter-spacing: normal; text-transform: none;
}
.qwall button.qwall__arrow, .qwall button.qwall__arrow:focus {
  background: none; border: 0; border-radius: 0; padding: 0.4rem 0; font-size: inherit; color: var(--ivory);
}
.qwall button.qwall__arrow:hover { background: none; color: var(--brass); }
.qwall button.qwall__arrow[disabled] { color: var(--ivory); }
.nav button.nav__burger,
.nav button.nav__burger:hover,
.nav button.nav__burger:focus { background: none; border-radius: 0; padding: 0; color: inherit; }

/* ---------- email popup (WordPress only) ----------
   Her Elementor Pro popup, template 274, shows site wide after a 30% scroll.
   Restyled here rather than in Elementor so the form and its actions stay
   untouched and the look ships with the theme. The id outranks Elementor's
   per-element CSS. Harmless on the static build, which has no popup. */
#elementor-popup-modal-274 {
  background-color: rgba(22, 35, 63, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#elementor-popup-modal-274 .dialog-widget-content {
  width: min(560px, calc(100vw - 32px));
  background: var(--ivory); background-image: none;
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(22, 35, 63, 0.55);
}
#elementor-popup-modal-274 .dialog-message,
#elementor-popup-modal-274 .elementor-location-popup { width: 100%; max-width: 100%; padding: 0; }
#elementor-popup-modal-274 .e-con {
  background: none; background-image: none;
  padding: clamp(2.4rem, 6vw, 3.4rem) clamp(1.5rem, 6vw, 3.2rem) clamp(2.2rem, 5vw, 3rem);
}
#elementor-popup-modal-274 .e-con > .e-con-inner { padding: 0; }
#elementor-popup-modal-274 .e-con::before,
#elementor-popup-modal-274 .e-con > .e-con-inner::before { content: none; }
#elementor-popup-modal-274 .elementor-widget-heading::before {
  content: "Practice Small"; display: block; text-align: center;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--brass-deep);
  margin-bottom: 0.9rem;
}
#elementor-popup-modal-274 .elementor-heading-title {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 5vw, 2.4rem);
  line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); text-align: center;
  text-wrap: balance; margin-bottom: 1.6rem;
}
#elementor-popup-modal-274 .elementor-form-fields-wrapper { row-gap: 0.8rem; }
#elementor-popup-modal-274 .elementor-field-group { margin-bottom: 0; }
#elementor-popup-modal-274 .elementor-field-textual {
  width: 100%; min-height: 0; background: #FFFDF8;
  border: 1px solid rgba(22, 35, 63, 0.22); border-radius: 12px;
  color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 1rem;
  padding: 0.95rem 1.1rem; outline: none; box-shadow: none;
  transition: border-color 0.3s, background 0.3s;
}
#elementor-popup-modal-274 .elementor-field-textual::placeholder { color: var(--ink-soft); opacity: 0.8; }
#elementor-popup-modal-274 .elementor-field-textual:focus { border-color: var(--brass); background: #fff; }
#elementor-popup-modal-274 .elementor-field-type-acceptance { margin-top: 0.3rem; }
#elementor-popup-modal-274 .elementor-field-option { display: flex; align-items: center; gap: 0.6rem; }
#elementor-popup-modal-274 .elementor-acceptance-field {
  width: 1rem; height: 1rem; margin: 0; accent-color: var(--ink); flex: none;
}
#elementor-popup-modal-274 .elementor-field-option label {
  font-family: var(--sans); font-weight: 300; font-size: 0.85rem; color: var(--ink-soft);
}
#elementor-popup-modal-274 .e-form__buttons { margin-top: 0.8rem; }
#elementor-popup-modal-274 .elementor-button[type="submit"] {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--ivory); border: 0; border-radius: 99px;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 500; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 1.15em 2.1em;
  box-shadow: 0 14px 30px -14px rgba(22, 35, 63, 0.5);
  transition: background 0.35s, box-shadow 0.35s;
}
#elementor-popup-modal-274 .elementor-button[type="submit"]:hover {
  background: #0F1B33; color: var(--ivory); box-shadow: 0 18px 34px -14px rgba(22, 35, 63, 0.6);
}
#elementor-popup-modal-274 .elementor-button[type="submit"] .elementor-button-text { color: inherit; }
#elementor-popup-modal-274 .dialog-close-button {
  top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(22, 35, 63, 0.18);
  transition: border-color 0.3s, background 0.3s;
}
#elementor-popup-modal-274 .dialog-close-button:focus { outline: none; }
#elementor-popup-modal-274 .dialog-close-button:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
#elementor-popup-modal-274 .dialog-close-button:hover { border-color: var(--ink); background: rgba(22, 35, 63, 0.04); }
#elementor-popup-modal-274 .dialog-close-button svg { width: 12px; height: 12px; fill: var(--ink); }
#elementor-popup-modal-274 .elementor-message { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); text-align: center; }