/* ==========================================================================
   ProfessNow — Hero, search bar and character stage
   ========================================================================== */

.pn-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(32px, 4vw, 72px) clamp(48px, 5vw, 88px);
  background: var(--pn-white);
  overflow: hidden;
}

/* Very restrained ambient wash. No neon, no mesh gradients. */
.pn-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px 520px at 82% 18%, rgba(22, 163, 74, .07), transparent 70%),
    radial-gradient(620px 480px at 6% 96%, rgba(10, 10, 10, .04), transparent 70%);
}

.pn-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */
.pn-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pn-s2);
  margin: 0 0 var(--pn-s5);
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-r-pill);
  background: var(--pn-white);
  box-shadow: var(--pn-shadow-xs);
  font: var(--pn-body-sm);
  font-weight: 600;
  color: var(--pn-text-muted);
}

.pn-hero__title {
  margin: 0;
  font: var(--pn-display);
  letter-spacing: var(--pn-tracking-tight);
  color: var(--pn-text-strong);
  text-wrap: balance;
}

.pn-hero__lead {
  margin: var(--pn-s5) 0 0;
  max-width: 54ch;
  font: var(--pn-body-lg);
  color: var(--pn-text-muted);
}

/* --------------------------------------------------------------------------
   Trust indicators
   -------------------------------------------------------------------------- */
.pn-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pn-s3) var(--pn-s6);
  margin-top: var(--pn-s6);
}

.pn-hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: var(--pn-body-sm);
  font-weight: 500;
  color: var(--pn-text-muted);
}

.pn-hero__trust i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pn-green-soft-2);
  color: var(--pn-green-deep);
  font-size: .625rem;
}

/* ==========================================================================
   Search
   ========================================================================== */

.pn-search { margin-top: clamp(24px, 3vw, 36px); }

/*
   Two rows by design, not as a fallback.

   The hero's left column is roughly 640px wide on a 1440 viewport. Squeezing
   profession + country + city + button onto one line leaves every field around
   150px, which truncates the labels and the placeholder. Giving the profession
   field its own row keeps the primary input readable and lets location sit
   comfortably beside the action.
*/
.pn-search__bar {
  display: grid;
  grid-template-columns: minmax(0, .85fr) auto minmax(0, 1fr) auto;
  grid-template-areas:
    "service service service service"
    "country divider city    submit";
  align-items: stretch;
  padding: 8px;
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-r-xl);
  background: var(--pn-white);
  box-shadow: var(--pn-shadow-float);
  transition: box-shadow var(--pn-normal) var(--pn-ease-out), border-color var(--pn-normal) var(--pn-ease-out);
}

.pn-search__seg--service {
  grid-area: service;
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pn-border);
  border-radius: var(--pn-r-lg) var(--pn-r-lg) 0 0;
}

.pn-search__seg--country { grid-area: country; }
.pn-search__seg--city { grid-area: city; }
.pn-search__divider { grid-area: divider; }
.pn-search__submit { grid-area: submit; }

/* The profession input is the primary control — give it presence. */
.pn-search__seg--service .pn-search__input { height: 30px; font-size: 1.0625rem; }
.pn-search__seg--service .pn-search__icon { font-size: 1rem; color: var(--pn-green); }

.pn-search__bar:focus-within {
  border-color: var(--pn-green-border);
  box-shadow: var(--pn-shadow-float), 0 0 0 4px var(--pn-green-ring);
}

.pn-search__seg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  padding: 8px 14px;
  border-radius: var(--pn-r-lg);
  transition: background-color var(--pn-fast) var(--pn-ease-out);
}

.pn-search__seg:hover { background: var(--pn-gray-50); }

/* City needs to anchor the suggestion list. */
.pn-search__seg--city { position: relative; }

.pn-search__label {
  font: var(--pn-caption);
  font-weight: 600;
  color: var(--pn-text-strong);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pn-search__input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pn-search__icon {
  flex: none;
  color: var(--pn-gray-400);
  font-size: .875rem;
}

.pn-search__input {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  font: var(--pn-body);
  color: var(--pn-text);
}

.pn-search__input::placeholder {
  color: var(--pn-gray-400);
  overflow: hidden;
  text-overflow: ellipsis;
}

.pn-search__input:focus { outline: none; }

.pn-search__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 18px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23737373' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}

.pn-search__divider {
  width: 1px;
  margin-block: 12px;
  background: var(--pn-border);
}

.pn-search__submit {
  align-self: center;
  min-height: 56px;
  margin-left: 6px;
  padding: 0 var(--pn-s6);
  border-radius: var(--pn-r-lg);
}

/* --------------------------------------------------------------------------
   City suggestions
   -------------------------------------------------------------------------- */
.pn-search__results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-r-lg);
  background: var(--pn-white);
  box-shadow: var(--pn-shadow-float);
}

.pn-search__results[hidden] { display: none; }

.pn-search__result button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--pn-r-sm);
  background: transparent;
  font: var(--pn-body-sm);
  color: var(--pn-text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--pn-fast) var(--pn-ease-out), color var(--pn-fast) var(--pn-ease-out);
}

.pn-search__result button i { color: var(--pn-gray-400); }

.pn-search__result button:hover,
.pn-search__result button:focus {
  background: var(--pn-green-soft);
  color: var(--pn-green-deep);
}

.pn-search__result button:hover i,
.pn-search__result button:focus i { color: var(--pn-green); }

.pn-search__result--empty {
  padding: 12px;
  font: var(--pn-body-sm);
  color: var(--pn-text-subtle);
}

/* --------------------------------------------------------------------------
   Status line + below-bar row
   -------------------------------------------------------------------------- */
.pn-search__status {
  min-height: 20px;
  margin: 10px 2px 0;
  font: var(--pn-caption);
  color: var(--pn-text-subtle);
}

.pn-search__status.is-warn { color: var(--pn-warning); }
.pn-search__status.is-ok { color: var(--pn-green-deep); }

.pn-search__below {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pn-s4);
  margin-top: 6px;
}

.pn-search__trending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pn-search__trending-label {
  font: var(--pn-caption);
  font-weight: 600;
  color: var(--pn-text-subtle);
  margin-right: 2px;
}

.pn-search__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pn-s5);
}

.pn-search__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 2px;
  border: 0;
  background: none;
  font: var(--pn-body-sm);
  font-weight: 600;
  color: var(--pn-text-strong);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--pn-fast) var(--pn-ease-out);
}

.pn-search__link i { color: var(--pn-green); }

.pn-search__link:hover,
.pn-search__link:focus { color: var(--pn-green-deep); text-decoration: none; }

/* ==========================================================================
   Character stage

   The footage carries a flat #F2F2F2 background. The surface below is the
   same colour and extends past the video, so the video's rectangle has no
   visible edge — the professional reads as free-standing, not as a media box.
   ========================================================================== */

.pn-hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
}

.pn-stage__surface {
  position: absolute;
  inset: -6% -8%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 52% 44%,
      var(--pn-stage-bg) 0%,
      var(--pn-stage-bg) 62%,
      rgba(242, 242, 242, .78) 78%,
      rgba(242, 242, 242, 0) 100%);
}

/* A whisper of brand colour behind the character, never on him. */
.pn-hero__stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 62%;
  aspect-ratio: 1;
  top: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pn-green-glow), transparent 68%);
  filter: blur(28px);
}

.pn-stage__media {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1 / 1;
}

.pn-stage__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  /* Belt and braces: the video must never read as a card. */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;

  /* Dissolve the square frame inside the circle.

     The footage is a square of flat #F2F2F2; the backdrop behind it is a
     circle. Without a mask the square's corners read as four grey wedges
     sticking out of the circle. Three intersected mask layers fix it:

       1+2. 4% linear feathers kill the hard straight edges (the poster JPEG
            is #F4F4F4, and even a 2-level step reads as a rectangle).
       3.   A radial layer fades the field out along a circle so the corners
            (which sit at ~118% of that radius) are fully transparent.

     The radial geometry is chosen against measured character extents across
     the whole clip — thumbs at ~(10%, 25%) during the thumbs-up, hair top at
     ~3% in the close-up. At radius 60% with the fade running 76%→98%, those
     land at 88-100% opacity while the corners are gone entirely. */
  --pn-feather: 4%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--pn-feather),
      #000 calc(100% - var(--pn-feather)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--pn-feather),
      #000 calc(100% - var(--pn-feather)), transparent 100%),
    radial-gradient(60% 60% at 50% 50%, #000 76%, transparent 98%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--pn-feather),
      #000 calc(100% - var(--pn-feather)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--pn-feather),
      #000 calc(100% - var(--pn-feather)), transparent 100%),
    radial-gradient(60% 60% at 50% 50%, #000 76%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Unused ambient hook kept out of the way. */
.pn-stage__floor { display: none; }

/* --------------------------------------------------------------------------
   BOOK NOW

   Positioned at the point the character's index finger reaches at ~3.5s:
   ~34% across, ~58% down the square frame. Anchoring by the right edge puts
   the fingertip just past the button, so the gesture lands on it.
   -------------------------------------------------------------------------- */
.pn-stage__cta {
  position: absolute;
  z-index: 3;
  right: 68%;
  top: 58%;
  transform: translateY(-50%);
  overflow: hidden;
  letter-spacing: .04em;
  transition:
    transform var(--pn-fast) var(--pn-ease-out),
    box-shadow var(--pn-normal) var(--pn-ease-out),
    background-color var(--pn-fast) var(--pn-ease-out);
}

.pn-stage__cta:hover,
.pn-stage__cta:focus { transform: translateY(-50%) translateY(-2px); }

.pn-stage__cta:active { transform: translateY(-50%) scale(.97); }

/* ---- synchronised reaction (decorative only) ---------------------------- */

/* Reach: the button leans in slightly before contact. */
.pn-stage__cta.is-anticipating {
  transform: translateY(-50%) translateY(-3px);
  box-shadow: var(--pn-shadow-green-lg);
}

/* Contact. */
.pn-stage__cta.is-pressed {
  transform: translateY(-50%) scale(.955);
  background: var(--pn-green-active);
  box-shadow: 0 4px 12px rgba(22, 163, 74, .3);
}

/* Rebound. */
.pn-stage__cta.is-released {
  transform: translateY(-50%) translateY(-2px) scale(1.01);
  box-shadow: var(--pn-shadow-green-lg);
}

.pn-stage__cta.is-confirmed { box-shadow: var(--pn-shadow-green); }

.pn-stage__cta-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

.pn-stage__cta.is-pressed .pn-stage__cta-ripple {
  animation: pn-ripple 620ms var(--pn-ease-out) forwards;
}

@keyframes pn-ripple {
  0% { transform: translate(-50%, -50%) scale(0); opacity: .55; }
  100% { transform: translate(-50%, -50%) scale(34); opacity: 0; }
}

/* ---- "Booked" confirmation face --------------------------------------------

   Cross-fades over the normal label the moment the character makes contact,
   then home-hero.js clears it after the clip so the CTA returns to its
   actionable state. Purely visual: no booking is created, and the underlying
   link keeps its own accessible name.
   --------------------------------------------------------------------------- */
.pn-stage__cta-face {
  display: inline-flex;
  align-items: center;
  gap: var(--pn-s2);
  transition:
    opacity var(--pn-fast) var(--pn-ease-out),
    transform var(--pn-normal) var(--pn-ease-spring);
}

.pn-stage__cta.is-released .pn-stage__cta-face,
.pn-stage__cta.is-confirmed .pn-stage__cta-face {
  opacity: 0;
  transform: translateY(-6px);
}

.pn-stage__cta-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pn-s2);
  background: var(--pn-green-deep);
  color: var(--pn-white);
  font: var(--pn-button);
  font-size: 1rem;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(8px);
  /* Clicks must always reach the anchor underneath. */
  pointer-events: none;
  transition:
    opacity var(--pn-fast) var(--pn-ease-out),
    transform var(--pn-normal) var(--pn-ease-spring);
}

.pn-stage__cta.is-released .pn-stage__cta-done,
.pn-stage__cta.is-confirmed .pn-stage__cta-done {
  opacity: 1;
  transform: none;
}

.pn-stage__cta-done-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: var(--pn-white);
}

@media (prefers-reduced-motion: reduce) {
  .pn-stage__cta.is-pressed .pn-stage__cta-ripple { animation: none; }
  .pn-stage__cta.is-anticipating,
  .pn-stage__cta.is-pressed,
  .pn-stage__cta.is-released { transform: translateY(-50%); }
  .pn-stage__cta-face,
  .pn-stage__cta-done { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Floating contextual chips
   -------------------------------------------------------------------------- */
.pn-stage__chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-r-pill);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--pn-shadow-card);
  font: var(--pn-caption);
  font-weight: 600;
  color: var(--pn-text);
  white-space: nowrap;
  animation: pn-float 7s var(--pn-ease-in-out) infinite;
}

.pn-stage__chip--verified {
  top: 15%;
  right: -2%;
}

.pn-stage__chip--verified i { color: var(--pn-green); }

.pn-stage__chip--available {
  bottom: 16%;
  right: 4%;
  animation-delay: -3.5s;
}

/* Floating photo bubbles: professionals at work, left side of the stage
   (the text chips own the right). Same float rhythm, staggered phases. */
.pn-stage__pro {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  animation: pn-float 7s var(--pn-ease-in-out) infinite;
}

.pn-stage__pro img {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--pn-white);
  background: var(--pn-white);
  box-shadow: var(--pn-shadow-card);
}

.pn-stage__pro em {
  padding: 5px 13px;
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-r-pill);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--pn-shadow-card);
  font: var(--pn-caption);
  font-style: normal;
  font-weight: 700;
  color: var(--pn-text);
  white-space: nowrap;
}

.pn-stage__pro--ac    { top: 3%;    left: -2%; }
.pn-stage__pro--salon { top: 38%;   left: -8%; animation-delay: -2.3s; }
.pn-stage__pro--clean { bottom: 4%; left: 4%;  animation-delay: -4.7s; }

/* Crop focus: keep the person, not the appliance/background, in the circle. */
.pn-stage__pro--ac img    { object-position: 12% 72%; }
.pn-stage__pro--clean img { object-position: 50% 68%; }

@keyframes pn-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .pn-stage__chip,
  .pn-stage__pro { animation: none; }
}

/* ==========================================================================
   Hero responsive
   ========================================================================== */

@media (max-width: 1023px) {
  .pn-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 5vw, 40px);
  }

  /* Once the hero stacks, the stage spans the full container while the video
     stays capped — without a matching cap the backdrop ellipse balloons far
     wider than the character it is supposed to sit behind. */
  .pn-hero__stage {
    order: 2;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }

  .pn-stage__media { max-width: 460px; }

  /* Below tablet the stage is too narrow to hang the CTA beside the finger,
     so it becomes a full-width action under the character. Still the same
     button, still the same synchronised reaction. */
  .pn-stage__cta {
    position: static;
    transform: none;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }

  .pn-stage__cta:hover,
  .pn-stage__cta:focus { transform: translateY(-2px); }
  .pn-stage__cta:active { transform: scale(.97); }
  .pn-stage__cta.is-anticipating { transform: translateY(-3px); }
  .pn-stage__cta.is-pressed { transform: scale(.955); }
  .pn-stage__cta.is-released { transform: translateY(-2px) scale(1.01); }

  .pn-stage__media {
    display: grid;
    justify-items: center;
    gap: var(--pn-s4);
    aspect-ratio: auto;
  }

  .pn-stage__video { aspect-ratio: 1 / 1; height: auto; }

  .pn-stage__chip--verified { top: 6%; right: 0; }
  .pn-stage__chip--available { bottom: 22%; right: 0; }

  .pn-stage__pro img    { width: 108px; height: 108px; }
  .pn-stage__pro--ac    { top: 3%;    left: 2%; }
  .pn-stage__pro--salon { top: 40%;   left: 0;  }
  .pn-stage__pro--clean { bottom: 6%; left: 8%; }
}

@media (max-width: 720px) {
  .pn-search__bar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "service"
      "country"
      "city"
      "submit";
    padding: 10px;
    gap: 6px;
  }

  .pn-search__divider { display: none; }

  .pn-search__seg {
    padding: 10px 12px;
    border: 1px solid var(--pn-border);
    border-radius: var(--pn-r-md);
    background: var(--pn-gray-50);
  }

  .pn-search__seg--service {
    margin-bottom: 0;
    padding-bottom: 10px;
    border-radius: var(--pn-r-md);
  }

  .pn-search__seg:hover { background: var(--pn-gray-100); }

  .pn-search__submit {
    width: 100%;
    margin-top: 2px;
    margin-left: 0;
  }

  .pn-search__below {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pn-s3);
  }

  .pn-hero__trust { gap: var(--pn-s2) var(--pn-s5); }

  .pn-stage__media { max-width: 400px; }

  /* Keep the chips inside the viewport on small screens. */
  .pn-stage__chip { font-size: .75rem; padding: 7px 11px; }
  .pn-stage__chip--verified { top: 2%; right: -1%; }
  .pn-stage__chip--available { bottom: 24%; right: -1%; }

  .pn-stage__pro img { width: 88px; height: 88px; }
  .pn-stage__pro em { font-size: .7rem; padding: 3px 9px; }
  .pn-stage__pro--ac    { top: 2%;    left: 0; }
  .pn-stage__pro--salon { top: 42%;   left: -1%; }
  .pn-stage__pro--clean { bottom: 10%; left: 2%; }
}

@media (max-width: 420px) {
  .pn-stage__chip--verified { right: 0; }
  .pn-stage__chip--available { display: none; }

  /* Tight phones: keep two bubbles, drop the middle one. */
  .pn-stage__pro--salon { display: none; }
}