/* ==========================================================================
   FAMILY TREE DENTAL — new-patients.css
   The New Patients page's own three sections, and nothing else.
   ---------------------------------------------------------------------------
   Loaded after style.css and system.css. Everything shared — tokens, the nav
   pill, buttons, the eyebrow, the headline mask, the appointment band, the
   testimonial split, the clinic panel, the wave — is already supplied by those
   two and by the global components. What is here is only:

     01. The hero        the green field and the photograph beside it
     02. The welcome     the asymmetric spread and the two form documents
     03. The policies
     04. Entry states    this page's own reveal channels
     05. Responsive
     06. Reduced motion

   Entry states are authored in CSS and lifted by `.no-js` — the same contract
   system.css section 04 uses, so a page that never gets its JavaScript is a
   finished page rather than an empty one.

   THE COLOUR RUNS DOWNHILL INTO THE SHARED HALF. The hero is on ivory, the
   welcome warms to pale blue and the policies close on #e8f2fd — which is the
   colour the appointment band beneath opens with. There is no seam between
   this page's sections and the shared ones; change one end and check the other.

   THE HERO BAND IS THE THIRD OF ITS KIND. office.css and contact.css each
   carry their own copy of this composition — a green field with a media card
   floating over it — because each was written for one page. The three are now
   close enough to be one shared component, and the day a fourth page needs
   the band is the day to promote it to system.css, which is the rule
   includes/README.md sets for that file. Doing it here would mean editing two
   finished pages' markup, stylesheets and controllers for no visible change.
   ========================================================================== */


/* ==========================================================================
   01. THE HERO — EDITORIAL, WITH A PORTRAIT THAT BREAKS OUT
   ---------------------------------------------------------------------------
   THIS PAGE IS AN INVITATION, so it opens the way a printed one would: ink on
   paper, the words given the width, and one photograph standing slightly proud
   of the page. The portrait is taller than the band and overlaps the section
   beneath it, which is what stops a pale hero from reading as an empty strip.

   Ink on ivory rather than white on a colour field — the Contact page holds
   the practice green and Our Office holds the dark, so this one is the light
   one, and the three are told apart at a glance.
   ========================================================================== */
.np-hero {
  position: relative;
  isolation: isolate;
  /* NOT clipped: the portrait is meant to hang past the bottom edge. */
  overflow: visible;
  padding-top: calc(var(--util-h) + var(--nav-h) + var(--hero-inset) + var(--hero-pad) + clamp(1rem, 3vh, 2.5rem));
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
  background:
    radial-gradient(60% 50% at 88% 8%, rgba(110, 178, 244, .2) 0%, rgba(110, 178, 244, 0) 62%),
    linear-gradient(168deg, var(--sv-ivory) 0%, #f4f7fa 58%, #eaf2fa 100%);
}

.np-hero__inner {
  position: relative;
  width: var(--sv-shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  min-height: clamp(20rem, 42vh, 27rem);
}

/* --- The words ------------------------------------------------------------ */
.np-hero__panel {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding: 0;
  background: none;
}

.np-hero__grain { display: none; }

.np-hero__leaf {
  position: absolute;
  left: -8%;
  bottom: -30%;
  z-index: -1;
  width: min(26vw, 18rem);
  color: rgba(11, 45, 82, .045);
  pointer-events: none;
}
.np-hero__leaf svg { width: 100%; height: auto; }

.np-hero__copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 32rem;
  margin-left: 0;
}

/* Ink crumbs: page-hero.php prints --light for every caller and this ground
   is pale. */
.np-hero .sv-crumbs--light ol,
.np-hero .sv-crumbs--light li { color: rgba(11, 45, 82, .6); }
.np-hero .sv-crumbs--light a { color: rgba(11, 45, 82, .72); }
.np-hero .sv-crumbs--light a:hover { color: var(--c-ink); }
.np-hero .sv-crumbs--light [aria-current='page'] { color: var(--c-ink); }

.np-hero__title {
  margin-top: clamp(.9rem, 2.5vh, 1.5rem);
  font-family: var(--f-display);
  font-size: clamp(2.7rem, 1rem + 5.8vw, 4.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.024em;
  color: var(--c-ink);
}
.np-hero__title em { position: relative; font-style: italic; color: var(--c-accent); }

/* The rule sits above the strapline rather than under the title, so the block
   reads as one column of type with a hinge in it. */
.np-hero__tag {
  position: relative;
  margin-top: clamp(1.1rem, 2.6vh, 1.7rem);
  padding-top: clamp(.9rem, 2vh, 1.3rem);
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem);
  color: var(--sv-navy-2);
}
.np-hero__tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(3rem, 6vw, 5rem);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-accent), rgba(255, 107, 44, 0));
}

/* --- The portrait --------------------------------------------------------- */
.np-hero__stage {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}

/* THE ECHO. A second outline offset behind the card, the idiom the homepage's
   .why__frame-echo established — it gives the portrait an edge to stand
   against so it reads as placed on the page rather than dropped on it. */
.np-hero__stage::before {
  content: '';
  position: absolute;
  inset: 8% -2.5% -8% 6%;
  z-index: -1;
  border: 1px solid rgba(120, 170, 225, .4);
  border-radius: var(--sv-r-xl);
  pointer-events: none;
}

.np-hero__frame {
  position: relative;
  width: 100%;
  max-width: 26rem;
  margin: 0;
  overflow: hidden;
  /* Taller than the row, so it hangs past the band's bottom edge — the
     section below is not clipped, which is why .np-hero is overflow: visible. */
  aspect-ratio: 4 / 4.6;
  border-radius: var(--sv-r-xl);
  background: #dfeaf5;
  box-shadow: 0 26px 60px rgba(11, 45, 82, .18), 0 60px 120px rgba(11, 45, 82, .1);
}

.np-hero__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

.np-hero__grade {
  position: absolute;
  inset: 0;
  background: linear-gradient(196deg, rgba(6, 33, 58, 0) 52%, rgba(6, 33, 58, .26) 100%);
  pointer-events: none;
}

/* ==========================================================================
   02. THE WELCOME
   ---------------------------------------------------------------------------
   ASYMMETRIC ON PURPOSE. The heading holds a column of its own and the prose
   runs beside it, which is what stops two long paragraphs from reading as a
   wall. The measure is held to ~62ch — the number that decides whether a
   paragraph this size is read or skimmed.
   ========================================================================== */
.np-welcome {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(3.5rem, 10vh, 7rem) clamp(3rem, 8vh, 5.5rem);
  background: linear-gradient(180deg, var(--sv-ivory) 0%, #f7fbff 62%, #f4f9ff 100%);
}

.np-welcome__wash {
  position: absolute;
  top: -22%;
  left: -10%;
  z-index: -1;
  width: min(52vw, 40rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(127, 227, 212, .18) 0%,
              rgba(110, 178, 244, .12) 46%,
              rgba(110, 178, 244, 0) 70%);
  filter: blur(18px);
  pointer-events: none;
}

.np-welcome__inner {
  width: var(--sv-shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: clamp(1.75rem, 5vw, 4.5rem);
}

.np-welcome__head { position: relative; }

.np-welcome__title { color: var(--c-blue-700); }
.np-welcome__title em { font-style: italic; color: var(--c-blue-500); }

/* The rule under the heading, drawn as the section arrives. It is the only
   decoration in this half of the spread. */
.np-welcome__rule {
  display: block;
  width: clamp(3.5rem, 8vw, 6rem);
  height: 2px;
  margin-top: clamp(1.1rem, 2.5vh, 1.6rem);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-blue-500), var(--c-mint));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.np-welcome__lede {
  max-width: 60ch;
  font-size: clamp(1.05rem, .98rem + .3vw, 1.22rem);
  line-height: 1.72;
  color: rgba(11, 45, 82, .8);
}

.np-welcome__p {
  max-width: 62ch;
  margin-top: clamp(1rem, 2.4vh, 1.5rem);
  font-size: clamp(.98rem, .95rem + .16vw, 1.06rem);
  line-height: 1.78;
  color: rgba(11, 45, 82, .72);
}

/* --- The two forms -------------------------------------------------------
   The design gives them as two links in a row. They are DOCUMENTS, and a
   document you are meant to print and bring with you should look like one —
   so each is a card with the file mark, its own name and an arrow. Not one
   word is added: the label is the practice's, unchanged.
   ------------------------------------------------------------------------- */
.np-forms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.15rem);
  margin-top: clamp(1.75rem, 4vh, 2.6rem);
  padding: 0;
  list-style: none;
}

.np-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  height: 100%;
  /* 56px of target at the smallest step: these are the two things on the
     page most likely to be tapped with a thumb. */
  min-height: 56px;
  padding: clamp(.9rem, 2vw, 1.15rem) clamp(1rem, 2.2vw, 1.35rem);
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--sv-card-brd);
  border-radius: var(--sv-r-md);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              background var(--t-med) var(--ease-out);
}
.np-form:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: rgba(26, 114, 214, .4);
  box-shadow: var(--sh-md);
}
.np-form:focus-visible { outline: 2px solid var(--c-blue-500); outline-offset: 3px; }

.np-form__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  color: var(--c-blue-500);
  background: rgba(26, 114, 214, .08);
  border-radius: 12px;
  transition: background var(--t-med) var(--ease-out),
              color var(--t-med) var(--ease-out);
}
.np-form__icon svg { width: 20px; height: 20px; }
.np-form:hover .np-form__icon { color: #fff; background: var(--c-blue-500); }

.np-form__label {
  flex: 1;
  font-family: var(--f-ui);
  font-size: clamp(.88rem, .85rem + .16vw, .97rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-blue-900);
}

.np-form__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  color: var(--c-accent);
  transition: transform var(--t-med) var(--ease-out);
}
.np-form__go svg { width: 18px; height: 18px; }
.np-form:hover .np-form__go { transform: translateX(4px); }


/* ==========================================================================
   03. THE TWO POLICIES
   ---------------------------------------------------------------------------
   One ground, two panels, a hairline between them — so they read as two parts
   of the same note rather than as two cards on a shelf. The hairline is drawn
   with a pseudo-element rather than a border so it can stop short of both
   ends, and it swaps to a horizontal rule when the pair stacks.
   ========================================================================== */
.np-policies {
  position: relative;
  padding-block: clamp(1rem, 3vh, 2rem) clamp(3.5rem, 9vh, 6rem);
  background: linear-gradient(180deg, #f4f9ff 0%, #eef5fd 55%, #e8f2fd 100%);
}

.np-policies__inner {
  width: var(--sv-shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: clamp(1.6rem, 3.4vw, 2.75rem);
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--glass-brd);
  border-radius: var(--sv-r-lg);
  box-shadow: var(--sh-md);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);
}

.np-policy {
  position: relative;
  padding-inline: clamp(0rem, 2.4vw, 2.25rem);
}
.np-policy:first-child { padding-left: 0; }
.np-policy:last-child  { padding-right: 0; }

/* The seam between the pair. */
.np-policy + .np-policy::before {
  content: "";
  position: absolute;
  top: .35rem; bottom: .35rem;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg,
              rgba(120, 170, 225, 0) 0%,
              rgba(120, 170, 225, .45) 22%,
              rgba(120, 170, 225, .45) 78%,
              rgba(120, 170, 225, 0) 100%);
}

.np-policy__rule {
  display: block;
  width: 42px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-mint), var(--c-blue-500));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.np-policy__title {
  margin-top: clamp(.9rem, 2vh, 1.25rem);
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.1rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--c-blue-700);
}

.np-policy__text {
  max-width: 46ch;
  margin-top: clamp(.6rem, 1.5vh, .9rem);
  font-size: clamp(.95rem, .93rem + .14vw, 1.02rem);
  line-height: 1.75;
  color: var(--c-ink-soft);
}


/* ==========================================================================
   04. ENTRY STATES — this page's own reveal channels
   ---------------------------------------------------------------------------
   system.css section 04 already hides [data-sv] and [data-sv-mask] on every
   page. These are the channels that only exist here. Same contract: the start
   state is authored in CSS so nothing flashes, and `.no-js` returns every one
   of them to its finished state.
   ========================================================================== */
[data-np-mask]   { clip-path: inset(0% 0% 100% 0%); }
[data-np-form]   { opacity: 0; }
[data-np-policy] { opacity: 0; }

.no-js [data-np-mask]   { clip-path: none; }
.no-js [data-np-form],
.no-js [data-np-policy] { opacity: 1; }
.no-js .np-welcome__rule,
.no-js .np-policy__rule { transform: none; }


/* ==========================================================================
   05. RESPONSIVE
   ---------------------------------------------------------------------------
   Checked at 1440, 1280, 1024, 768, 480, 390 and 360. The two structural
   changes are the hero becoming a stack and the welcome spread becoming one
   column — below 980px a heading beside its own prose leaves neither enough
   width to be worth the split.
   ========================================================================== */
@media (max-width: 1180px) {
  .np-hero__copy { max-width: 28rem; }
  .np-welcome__inner  { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

@media (max-width: 980px) {
  /* The hero becomes a stack: the green field, then the photograph under it. */
  /* Stacked, the portrait stops hanging: there is no column beside it for it
     to hang against, so it becomes an ordinary landscape card and the band
     goes back to clipping. */
  .np-hero        { overflow: clip; padding-bottom: clamp(2.5rem, 7vh, 4rem); }
  .np-hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: clamp(1.75rem, 6vw, 2.5rem); }
  .np-hero__copy  { max-width: none; }
  .np-hero__leaf  { left: -14%; bottom: -20%; width: min(46vw, 14rem); }
  .np-hero__stage { justify-content: stretch; }
  .np-hero__stage::before { display: none; }
  .np-hero__frame { max-width: none; aspect-ratio: 16 / 10; }

  .np-welcome__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 2rem); }
  .np-welcome__rule  { margin-bottom: .25rem; }

  /* The pair stacks, so the seam turns through ninety degrees with it. */
  .np-policies__inner { grid-template-columns: minmax(0, 1fr); }
  .np-policy          { padding-inline: 0; }
  /* Each sentence now has the panel's whole width rather than half of it, so
     the measure that was right in a column is too tight in a row. */
  .np-policy__text    { max-width: 60ch; }
  .np-policy + .np-policy { margin-top: clamp(1.5rem, 4vw, 2.25rem); }
  .np-policy + .np-policy::before {
    top: calc(clamp(1.5rem, 4vw, 2.25rem) / -2);
    bottom: auto;
    left: 0; right: 0;
    width: auto; height: 1px;
    background: linear-gradient(90deg,
                rgba(120, 170, 225, 0) 0%,
                rgba(120, 170, 225, .45) 18%,
                rgba(120, 170, 225, .45) 82%,
                rgba(120, 170, 225, 0) 100%);
  }
}

@media (max-width: 620px) {
  /* Two cards across at this width would break both labels onto three lines
     each. One per row keeps each document's name on one or two. */
  .np-forms { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .np-hero__title     { font-size: clamp(2.4rem, 1rem + 9vw, 3.4rem); }
  .np-policies__inner { padding: clamp(1.35rem, 5vw, 1.85rem); }
}


/* ==========================================================================
   06. REDUCED MOTION
   ---------------------------------------------------------------------------
   new-patients.js returns before building a single timeline when the query
   matches, so what is left here is the motion it does not own: the two form
   cards' hover.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-np-mask]   { clip-path: none; }
  [data-np-form],
  [data-np-policy] { opacity: 1; }
  .np-welcome__rule,
  .np-policy__rule { transform: none; }

  .np-form,
  .np-form__icon,
  .np-form__go { transition: none; }
  .np-form:hover { transform: none; }
  .np-form:hover .np-form__go { transform: none; }
  .np-hero__photo { will-change: auto; }
}

/* "Please remove all image and image-container shadow effects so the images
   look clean and flat."  page-hero.php emits {prefix}-hero__frame as the
   <figure> that holds the hero photograph, so it is an image container like
   any other. The first sweep covered service-detail.css and team.css; this
   one was missed. Measured, not assumed — the computed style still carried
   the elevation on this page. */
.np-hero__frame { box-shadow: none; }