/* ==========================================================================
   AOM — R&D Product Development page styles
   ========================================================================== */

/* ---------- Cinematic hero: the 3D bottle, the process steps, the services ---------- */
/* The section is tall (one viewport per text segment plus a tail); the stage
   inside is sticky, so the video and copy stay put while the scroll position
   drives playback and which step is showing. */
/* overflow:visible is load-bearing: the shared `.main-wrapper > section`
   rule sets overflow:hidden for rounded corners, and an overflow other than
   visible on the sticky element's parent turns that parent into its scroll
   container — the stage would then scroll away with the section instead of
   pinning to the viewport. The stage clips the video itself. */
.main-wrapper > .cine{margin:0;border-radius:0;overflow:visible;--section-inset:0px}
.cine{
  --cine-segments:9;
  position:relative;
  height:calc(var(--cine-segments) * 100vh);
  /* no background of its own: the page canvas shows through, and so does
     the fixed glow (z-index:-1) that runs behind the bottle and the fronts */
  color:var(--ink);
}
.cine-stage{position:sticky;top:0;height:100vh;overflow:hidden}
/* The 3D bottle renders on a transparent WebGL canvas the size of the stage
   (framing — half the stage height, raised on phones — is done by the camera
   in js/product-development-3d.js). It fades in once the model has loaded. */
.cine-canvas{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  opacity:0;
  transition:opacity .6s var(--ease);
  touch-action:pan-y; /* horizontal drags spin the bottle, vertical ones still scroll */
}
.cine-canvas.is-ready{opacity:1}

/* Three columns: copy left, the bottle's lane in the middle, copy right.
   Odd steps (and the title) sit left, even steps right; all share row 1 so
   only the active one is visible. Copy always travels upward: it rises in
   from below on entry and keeps rising as it fades out on exit. */
.cine-steps{
  position:absolute;inset:0;
  pointer-events:none; /* the copy layer covers the stage: let the pointer reach the canvas (the active step re-enables itself) */
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,24vw) minmax(0,1fr);
  align-items:center;
  padding:0 var(--gutter);
}
.cine-step{
  grid-row:1;
  max-width:38ch;
  opacity:0;
  transform:translateY(48px);
  transition:opacity .55s var(--ease),transform .75s var(--ease);
  pointer-events:none;
}
.cine-step--left{grid-column:1;justify-self:end;text-align:right}
.cine-step--right{grid-column:3;justify-self:start;text-align:left}
.cine-step--left > *{margin-left:auto;margin-right:0}
.cine-step--right > *{margin-left:0;margin-right:auto}
.cine-step.is-active{opacity:1;transform:none;pointer-events:auto}
.cine-step.is-past{transform:translateY(-48px)}
/* The title sits centered ABOVE the bottle (which stays centered on the
   stage), so it's sized to one line — the band between the header and the
   bottle's cap is ~200px at 1440x900 — and it exits upward on scroll. */
.cine-step--intro{
  grid-column:1 / -1;
  justify-self:center;
  align-self:start;
  margin-top:calc(var(--header-h) + 2.6rem);
  max-width:none;
  text-align:center;
}
.cine-step--intro > *{margin-left:auto;margin-right:auto}
/* Same type scale as the category-page heroes (.providers-hero-title /
   -sub, .patients-hero-*): only the max-width differs — none here; the
   title is set on two lines by hand ("We put the Art" / "in your medicine."). */
.cine-title{
  font-size:clamp(2.5rem,5vw,4.2rem);
  letter-spacing:-.03em;
}
.cine-title-line{display:block}
.cine-lead{margin-top:1.4rem;font-size:1.08rem;color:var(--grey-700);max-width:48ch}
.cine-step-num{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.16em;
  color:var(--purple);
}
/* Section-title scale (.specialties-title) and
   the body size those sections use. */
.cine-step-title{
  font-size:clamp(1.8rem,3.2vw,2.6rem);
  margin-top:.9rem;
}
.cine-step-text{margin-top:.9rem;font-size:.94rem;color:var(--grey-700);max-width:44ch}

/* Closing state (after step 07). It spans the whole stage and repeats the
   parent's three columns so the two lists sit in the side lanes, vertically
   centred on the bottle, while the heading takes the intro's slot above it. */
.cine-step--outro{
  position:relative;
  grid-column:1 / -1;
  align-self:stretch;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,24vw) minmax(0,1fr);
  align-items:center;
  max-width:none;
}
/* The closing block spans the whole stage, so it must not swallow the
   pointer: only its heading and chips are hit-targets, the rest falls
   through to the canvas so the bottle can be dragged and its lid clicked. */
.cine-step--outro.is-active{pointer-events:none}
.cine-step--outro.is-active .cine-outro-head,
.cine-step--outro.is-active .cine-outro-list{pointer-events:auto}
.cine-outro-head{
  position:absolute;
  top:calc(var(--header-h) + 2.6rem);
  left:0;right:0;
  text-align:center;
}
.cine-outro-head > *{margin-left:auto;margin-right:auto}
.cine-outro-title{
  font-size:clamp(2.5rem,5vw,4.2rem);
  letter-spacing:-.03em;
}
.cine-outro-list{
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-direction:column;gap:.7rem;
  max-width:26ch;
}
/* Each service is a small outlined chip (ink stroke, no fill; mono,
   uppercase, brand-book Regular). Chips rise in one after another once the
   closing state is active: their own fade + rise, staggered 80ms apart,
   left column first, then right. */
.cine-outro-list li{
  padding:.8rem 1.1rem;
  background:transparent;
  border:1.5px solid var(--ink);
  border-radius:10px;
  font-family:var(--font-mono);
  font-size:.76rem;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.35;
  color:var(--ink);
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .65s var(--ease);
}
.cine-step--outro.is-active .cine-outro-list li{opacity:1;transform:none}
.cine-outro-list--left li:nth-child(1){transition-delay:.08s}
.cine-outro-list--left li:nth-child(2){transition-delay:.16s}
.cine-outro-list--left li:nth-child(3){transition-delay:.24s}
.cine-outro-list--right li:nth-child(1){transition-delay:.32s}
.cine-outro-list--right li:nth-child(2){transition-delay:.4s}
.cine-outro-list--right li:nth-child(3){transition-delay:.48s}
/* Leaving (scrolling back up) is immediate for the cards: only the block fades. */
.cine-step--outro:not(.is-active) .cine-outro-list li{transition-delay:0s}
.cine-outro-list--left{grid-column:1;justify-self:end;align-items:flex-end;text-align:right}
.cine-outro-list--right{grid-column:3;justify-self:start;align-items:flex-start;text-align:left}


.cine-hint{
  position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-700);
  transition:opacity .4s var(--ease);
}
.cine-hint::after{
  content:"";display:block;width:1px;height:28px;margin:.6rem auto 0;
  background:linear-gradient(to bottom,rgba(5,6,8,.55),transparent);
}
.cine.is-scrolled .cine-hint{opacity:0}

/* Thin progress line along the bottom, driven by --cine-progress (0–1). */
.cine-progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(5,6,8,.12);
  /* gone once the run completes, so no purple rule lingers at the seam */
  opacity:min(1,calc((1 - var(--cine-progress,0)) * 25));
}
.cine-progress::after{
  content:"";position:absolute;inset:0;
  background:var(--purple);
  transform-origin:left;
  transform:scaleX(var(--cine-progress,0));
}

@media (max-width:700px){
  /* Phones: no room beside the bottle — the bottle moves up into the top
     half (camera offset in js/product-development-3d.js) and the copy stacks centered
     below it. */
  /* 14vh, not 6: before the stage sticks it sits 109px lower (utility bar +
     header), so the copy has to clear the fold from that position too. */
  .cine-steps{grid-template-columns:1fr;align-items:end;padding-bottom:14vh;text-align:center}
  .cine-step--left,.cine-step--right{grid-column:1;justify-self:center;text-align:center}
  .cine-step--left > *,.cine-step--right > *{margin-left:auto;margin-right:auto}
  .cine-step--intro{align-self:end;margin-top:0}
  /* Outro on phones: everything stacks centred under the (raised) bottle —
     heading first, then the two lists as one column. */
  .cine-step--outro{grid-template-columns:1fr;align-items:end;align-content:end;gap:.7rem}
  .cine-outro-head{position:static;grid-column:1;margin-bottom:.4rem}
  .cine-outro-title{font-size:1.8rem}
  .cine-step--outro .cine-lead{margin-top:.5rem;font-size:.95rem}
  .cine-outro-list--left,.cine-outro-list--right{grid-column:1;justify-self:center;align-items:center;text-align:center;max-width:none;gap:.45rem}
  .cine-outro-list li{padding:.55rem .9rem;font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){
  .cine-step,.cine-hint,.cine-outro-list li{transition:none}
}

/* ---------- Three fronts ----------
   Continues the bottle's story on the same grey canvas — no box, so the
   two sections read as one run. The section is a few viewports tall and
   its stage pins while you scroll through (overflow:visible on the
   framed section so sticky works). The glow that bloomed behind the
   bottle continues here; the three fronts take turns at the centre, each
   rising in as the previous leaves upward, the glow drifting sideways
   with each. Keyed to scroll position (--fronts-shift, per-front transform
   and opacity from JS). */
.main-wrapper > .pd-fronts{overflow:visible;border-radius:0;margin:0;--section-inset:0px}
.pd-fronts{
  position:relative;
  height:calc(var(--fronts-count,2.4) * 100vh);
}
.pd-fronts-stage{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
}
/* The shared glow: fixed to the viewport, painted under the page (z-index
   -1 against the root context; the cine and fronts have no backgrounds of
   their own, so it shows through both). The outer element drifts sideways
   with a transition; the orb inside scales and fades with the scroll,
   instantly, so the bloom tracks the finger. */
.pd-glow{
  position:fixed;
  left:50%;
  top:50%;
  z-index:-1;
  width:min(72vw,920px);
  aspect-ratio:1;
  transform:translate(calc(-50% + var(--glow-shift,0%)),-50%);
  transition:transform .9s var(--ease);
  pointer-events:none;
}
.pd-glow-orb{
  width:100%;
  height:100%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(91,7,231,.42) 0%,rgba(91,7,231,.16) 36%,transparent 66%);
  filter:blur(44px);
  transform:scale(var(--glow-scale,0));
  opacity:var(--glow-opacity,0);
  will-change:transform,opacity;
}
.pd-fronts-list{position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--gutter)}
.pd-front{
  grid-area:1/1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:min(92vw,900px);
  opacity:0;
  pointer-events:none;
  /* position and opacity are written per scroll frame by JS (a continuous
     scrub, not a state flip); the short transition only smooths the steps
     of a mouse wheel */
  transition:transform .28s cubic-bezier(.25,.1,.25,1),opacity .28s cubic-bezier(.25,.1,.25,1);
  will-change:transform,opacity;
}
.pd-front.is-active{pointer-events:auto}
.pd-front-word{
  font-size:clamp(2rem,4.8vw,4.2rem);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1;
  color:var(--ink);
  text-wrap:balance;
}
.pd-front-text{
  margin-top:1.2rem;
  font-size:clamp(1rem,1.3vw,1.2rem);
  line-height:1.45;
  color:var(--grey-700);
  max-width:38ch;
  text-wrap:balance;
}
@media (max-width:640px){
  .pd-front-word{font-size:clamp(1.8rem,8.5vw,2.6rem)}
  .pd-glow{width:130vw}
}
@media (prefers-reduced-motion:reduce){
  .pd-glow{transition:none}
  .pd-front{transition:none}
}

/* ---------- Why partner ----------
   Copy pinned at the left; at the right three statements set large.
   The statement the reader has reached turns from grey to ink as the
   page scrolls, so the section is read rather than looked at. Rows enter with their hairline drawing
   in and the text rising, staggered. */
.pd-why{padding:7rem 0}
.main-wrapper > .pd-why{overflow:visible} /* the framed-section clip would turn the sticky copy into a fixed offset */
.pd-why-inner{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:5rem;
  align-items:start;
}
.pd-why-copy{position:sticky;top:calc(var(--header-h) + 2rem)}
.pd-why-title{font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:-.03em;margin-top:.8rem;max-width:15ch}
.pd-why-lead{margin-top:1.2rem;font-size:1.02rem;color:var(--grey-700);max-width:36ch}
.pd-why-cta{margin-top:2rem}
.pd-why-list{
  position:relative;
  list-style:none;
  margin:0;
  padding:0;
}
.pd-why-row{
  position:relative;
  display:flex;
  gap:1.6rem;
  padding:2.2rem 0 2.4rem;
  color:var(--grey-400);
  transition:color .5s var(--ease);
}
.pd-why-row::before{ /* hairline that draws in on reveal */
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:var(--grey-300);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .8s var(--ease);
}
.pd-why-row:last-child::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--grey-300);
}
.pd-why-row.in::before{transform:scaleX(1);transition-delay:calc(var(--i) * .12s)}
.pd-why-index{
  flex:none;
  width:2.4rem;
  padding-top:.55rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--grey-400);
  transition:color .5s var(--ease);
}
.pd-why-body{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.pd-why-row.in .pd-why-body{opacity:1;transform:none;transition-delay:calc(var(--i) * .12s + .1s)}
.pd-why-row-title{
  font-size:clamp(1.6rem,2.9vw,2.5rem);
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1.1;
  color:inherit;
}
.pd-why-accent{transition:color .5s var(--ease)}
.pd-why-row-text{margin-top:.9rem;font-size:1rem;color:var(--grey-400);max-width:40ch;transition:color .5s var(--ease)}
.pd-why-row.is-read{color:var(--ink)}
.pd-why-row.is-read .pd-why-index{color:var(--purple)}
.pd-why-row.is-read .pd-why-accent{color:var(--purple)}
.pd-why-row.is-read .pd-why-row-text{color:var(--grey-700)}
@media (max-width:860px){
  .pd-why{padding:4.5rem 0 5rem}
  .pd-why-inner{grid-template-columns:1fr;gap:2.5rem}
  .pd-why-copy{position:static}
  .pd-why-row{gap:1rem;padding:1.6rem 0 1.8rem}
  .pd-why-index{width:2rem}
}
@media (prefers-reduced-motion:reduce){
  .pd-why-row::before,.pd-why-body{transition:none}
  .pd-why-row::before{transform:none}
  .pd-why-body{opacity:1;transform:none}
}

/* ---------- R&D form ---------- */
.pd-form-section{background:var(--purple);color:var(--white);padding:6.5rem 0}
.pd-form-inner{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:4rem;
  align-items:start;
}
.pd-form-inner > *{min-width:0}
.pd-form-title{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-top:.7rem;max-width:14ch}
.pd-form-text{margin-top:1rem;color:var(--purple-100);max-width:40ch}
.pd-form{display:flex;flex-direction:column;gap:1.1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form-field{display:flex;flex-direction:column;gap:.4rem}
.form-label{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--purple-100);
}
.form-input{
  width:100%;
  min-width:0;
  font:inherit;
  font-size:.95rem;
  padding:.85rem 1.1rem;
  border:1.5px solid rgba(255,255,255,.35);
  border-radius:12px;
  background:rgba(255,255,255,.1);
  color:var(--white);
  transition:border-color .25s var(--ease);
}
.form-input:focus{outline:none;border-color:var(--white)}
.form-input option{color:var(--ink)}
textarea.form-input{resize:vertical}
.pd-form .btn{align-self:flex-start;margin-top:.4rem;background:var(--white);color:var(--purple);--btn-sweep:var(--ink)}
.form-success-title{font-size:1.3rem;font-weight:550}
.form-success-text{margin-top:.5rem;color:var(--purple-100)}
@media (max-width:860px){
  .pd-form-inner{grid-template-columns:1fr;gap:2.5rem}
  .form-row{grid-template-columns:1fr}
}