/* =====================================================================
   RDA homepage — page styles for hubspot.html
   Trimmed from the sandbox styles.css to only what this page uses:
   the WebGL hero, the scroll sections, and their reveals. No sandbox
   chrome (controls/version nav) and no unused design-variant rules.
   ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #000; color: #fff; }

/* hero pins behind the content for the whole scroll; sections scroll up over it */
#hero-pin { position: sticky; top: 0; height: 100vh; z-index: 0; }
#stage { position: relative; height: 100vh; width: 100%; overflow: hidden; background: #000; }

/* the hero has two stacked layers; only the WebGL layer is shown.
   layer-v1 stays hidden but exists so the hero engine has a transform target. */
.layer { position: absolute; inset: 0; display: none; }
.layer-v2 { display: block; }

/* WebGL canvas */
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#gl-fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: rgba(255,255,255,.6); font-size: 13px; }

/* mobile hero (no WebGL): the hero video plays full-bleed as a plain <video> and the
   RDA logo is a frosted-glass cutout — a masked backdrop-filter over the moving video */
.no-gl #gl { display: none; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hero-logo-frost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 82vw; max-width: 430px; aspect-ratio: 720 / 329; pointer-events: none;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
  background: rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.4) brightness(1.35); backdrop-filter: blur(16px) saturate(1.4) brightness(1.35); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero-logo-frost { background: rgba(255,255,255,0.4); }
}

.scroll-hint { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); z-index: 6; animation: bob 2s ease-in-out infinite; transition: opacity .4s; }
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

/* ===================== content sections ===================== */
#content { position: relative; z-index: 1; }
.sec-inner { max-width: 1180px; width: 100%; margin: 0 auto; }
/* scroll-scrubbed sticky sections: pin while the reveal is driven by scroll */
.scrub-sec { position: relative; height: var(--scrub-h); }
.scrub-sec .pin { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: 14vh 7vw; }
.scrub-sec .pin.center { justify-content: center; text-align: center; }

/* staggered reveal */
:root { --rv-dur: 0.9s; --rv-ease: cubic-bezier(.16,1,.3,1); --scrub-h: 230vh; }   /* fast text-in */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

/* per-section stick lengths (how long each pins) — Loren's locked-in 5F (round-2) values:
   every section stays pinned ~a full page AFTER it animates in; the rotating line needs the most dwell */
.sentence-sec.cw-rotate { height: 400vh; }   /* line 2 · value→success→trust rotates */
.sentence-sec:not(.cw-rotate) { height: 280vh; }   /* line 3 · Starting AI is easy… */
.logos-sec, .services-sec { height: 300vh; }   /* partners + expertise */
.schedule-sec { height: 220vh; }

/* large sentence type (shared by hero welcome, paragraph, testimonials) */
.sentence { font-size: clamp(40px, 7vw, 100px); line-height: 1.04; font-weight: 600; letter-spacing: -0.025em; color: #fff; max-width: 20ch; text-wrap: balance; text-align: left;
  text-shadow: 0 0 40px #000000; }
.sentence .word { display: inline-block; }

/* hero welcome — auto-reveals on load, scrolls up out of focus.
   Identical layout/style to the body sentence sections. */
.hero-welcome { position: absolute; inset: 0; display: flex; align-items: center; z-index: 5; pointer-events: none; padding: 14vh 7vw; }

/* testimonials — separate sticky sections */
.testimonial-sec { height: 220vh; }
.testimonial-sec .pin { min-height: 0; height: 100vh; }
.testimonial-sec .quote { font-size: clamp(40px, 7vw, 100px); max-width: 20ch; text-wrap: balance; }   /* 5F: big statement-sentence size */
.attrib { margin-top: 30px; font-size: 15px; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); }

/* logo wall (rectilinear grid spanning the fixed content width) */
.sec-eyebrow { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 36px; }
.logo-wall { position: relative; width: 100%; }
/* 5F: the partner wall gets the same frosted blur panel as Expertise, fading in with the grid */
.logo-wall::before { content: ""; position: absolute; inset: 0; z-index: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity 0.8s ease 0.35s; }
.logo-wall.group-in::before { opacity: 1; }
.logo-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; }
.logo-cell { display: flex; align-items: center; justify-content: center; height: 140px; }
.logo-cell img { height: 54px; width: auto; max-width: 76%; filter: drop-shadow(0 0 40px #000000); }
/* grid lines that draw in (scale) with the logo reveal */
.grid-lines span { position: absolute; background: rgba(255,255,255,0.16); pointer-events: none; }
.grid-lines .hline { left: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left center; transition: transform var(--rv-dur) var(--rv-ease); }
.grid-lines .vline { top: 0; height: 100%; width: 1px; transform: scaleY(0); transform-origin: top center; transition: transform var(--rv-dur) var(--rv-ease); }
.logo-wall.group-in .hline, .service-wall.group-in .hline { transform: scaleX(1); }
.logo-wall.group-in .vline, .service-wall.group-in .vline { transform: scaleY(1); }

/* services (same rectilinear grid language as the logo wall) */
.services-sec { background: transparent; }
.services-head { font-size: clamp(28px, 4vw, 48px); font-weight: 600; letter-spacing: -0.02em; color: #fff; margin-bottom: 8px; }
.services-sub { color: rgba(255,255,255,0.5); margin-bottom: 48px; font-size: 16px; }
/* the dark blurred panel FADES in from nothing (no scroll-up), just after the text reveals */
.service-wall { position: relative; width: 100%; }
/* 5F: Expertise panel = BLUR ONLY (no dark fill), fading in just after the text reveals */
.service-wall::before { content: ""; position: absolute; inset: 0; z-index: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity 0.8s ease 0.35s; }
.service-wall.group-in::before { opacity: 1; }
.service-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.service-cell { min-height: 176px; padding: 26px 28px; display: flex; flex-direction: column; justify-content: space-between; }
.service-cell .num { font-size: 12px; letter-spacing: 0.14em; color: rgba(255,255,255,0.4); font-variant-numeric: tabular-nums; }
.service-cell h3 { font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; color: #fff; letter-spacing: -0.01em; line-height: 1.18; text-shadow: 0 0 40px #000000; }

/* schedule */
.schedule-inner { width: 100%; max-width: 1180px; }
.schedule-head { font-size: clamp(30px, 4.5vw, 56px); font-weight: 600; letter-spacing: -0.025em; color: #fff; margin-bottom: 12px; }
.schedule-sub { color: rgba(255,255,255,0.55); margin-bottom: 40px; font-size: 17px; }
/* Cal.com inline embed — the script injects a <cal-inline> element into this container.
   min-height reserves space so there's no jump before load. */
#my-cal-inline-30min { width: 100%; }
cal-inline.cal-element-embed-dark {
    max-width: 1040px;
    margin: 0 auto;
    backdrop-filter: blur(20px);
}

/* ---- 5F: line-2 word ROTATE, bleeding Expertise icons, testimonial logos, schedule CTA + focus line ---- */
/* line-2 trailing word: lead-in reveals normally, then ONE slot plays value → success → trust ONCE —
   wipe ON (gradient text, L→R), hold, wipe OFF + next wipe ON in one sweep. JS owns the per-frame clip-path. */
.cw-rotate .rot-slot { position: relative; display: inline-block; }
.cw-rotate .rot-ghost { position: absolute; left: 0; bottom: 0; }   /* outgoing word — wipes off in the same spot, no layout shift */
.cw-rotate .rot-word { display: inline-block; white-space: pre;
  padding-bottom: 0.18em;   /* extend the background box below the baseline so descenders (g,y) fill instead of clipping to transparent */
  background-image: linear-gradient(177deg, rgb(255, 210, 63) 20%, rgb(235, 31, 31) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;   /* kill the .sentence 40px black glow — it muddied the gradient word */
  filter: drop-shadow(0 3px 14px rgba(0,0,0,0.55));
  clip-path: inset(-0.7em 100% -0.7em -0.5em); will-change: clip-path; }   /* starts hidden; held outside the glyph so the soft shadow isn't hard-clipped */

/* Expertise icons (Option E) — the RDA line-symbol BIG in the bottom-right bleeding corner, filled with the
   gold→red gradient + a corner fade so it bleeds off the cropped corner; text bound to the left, top-aligned. */
.svc-bleed-cell { position: relative; overflow: hidden; display: block; }
.svc-bleed-cell .num { position: relative; z-index: 1; }
.svc-bleed-cell h3 { position: relative; z-index: 1; max-width: 62%; margin-top: 12px; }
/* a subtle dark radial behind the bottom-right icon so the symbol stays legible over the moving video */
.svc-bleed-cell::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(166% 147% at 102% 106%, rgba(0,0,0,.5), rgba(0,0,0,3) 32%, transparent 73%); }
.svc-fg-rda { position: absolute; display: block; pointer-events: none; z-index: 0;
  right: 28px; bottom: -117px; width: 109px; height: 300px;
  /* single mask layer only — Safari mishandles two-layer mask compositing and painted the
     extra corner-fade gradient layer as a solid square. The bleed fade now lives entirely
     in the background gradient (which already runs to transparent). */
  background: linear-gradient(180deg, #ffd23f 30%, #eb1f1f 51%, #00000000 61%);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat; }

/* inline gradient words — *word* markers in data-sentence (variant B's ##% stats) get the same
   gold→red gradient fill as the rotating word, but always shown (no wipe) */
.sentence .grad-word {
  display: inline-block; padding-bottom: 0.18em;   /* same descender fix as .rot-word */
  background-image: linear-gradient(177deg, rgb(255, 210, 63) 20%, rgb(235, 31, 31) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 3px 14px rgba(0,0,0,0.55)); }

/* section CTA links under the partner + expertise grids — the gold→red gradient underline
   SWEEPS IN (left→right) as the link reveals, then thickens on hover */
.sec-link { display: inline-block; margin-top: 32px; font-size: 15px; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.72); text-decoration: none; padding-bottom: 3px;
  background-image: linear-gradient(90deg, rgb(255, 210, 63), rgb(235, 31, 31));
  background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1px;
  text-shadow: 0 0 22px #000;
  transition: opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease),
              color .25s ease, background-size .6s var(--rv-ease) .3s; }
.sec-link.in { background-size: 100% 1px; }
.sec-link:hover { color: #fff; background-size: 100% 2px; transition-delay: 0s; }

/* variant B: expertise bleed icons render WHITE (same fade-out geometry as the gradient set) */
.variant-b .svc-fg-rda { background: linear-gradient(180deg, #ffffff 42%, rgba(255,255,255,0) 61%); }

/* schedule footer: focus line under the booking block, then email + button */
.sched-focus { margin: 40px auto 0; max-width: 52ch; color: rgba(255,255,255,0.55); font-size: 17px; text-align: center; }
.sched-cta { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.sched-cta .cta-or { color: rgba(255,255,255,0.5); font-size: 15px; }
.sched-cta .cta-btn { display: inline-block; padding: 13px 26px; border-radius: 10px; background: #fff; color: #0b0b0c; font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.sched-cta .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }

/* ===================== tablet ===================== */
@media (max-width: 820px) {
  .sec-inner { min-width: 0; }   /* let the flex item shrink so grids never overflow */
  /* 3-col partner wall + single-col services. The hardcoded 5-col line spans don't fit, so hide them and
     draw the grid as cell borders (matches any column count); fade them in with .group-in like the panel. */
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: repeat(1, 1fr); }
  .logo-wall .grid-lines, .service-wall .grid-lines { display: none; }
  .logo-grid, .service-grid { border-top: 1px solid transparent; border-left: 1px solid transparent; transition: border-color 0.8s ease 0.35s; }
  .logo-wall.group-in .logo-grid, .service-wall.group-in .service-grid { border-top-color: rgba(255,255,255,.16); border-left-color: rgba(255,255,255,.16); }
  .logo-grid .logo-cell, .service-grid .service-cell { border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
}

/* ===================== phones (~360–414px) ===================== */
@media (max-width: 640px) {
  /* pinned sections: tighter padding so content isn't crushed */
  .scrub-sec .pin { padding: 10vh 6vw; }

  /* logo wall: shorter cells */
  .logo-cell { height: 96px; }
  .logo-cell img { height: 34px; max-width: 76%; }

  /* services: smaller cells; keep the bleeding icon clear of the text */
  .service-cell { min-height: 0; padding: 20px 20px; gap: 12px; }
  .svc-bleed-cell h3 { max-width: 66%; }

  /* booking embed: a touch shorter on phones */
/*   #my-cal-inline-30min { min-height: 640px; } */

  /* schedule section: NO pinning on phones — the sticky scrub fought the calendar's own
     scrolling and made the embed nearly unusable. It lays out as a normal section. */
  .schedule-sec { height: auto; }
  .schedule-sec .pin { position: static; min-height: 0; padding: 12vh 6vw 14vh; }
}