/* ============================================
   PAUSE STUDIOS — Main Stylesheet
   Premium Event & Brand Photography
   ============================================

   01. Custom Properties
   02. Base
   03. Typography
   04. Layout
   05. Navigation
   06. Image Placeholders
   07. Buttons
   08. Hero (Home)
   09. Page Header (inner pages)
   10. Section Header
   11. Edge Section
   12. Services Grid
   13. Portfolio Grid
   14. Social Proof
   15. Geography Block
   16. Event Types
   17. Process Steps
   18. Deliverables
   19. CTA Block
   20. Notable Work
   21. About
   22. Inquiry Form
   23. Footer
   24. Fade Animation
   25. Responsive

   ============================================ */


/* -------------------------------------------
   01. CUSTOM PROPERTIES
   ------------------------------------------- */

:root {
  --bg:            #0a0810;
  --bg-alt:        #0d0b14;
  --bg-card:       #130f1c;
  --text:          #e8e4dc;
  --text-secondary:#8c8882;
  --text-muted:    #4a3d54;
  --accent:        #c8c8cc;
  --brand-purple:  #270f31;
  --brand-light:   rgba(39,15,49,0.72);
  --border:        #1c1624;
  --border-mid:    #261d30;
  --border-light:  #261d30;

  --font-display:  'Lora', Georgia, serif;
  --font-body:     'Montserrat', system-ui, -apple-system, sans-serif;

  --max-w:         1280px;
  --gutter:        clamp(20px, 5vw, 80px);
  --section:       clamp(80px, 9vw, 130px);
  --nav-h:         76px;

  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
}


/* -------------------------------------------
   02. BASE
   ------------------------------------------- */

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
}


/* -------------------------------------------
   03. TYPOGRAPHY
   ------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  color: var(--text);
}

h1 { font-size: clamp(44px, 6.5vw, 90px); letter-spacing: -0.01em; }
h2 { font-size: clamp(30px, 4.2vw, 58px); letter-spacing: -0.01em; }
h3 { font-size: clamp(19px, 2.5vw, 30px); }
h4 { font-size: clamp(16px, 1.8vw, 21px); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

em { font-style: italic; }

.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}


/* -------------------------------------------
   04. LAYOUT
   ------------------------------------------- */

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--section) 0;
}

.section--alt {
  background: var(--bg-alt);
}

.section--border-top {
  border-top: 1px solid var(--border);
}

.section--border-both {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}


/* -------------------------------------------
   05. NAVIGATION
   ------------------------------------------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}

.nav--scrolled {
  background: rgba(10, 8, 16, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  color: var(--accent);
}

.nav__logo-mark {
  flex-shrink: 0;
  color: var(--accent);
  transition: opacity 0.25s var(--ease);
}

.nav__logo:hover .nav__logo-mark {
  opacity: 0.75;
}

.nav__logo-text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.nav__logo-text span {
  font-weight: 300;
  color: var(--text-secondary);
  letter-spacing: 0.28em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav__links a {
  position: relative;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 0.25s var(--ease);
}

.nav__links a:hover,
.nav__links a.active {
  color: var(--text);
}

.nav__inquire {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 24px;
  border: 1px solid rgba(200,200,204,0.55);
  color: var(--accent);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
              background 0.25s var(--ease);
}

.nav__inquire:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}

/* Mobile toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 16px 11px;
  min-width: 44px;
  min-height: 44px;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--text);
  transition: all 0.3s var(--ease);
  transform-origin: center;
}

.nav__toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu overlay */
.nav__mobile {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 8, 16, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
}

.nav__mobile.is-open {
  display: flex;
  animation: menuFadeIn 0.3s var(--ease-out) both;
}

.nav__mobile a {
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 48px);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  transition: color 0.25s, transform 0.2s var(--ease-out);
}

.nav__mobile.is-open a {
  animation: menuLinkUp 0.5s var(--ease-out) both;
}

.nav__mobile.is-open a:nth-child(1) { animation-delay: 50ms; }
.nav__mobile.is-open a:nth-child(2) { animation-delay: 110ms; }
.nav__mobile.is-open a:nth-child(3) { animation-delay: 170ms; }
.nav__mobile.is-open a:nth-child(4) { animation-delay: 230ms; }
.nav__mobile.is-open a:nth-child(5) { animation-delay: 290ms; }

.nav__mobile a:hover {
  color: var(--text);
  transform: translateX(6px);
}


/* -------------------------------------------
   06. IMAGE PLACEHOLDERS
   ------------------------------------------- */

.img-ph {
  background-color: var(--bg-card);
  background-image: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.018) 50%,
    transparent 80%
  );
  background-size: 400% 100%;
  animation: imgShimmer 3.5s ease-in-out infinite;
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.img-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 48px 48px;
}

.img-ph::after {
  content: attr(data-label);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding: 16px 24px;
  position: relative;
  z-index: 1;
}

/* Aspect ratios */
.r-16-9  { aspect-ratio: 16 / 9; }
.r-3-2   { aspect-ratio: 3 / 2; }
.r-2-3   { aspect-ratio: 2 / 3; }
.r-4-5   { aspect-ratio: 4 / 5; }
.r-1-1   { aspect-ratio: 1 / 1; }
.r-hero  { aspect-ratio: 16 / 10; min-height: 480px; }
.r-full  { width: 100%; height: 100%; }

/* Real image replacement — use .site-img in place of .img-ph when swapping in real photos */
.site-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* -------------------------------------------
   07. BUTTONS
   ------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1px solid rgba(232,228,220,0.18);
  color: var(--text);
  background: transparent;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
              background 0.25s var(--ease), transform 0.2s var(--ease-out),
              box-shadow 0.25s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--brand-purple);
  color: var(--accent);
  border-color: rgba(200, 200, 204, 0.4);
}

.btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(200, 200, 204, 0.28), 0 4px 12px rgba(39, 15, 49, 0.5);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn--lg {
  padding: 18px 48px;
  font-size: 11px;
}


/* -------------------------------------------
   08. HERO (Home)
   ------------------------------------------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media .img-ph {
  width: 100%;
  height: 100%;
  border: none;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(10,8,16,0.06) 0%,
    rgba(10,8,16,0.00) 28%,
    rgba(10,8,16,0.48) 60%,
    rgba(10,8,16,0.90) 100%
  );
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(56px, 8vh, 96px);
}

.hero__eyebrow {
  margin-bottom: 18px;
}

.hero__headline {
  margin-bottom: 22px;
  max-width: 700px;
}

.hero__subhead {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
  color: rgba(232, 228, 220, 0.75);
  max-width: 520px;
  margin-bottom: 38px;
}


/* -------------------------------------------
   09. PAGE HEADER (inner pages)
   ------------------------------------------- */

.page-header {
  padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 96px));
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--border);
}

.page-header__eyebrow {
  margin-bottom: 16px;
}

.page-header__headline {
  margin-bottom: 18px;
  max-width: 680px;
}

.page-header__subhead {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 560px;
  margin-bottom: 36px;
}

.page-header__subhead:last-child {
  margin-bottom: 0;
}


/* -------------------------------------------
   10. SECTION HEADER
   ------------------------------------------- */

.section-header {
  margin-bottom: clamp(36px, 5vw, 60px);
}

.section-header--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}

.section-header__label {
  margin-bottom: 10px;
}

.section-header__headline {
  max-width: 520px;
}

.section-header__aside {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: right;
}


/* -------------------------------------------
   11. EDGE SECTION (Home: "A different kind of eye")
   ------------------------------------------- */

.edge__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
}

.edge__headline {
  margin-bottom: 22px;
}

.edge__body p {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.edge__body p:last-child {
  margin-bottom: 0;
}


/* -------------------------------------------
   12. SERVICES GRID (Home)
   ------------------------------------------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}

.service-item {
  background: var(--bg);
  padding: clamp(28px, 4vw, 44px) clamp(22px, 3vw, 34px);
  transition: background 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}

.service-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), rgba(200,200,204,0.3));
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.45s var(--ease-out);
}

.service-item:hover {
  background: var(--bg-card);
}

.service-item:hover::before {
  transform: scaleY(1);
}

.service-item__num {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 20px;
  font-family: var(--font-body);
}

.service-item__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 23px);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.25;
}

.service-item__desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
}


/* -------------------------------------------
   13. PORTFOLIO GRID (Home preview)
   ------------------------------------------- */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.portfolio-item {
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}

.portfolio-item .img-ph {
  transition: transform 0.65s var(--ease-out);
}

.portfolio-item:hover .img-ph {
  transform: scale(1.05);
}

/* Caption overlay — visible when real images replace placeholders */
.portfolio-item .portfolio-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(10,10,10,0.75) 0%, transparent 100%);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232,228,220,0.8);
  pointer-events: none;
}

.portfolio-item:hover .portfolio-caption {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-grid__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}


/* -------------------------------------------
   14. SOCIAL PROOF (Home: notable names)
   ------------------------------------------- */

.notable-bar__label {
  margin-bottom: 24px;
}

.notable-bar__names {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.notable-bar__names li {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.6vw, 32px);
  font-weight: 400;
  color: var(--text-secondary);
  transition: color 0.25s;
  cursor: default;
}

.notable-bar__names li:not(:last-child) .notable-name::after {
  content: '·';
  margin: 0 16px;
  color: var(--border-mid);
}

.notable-bar__names li:hover {
  color: var(--text);
}

.notable-bar__names li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.notable-name {
  display: block;
}

.notable-name__context {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
  transition: color 0.25s;
}

.notable-bar__names li:hover .notable-name__context {
  color: var(--text-secondary);
}

.notable-bar__footer {
  margin-top: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.notable-bar__quote {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 500px;
  line-height: 1.6;
}


/* -------------------------------------------
   15. GEOGRAPHY BLOCK (Home)
   ------------------------------------------- */

.geography__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 100px);
  align-items: start;
}

.geography__headline {
  margin-bottom: 18px;
}

.geography__body {
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.geography__cta {
  /* inherits .btn */
}

.markets {
  display: flex;
  flex-direction: column;
}

.market-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 400;
  color: var(--text-secondary);
  transition: color 0.25s, padding-left 0.3s var(--ease);
  cursor: default;
}

.market-item:first-child {
  border-top: 1px solid var(--border);
}

a.market-item {
  display: flex; /* override anchor default */
  text-decoration: none;
}

.market-item:hover {
  color: var(--text);
  padding-left: 6px;
}

.market-item__tag {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* -------------------------------------------
   16. EVENT TYPES (Events page)
   ------------------------------------------- */

.event-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
}

.event-type {
  background: var(--bg);
  padding: clamp(28px, 4vw, 48px);
  transition: background 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}

.event-type::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), rgba(200,200,204,0.3));
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.45s var(--ease-out);
}

.event-type:hover {
  background: var(--bg-card);
}

.event-type:hover::before {
  transform: scaleY(1);
}

.event-type__title {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.3vw, 27px);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.2;
}

.event-type__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}


/* -------------------------------------------
   17. PROCESS STEPS (Events page: approach)
   ------------------------------------------- */

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
}

.process-step {
  border-top: 1px solid var(--border);
  padding-top: 26px;
  transition: border-color 0.3s var(--ease-out);
}

.process-step:hover {
  border-top-color: var(--accent);
}

.process-step__num {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-bottom: 18px;
  transition: color 0.3s var(--ease-out);
}

.process-step:hover .process-step__num {
  color: var(--accent);
}

.process-step__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.25;
}

.process-step__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}


/* -------------------------------------------
   18. DELIVERABLES
   ------------------------------------------- */

.deliverables-list {
  display: flex;
  flex-direction: column;
}

.deliverables-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--text-secondary);
  line-height: 1.5;
}

.deliverables-list li:first-child {
  border-top: 1px solid var(--border);
}

.deliverables-list li::before {
  content: '—';
  color: var(--text-muted);
  flex-shrink: 0;
  font-family: var(--font-body);
}


/* -------------------------------------------
   19. CTA BLOCK
   ------------------------------------------- */

.cta-block {
  text-align: center;
}

.cta-block__inner {
  padding: clamp(72px, 9vw, 120px) 0;
  border-top: 1px solid var(--border);
  position: relative;
  isolation: isolate;
}

.cta-block__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 55% at 50% 50%,
    rgba(39, 15, 49, 0.28) 0%,
    rgba(200, 200, 204, 0.04) 45%,
    transparent 72%
  );
  pointer-events: none;
  z-index: -1;
}

.cta-block__headline {
  margin-bottom: 16px;
}

.cta-block__body {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 420px;
  margin: 0 auto 36px;
}


/* -------------------------------------------
   20. NOTABLE WORK (page)
   ------------------------------------------- */

.notable-entries {
  display: flex;
  flex-direction: column;
}

.notable-entry {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(36px, 5vw, 60px) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.notable-entry:first-child {
  border-top: 1px solid var(--border);
}

.notable-entry__left {
  /* name, role */
}

.notable-entry__name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--text);
  transition: color 0.3s var(--ease-out);
}

.notable-entry:hover .notable-entry__name {
  color: var(--accent);
}

.notable-entry__role {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.notable-entry__right {
  /* meta + desc */
}

.notable-entry__meta {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.notable-entry__desc {
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.75;
  color: var(--text-secondary);
}

.notable-entries__note {
  margin-top: 24px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.notable-supporting {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.notable-supporting__body {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  color: var(--text-secondary);
}


/* -------------------------------------------
   21. ABOUT PAGE
   ------------------------------------------- */

.about-intro {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
}

.about-intro__image {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}

.about-body p {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 26px;
}

.about-body p:last-child {
  margin-bottom: 0;
}

.about-edge {
  /* Full width section */
}

.about-edge__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 100px);
  align-items: start;
}

.about-edge__headline {
  margin-bottom: 22px;
}

.about-edge__body p {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 22px;
}

.about-edge__body p:last-child {
  margin-bottom: 0;
}

.about-edge__highlight {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 400;
  font-style: italic;
  color: var(--text);
  line-height: 1.45;
  border-left: 2px solid var(--accent);
  padding-left: 28px;
  margin-top: 40px;
  position: relative;
  opacity: 0.92;
}

.about-img-cap {
  display: flex;
  flex-direction: column;
}

.about-img-cap__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 14px;
  padding-left: 2px;
}

.about-studio__inner {
  max-width: 680px;
}

.about-studio__headline {
  margin-bottom: 22px;
}

.about-studio__body p {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 20px;
}


/* -------------------------------------------
   22. INQUIRY FORM
   ------------------------------------------- */

.inquiry-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}

.form {
  display: flex;
  flex-direction: column;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(16px, 3vw, 40px);
}

.form-field {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}

.form-field label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
  transition: color 0.25s;
}

.form-field:focus-within label {
  color: var(--accent);
}

.form-field input,
.form-field select,
.form-field textarea {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  padding: 2px 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.form-field select {
  cursor: pointer;
}

.form-field select option {
  background: var(--bg-card);
  color: var(--text);
}

.form-field textarea {
  resize: vertical;
  min-height: 110px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-muted);
}

.form-field--full {
  grid-column: 1 / -1;
}

.form__footer {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.form__note {
  font-size: 12px;
  color: var(--text-muted);
}

/* Inquiry Sidebar */
.inquiry-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}

.sidebar-block {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.sidebar-block:first-child {
  border-top: 1px solid var(--border);
}

.sidebar-block__title {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.sidebar-block__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.sidebar-block__body a {
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}

.sidebar-block__body a:hover {
  border-bottom-color: var(--accent);
}


/* -------------------------------------------
   23. FOOTER
   ------------------------------------------- */

.footer {
  border-top: 1px solid var(--border);
  padding: clamp(40px, 6vw, 70px) 0 clamp(28px, 4vw, 40px);
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(32px, 5vw, 52px);
  border-bottom: 1px solid var(--border);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.footer__logo-mark {
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.7;
}

.footer__logo-text {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}

.footer__tagline {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 200px;
}

.footer__nav-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
  font-family: var(--font-body);
}

.footer__nav-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__nav-links a {
  font-size: 14px;
  color: var(--text-secondary);
  transition: color 0.25s;
}

.footer__nav-links a:hover {
  color: var(--text);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: clamp(20px, 3vw, 28px);
  flex-wrap: wrap;
}

.footer__copy {
  font-size: 11px;
  color: var(--text-muted);
}

.footer__markets {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}


/* -------------------------------------------
   23b. UTILITY: TWO-COLUMN SPLIT
   ------------------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
}

.two-col--img-pair {
  gap: 3px;
  align-items: stretch;
}

@media (max-width: 768px) {
  .two-col {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .two-col--img-pair {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}


/* -------------------------------------------
   24. FADE ANIMATION
   ------------------------------------------- */

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.fade-in.is-visible {
  opacity: 1;
  transform: none;
}


/* -------------------------------------------
   25. RESPONSIVE
   ------------------------------------------- */

@media (max-width: 1024px) {
  .edge__inner {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .geography__inner {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .about-intro {
    grid-template-columns: 1fr;
  }

  .about-intro__image {
    position: static;
    display: none;
  }

  .about-edge__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .notable-supporting {
    grid-template-columns: 1fr;
  }

  .inquiry-layout {
    grid-template-columns: 1fr;
  }

  .inquiry-sidebar {
    position: static;
  }
}

@media (max-width: 860px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .nav__links,
  .nav__inquire {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .event-types {
    grid-template-columns: 1fr;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .notable-entry {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer__top {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__markets {
    text-align: left;
  }

  .notable-bar__names {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .notable-bar__names li::after {
    display: none;
  }

  .notable-bar__names li {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  .notable-name__context {
    font-size: 9px;
  }

  .section-header--split {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 540px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .hero__subhead {
    max-width: 100%;
  }
}


/* -------------------------------------------
   26. ANIMATION SYSTEM
   ------------------------------------------- */

/* --- @keyframes ----------------------------- */

@keyframes imgShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes menuFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes menuLinkUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* --- Stagger grids --------------------------
   Children animate in cascade.
   Transition-delay is set per-child via JS.  */
.stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

.stagger.is-visible > * {
  opacity: 1;
  transform: none;
}


/* --- Hero entrance --------------------------
   Each element fades up on page load.
   Delay is set via JS style attribute.       */
.hero-enter {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}

.hero-enter.is-visible {
  opacity: 1;
  transform: none;
}


/* --- Page-header entrance (sub-pages) ------ */
.page-header .page-header__eyebrow,
.page-header .page-header__headline,
.page-header .page-header__subhead,
.page-header .btn {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.page-header--ready .page-header__eyebrow  { opacity: 1; transform: none; transition-delay: 60ms;  }
.page-header--ready .page-header__headline { opacity: 1; transform: none; transition-delay: 180ms; }
.page-header--ready .page-header__subhead  { opacity: 1; transform: none; transition-delay: 310ms; }
.page-header--ready .btn                   { opacity: 1; transform: none; transition-delay: 420ms; }


/* --- Image hover: extend to real images ---- */
.portfolio-item .site-img {
  transition: transform 0.65s var(--ease-out);
}

.portfolio-item:hover .site-img {
  transform: scale(1.05);
}


/* --- Notable entry ------------------------- */
.notable-entry {
  transition: border-color 0.3s var(--ease-out);
}


/* --- Nav link underline -------------------- */
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.35s var(--ease-out);
}

.nav__links a:hover::after,
.nav__links a.active::after {
  width: 100%;
}

.nav__links a.active {
  color: var(--text);
}


/* --- Deliverables list hover --------------- */
.deliverables-list li {
  transition: color 0.2s var(--ease-out), padding-left 0.25s var(--ease-out);
}

.deliverables-list li:hover {
  color: var(--text);
  padding-left: 6px;
}


/* --- Sidebar block hover ------------------- */
.sidebar-block {
  transition: border-color 0.25s var(--ease-out);
}

.sidebar-block:hover {
  border-color: var(--border-mid);
}


/* -------------------------------------------
   27. REDUCED MOTION — Respect user preference
   ------------------------------------------- */

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

  /* Ensure hidden elements are immediately visible */
  .fade-in,
  .hero-enter,
  .stagger > *,
  .page-header .page-header__eyebrow,
  .page-header .page-header__headline,
  .page-header .page-header__subhead,
  .page-header .btn {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Stop shimmer background movement */
  .img-ph {
    animation: none !important;
    background-image: none !important;
    background-color: var(--bg-card) !important;
  }
}


/* -------------------------------------------
   TESTIMONIALS
   ------------------------------------------- */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 900px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.testimonial-card {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.45s var(--ease-out);
  z-index: 2;
}

.testimonial-card:hover::before {
  width: 100%;
}

/* Image */
.testimonial-card__img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonial-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: brightness(0.88);
  transition: transform 0.7s var(--ease-out), filter 0.4s var(--ease);
}

.testimonial-card:hover .testimonial-card__img {
  transform: scale(1.04);
  filter: brightness(0.78);
}

/* Text */
.testimonial-card__quote {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  font-style: italic;
  font-weight: 400;
  color: var(--text);
  line-height: 1.7;
  margin: 24px 0 16px;
}

.testimonial-card__credit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 28px;
}

.testimonial-card__name {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
}

.testimonial-card__role {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.testimonial-card__note {
  display: none;
}

/* -------------------------------------------
   PULL QUOTE
   ------------------------------------------- */

.pull-quote {
  border-left: 2px solid var(--accent);
  padding: clamp(16px, 3vw, 32px) 0 clamp(16px, 3vw, 32px) clamp(24px, 4vw, 40px);
  margin: 0;
  position: relative;
}

.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 16px;
}

.pull-quote cite {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  font-style: normal;
  text-transform: uppercase;
}

/* -------------------------------------------
   TRUST BAR
   ------------------------------------------- */

.trust-bar {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  padding: clamp(24px, 4vw, 40px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.trust-bar__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trust-bar__value {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}

.trust-bar__label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* -------------------------------------------
   QUOTE BUILDER STYLES
   ------------------------------------------- */

.quote-builder {
  max-width: 720px;
  margin: 0 auto;
}

.quote-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 48px;
}

.quote-progress__step {
  height: 3px;
  flex: 1;
  background: var(--border);
  border-radius: 2px;
  transition: background 0.4s ease;
}

.quote-progress__step.active {
  background: var(--accent);
}

.quote-progress__step.done {
  background: var(--text-secondary);
}

.quote-step {
  display: none;
}

.quote-step.visible {
  display: block;
  animation: fadeUpIn 0.45s var(--ease-out) both;
}

.quote-step__label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.quote-step__question {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 36px;
  line-height: 1.25;
}

.quote-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 36px;
}

.quote-option {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px 20px;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
  text-align: left;
  font-family: var(--font-body);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.4;
  position: relative;
}

.quote-option:hover {
  border-color: var(--border-light);
}

.quote-option.selected {
  border-color: var(--accent);
  background: rgba(200, 200, 204, 0.06);
}

.quote-option input[type="radio"],
.quote-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quote-option__title {
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

.quote-option__detail {
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: block;
}

.quote-addons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 36px;
}

@media (max-width: 600px) {
  .quote-addons {
    grid-template-columns: 1fr;
  }
}

.quote-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
}

.quote-result {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: clamp(28px, 5vw, 48px);
  margin-bottom: 32px;
}

.quote-result__label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.quote-result__range {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  margin-bottom: 16px;
}

.quote-result__note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.quote-result__summary {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.quote-result__summary-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.quote-result__summary-item:last-child {
  border-bottom: none;
}

.quote-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quote-field {
  margin-bottom: 20px;
}

.quote-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.quote-field input,
.quote-field textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.25s ease;
  -webkit-appearance: none;
}

.quote-field input:focus,
.quote-field textarea:focus {
  outline: none;
  border-color: var(--border-light);
}

.quote-field textarea {
  resize: vertical;
  min-height: 100px;
}

.quote-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 540px) {
  .quote-contact-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------
   PRICING PAGE
   ------------------------------------------- */

.pricing-packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}

@media (max-width: 900px) {
  .pricing-packages {
    grid-template-columns: 1fr;
  }
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color 0.3s ease;
  position: relative;
}

.pricing-card:hover {
  border-color: var(--border-light);
}

.pricing-card--featured {
  border-color: var(--accent);
}

.pricing-card--featured::before {
  content: 'Most requested';
  position: absolute;
  top: -1px;
  right: 24px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 0 0 3px 3px;
}

.pricing-card__name {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.pricing-card__price {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
}

.pricing-card__price-note {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.pricing-card__divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 24px;
}

.pricing-card__includes {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.pricing-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.pricing-card__list li {
  font-size: 0.86rem;
  color: var(--text);
  padding-left: 16px;
  position: relative;
  line-height: 1.4;
}

.pricing-card__list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.7rem;
  top: 2px;
}

.pricing-card__subtext {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 12px;
}

.addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.addon-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  transition: border-color 0.25s ease;
}

.addon-item:hover {
  border-color: var(--border-light);
}

.addon-item__name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}

.addon-item__desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.addon-item__price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

/* -------------------------------------------
   FAQ PAGE
   ------------------------------------------- */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item__question {
  width: 100%;
  background: none;
  border: none;
  padding: 24px 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: color 0.25s ease;
}

.faq-item__question:hover {
  color: var(--accent);
}

.faq-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq-item__icon::before {
  width: 14px;
  height: 1.5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-item__icon::after {
  width: 1.5px;
  height: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-item.open .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-item__answer {
  display: none;
  padding: 0 0 24px;
  max-width: 680px;
}

.faq-item.open .faq-item__answer {
  display: block;
}

.faq-item__answer p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}


/* -------------------------------------------
   28. PREMIUM HOVER + INTERACTION POLISH
   ------------------------------------------- */

/* Service item hover: left accent pulse */
.service-item {
  transition: border-color 0.3s var(--ease-out), padding-left 0.3s var(--ease-out);
}

.service-item:hover {
  border-color: var(--border-mid);
  padding-left: 4px;
}


/* Market item hover: accent text lift */
.market-item {
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out),
              padding-left 0.25s var(--ease-out);
}

.market-item:hover {
  color: var(--text);
  border-color: var(--border-mid);
  padding-left: 4px;
}

/* Inline accent links (used in FAQ + pricing copy) */
a.link-accent {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

a.link-accent:hover {
  border-bottom-color: var(--accent);
}

/* Instagram handle link — subtle, small */
.footer__social {
  margin-top: 12px;
}

.footer__social a {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.footer__social a:hover {
  color: var(--accent);
}


/* -------------------------------------------
   29. SPECIALTY COVERAGE SECTION
   ------------------------------------------- */

.specialty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

@media (max-width: 800px) {
  .specialty-grid {
    grid-template-columns: 1fr;
  }
}

.specialty-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 28px 24px;
  transition: border-color 0.3s var(--ease-out);
}

.specialty-card:hover {
  border-color: var(--border-mid);
}

.specialty-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 300;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.2;
}

.specialty-card__rate {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 300;
  color: var(--accent);
  margin-bottom: 8px;
  line-height: 1;
}

.specialty-card__desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}


/* -------------------------------------------
   30. DEPOSIT / PAYMENT BLOCK
   ------------------------------------------- */

.deposit-block {
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  padding: clamp(28px, 5vw, 48px);
  margin-top: 48px;
}

.deposit-block__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--text);
  margin-bottom: 16px;
}

.deposit-block__body {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 580px;
}

.deposit-block__methods {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.deposit-block__method {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 1px solid var(--border-mid);
  color: var(--text);
  border-radius: 3px;
}


/* -------------------------------------------
   31. NOTABLE ENTRY REFINEMENT
   ------------------------------------------- */

.notable-entry {
  border-top: 1px solid var(--border);
  padding: clamp(40px, 6vw, 72px) 0;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  transition: border-color 0.3s var(--ease-out);
}

.notable-entry:hover {
  border-color: var(--border-mid);
}

@media (max-width: 760px) {
  .notable-entry {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* -------------------------------------------
   32. QUOTE BUILDER — PREMIUM POLISH
   ------------------------------------------- */

/* Active progress step: taller + brighter */
.quote-progress__step.active {
  background: var(--accent);
  height: 4px;
  box-shadow: 0 0 10px rgba(200, 200, 204, 0.45), 0 0 20px rgba(39, 15, 49, 0.5);
}

/* Range number: accent color, heavier */
.quote-result__range {
  color: var(--accent);
}

/* Approach message block — appears on result screen */
.quote-approach {
  margin-top: 32px;
  padding: 28px 32px;
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  background: rgba(39, 15, 49, 0.35);
  animation: fadeUpIn 0.5s var(--ease-out) 0.2s both;
}

.quote-approach__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.quote-approach__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
}

/* Submit button state: sent */
.quote-ctas .btn--sent {
  opacity: 0.55;
  pointer-events: none;
}

/* Inline estimate confirm card — shown after "Send Me This Estimate" */
.quote-confirm-card {
  margin-top: 24px;
  padding: 28px 28px 24px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
}

.quote-confirm-card__label {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.quote-confirm-card__range {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 20px;
}

.quote-confirm-card__summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.quote-confirm-card__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.quote-confirm-card__row span:first-child {
  color: var(--text-muted);
}

.quote-confirm-card__row span:last-child {
  color: var(--text-secondary);
  text-align: right;
}

.quote-confirm-card__inclusions {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.quote-confirm-card__inclusions li {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding-left: 12px;
  position: relative;
}

.quote-confirm-card__inclusions li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}

.quote-confirm-card__note {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}

.quote-confirm-card__contact {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.quote-confirm-card__contact a {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease-out);
}

.quote-confirm-card__contact a:hover {
  border-color: var(--text-secondary);
}

/* Notable entries: stagger children */
.notable-entries.stagger > .notable-entry {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

.notable-entries.stagger.is-visible > .notable-entry {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------
   33. LEAD SYSTEM — BOOKING MODEL + TAILORED INTAKE
   ------------------------------------------- */

/* Portfolio bucket links — appears on result screen */
.quote-portfolio-links {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.quote-portfolio-links__label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.quote-portfolio-links__link {
  font-size: 0.82rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease-out);
}

.quote-portfolio-links__link:hover {
  border-color: var(--accent);
}

/* Booking model — 3-step process trust block */
.quote-booking-model {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.quote-booking-model__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.quote-booking-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.quote-booking-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.quote-booking-step__num {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  opacity: 0.7;
  min-width: 24px;
  padding-top: 2px;
}

.quote-booking-step__title {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  display: block;
  margin-bottom: 3px;
}

.quote-booking-step__detail {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* "Get tailored plan" secondary CTA */
.btn--secondary-cta {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text);
  font-size: 0.82rem;
  padding: 12px 20px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
  border-radius: 3px;
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  text-align: left;
}

.btn--secondary-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Tailored intake expansion section */
.quote-tailored-intake {
  margin-top: 40px;
  padding: 40px;
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  background: var(--bg-alt);
  animation: fadeUpIn 0.5s var(--ease-out) both;
}

@media (max-width: 600px) {
  .quote-tailored-intake {
    padding: 28px 20px;
  }
}

.quote-tailored-intake__headline {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.2;
}

.quote-tailored-intake__subhead {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 32px;
}

/* Priority checkboxes */
.quote-priorities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

@media (max-width: 560px) {
  .quote-priorities {
    grid-template-columns: 1fr;
  }
}

.quote-priority {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-secondary);
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
  user-select: none;
}

.quote-priority:hover {
  border-color: var(--border-mid);
  color: var(--text);
}

.quote-priority.selected {
  border-color: var(--accent);
  color: var(--text);
}

.quote-priority input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quote-priority__check {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}

.quote-priority.selected .quote-priority__check {
  background: var(--accent);
  border-color: var(--accent);
}

.quote-priority.selected .quote-priority__check::after {
  content: '';
  display: block;
  width: 8px;
  height: 5px;
  border-left: 1.5px solid #0c0a0f;
  border-bottom: 1.5px solid #0c0a0f;
  transform: rotate(-45deg) translateY(-1px);
}

/* Consultation readiness options (radio styled as cards) */
.quote-readiness {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.quote-readiness-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out);
}

.quote-readiness-option:hover {
  border-color: var(--border-mid);
}

.quote-readiness-option.selected {
  border-color: var(--accent);
}

.quote-readiness-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quote-readiness-option__dot {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-mid);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s;
}

.quote-readiness-option.selected .quote-readiness-option__dot {
  border-color: var(--accent);
}

.quote-readiness-option.selected .quote-readiness-option__dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.quote-readiness-option__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quote-readiness-option__title {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}

.quote-readiness-option__sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Tailored intake CTAs */
.quote-tailored-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
}

/* Consultation confirmation page */
.consultation-confirm {
  max-width: 560px;
}

.consultation-confirm__priority {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 16px;
  background: rgba(200, 200, 204, 0.1);
  border: 1px solid rgba(200, 200, 204, 0.25);
  border-radius: 2px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Pull quote: decorative mark behind, stronger border */
.pull-quote {
  border-left: 3px solid var(--accent);
  position: relative;
}

.pull-quote::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  left: clamp(24px, 4vw, 40px);
  font-family: var(--font-display);
  font-size: clamp(5rem, 10vw, 9rem);
  line-height: 1;
  color: var(--accent);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}

/* Quote CTA hint line */
.quote-cta-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin: -4px 0 4px;
  line-height: 1.5;
}

/* Quote restart / back link */
.quote-restart-link {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px 0;
  transition: color 0.2s ease;
}

.quote-restart-link:hover {
  color: var(--text-secondary);
}

/* Secondary outlined button */
.btn--secondary {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 14px 28px;
  transition: border-color 0.2s ease, color 0.2s ease;
  text-align: center;
  width: 100%;
}

.btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}


/* -------------------------------------------
   34. CELEBRITY / NOTABLE WORK — EXPANSION STRUCTURE
   Structure prepared for individual actor/celebrity entries
   within Galaxy Con and similar convention coverage.
   Entries slot in as .notable-celebrity-entry beneath
   their parent .notable-entry.
   ------------------------------------------- */

.notable-celebrity-list {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.notable-celebrity-entry {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
  transition: border-color 0.25s var(--ease-out);
}

.notable-celebrity-entry:hover {
  border-color: var(--border-mid);
}

@media (max-width: 600px) {
  .notable-celebrity-entry {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.notable-celebrity-entry__name {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.2;
}

.notable-celebrity-entry__role {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

.notable-celebrity-entry__right {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.notable-celebrity-entry__meta {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-top: 3px;
}

/* Pending label — used when image not yet ready */
.notable-celebrity-entry__pending {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 2px;
}


/* -------------------------------------------
   35. BRAND MARK — Logo lockup
   CSS-injected "P" mark before nav and footer
   wordmarks. Uses data-URI SVG so no HTML
   changes are needed across every page.
   ------------------------------------------- */

.nav__logo::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 11px;
  vertical-align: middle;
  margin-top: -2px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='3' fill='%23270f31'/%3E%3Ctext x='10' y='14.5' text-anchor='middle' font-family='Montserrat%2C sans-serif' font-weight='600' font-size='13' fill='%23c8c8cc'%3EP%3C/text%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 3px;
  transition: opacity 0.25s var(--ease);
}

.nav__logo:hover::before {
  opacity: 0.75;
}

.footer__logo::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: middle;
  margin-top: -2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='3' fill='%23270f31'/%3E%3Ctext x='10' y='14.5' text-anchor='middle' font-family='Montserrat%2C sans-serif' font-weight='600' font-size='13' fill='%23c8c8cc'%3EP%3C/text%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* -------------------------------------------
   36. CINEMATIC FEEL — Texture + Editorial Polish
   Elevates the site beyond generic premium.
   ------------------------------------------- */

/* Film grain overlay — very subtle, fixed to viewport */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.028;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
}

/* Section label — stronger editorial presence */
.label {
  letter-spacing: 0.26em;
}

/* Page header eyebrow — tighten the gap with headline */
.page-header__eyebrow {
  margin-bottom: 12px;
}

/* Hero headline — tighter tracking for cinematic weight */
.hero__headline {
  letter-spacing: -0.02em;
}

/* Pull-quote — stronger left rule */
.pull-quote {
  border-left-width: 2px;
  padding-left: clamp(20px, 3.5vw, 36px);
}

/* Quote approach block — deeper brand-purple saturation */
.quote-approach {
  background: rgba(39, 15, 49, 0.45);
  border-color: rgba(200, 200, 204, 0.15);
}

/* Quote approach details — structured breakdown */
.quote-approach__details {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(200, 200, 204, 0.1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}

@media (max-width: 600px) {
  .quote-approach__details {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.quote-approach__detail-block {
  /* each detail cell */
}

.quote-approach__detail-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  opacity: 0.8;
}

.quote-approach__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.quote-approach__list li {
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}

.quote-approach__list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
  opacity: 0.5;
  font-size: 0.7rem;
}

.quote-approach__detail-text {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Approach full-width block (span both columns) */
.quote-approach__detail-block--full {
  grid-column: 1 / -1;
}

/* Notable entry left column — slight italic style on name at rest */
.notable-entry__name {
  font-style: italic;
  font-weight: 300;
}

.notable-entry:hover .notable-entry__name {
  font-style: normal;
  color: var(--accent);
}

/* Market items — bolder top border accent on hover */
a.market-item:hover {
  color: var(--accent);
}

/* CTA block — stronger radial glow */
.cta-block__inner::before {
  background: radial-gradient(ellipse 70% 50% at 50% 50%,
    rgba(39, 15, 49, 0.38) 0%,
    rgba(200, 200, 204, 0.03) 48%,
    transparent 75%
  );
}


/* -------------------------------------------
   37. HERO — CINEMATIC AUTHORITY UPGRADE
   Stronger arrival presence. Editorial, not generic.
   ------------------------------------------- */

/* Hero: deeper, more directional gradient for more weight */
.hero__overlay {
  background: linear-gradient(
    168deg,
    rgba(10,8,16,0.05) 0%,
    rgba(10,8,16,0.00) 22%,
    rgba(10,8,16,0.38) 55%,
    rgba(10,8,16,0.86) 82%,
    rgba(8,9,30,0.96) 100%
  );
}

/* Eyebrow: wider track, slightly larger */
.hero__eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  opacity: 0.85;
}

/* Headline: bolder italic contrast version */
.hero__headline {
  font-style: italic;
  letter-spacing: -0.025em;
  line-height: 1.04;
  max-width: 780px;
}

/* Subhead: two-part — split into strong + soft */
.hero__subhead {
  max-width: 480px;
}

/* Scroll cue — editorial bottom-left indicator */
.hero__scroll-cue {
  position: absolute;
  bottom: clamp(28px, 5vh, 48px);
  right: clamp(20px, 5vw, 80px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: scrollCueFade 1s var(--ease-out) 1.4s both;
}

.hero__scroll-cue__line {
  width: 40px;
  height: 1px;
  background: rgba(232, 228, 220, 0.35);
  transform-origin: right;
  animation: scrollCueLine 0.8s var(--ease-out) 1.6s both;
}

.hero__scroll-cue__label {
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(232, 228, 220, 0.45);
}

@keyframes scrollCueFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollCueLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Hero stat bar — quiet authority under the fold line */
.hero__stat-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  border-top: 1px solid rgba(232, 228, 220, 0.08);
  display: flex;
  gap: 0;
}

.hero__stat {
  padding: clamp(14px, 2vh, 22px) clamp(20px, 5vw, 80px);
  border-right: 1px solid rgba(232, 228, 220, 0.08);
}

.hero__stat:last-child {
  border-right: none;
}

.hero__stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
  display: block;
}

.hero__stat__label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232, 228, 220, 0.4);
  display: block;
  margin-top: 4px;
}

@media (max-width: 680px) {
  .hero__stat-bar { display: none; }
  .hero__scroll-cue { display: none; }
}

/* Hero entrance: tighter, more cinematic stagger */
.hero-enter {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.hero-enter.is-visible {
  opacity: 1;
  transform: none;
}


/* -------------------------------------------
   38. QUOTE RESULT — ELEVATED PREMIUM EXPERIENCE
   Split layout: concept visual + range card
   ------------------------------------------- */

/* Override: result card now integrated differently */
#step-7 .quote-result {
  background: transparent;
  border: 1px solid var(--border);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 32px;
  animation: resultReveal 0.6s var(--ease-out) 0.1s both;
}

@media (max-width: 720px) {
  #step-7 .quote-result {
    grid-template-columns: 1fr;
  }
}

/* Left: concept visual panel */
.quote-concept-visual {
  min-height: 360px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.quote-concept-visual__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Real photo layer — injected when image available */
.quote-concept-visual__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 1;
  opacity: 0.72;
  animation: cvImgReveal 4.5s var(--ease-out) both;
}

@keyframes cvImgReveal {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 0.72; transform: scale(1.0); }
}

/* Cinematic overlay — dark vignette + bottom gradient */
.quote-concept-visual__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 120% 80% at 50% 120%, rgba(6, 5, 12, 0.85) 0%, transparent 60%),
    linear-gradient(to bottom, rgba(6, 5, 12, 0.18) 0%, rgba(6, 5, 12, 0.06) 40%, rgba(6, 5, 12, 0.45) 100%);
  pointer-events: none;
}

.quote-concept-visual__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.quote-concept-visual__frame {
  position: absolute;
  inset: 16px;
  z-index: 4;
  border: 1px solid rgba(232, 228, 220, 0.12);
  border-radius: 2px;
  pointer-events: none;
}

.quote-concept-visual__mark {
  position: absolute;
  bottom: 18px;
  left: 20px;
  z-index: 5;
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 228, 220, 0.45);
  pointer-events: none;
}

/* Event-type-specific concept visual backgrounds */
.quote-concept-visual--live_event .quote-concept-visual__bg {
  background:
    radial-gradient(ellipse 60% 55% at 30% 65%, rgba(60, 120, 220, 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 75% 30%, rgba(20, 180, 255, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 80% at 50% 110%, rgba(8, 9, 30, 0.9) 0%, transparent 70%),
    linear-gradient(165deg, #040816 0%, #0a0f28 55%, #0c1435 100%);
}

.quote-concept-visual--corporate .quote-concept-visual__bg {
  background:
    radial-gradient(ellipse 65% 50% at 20% 30%, rgba(180, 120, 60, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(100, 80, 160, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(8, 9, 30, 0.85) 0%, transparent 70%),
    linear-gradient(150deg, #0d0b18 0%, #10080f 50%, #09080e 100%);
}

.quote-concept-visual--brand_activation .quote-concept-visual__bg {
  background:
    radial-gradient(ellipse 45% 40% at 70% 40%, rgba(200, 200, 204, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 10% 80%, rgba(39, 15, 49, 0.6) 0%, transparent 60%),
    radial-gradient(ellipse 100% 50% at 50% 110%, rgba(8, 9, 30, 0.9) 0%, transparent 70%),
    linear-gradient(145deg, #0a0810 0%, #0e0a16 60%, #130f1c 100%);
}

.quote-concept-visual--private_gala .quote-concept-visual__bg {
  background:
    radial-gradient(ellipse 55% 45% at 60% 25%, rgba(200, 160, 80, 0.24) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 15% 75%, rgba(160, 100, 60, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(8, 9, 30, 0.88) 0%, transparent 70%),
    linear-gradient(155deg, #0e0a0a 0%, #100d08 55%, #0c0b10 100%);
}

.quote-concept-visual--elopement .quote-concept-visual__bg {
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, rgba(220, 200, 180, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(180, 160, 140, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(8, 9, 30, 0.82) 0%, transparent 70%),
    linear-gradient(160deg, #0d0c0b 0%, #100f0d 60%, #0b0b0d 100%);
}

.quote-concept-visual--retainer .quote-concept-visual__bg {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(140, 140, 160, 0.15) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 90% 60%, rgba(100, 100, 120, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(8, 9, 30, 0.88) 0%, transparent 70%),
    linear-gradient(150deg, #080c18 0%, #0b0c1a 55%, #090a12 100%);
}

.quote-concept-visual--sports_event .quote-concept-visual__bg {
  background:
    radial-gradient(ellipse 50% 55% at 70% 25%, rgba(220, 80, 40, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 70% 45% at 10% 70%, rgba(40, 80, 200, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(8, 9, 30, 0.9) 0%, transparent 70%),
    linear-gradient(155deg, #0c0b0a 0%, #0e0c0b 55%, #080a0e 100%);
}

.quote-concept-visual--equestrian .quote-concept-visual__bg {
  background:
    radial-gradient(ellipse 70% 50% at 50% -5%, rgba(200, 180, 140, 0.2) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 85% 75%, rgba(120, 100, 60, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(8, 9, 30, 0.85) 0%, transparent 70%),
    linear-gradient(155deg, #0d0c0a 0%, #100e0b 55%, #0b0b0c 100%);
}

.quote-concept-visual--custom .quote-concept-visual__bg {
  background:
    radial-gradient(ellipse 55% 45% at 30% 40%, rgba(39, 15, 49, 0.5) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 75% 65%, rgba(100, 80, 140, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(8, 9, 30, 0.88) 0%, transparent 70%),
    linear-gradient(150deg, #0a0810 0%, #0e0b16 55%, #08080e 100%);
}

/* Right: range + summary panel */
.quote-result__data-panel {
  padding: clamp(28px, 4vw, 44px);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quote-result__label {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.quote-result__range {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 500;
  color: var(--text);
  line-height: 0.95;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.quote-result__confidence {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
  max-width: 280px;
}

.quote-result__summary {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.quote-result__summary-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.76rem;
  color: var(--text-secondary);
  padding: 5px 0;
  border-bottom: 1px solid rgba(25, 30, 64, 0.5);
  gap: 12px;
}

.quote-result__summary-item:last-child {
  border-bottom: none;
}

.quote-result__summary-item span:first-child {
  color: var(--text-muted);
  white-space: nowrap;
}

.quote-result__summary-item span:last-child {
  text-align: right;
}

@keyframes resultReveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Approach block: stronger editorial feel */
.quote-approach {
  margin-top: 28px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(200, 200, 204, 0.10);
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(39, 15, 49, 0.42) 0%, rgba(12, 14, 38, 0.6) 100%);
  animation: fadeUpIn 0.55s var(--ease-out) 0.28s both;
}

.quote-approach__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.75;
  margin-bottom: 16px;
}

.quote-approach__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  color: rgba(232, 228, 220, 0.82);
  line-height: 1.7;
  margin: 0;
}

/* Trust testimonial — shown above CTAs on result screen */
.quote-result-testimonial {
  border-top: 1px solid var(--border);
  padding: 28px 0 4px;
  margin-top: 32px;
}

.quote-result-testimonial__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.quote-result-testimonial__credit {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Primary CTA block on result screen */
.quote-ctas {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quote-ctas .btn--primary {
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  padding: 17px 32px;
}

/* Quote CTA hint: smaller, more receded */
.quote-cta-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.55;
  margin: -2px 0 4px;
}

/* Market context note — under confidence line */
.quote-result__context {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 16px;
  font-style: italic;
}

/* What's included list in result panel */
.quote-result__inclusions {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.quote-result__inclusions li {
  font-size: 0.69rem;
  color: var(--text-secondary);
  padding: 4px 0;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.quote-result__inclusions li::before {
  content: '✓';
  color: var(--accent);
  opacity: 0.6;
  margin-right: 7px;
  font-size: 0.6rem;
}

/* Stats bar — homepage + pages */
.stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 40px;
}

.stats-bar__item {
  flex: 1 1 0;
  min-width: 120px;
  padding: clamp(16px, 2vw, 24px) clamp(16px, 3vw, 32px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stats-bar__item:last-child { border-right: none; }

.stats-bar__num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stats-bar__label {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
}

@media (max-width: 520px) {
  .stats-bar__item {
    min-width: 50%;
    flex: 1 1 50%;
  }
  .stats-bar__item:nth-child(2) { border-right: none; }
  .stats-bar__item:nth-child(3) { border-top: 1px solid var(--border); }
  .stats-bar__item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
}


/* -------------------------------------------
   39. INQUIRY — LIVE RANGE PREVIEW SIDEBAR
   Populates when event type is selected.
   ------------------------------------------- */

.inquiry-range-preview {
  background: linear-gradient(145deg, rgba(39, 15, 49, 0.42) 0%, rgba(12, 14, 38, 0.5) 100%);
  border: 1px solid rgba(200, 200, 204, 0.12);
  border-radius: 4px;
  padding: 22px 22px 20px;
  display: none;
  animation: fadeUpIn 0.4s var(--ease-out) both;
}

.inquiry-range-preview.is-visible {
  display: block;
}

.inquiry-range-preview__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.75;
  margin-bottom: 8px;
}

.inquiry-range-preview__range {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.inquiry-range-preview__type {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.inquiry-range-preview__approach {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.6;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-bottom: 12px;
}

.inquiry-range-preview__link {
  font-size: 0.72rem;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.06em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease-out);
}

.inquiry-range-preview__link:hover {
  border-color: var(--accent);
}


/* -------------------------------------------
   40. MARKET TAGS — Travel vs. Baseline
   Subtle signal on geography section cards.
   ------------------------------------------- */

.market-item__tag--travel {
  background: rgba(39, 15, 49, 0.6);
  color: rgba(200, 200, 204, 0.55);
  border-color: rgba(200, 200, 204, 0.12);
}

/* Laredo gets explicit emphasis as a named market */
a.market-item[href*="laredo"] {
  order: -1; /* Ensures it's not buried at the bottom of the flex list */
}


/* -------------------------------------------
   41. HERO — STRONGER ARRIVAL ANIMATION
   More deliberate entrance. Cinematic, not just a fade.
   ------------------------------------------- */

.hero-enter {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}

.hero-enter.is-visible {
  opacity: 1;
  transform: none;
}

/* Eyebrow entrance: slightly different timing (reveals first) */
.hero__eyebrow.hero-enter {
  transition-delay: 0.05s;
  transition-duration: 0.7s;
}

.hero__headline.hero-enter {
  transition-delay: 0.18s;
  transition-duration: 0.95s;
}

.hero__subhead.hero-enter {
  transition-delay: 0.34s;
  transition-duration: 0.9s;
}

.hero__content .btn.hero-enter {
  transition-delay: 0.5s;
  transition-duration: 0.85s;
}


/* -------------------------------------------
   42. EDGE SECTION — DIRECTIONAL REVEAL
   Left column slides from left, right from right.
   Creates momentum and cinematic authorship.
   ------------------------------------------- */

.edge__inner {
  overflow: hidden; /* clip the slide-in */
}

.edge__left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.edge__right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.85s var(--ease-out) 0.12s, transform 0.85s var(--ease-out) 0.12s;
}

.fade-in.is-visible .edge__left,
.fade-in.is-visible .edge__right {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .edge__left,
  .edge__right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* -------------------------------------------
   43. SERVICE ITEMS — UPWARD HOVER SHIFT
   Adds a vertical translate to existing hover.
   Non-conflicting with existing border/padding.
   ------------------------------------------- */

.service-item {
  transition: border-color 0.3s var(--ease-out),
              padding-left 0.3s var(--ease-out),
              transform 0.35s var(--ease-out);
}

.service-item:hover {
  transform: translateY(-3px);
}

.service-item:hover .service-item__num {
  color: var(--accent);
}


/* -------------------------------------------
   44. MARKET ITEMS — STRONGER HOVER SHIFT
   Increase the padding-left on hover slightly
   and brighten the accent response.
   ------------------------------------------- */

a.market-item:hover {
  color: var(--accent);
  padding-left: 8px;
}


/* -------------------------------------------
   45. INQUIRY + QUOTE PAGE — AUTHORITY DETAILS
   ------------------------------------------- */

.sidebar-block__title {
  letter-spacing: 0.14em;
  font-size: 0.68rem;
}

.form__footer .btn--primary {
  font-size: 0.94rem;
  letter-spacing: 0.08em;
  padding: 17px 36px;
}

.page-header__headline {
  max-width: 640px;
}


/* -------------------------------------------
   46. TESTIMONIALS — STRONGER QUOTE WEIGHT
   Elevate the pull-quote typography.
   ------------------------------------------- */

.testimonial-card__quote {
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  line-height: 1.72;
  color: var(--text);
}

.testimonial-card__name {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.testimonial-card__role {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}


/* -------------------------------------------
   47. SCROLL PROGRESS BAR
   Thin brand line at top of viewport.
   Inserted dynamically by main.js.
   ------------------------------------------- */

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--brand-purple), rgba(200, 200, 204, 0.6));
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 9999;
  pointer-events: none;
}


/* -------------------------------------------
   48. PREMIUM CARD HOVER — lift + depth
   Enhances existing background/border-line
   transitions without conflicting with them.
   ------------------------------------------- */

.service-item {
  transition: background 0.3s var(--ease), transform 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out);
}

.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(200, 200, 204, 0.06);
}

.portfolio-item {
  transition: transform 0.4s var(--ease-out);
}

.portfolio-item:hover {
  transform: translateY(-3px);
}

.notable-entry {
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.notable-entry:hover {
  transform: translateY(-2px);
}


/* -------------------------------------------
   49. PREMIUM BUTTON HOVER — glow + magnetic
   Will-change hint enables GPU layer for
   smooth magnetic JS transform.
   ------------------------------------------- */

.btn--primary {
  will-change: transform;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              transform 0.18s var(--ease-out), box-shadow 0.25s var(--ease),
              border-color 0.2s var(--ease);
}

.btn--primary:hover {
  box-shadow: 0 10px 36px rgba(39, 15, 49, 0.55), 0 0 0 1px rgba(232, 228, 220, 0.1);
}


/* -------------------------------------------
   50. STAT COUNTER — stable width during count
   ------------------------------------------- */

.stats-bar__num {
  display: inline-block;
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
}


/* -------------------------------------------
   51. BOOK PAGE — 3-step self-serve flow
   ------------------------------------------- */

.book-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 48px 0;
}

.book-step {
  background: var(--bg-card);
  padding: clamp(28px, 4vw, 44px) clamp(22px, 3vw, 34px);
  position: relative;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.book-step__num {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 20px;
  font-family: var(--font-body);
}

.book-step__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.25;
}

.book-step__desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.book-step--active {
  background: var(--bg-alt);
  border-top: 2px solid var(--accent);
}

.book-step--disabled {
  opacity: 0.55;
}

.book-step--disabled .book-step__desc::after {
  content: ' Coming soon.';
  color: var(--text-muted);
}

.calendly-frame {
  width: 100%;
  min-height: 700px;
  border: none;
  background: var(--bg-card);
  border-radius: 0;
}

.deposit-block {
  background: var(--bg-card);
  padding: clamp(28px, 4vw, 48px);
  margin-top: 48px;
}

.deposit-block__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
  font-family: var(--font-body);
}

.deposit-block__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 500;
  margin-bottom: 16px;
}

.deposit-block__body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 540px;
  margin-bottom: 32px;
}

.deposit-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.deposit-method {
  background: var(--bg-alt);
  padding: 24px 28px;
  border: 1px solid var(--border);
}

.deposit-method__name {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  font-family: var(--font-body);
}

.deposit-method__detail {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .book-steps {
    grid-template-columns: 1fr;
  }

  .deposit-methods {
    grid-template-columns: 1fr;
  }
}