/* ==========================================================================
   Campaign hero — navy to cobalt to icy white, monumental vials, live copy.

   Desktop and phone are laid out differently on purpose.

   On desktop the artwork is the whole scene, full bleed, with the copy over
   its dark left field — the gradient, the light beams and the reflective
   horizon are one continuous photograph, and splitting them between a CSS
   gradient and a cropped picture is what made an earlier pass read as a
   fragment rather than a composition. The frame is 2.19:1 and the hero height
   tracks it, so cover-fitting trims a couple of dozen pixels off the sides
   instead of taking the caps off the vials.

   The phone works the same way, with its own 0.43:1 composition: the scene
   runs edge to edge and the copy sits over its dark upper field. Stacking a
   copy block above a separate picture reads as two pieces bolted together —
   the join is visible however carefully the gradients are matched — and the
   approved mobile visual is one continuous frame. The artwork's sky is
   extended in the build step precisely so the copy has somewhere to sit.
   ========================================================================== */

.prp-hero{
  --prp-navy:#061A3A;
  --prp-navy-2:#08286B;
  --prp-royal:#0B45C9;
  --prp-cobalt:#075CFF;
  --prp-icy:#DCEBFF;
  --prp-gold:#FFC83D;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  /* The theme gives every section in .view ~130px of vertical padding. A
     full-bleed hero has to sit flush under the header instead, or it floats
     in a band of page background. */
  margin:0;
  padding:0;
  /* Only seen on the phone, behind the copy block above the picture; on
     desktop the artwork covers it entirely. */
  background:linear-gradient(168deg,
    var(--prp-navy) 0%, var(--prp-navy-2) 58%, #0B3E9E 100%);
}

/* The scrim that keeps the headline legible over the artwork's left field.
   The field is already deep navy, so this only has to guarantee contrast at
   the brightest end of the gradient rather than darken the scene. */
.prp-hero__inner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(96deg,
    rgba(4,16,42,.78) 0%, rgba(5,24,68,.44) 32%, rgba(5,24,68,0) 58%);
}

/* The hero's height follows the artwork's own 2.19:1 frame, so cover-fitting
   trims the outer edges rather than scaling the scene up and cropping the
   vials. The floor stops it collapsing on a small laptop; above ~1230px the
   ratio governs and nothing is cropped vertically at all. */
/* Width must be stated: this is a grid item, so with only a ratio and a
   min-height the browser sizes it the other way round and derives a 1229px
   width from the 560px floor, overflowing the page at laptop widths. */
.prp-hero__inner{
  position:relative;
  width:100%;
  aspect-ratio:1672/941;
  min-height:560px;
  display:grid;
  align-content:center;
  justify-items:start;
}

/* ------------------------------------------------------------------ copy */

.prp-hero__content{
  position:relative;
  z-index:2;                         /* above the artwork and its scrim */
  width:100%;
  max-width:min(620px,47%);          /* stays clear of the leftmost vial */
  padding-inline:clamp(1.5rem,5vw,6.5rem) 1.5rem;
}

.prp-hero__eyebrow{
  margin:0;
  font-family:var(--mono,ui-monospace,monospace);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#BFD8FF;
}

.prp-hero__title{
  margin:.7rem 0 0;
  font-family:var(--serif,Georgia,serif);
  font-weight:500;
  font-size:clamp(2.6rem,5.4vw,5.6rem);
  line-height:.9;
  letter-spacing:-.015em;
}
.prp-hero__title span{display:block}
.prp-hero__proof{color:#5B9BFF}

.prp-hero__body{
  margin:1.1rem 0 0;
  max-width:27ch;
  font-size:clamp(1rem,1.25vw,1.25rem);
  line-height:1.5;
  color:#E4EEFF;
}

.prp-hero__actions{margin-top:1.5rem}

.prp-hero__cta{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  min-height:56px;
  padding:0 1.6rem;
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r,2px);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .22s var(--ease-out,ease), color .22s var(--ease-out,ease),
             transform .22s var(--ease-out,ease);
}
.prp-hero__cta:hover,
.prp-hero__cta:focus-visible{background:#fff;color:var(--prp-navy);transform:translateY(-2px)}
.prp-hero__cta:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* --------------------------------------------------------------- proof row */

.prp-hero__proof-row{
  display:flex;
  align-items:center;
  gap:clamp(1.1rem,2.4vw,2rem);
  margin-top:1.4rem;
}
.prp-origin{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.prp-origin .usflag{border-radius:1px;box-shadow:0 0 0 1px rgba(255,255,255,.3)}

.prp-rating{
  display:grid;
  gap:.15rem;
  margin:0;
  line-height:1.25;
}
.prp-rating .prp-stars,
.prp-rating svg{color:var(--prp-gold)}
.prp-rating strong{font-size:.95rem}
.prp-rating small{font-size:.8rem;color:#CFE0FA}

.prp-hero__compliance{
  margin:1.15rem 0 0;
  font-family:var(--mono,ui-monospace,monospace);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9DBBE6;
}

/* ----------------------------------------------------------------- artwork */

.prp-hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.prp-hero__media picture{display:block;height:100%}

.prp-hero__art{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%;           /* keeps the caps in frame when trimmed */
}

/* ------------------------------------------------------------------ motion
   Studio lighting, not a demo: transform and opacity only, nothing that
   triggers layout, and every effect is switched off under reduced motion. */

.prp-hero__sweep,
.prp-hero__glint{
  position:absolute;
  pointer-events:none;
  mix-blend-mode:screen;
}
.prp-hero__sweep{
  inset:-20% -30%;
  background:radial-gradient(ellipse 34% 60% at 50% 50%,
    rgba(190,222,255,.22), rgba(190,222,255,.08) 45%, transparent 72%);
  animation:prp-hero-sweep 9s var(--ease-io,ease-in-out) infinite;
}
.prp-hero__glint{
  top:0;bottom:0;left:-30%;
  width:16%;
  background:linear-gradient(105deg,transparent, rgba(255,255,255,.5), transparent);
  filter:blur(6px);
  opacity:0;
  animation:prp-hero-glint 8s linear infinite;
}
@keyframes prp-hero-sweep{
  0%,100%{transform:translate3d(-14%,0,0)}
  50%    {transform:translate3d(14%,0,0)}
}
@keyframes prp-hero-glint{
  0%,88%  {transform:translate3d(0,0,0);opacity:0}
  90%     {opacity:.85}
  100%    {transform:translate3d(760%,0,0);opacity:0}
}

/* --------------------------------------------------------------- trust bar */

.prp-hero__trust{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;
  min-height:88px;
  padding-inline:max(1.25rem,4vw);
  background:#031434;
  border-top:1px solid rgba(255,255,255,.14);
}
.prp-hero__trust-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  margin:0;
  min-width:0;
  padding-block:.9rem;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-align:center;
  color:#E8F1FF;
}
.prp-hero__trust-item + .prp-hero__trust-item{border-left:1px solid rgba(255,255,255,.22)}
.prp-hero__trust-item svg{flex:none;color:var(--prp-neon,#36D5FF)}
.prp-hero__trust-item .prp-stars,
.prp-hero__trust-item .prp-stars svg{color:var(--prp-gold)}

/* ------------------------------------------------------------- breakpoints */

@media (max-width:1180px){
  .prp-hero__content{max-width:min(520px,50%)}
  .prp-hero__title{font-size:clamp(2.4rem,5vw,4rem)}
  .prp-hero__body{font-size:1rem;margin-top:.9rem}
  .prp-hero__actions{margin-top:1.2rem}
}

/* Copy first, product beneath — the phone reads top to bottom, and the vials
   stay large instead of becoming a strip beside the text. */
/* Below this the scene switches to its portrait composition. The boundary is
   720px rather than 860px because the tablet range still has room for the
   landscape frame, and the portrait one would make a 1790px-tall hero there. */
@media (max-width:720px){
  /* The phone hero sizes itself from its content, not from a fixed ratio.
     A ratio cannot know how tall the copy is, so it either leaves a dead band
     of empty gradient between the copy and the vials (which is what a fixed
     941/2102 did here) or crowds them. Instead the copy takes the height it
     needs and `padding-bottom` reserves the vial zone underneath it — 118% of
     the width, which is what the bottles measure in the plate. The artwork is
     bottom-aligned and cropped from the top, and because that top band is
     flat navy the crop is invisible, so the sky simply absorbs whatever the
     copy does not use. */
  .prp-hero__inner{
    aspect-ratio:auto;
    min-height:0;
    padding-bottom:118%;
    align-content:start;
    justify-items:stretch;
  }
  /* Top-down instead of left-to-right: the copy now sits over the sky. */
  .prp-hero__inner::before{
    background:linear-gradient(180deg,
      rgba(4,16,42,.74) 0%, rgba(5,24,68,.34) 38%, rgba(5,24,68,0) 62%);
  }
  .prp-hero__content{
    max-width:none;
    padding:clamp(1.35rem,4.5vw,2rem) 1.25rem 0;
  }
  .prp-hero__title{font-size:clamp(2.3rem,11vw,3.1rem)}
  .prp-hero__body{max-width:30ch;font-size:1rem;margin-top:.85rem}
  .prp-hero__actions{margin-top:1.15rem}
  .prp-hero__cta{min-height:52px}
  .prp-hero__compliance{margin-top:.9rem}
  .prp-hero__cta{width:100%;max-width:340px;justify-content:center}
  .prp-hero__proof-row{display:none}
  .prp-hero__art{object-position:center bottom}
  .prp-hero__sweep{animation-duration:11s}

  /* Four labelled columns cannot hold their words at 320px, so the bar
     becomes one scrollable line rather than a three-deep stack that pushes
     the page down. */
  .prp-hero__trust{
    display:flex;
    gap:1.75rem;
    justify-content:flex-start;
    min-height:58px;
    padding-inline:1.25rem;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .prp-hero__trust::-webkit-scrollbar{display:none}
  .prp-hero__trust-item{flex:0 0 auto;white-space:nowrap;font-size:.7rem}
  .prp-hero__trust-item + .prp-hero__trust-item{border-left:0}
}

@media (max-width:400px){
  .prp-hero__title{font-size:clamp(2rem,11.4vw,2.7rem)}
  .prp-hero__body{font-size:.92rem;margin-top:.7rem}
  .prp-hero__content{padding-inline:1rem}
  .prp-hero__actions{margin-top:.95rem}
  .prp-hero__compliance{margin-top:.75rem}
}

/* At 320px the sky is at its shortest in absolute terms while the copy is at
   its tallest relative to it, so the last few pixels come out of the padding
   above the eyebrow rather than out of the type. */
@media (max-width:340px){
  .prp-hero__content{padding-top:1.1rem}
  .prp-hero__compliance{margin-top:.6rem}
}

@media (prefers-reduced-motion:reduce){
  .prp-hero *,
  .prp-hero *::before,
  .prp-hero *::after{animation:none!important;transition:none!important}
}