/* ============================================================
   Elev8d — Homepage + About page components
   (loaded after styles.css)
   ============================================================ */

/* ---------- Hero service ticker ---------- */
.ticker {
  margin-top: 34px; border-block: 1px solid var(--line-dark);
  overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: ticker 26s linear infinite; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 28px; padding: 16px 28px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: #cfcfcf; white-space: nowrap;
}
.ticker__item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* Hero proof chip */
.hero__proof {
  display: inline-flex; align-items: center; gap: 16px; margin-top: 34px;
  background: rgba(244,160,0,.08); border: 1px solid rgba(244,160,0,.28); border-radius: 14px; padding: 16px 22px;
}
.hero__proof-num { font-family: var(--font-head); font-weight: 700; font-size: 2rem; color: var(--accent); line-height: 1; letter-spacing: -.03em; }
.hero__proof-lbl { color: var(--grey-mid-2); font-size: .95rem; line-height: 1.35; max-width: 24ch; }

/* Hero proof — honest note variant (no big number) */
.hero__proof--note { display: block; }
.hero__proof--note .hero__proof-lbl { max-width: none; color: var(--grey-mid-2); }
.hero__proof--note strong { color: var(--accent); font-weight: 600; }

/* Hero trust strip — full-width row with dot dividers */
.hero__trustbar {
  list-style: none; margin: 36px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px;
}
.hero__trustbar li {
  position: relative; display: inline-flex; align-items: center;
  font-family: var(--font-head); font-weight: 500; font-size: .92rem; color: #c4c4c4; letter-spacing: -.01em; white-space: nowrap;
}
.hero__trustbar li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  opacity: .55; margin-right: 22px; flex: 0 0 auto;
}
.hero__trustbar li:first-child::before { display: none; }
@media (max-width: 760px) {
  .hero__trustbar { flex-direction: column; align-items: flex-start; gap: 9px; }
  .hero__trustbar li { font-size: .9rem; }
  .hero__trustbar li::before { display: none; }
}

/* Trust section honest intro */
.trust__intro { margin-bottom: clamp(34px, 4vw, 52px); }
.trust__intro .eyebrow { margin-bottom: 14px; }
.trust__intro p { color: #d2d2d2; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.1rem, 1.8vw, 1.4rem); letter-spacing: -.01em; max-width: 40ch; }

/* ---------- Who We Are: dark warm-glow section + analemma ---------- */
.who-sec { position: relative; background: #0D0D0D; color: #fff; overflow: hidden; }
.who-sec__glow { position: absolute; left: -12%; bottom: -25%; width: 78%; height: 125%; z-index: 0; pointer-events: none; background: radial-gradient(circle at 38% 58%, rgba(213,136,1,.16), rgba(244,160,0,.05) 42%, transparent 67%); }
.who-sec .wrap { position: relative; z-index: 1; }
.who-sec h2 { color: #fff; }
.who-sec__body { color: #9b9b9b; font-size: 1.12rem; line-height: 1.7; margin-top: 24px; max-width: 44ch; }
.analemma-stage { position: relative; display: grid; place-items: center; min-height: 340px; }
.analemma { width: 100%; height: auto; max-height: 380px; display: block; overflow: visible; }
.analemma__label { position: absolute; top: 6px; left: 4px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: #6a6a6a; line-height: 1.7; }
.analemma__logo { position: absolute; bottom: 4px; right: 8px; height: 19px; width: auto; opacity: .92; }
.ana-dot { fill: #F6C34C; opacity: .92; }
.ana-sun-core { fill: #FFCE4B; }
.ana-year { fill: #BD8E2F; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; }
.ana-year-dot { fill: #F6C34C; }

/* About — Our Story: contained two-column grid, dark warm-glow */
.story-sec { position: relative; overflow: hidden; }
.story-sec::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 78% 88% at 70% 50%, rgba(244,160,0,.16), rgba(213,136,1,.06) 44%, rgba(244,160,0,.02) 64%, transparent 76%); }
.story-sec .wrap { position: relative; z-index: 1; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.story-row { position: relative; z-index: 2; }
.story-row h2 { color: #fff; margin-top: 4px; }
.story-body { color: #9b9b9b; font-size: 1.06rem; line-height: 1.72; margin-top: 20px; }
.story-row .txtlink { margin-top: 28px; }
.story-ana { position: relative; display: grid; place-items: center; padding: clamp(10px, 1.4vw, 20px); min-height: 340px; }
.story-ana__glow { position: absolute; inset: 12% 4%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 54% 46% at 50% 50%, rgba(244,160,0,.26), rgba(244,160,0,.06) 52%, transparent 70%); }
.story-ana .analemma { position: relative; z-index: 1; width: 96%; height: auto; max-height: 440px; overflow: visible; display: block; }
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 28px; }
  .story-ana { min-height: 0; padding: 8px 0; }
  .story-ana .analemma { width: 90%; max-width: 600px; max-height: 420px; margin: 0 auto; }
  .story-ana__glow { inset: 4% 0; }
}
@media (max-width: 860px) {
  .analemma-stage { min-height: 300px; margin-top: 8px; }
  /* Single-column stack: recenter the warm glow so it sits symmetrically behind
     the content instead of hugging the left edge (which read as orange-left / blank-right). */
  .who-sec__glow { left: 50%; bottom: -10%; width: 120%; height: 90%; transform: translateX(-50%); background: radial-gradient(circle at 50% 50%, rgba(213,136,1,.14), rgba(244,160,0,.04) 46%, transparent 70%); }
}
@media (max-width: 520px) { .analemma__label { font-size: .54rem; } }

/* ---------- About two-column row ---------- */
.about-row { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(34px, 5vw, 72px); align-items: center; }
.about-row__visual { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--line-light); background: var(--grey-light); }
.about-row__visual image-slot { width: 100%; height: 100%; display: block; }
.about-row__fig { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(150deg, #111, #000); }
.about-row__fig svg { width: 56%; opacity: .5; }
.about-row__fig path { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.about-row p + p { margin-top: 16px; }
.about-row .btn, .about-row .txtlink { margin-top: 28px; }
@media (max-width: 860px) { .about-row { grid-template-columns: 1fr; } .about-row__visual { order: -1; } }

/* ---------- Numbered service cards (homepage) ---------- */
.snum-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.snum {
  position: relative; display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line-light); border-radius: var(--radius); padding: clamp(30px, 3.4vw, 46px);
  overflow: hidden; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.snum:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 28px 60px -30px rgba(0,0,0,.28); }
.snum__n { position: absolute; top: 24px; right: 30px; font-family: var(--font-head); font-weight: 700; font-size: 3.6rem; color: var(--grey-light-2); line-height: 1; letter-spacing: -.04em; transition: color .3s; }
.snum:hover .snum__n { color: var(--accent); opacity: .35; }
.snum__icon { width: 56px; height: 56px; border-radius: 13px; background: #FFF7E8; border: 1px solid #FBE3B3; display: grid; place-items: center; margin-bottom: 24px; transition: background .3s; }
.snum:hover .snum__icon { background: var(--accent); }
.snum__icon svg { width: 27px; height: 27px; stroke: var(--accent-dark); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.snum:hover .snum__icon svg { stroke: #000; }
.snum h3 { color: var(--black); font-size: 1.5rem; margin-bottom: 12px; max-width: 16ch; }
.snum p { color: #555; font-size: 1rem; margin-bottom: 26px; max-width: 46ch; }
.snum .txtlink { margin-top: auto; }
@media (max-width: 760px) { .snum-grid { grid-template-columns: 1fr; } }

/* ---------- Cube section ---------- */
.cube-sec { background: var(--black); overflow: hidden; }
.cube-row { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(34px, 5vw, 70px); align-items: center; }
.cube-pts { display: flex; flex-direction: column; gap: 16px; margin: 30px 0 40px; }
.cube-pt { display: flex; align-items: flex-start; gap: 14px; }
.cube-pt svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; stroke: var(--accent); fill: none; stroke-width: 2.4; }
.cube-pt span { color: #e8e8e8; font-family: var(--font-head); font-weight: 500; font-size: 1.12rem; }
.cube-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 18px; padding-top: 32px; border-top: 1px solid var(--line-dark); }
.cube-stat__num { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--accent); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cube-stat__lbl { margin-top: 8px; color: var(--grey-mid-2); font-size: .85rem; line-height: 1.35; }

.cube-stage { position: relative; display: grid; place-items: center; min-height: 600px; }
.cube-glow { position: absolute; width: 90%; height: 90%; background: radial-gradient(circle at 50% 45%, rgba(244,160,0,.22), transparent 62%); pointer-events: none; }
.cube-video {
  position: relative; z-index: 1; width: 100%; max-width: 716px; height: auto; display: block;
  opacity: 0; transition: opacity .6s var(--ease);
  mix-blend-mode: screen;
  -webkit-box-reflect: below 2px linear-gradient(transparent, transparent 62%, rgba(255,255,255,.16));
}
.cube-stage.cube-ready .cube-video { opacity: 1; }
.cube-stage.cube-ready .cube-fallback { opacity: 0; }

/* Keep stat numbers on one line; tune the 5-up so "7+ yrs" doesn't wrap */
.trust__num { white-space: nowrap; }
.trust__grid--5 .trust__num { font-size: clamp(2rem, 3.5vw, 2.85rem); }
.cube-fallback { position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 600px; aspect-ratio: 716/600; display: grid; place-items: center; pointer-events: none; }
.cube-fallback img { width: 66%; opacity: .9; filter: drop-shadow(0 22px 48px rgba(244,160,0,.3)); }
@media (max-width: 900px) {
  .cube-row { grid-template-columns: 1fr; }
  .cube-stage { min-height: 0; order: -1; }
  .cube-video { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 460px) { .cube-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Compact services overview (About) ---------- */
.svc-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.svc-mini {
  display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-light); background: var(--white); transition: border-color .3s, transform .3s var(--ease);
}
.svc-mini:hover { border-color: var(--accent); transform: translateY(-3px); }
.svc-mini svg { width: 26px; height: 26px; stroke: var(--accent-dark); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc-mini h3 { color: var(--black); font-size: 1.12rem; }
.svc-mini p { color: #666; font-size: .92rem; flex: 1; }
.svc-mini .txtlink { font-size: .85rem; color: var(--accent-dark); }
@media (max-width: 880px) { .svc-mini-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .svc-mini-grid { grid-template-columns: 1fr; } }

/* ---------- Values grid (About) ---------- */
.val-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vcard {
  background: var(--off-black); border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: clamp(26px, 2.6vw, 34px); transition: border-color .3s, transform .3s var(--ease);
}
.vcard:hover { border-color: var(--accent); transform: translateY(-3px); }
.vcard__icon { width: 48px; height: 48px; border-radius: 11px; background: rgba(244,160,0,.12); border: 1px solid rgba(244,160,0,.3); display: grid; place-items: center; margin-bottom: 20px; }
.vcard__icon svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vcard h3 { color: #fff; font-size: 1.2rem; margin-bottom: 10px; }
.vcard p { color: var(--grey-mid-2); font-size: .96rem; }
@media (max-width: 860px) { .val-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .val-grid { grid-template-columns: 1fr; } }

/* ---------- Portfolio link row reuse helper ---------- */
.section-foot { margin-top: 44px; display: flex; justify-content: center; }

/* ---------- Light testimonial variant (homepage) ---------- */
.tcard--light { background: var(--white); border-color: var(--line-light); }
.tcard--light:hover { border-color: var(--accent); }
.tcard--light p { color: #1d1d1d; }
.tcard--light .tcard__name { color: var(--black); }
.tcard--light .tcard__biz { color: #777; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.contact-aside { display: flex; flex-direction: column; gap: 14px; }
.contact-aside .contact-row { border-color: var(--line-light); }
.contact-aside .contact-row:first-of-type { border-top: 1px solid var(--line-light); }
.contact-aside .lbl { color: var(--grey-mid); }
.contact-aside .val { color: var(--black); }
.contact-aside a.val:hover { color: var(--accent-dark); }
.contact-aside .contact-row svg { stroke: var(--accent-dark); }
.map-embed { margin-top: 8px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-light); aspect-ratio: 4/3; background: var(--grey-light); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.3) contrast(1.05); }
/* form on light bg */
.form--light { background: var(--white); border: 1px solid var(--line-light); }
.form--light .field label { color: #555; }
.form--light .field input, .form--light .field textarea, .form--light .field select { background: #fff; border-color: #dcdcdc; color: #1a1a1a; }
.form--light .field input::placeholder, .form--light .field textarea::placeholder { color: #aaa; }
.form--light .field input:focus, .form--light .field textarea:focus, .form--light .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244,160,0,.16); }
.form--light .form__ok h3 { color: var(--black); }
.form--light .form__ok p { color: #555; }
.field select {
  width: 100%; appearance: none; -webkit-appearance: none; background: #fff; border: 1px solid #dcdcdc; border-radius: var(--radius-sm);
  padding: 14px 40px 14px 16px; color: #1a1a1a; font-family: var(--font-body); font-size: 1rem; cursor: pointer; transition: border-color .2s, box-shadow .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field select:focus { outline: none; }
.field select:invalid { color: #aaa; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } .contact-aside { margin-top: 8px; } }

/* Trust signals strip (text + icon) */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tsig { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); background: var(--off-black); }
.tsig svg { flex: 0 0 auto; width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tsig span { font-family: var(--font-head); font-weight: 600; color: #fff; font-size: .98rem; }
@media (max-width: 760px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .trust-strip { grid-template-columns: 1fr; } }

/* 3-step process (Contact "what happens next") */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; }
.step3 { padding: clamp(26px, 3vw, 34px); border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--white); transition: border-color .3s, transform .3s var(--ease); }
.step3:hover { border-color: var(--accent); transform: translateY(-3px); }
.step3__n { width: 52px; height: 52px; border-radius: 50%; background: #FFF7E8; border: 1px solid #FBE3B3; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--accent-dark); margin-bottom: 20px; }
.step3 h3 { color: var(--black); font-size: 1.2rem; margin-bottom: 10px; }
.step3 p { color: #555; font-size: .97rem; }
@media (max-width: 760px) { .steps3 { grid-template-columns: 1fr; } }

/* ============================================================
   CASE STUDY CARDS (overview + related)
   ============================================================ */
.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cs-card {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-light);
  border-radius: var(--radius); padding: clamp(30px, 3.2vw, 44px); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.cs-card.hide { display: none; }
.cs-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 28px 60px -32px rgba(0,0,0,.26); }
.cs-card__tags { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.cs-card__big { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.8rem, 5vw, 4rem); color: var(--accent-dark); line-height: .95; letter-spacing: -.03em; }
.cs-card__metric { color: #444; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; margin-top: 8px; margin-bottom: 18px; }
.cs-card h3 { color: var(--black); font-size: 1.3rem; line-height: 1.2; margin-bottom: 10px; }
.cs-card p { color: #555; font-size: .98rem; margin-bottom: 24px; }
.cs-card .txtlink { margin-top: auto; color: var(--accent-dark); }
.cs-tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 100px; }
.cs-tag--svc { background: var(--accent); color: #000; }
.cs-tag--ind { background: #F1F1F1; color: #666; }
@media (max-width: 720px) { .cs-grid { grid-template-columns: 1fr; } }

/* Case study detail — massive metric hero */
.cs-hero__metric { font-family: var(--font-head); font-weight: 700; font-size: clamp(3.6rem, 11vw, 7rem); color: var(--accent); line-height: .9; letter-spacing: -.04em; margin-bottom: 18px; }
.cs-hero__tags { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.cs-hero h1 { font-size: clamp(1.9rem, 3.8vw, 3rem); max-width: 22ch; }
.cs-hero__hook { color: var(--grey-mid-2); font-size: 1.15rem; margin-top: 20px; max-width: 56ch; }

/* takeaway callouts (light body) */
.takeaways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 28px 0; }
.takeaway { display: flex; gap: 14px; padding: 22px; background: #FFF8EA; border: 1px solid #FBE3B3; border-radius: var(--radius-sm); }
.takeaway svg { flex: 0 0 auto; width: 22px; height: 22px; stroke: var(--accent-dark); fill: none; stroke-width: 2.4; margin-top: 2px; }
.takeaway p { margin: 0; font-size: .98rem; color: #444; line-height: 1.55; }
@media (max-width: 640px) { .takeaways { grid-template-columns: 1fr; } }