/* ---------- Tokens ---------- */
:root {
  --ground: #fbf6f4;
  --surface: #ffffff;
  --ink: #2a1d18;
  --ink-soft: #7a6a63;
  --line: #ead9d3;
  --coral: #ff8b76;
  --coral-deep: #e8654c;
  --coral-tint: #ffe1d9;
  --coral-wash: #fdf0ec;

  --max-width: 1280px;
  --radius: 14px;
  --font: "Funnel Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Funnel Display", "Funnel Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
/* Smooth scrolling is handled by Lenis (script.js) rather than CSS,
   so anchor-link jumps and wheel scrolling share the same easing. */
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.wrap-narrow { max-width: 760px; }

section { padding: 5rem 0; }
#services, #how-it-works, #about, #faq { scroll-margin-top: 5rem; }

/* Section background rhythm — alternates tones already in the palette
   rather than introducing new colors, so sections read as distinct
   without breaking the black/white/coral brand. */
.faq { background: var(--surface); }
.about { background: var(--coral-wash); }

/* Inverted sections: same tokens, redefined so every component inside
   (text, borders, card surfaces) adapts automatically via the cascade. */
.section-dark {
  background: #2a1d18;
  --ink: #fbf6f4;
  --ink-soft: rgba(251, 246, 244, 0.68);
  --line: rgba(251, 246, 244, 0.18);
  --surface: rgba(255, 255, 255, 0.06);
  --coral-tint: rgba(255, 225, 217, 0.14);
  color: var(--ink);
}
.section-dark .tool-mark {
  filter: invert(1);
  opacity: 0.85;
}

/* ---------- Scroll reveal ---------- */
/* Elements only start hidden once script.js confirms the IntersectionObserver
   is armed (it adds .reveal-ready right before observing). If the script
   fails to load or errors out, this class never appears and everything
   just stays visible — no blank-page risk from a CDN hiccup. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger siblings inside grids so they don't all animate at once */
.qual-grid [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
.qual-grid [data-reveal]:nth-child(3) { transition-delay: 0.16s; }
.qual-grid [data-reveal]:nth-child(4) { transition-delay: 0.24s; }
.faq-list [data-reveal]:nth-child(2) { transition-delay: 0.05s; }
.faq-list [data-reveal]:nth-child(3) { transition-delay: 0.1s; }
.faq-list [data-reveal]:nth-child(4) { transition-delay: 0.15s; }
.faq-list [data-reveal]:nth-child(5) { transition-delay: 0.2s; }
.faq-list [data-reveal]:nth-child(6) { transition-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.section-label {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 2.5rem;
}
/* Services heading only — scoped down a size, other section headings unaffected */
.services .section-label {
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn-coral {
  background: var(--coral);
  color: #2a1108;
  padding: 0.7rem 1.5rem;
  font-size: 1.02rem;
}
.btn-coral:hover {
  background: var(--coral-deep);
  color: #fff;
  transform: translateY(-1px);
}
.btn-lg {
  padding: 0.9rem 1.8rem;
  font-size: 1.02rem;
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ---------- Icon pill button (hero CTA) ---------- */
.btn-icon-pill {
  display: inline-flex;
  align-items: center;
  height: 4.5rem;
  background: var(--coral);
  border-radius: 20px;
  padding: 0.55rem 1.9rem 0.55rem 0.55rem;
  gap: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 100%;
  border-radius: 13px;
  background: var(--coral-tint);
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.btn-sparkle {
  width: 1.7rem;
  height: 1.7rem;
  fill: var(--coral-deep);
  transition: fill 0.2s ease;
}
.btn-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2a1108;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.btn-icon-pill:hover {
  background: var(--ink);
}
.btn-icon-pill:hover .btn-label {
  color: var(--ground);
}
@media (prefers-reduced-motion: reduce) {
  .btn-icon-pill, .btn-icon-badge, .btn-sparkle, .btn-label { transition: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 246, 244, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-right: auto;
}
.brand-icon {
  width: 1.3rem;
  height: 1.3rem;
  fill: var(--coral);
  flex-shrink: 0;
}
.site-nav {
  display: flex;
  gap: 1.8rem;
}
.site-nav a {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}
.site-nav a:hover { color: var(--ink); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 6.5rem 0 5rem;
  text-align: left;
  overflow: hidden;
}
.hero .wrap {
  position: relative;
  z-index: 1;
}
.hero-blob {
  position: absolute;
  top: -14%;
  right: -14%;
  width: 42rem;
  height: 42rem;
  max-width: 68vw;
  max-height: 68vw;
  fill: var(--coral-wash);
  filter: blur(22px);
  opacity: 0.75;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 720px) {
  .hero-blob { opacity: 0.5; }
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8vw, 5.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.03;
  text-wrap: balance;
  margin: 0 0 1.6rem;
}
.hero-sub {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 2.4rem;
  line-height: 1.6;
}

/* ---------- Qualifier ---------- */
.qualifier { padding-top: 1rem; }
.qual-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}
.qual-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  min-height: 6.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.qual-card:hover,
.qual-card:focus-visible {
  transform: translateY(-2.5px);
  box-shadow: 0 14px 26px -16px rgba(42, 29, 24, 0.22);
  border-color: var(--coral);
}
.qual-statement {
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.6rem;
  line-height: 1.4;
}
.qual-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--coral-deep);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.qual-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.qual-card:hover .qual-arrow,
.qual-card:focus-visible .qual-arrow {
  transform: translateX(3px);
}
.qual-footer {
  margin-top: 1.4rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.qual-footer a {
  color: var(--coral-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(232, 101, 76, 0.4);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.qual-footer a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

/* ---------- Services ---------- */
.services-list {
  border-top: 1px solid var(--line);
}
.service-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3.5rem;
  padding: 1.7rem 0.5rem;
  border-bottom: 1px solid var(--line);
  border-radius: 10px;
  transition: background 0.3s ease, padding 0.3s ease;
}
.service-row-main {
  display: flex;
  align-items: baseline;
  gap: 1.3rem;
  flex: 0 0 auto;
  min-width: 24rem;
}
.service-num {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}
.service-row-main h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 500;
  color: var(--ink);
  transition: color 0.3s ease;
}
.service-row-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  flex: 1 1 auto;
  max-width: 38rem;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.service-sparkle {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--coral-deep);
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.service-row-detail p {
  font-size: 1.05rem;
  line-height: 1.5;
  color: #55483f;
}
.service-row-detail strong { color: var(--coral-deep); }

.service-row:hover,
.service-row:focus-within {
  background: var(--ground);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.service-row:hover .service-num,
.service-row:focus-within .service-num,
.service-row:hover .service-row-main h3,
.service-row:focus-within .service-row-main h3 {
  color: #2a1d18;
}
.service-row:hover .service-row-detail,
.service-row:focus-within .service-row-detail {
  opacity: 1;
  transform: translateX(0);
}
.service-row:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .service-row, .service-row-detail, .service-num, .service-row-main h3 { transition: none; }
}

@media (max-width: 760px) {
  /* Touch devices don't hover — show the revealed (light-card) state
     permanently instead of leaving description text stranded against
     the dark background with hover-only colors. */
  .service-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    background: var(--ground);
    padding: 1.4rem 1rem;
  }
  .service-row-main { min-width: 0; }
  .service-num,
  .service-row-main h3 {
    color: #2a1d18;
  }
  .service-row-detail {
    opacity: 1;
    transform: none;
    max-width: 100%;
  }
}

/* ---------- Toolkit marquee ---------- */
.toolkit { padding: 4rem 0; }
.toolkit-label {
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1.6rem;
}
.marquee-frame {
  position: relative;
  padding: 1.6rem 0;
  overflow: hidden;
  /* Fade zone matches the .wrap edge exactly (viewport margin outside the
     1280px content column, plus its own 1.5rem padding), so logos fade to
     nothing right where the heading's left margin is, instead of a flat
     percentage that ignores the content column's actual position. A long
     gradual ramp still lets a sliver show near the true viewport edge, so
     the ramp itself is compressed into a short 2.5rem zone right at the
     aligned edge — fully invisible before that, not just faint. */
  --marquee-edge: max(1.5rem, calc((100vw - var(--max-width)) / 2 + 1.5rem));
  --marquee-edge-in: max(0rem, calc(var(--marquee-edge) - 2.5rem));
  -webkit-mask-image: linear-gradient(to right, transparent, transparent var(--marquee-edge-in), black var(--marquee-edge), black calc(100% - var(--marquee-edge)), transparent calc(100% - var(--marquee-edge-in)), transparent);
  mask-image: linear-gradient(to right, transparent, transparent var(--marquee-edge-in), black var(--marquee-edge), black calc(100% - var(--marquee-edge)), transparent calc(100% - var(--marquee-edge-in)), transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 3.6rem;
  animation: scroll-left 32s linear infinite;
}
@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.tool {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}
.tool-mark {
  width: 2.85rem;
  height: 2.85rem;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.82;
}
.tool-name {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: 100%; }
}

/* ---------- How it works ---------- */
.how { padding: 8rem 0; }
.how .section-label { margin-bottom: 0.6rem; }
.how-sub {
  font-size: 1.08rem;
  color: var(--ink-soft);
  margin: 0 0 3rem;
}
.how-stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
/* Sits behind the dots at their vertical center; the dots' solid fill
   occludes it where they sit, so it reads as one connected line without
   needing to calculate exact per-segment widths. */
.how-track-line {
  position: absolute;
  top: 2.05rem;
  left: 6%;
  right: 6%;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.how-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 14px;
  padding: 1.1rem;
  margin: -1.1rem;
  background: transparent;
  transform: scale(1) translateY(0);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.how-step:hover,
.how-step:focus-visible {
  z-index: 2;
  background: var(--coral-tint);
  transform: scale(1.06) translateY(-4px);
  box-shadow: 0 20px 34px -16px rgba(42, 29, 24, 0.22);
}
.how-step-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.how-step-index {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}
.how-dot {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ground);
  border: 2px solid var(--ink-soft);
  box-sizing: border-box;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.how-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.6rem;
  transition: color 0.25s ease, font-size 0.3s ease;
}
.how-desc {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 24ch;
  transition: font-size 0.3s ease;
}

.how-step:hover .how-dot,
.how-step:focus-visible .how-dot {
  background: var(--coral);
  border-color: var(--coral);
  transform: scale(1.6);
}
.how-step:hover .how-step-index,
.how-step:focus-visible .how-step-index,
.how-step:hover .how-name,
.how-step:focus-visible .how-name {
  color: var(--coral-deep);
}
.how-step:hover .how-name,
.how-step:focus-visible .how-name {
  font-size: 1.42rem;
}
.how-step:hover .how-desc,
.how-step:focus-visible .how-desc {
  font-size: 1rem;
}
.how-step:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .how-step { transition: none; }
  .how-step:hover, .how-step:focus-visible { transform: none; }
  .how-dot, .how-step-index, .how-name, .how-desc { transition: none; }
}

@media (max-width: 760px) {
  .how-stepper { grid-template-columns: 1fr; gap: 2.5rem; }
  .how-track-line { display: none; }
  .how-desc { max-width: 100%; }
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
  align-items: center;
  margin-bottom: 3rem;
}
.about-photo {
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--coral-tint);
  border: 1px solid var(--line);
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.about-copy p {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 1.3rem;
  max-width: 54ch;
}
.about-copy p:last-child { margin-bottom: 0; }
.about-tagline {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--coral-deep);
}
.about-closing {
  font-weight: 650;
  color: var(--ink);
}


/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--coral-deep);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin-top: 0.9rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- Final CTA ---------- */
.final-cta {
  text-align: center;
  padding: 5.5rem 0;
}
.final-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
}
.final-sub {
  font-size: 1.08rem;
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

/* ---------- Footer ---------- */
/* Deliberately light (not .section-dark) — sits right after the dark
   Final CTA block, so the contrast itself marks the page's end. */
.site-footer {
  background: var(--ground);
  padding: 4.5rem 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
}
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.footer-grid > .footer-col:last-child {
  align-items: flex-end;
  text-align: right;
}
.footer-brand {
  font-size: 1.3rem;
}
.footer-tagline {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 0.3rem 0 0.4rem;
}
.footer-link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--coral-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(232, 101, 76, 0.4);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.footer-link-muted {
  color: var(--ink);
  text-decoration-color: var(--line);
}
.footer-link:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}
.footer-line {
  font-size: 1rem;
  color: var(--ink-soft);
}
.footer-line strong { color: var(--ink); font-weight: 650; }
.footer-acknowledgement {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 36ch;
  margin-top: 0.6rem;
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 1.4rem 1.5rem;
}
.footer-bottom p {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid > .footer-col:last-child { align-items: flex-start; text-align: left; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .how-grid { grid-template-columns: repeat(2, 1fr); }
  .qual-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-photo { aspect-ratio: 16 / 10; max-width: 360px; }
}

@media (max-width: 720px) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ground);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    padding: 1rem 1.5rem 1.5rem;
    gap: 1rem;
    display: none;
  }
  .site-nav.open { display: flex; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .how-grid { grid-template-columns: 1fr; }
  .footer-contact { align-items: flex-start; text-align: left; }
}