/* =========================================================================
   Ahmedabad Podcast — Bootstrap 5.3 theme layer
   Retheme strategy: override Bootstrap CSS custom properties (--bs-*) first,
   then add a small set of brand-only utility/component classes for things
   Bootstrap has no primitive for (eyebrows, ticker, hairline grids, flat
   offset shadows, two-part serif headlines, waveform mark).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. ROOT-LEVEL BOOTSTRAP VARIABLE OVERRIDES
   ------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  /* brand palette */
  --ink: #181815;
  --paper: #FAF7F0;
  --cream: #F2EBDE;
  --orange: #EF5B2A;
  --sage: #A8B095;
  --line: rgba(24, 24, 21, .17);
  --muted: #767268;
  --muted-2: #555248;

  /* Bootstrap theme colors -> brand colors */
  --bs-primary: var(--orange);
  --bs-primary-rgb: 239, 91, 42;
  --bs-secondary: var(--ink);
  --bs-secondary-rgb: 24, 24, 21;
  --bs-success: var(--sage);
  --bs-success-rgb: 168, 176, 149;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-body-font-family: Arial, Helvetica, sans-serif;
  --bs-link-color: var(--orange);
  --bs-link-hover-color: var(--ink);
  --bs-link-decoration: underline;
  --bs-border-color: var(--line);

  /* square corners everywhere (Bootstrap radius scale) */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;

  /* type stacks */
  --font-sans: Arial, Helvetica, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  --section-y: 110px;
  --section-y-mobile: 70px;
}

@media (max-width: 767.98px) {
  :root { --section-y: 70px; }
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* dot badges keep circular corners on purpose (brand exception) */
.dot,
.on-air i,
.rating-dot { border-radius: 50%; }

/* -------------------------------------------------------------------------
   2. TYPOGRAPHY
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); }

h1, .display-headline {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.06em;
  line-height: .96;
}
h2, .h2-headline {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 1.02;
}
h3 { font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; }
h4 { font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1rem; }

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted-2);
}

/* two-part headline soft line */
.soft-line, h1 em, h2 em, .headline em {
  font-family: var(--font-serif);
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--muted-2);
  display: block;
}

.lede {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--muted-2);
  line-height: 1.6;
  max-width: 46em;
}

.label,
.eyebrow,
.btn,
.nav-link,
.navbar-brand strong,
label,
.form-label {
  font-family: var(--font-sans);
}

a { text-decoration-thickness: 1px; }

/* -------------------------------------------------------------------------
   3. SECTION SPACING
   ------------------------------------------------------------------------- */
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-sm { padding-top: calc(var(--section-y) * .55); padding-bottom: calc(var(--section-y) * .55); }
.bg-cream-section { background: var(--cream); }
.bg-ink-section { background: var(--ink); color: var(--cream); }
.bg-sage-section { background: var(--sage); }

/* -------------------------------------------------------------------------
   4. EYEBROW / NUMBERED LABEL
   ------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--orange);
}
.eyebrow .dot {
  width: 8px; height: 8px;
  background: var(--orange);
  display: inline-block;
  flex: 0 0 auto;
}
.eyebrow.on-ink { color: var(--orange); }
.eyebrow.on-orange { color: #fff; }
.eyebrow.on-orange .dot { background: #fff; }
.eyebrow-num {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--orange);
  display: block;
  margin-bottom: .5rem;
}

/* -------------------------------------------------------------------------
   5. WAVEFORM LOGO MARK
   ------------------------------------------------------------------------- */
.wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 29px; }
.wave i { display: block; width: 2px; background: var(--orange); }

.navbar-brand.brand { display: flex; align-items: center; gap: .55rem; }
.navbar-brand.brand strong {
  font-size: 13px;
  line-height: .88;
  letter-spacing: -.04em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   6. NAVBAR
   ------------------------------------------------------------------------- */
.site-nav {
  background: rgba(250, 247, 240, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  padding-top: .9rem;
  padding-bottom: .9rem;
  transition: box-shadow .2s ease;
}
.site-nav.scrolled { box-shadow: 0 2px 0 var(--line); }
.site-nav .nav-link {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink);
  padding: .5rem .9rem;
}
.site-nav .nav-link.active,
.site-nav .nav-link:hover { color: var(--orange); }
.site-nav .icon-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  color: var(--ink);
}
.site-nav .icon-btn:hover { border-color: var(--orange); color: var(--orange); }

.offcanvas-brand { background: var(--ink); color: var(--cream); width: 320px; }
.offcanvas-brand .navbar-brand.brand strong { color: var(--cream); }
.offcanvas-brand .list-group-item {
  background: transparent; border-color: rgba(250,247,240,.12);
  color: var(--cream); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; font-size: 13px; padding: 1rem .25rem;
  display: flex; justify-content: space-between; align-items: center;
}
.offcanvas-brand .list-group-item span { color: var(--orange); }
.offcanvas-brand .list-group-item:hover { color: var(--orange); }

/* -------------------------------------------------------------------------
   7. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .85rem 1.6rem;
  border-width: 1px;
  box-shadow: none !important;
}
.btn-orange, .btn-primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.btn-orange:hover, .btn-primary:hover,
.btn-orange:active, .btn-primary:active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.btn-ink, .btn-secondary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.btn-ink:hover, .btn-secondary:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.btn-outline-ink {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline-ink:hover { background: var(--ink); color: var(--paper); }

.under-link {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.under-link:hover { color: var(--orange); }
.under-link.on-ink { color: var(--cream); }

/* -------------------------------------------------------------------------
   8. TICKER
   ------------------------------------------------------------------------- */
.ticker {
  background: var(--orange);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  padding: 14px 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ticker .ticker-track {
  display: inline-block;
  padding-left: 100%;
  animation: ticker-scroll 28s linear infinite;
}
.ticker i { color: var(--ink); font-style: normal; margin: 0 1.4em; }
@keyframes ticker-scroll {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

/* -------------------------------------------------------------------------
   9. HAIRLINE GRID CARDS (service / value / faq-category / blog / team / testimonial)
   ------------------------------------------------------------------------- */
.hairline-grid {
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.hairline-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2.6rem 2rem;
  height: 100%;
}
.hairline-grid .card,
.hairline-cell.card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.icon-tile {
  width: 52px; height: 52px;
  background: var(--sage);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
}
.icon-tile svg { width: 24px; height: 24px; stroke: var(--ink); fill: none; stroke-width: 1.6; }

.idx-num {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: .05em;
  display: block;
  margin-bottom: 1rem;
}

.service-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.service-link .cta-arrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-block;
  margin-top: 1rem;
}
.service-link:hover .cta-arrow { color: var(--ink); }
.service-link:hover .icon-tile { background: var(--orange); }
.service-link:hover .icon-tile svg { stroke: #fff; }

/* -------------------------------------------------------------------------
   10. FLAT OFFSET SHADOW UTILITY
   ------------------------------------------------------------------------- */
.shadow-flat-orange { box-shadow: 8px 8px 0 var(--orange); }
.shadow-flat-ink { box-shadow: 8px 8px 0 var(--ink); }
.shadow-flat-sage { box-shadow: 8px 8px 0 var(--sage); }

/* -------------------------------------------------------------------------
   11. HERO / STUDIO ART (flat illustration, CSS-built)
   ------------------------------------------------------------------------- */
.inner-hero {
  padding: 150px 0 60px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.hero-banner-header { padding-top: 150px; padding-bottom: 60px; }
@media (max-width: 767.98px) {
  .inner-hero, .hero-banner-header { padding-top: 100px; padding-bottom: 40px; }
}
.breadcrumb-line.breadcrumb {
  --bs-breadcrumb-divider: '/';
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 0;
}
.breadcrumb-line .breadcrumb-item a { color: var(--muted); text-decoration: none; }
.breadcrumb-line .breadcrumb-item a:hover { color: var(--orange); }
.breadcrumb-line .breadcrumb-item.active { color: var(--ink); }

.studio-art {
  position: relative;
  background: var(--ink);
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  border: 1px solid var(--ink);
}
.studio-art .sound-wall {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(250,247,240,.06) 0 18px, transparent 18px 40px);
}
.studio-art-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Uploaded photos don't guarantee the same contrast the flat ink background
   did, so give the ON AIR badge a translucent scrim to stay legible. */
.studio-art-photo ~ .on-air {
  padding: 5px 9px;
  background: rgba(11, 19, 43, .55);
  border-radius: 4px;
}
.studio-art .art-desk {
  position: absolute; left: 8%; right: 8%; bottom: 10%; height: 16%;
  background: var(--sage);
}
.studio-art .art-mic {
  position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%);
  width: 34px; height: 60px; background: var(--orange);
}
.studio-art .art-mic::after {
  content: ""; position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  width: 3px; height: 22px; background: var(--orange);
}
.studio-art .on-air {
  position: absolute; top: 20px; left: 20px;
  color: #fff; font-family: var(--font-sans); font-size: 10px; font-weight: 900;
  letter-spacing: .12em; display: flex; align-items: center; gap: 8px;
}
.studio-art .on-air i {
  width: 8px; height: 8px; background: #e5493c; display: inline-block;
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.studio-art .show-card {
  position: absolute; right: 18px; top: 60px; width: 150px;
  background: var(--paper); padding: 14px; border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 var(--orange);
}
.studio-art .show-card small {
  display: block; font-size: 8px; font-weight: 900; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 6px; text-transform: uppercase;
}
.studio-art .show-card strong {
  display: block; margin-top: 8px; font-family: var(--font-serif); font-weight: 400;
  font-style: normal; font-size: 13px; color: var(--ink);
}

.stat-tile {
  border: 1px solid var(--line);
  padding: 1.1rem 1rem;
  text-align: center;
}
.stat-tile strong {
  display: block; font-size: 1.5rem; font-weight: 900; color: var(--orange);
  letter-spacing: -.02em;
}
.stat-tile span {
  font-family: var(--font-sans); font-size: 10px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}

.trust-bar {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem; margin-top: 2rem;
}
.trust-bar span { font-family: var(--font-sans); font-size: 12px; color: var(--muted-2); }
.trust-bar strong { color: var(--ink); font-weight: 900; }

/* -------------------------------------------------------------------------
   12. QUOTE / SAGE BAND
   ------------------------------------------------------------------------- */
.quote-band { background: var(--sage); color: var(--ink); }
.quote-band .container { max-width: 800px; }
.quote-band .quote-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  background: var(--cream); color: var(--orange);
  font-family: var(--font-serif); font-size: 2.25rem; line-height: 1;
  margin: 0 auto 2rem;
}
.quote-band blockquote {
  font-family: var(--font-serif); font-size: clamp(22px, 3vw, 34px); line-height: 1.45;
  max-width: 44em; margin: 0 auto 1.75rem;
}
.quote-band .quote-divider {
  display: block; width: 48px; height: 2px; background: var(--orange);
  margin: 0 auto 1.25rem;
}
.quote-band cite {
  font-style: normal; font-family: var(--font-sans); font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2);
}

/* -------------------------------------------------------------------------
   13. BLOG CARDS
   ------------------------------------------------------------------------- */
.blog-thumb {
  aspect-ratio: 16/10;
  position: relative;
  display: flex; align-items: flex-end; padding: 1rem;
}
.cat-tag {
  background: var(--ink); color: #fff; font-family: var(--font-sans);
  font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  padding: .4rem .7rem;
}
.blog-body { padding: 1.75rem 2rem; }
.blog-meta {
  font-family: var(--font-sans); font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  display: flex; gap: .5rem; margin-bottom: .75rem;
}
.blog-body h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.blog-body h3 a { color: var(--ink); text-decoration: none; }
.blog-body h3 a:hover { color: var(--orange); }
.blog-body p.serif { font-size: 14px; margin-bottom: 1rem; }
.read-more {
  font-family: var(--font-sans); font-size: 11px; font-weight: 900;
  letter-spacing: .05em; text-transform: uppercase; color: var(--orange); text-decoration: none;
}
.read-more:hover { color: var(--ink); }

/* filter pills */
.filter-pills .btn {
  border: 1px solid var(--line);
  background: transparent; color: var(--ink);
}
.filter-pills .btn.active,
.filter-pills .btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* -------------------------------------------------------------------------
   14. TEAM / TESTIMONIAL AVATARS
   ------------------------------------------------------------------------- */
.avatar-initials {
  width: 58px; height: 58px;
  background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 900; font-size: 15px; letter-spacing: .02em;
  flex: 0 0 auto;
}
.avatar-initials.lg { width: 84px; height: 84px; font-size: 20px; }

.social-icons a {
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.social-icons a:hover { border-color: var(--orange); color: var(--orange); }

.stars { color: var(--orange); font-size: 13px; letter-spacing: 2px; }

.testimonial-quote {
  font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.6; color: var(--muted-2);
}

/* -------------------------------------------------------------------------
   15. TIMELINE
   ------------------------------------------------------------------------- */
.timeline { border-left: 1px solid var(--line); padding-left: 2rem; }
.timeline-item { position: relative; padding-bottom: 2.75rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -2.42rem; top: 4px;
  width: 12px; height: 12px; background: var(--orange); border-radius: 50%;
  border: 3px solid var(--paper);
}
.timeline-item .yr {
  font-family: var(--font-sans); font-weight: 900; font-size: 12px; color: var(--orange);
  letter-spacing: .06em; margin-bottom: .35rem;
}

/* -------------------------------------------------------------------------
   16. ORANGE CTA BAND
   ------------------------------------------------------------------------- */
.cta-band { background: var(--orange); color: #fff; }
.cta-band h2, .cta-band h1 { color: #fff; }
.cta-band p { font-family: var(--font-serif); color: rgba(255,255,255,.86); font-size: 1rem; }
.cta-band .checks { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.5rem; }
.cta-band .checks span {
  font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: .03em;
}

/* form on orange band */
.cta-band .form-control,
.cta-band .form-select {
  border-radius: 0; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.95);
}

/* -------------------------------------------------------------------------
   17. FORMS
   ------------------------------------------------------------------------- */
.form-control, .form-select {
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  padding: .8rem .9rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
}
.form-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink); margin-bottom: .4rem;
}
.form-floating > label { color: var(--muted); }
.form-check-input { border-radius: 0; border-color: var(--line); }
.form-check-input:checked { background-color: var(--orange); border-color: var(--orange); }

/* -------------------------------------------------------------------------
   18. ACCORDION (FAQ)
   ------------------------------------------------------------------------- */
.accordion-item { border: 1px solid var(--line); border-radius: 0; background: transparent; margin-bottom: -1px; }
.accordion-button {
  border-radius: 0 !important;
  font-family: var(--font-sans); font-weight: 800; font-size: 15px; color: var(--ink);
  background: var(--paper);
  box-shadow: none;
  padding: 1.25rem 1.5rem;
}
.accordion-button:not(.collapsed) {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: none; border-color: var(--line); }
.accordion-button::after { filter: none; }
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FAF7F0'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
.accordion-body { font-family: var(--font-serif); color: var(--muted-2); font-size: 15px; line-height: 1.65; padding: 1.5rem; background: var(--paper); }

/* -------------------------------------------------------------------------
   19. PAGINATION
   ------------------------------------------------------------------------- */
.pagination .page-link {
  border-radius: 0; border-color: var(--line); color: var(--ink);
  font-family: var(--font-sans); font-weight: 800; font-size: 12px;
}
.pagination .page-item.active .page-link {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.pagination .page-link:hover { background: var(--cream); color: var(--orange); }

/* -------------------------------------------------------------------------
   20. FOOTER
   ------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--cream); padding: 90px 0 0; }
.site-footer p { font-family: var(--font-serif); color: rgba(250,247,240,.65); font-size: 14px; }
.site-footer h6 {
  font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(250,247,240,.5); margin-bottom: 1.1rem;
}
.site-footer a { color: rgba(250,247,240,.82); text-decoration: none; display: block; margin-bottom: .65rem; font-size: 14px; }
.site-footer a:hover { color: var(--orange); }
.site-footer hr { border-color: rgba(250,247,240,.14); margin-top: 3rem; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  padding: 1.75rem 0; font-size: 12px; color: rgba(250,247,240,.5);
}
.footer-bottom a { display: inline; margin: 0 .35rem; }
.site-footer .social-row { display: flex; gap: .6rem; margin-top: 1.25rem; }
.site-footer .social-row a {
  width: 34px; height: 34px; border: 1px solid rgba(250,247,240,.25);
  display: flex; align-items: center; justify-content: center; margin: 0;
}
.site-footer .social-row a:hover { background: var(--orange); border-color: var(--orange); }

/* -------------------------------------------------------------------------
   21. BACK TO TOP
   ------------------------------------------------------------------------- */
#backToTop {
  position: fixed; right: 24px; bottom: 24px; z-index: 1040;
  width: 44px; height: 44px; background: var(--ink); color: #fff;
  border: none; font-size: 16px; opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease, background .2s ease;
}
#backToTop.show { opacity: 1; visibility: visible; }
#backToTop:hover { background: var(--orange); }

/* -------------------------------------------------------------------------
   22. LOGIN PAGE
   ------------------------------------------------------------------------- */
.login-panel { background: var(--ink); color: var(--cream); min-height: 100%; }
.login-panel .wave i { background: var(--orange); }
.login-panel .callout {
  border: 1px solid rgba(250,247,240,.16); padding: 1.25rem 1.4rem; margin-top: 1rem;
}
.login-panel .callout strong { display: block; font-size: 1.6rem; color: var(--orange); font-weight: 900; }
.login-panel .callout span { font-family: var(--font-sans); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: rgba(250,247,240,.6); }
.password-toggle {
  border: 1px solid var(--line); border-left: none; background: var(--paper);
}

/* -------------------------------------------------------------------------
   23. ARTICLE (blog-single)
   ------------------------------------------------------------------------- */
.article-body { font-family: var(--font-serif); font-size: 17px; line-height: 1.8; color: var(--muted-2); }
.article-body h2 { font-size: 1.4rem; margin-top: 2.5rem; margin-bottom: 1rem; color: var(--ink); }
.article-body h3 { font-size: 1.1rem; margin-top: 2rem; margin-bottom: .85rem; color: var(--ink); }
.article-body p { margin-bottom: 1.35rem; }
.article-body ul { margin-bottom: 1.35rem; }
.article-body ul li { margin-bottom: .5rem; }
.article-body blockquote {
  border-left: 3px solid var(--orange);
  padding: .25rem 0 .25rem 1.5rem;
  margin: 2rem 0;
  font-size: 1.2rem;
  color: var(--ink);
  font-style: normal;
}
.article-cover {
  background: var(--sage); aspect-ratio: 16/7; position: relative; box-shadow: 10px 10px 0 var(--orange);
  margin-bottom: 1rem;
}
.toc-card, .cta-card {
  border: 1px solid var(--line);
  padding: 1.75rem;
}
.toc-card { position: sticky; top: 100px; }

/* Sticky image column used to pair a short image with a long text block
   (solution/about content rows). Only makes sense once the columns sit
   side-by-side at lg+; below that they stack, so sticky must be off or
   the image floats over the text beneath it while scrolling. */
.sticky-media-col { position: static; }
@media (min-width: 992px) {
  .sticky-media-col { position: sticky; top: 100px; }
}
.toc-card ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc-card ol li { counter-increment: toc; margin-bottom: .85rem; }
.toc-card ol li a {
  font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: .02em;
  color: var(--ink); text-decoration: none;
}
.toc-card ol li a::before { content: counter(toc, decimal-leading-zero) "  "; color: var(--orange); }
.toc-card ol li a:hover { color: var(--orange); }
.cta-card { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.author-box { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2rem 0; }
.tag-chip {
  display: inline-block; border: 1px solid var(--line); padding: .4rem .85rem;
  font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; margin: 0 .4rem .4rem 0;
}
.tag-chip:hover { border-color: var(--orange); color: var(--orange); }
.share-icons a {
  width: 36px; height: 36px; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; margin-right: .4rem;
  color: var(--ink);
}
.share-icons a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* responsive helpers */
@media (max-width: 991.98px) {
  .toc-card { position: static; }
}

/* =============== STUDIO PACKAGE CALCULATOR =============== */
.stepper { display: flex; gap: 0; flex-wrap: wrap; border: 1px solid var(--line); margin-bottom: 50px; }
.stepper .step {
  flex: 1; min-width: 150px; padding: 16px 20px; border-right: 1px solid var(--line);
  font-size: 10.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 10px; background: var(--paper);
}
.stepper .step:last-child { border-right: 0; }
.stepper .step .num {
  width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--ink);
  display: grid; place-items: center; font-size: 11px; flex-shrink: 0;
}
.stepper .step.current { background: var(--cream); color: var(--ink); }
.stepper .step.current .num { background: var(--orange); color: #fff; }
.stepper .step.done { color: var(--ink); }
.stepper .step.done .num { background: var(--ink); color: #fff; }

.calc-step { display: none; }
.calc-step.active { display: block; animation: calcFade .35s ease; }
@keyframes calcFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.calc-type-card {
  width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--line); padding: 30px;
  height: 100%; cursor: pointer; transition: .2s;
}
.calc-type-card:hover { background: var(--cream); transform: translateY(-4px); box-shadow: 6px 6px 0 var(--line); }
.calc-type-card .idx { font-size: 10px; color: var(--orange); font-weight: 900; }
.calc-type-card h3 { font-size: 19px; letter-spacing: -.03em; margin: 14px 0 4px; }
.calc-type-card .subtitle { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; }
.calc-type-card p { font-family: var(--font-serif); color: var(--muted-2); font-size: 14px; margin: 14px 0 18px; }
.calc-type-card .pick-link { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 900; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }

.calc-pkg-card { background: var(--paper); border: 1px solid var(--line); padding: 28px; height: 100%; display: flex; flex-direction: column; }
.tier-tag {
  display: inline-block; background: var(--ink); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; padding: 6px 12px; width: fit-content;
}
.calc-pkg-card .tagline { font-family: var(--font-serif); font-size: 15px; color: var(--ink); margin: 16px 0 4px; }
.calc-pkg-card .duration { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; }
.pkg-features { list-style: none; margin: 18px 0; padding: 0; font-family: var(--font-serif); font-size: 14px; color: var(--muted-2); flex: 1; }
.pkg-features li { padding: 9px 0; border-top: 1px solid var(--line); }
.pkg-features li::before { content: "— "; color: var(--orange); font-weight: 700; }
.locked-price {
  font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--muted); background: var(--cream);
  border: 1px dashed var(--line); padding: 10px 12px; text-align: center;
}

#selectedSummary h4 { font-size: 18px; text-transform: none; letter-spacing: -.02em; margin: 10px 0 6px; }
#selectedSummary p { color: var(--muted-2); }

#revealBox { background: var(--cream); border: 1px solid var(--line); padding: 40px; }
#revealBox h2 { font-size: clamp(36px, 4.4vw, 58px); color: var(--ink); letter-spacing: -.04em; }
#revealBox h2 .unit { font-family: var(--font-serif); font-size: 15px; text-transform: none; font-weight: 400; color: var(--muted); }

.sidebar-cta { background: var(--ink); color: #fff; padding: 28px; }
.sidebar-cta .eyebrow, .sidebar-cta .eyebrow .dot { color: var(--orange); }
.sidebar-cta h3 { color: #fff; font-size: 17px; margin: 14px 0 10px; text-transform: none; }
.sidebar-cta p { font-family: var(--font-serif); color: #c9c5ba; font-size: 13.5px; margin-bottom: 18px; }