/* ==========================================================================
   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
   ---------------------------------------------------------------------------
   TWO PANELS, EQUAL HEIGHT. The band is full-bleed and sits under the pill,
   so its top padding has to clear the whole of the chrome.
   ========================================================================== */
.np-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: calc(var(--util-h) + var(--nav-h) + var(--hero-inset) + var(--hero-pad));
  background: var(--sv-ivory);
}

.np-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: stretch;
  /* THE BAND'S HEIGHT IS SET HERE AND NOWHERE ELSE. The photograph is taken
     out of flow below so its intrinsic height cannot drive this row; the row
     is as tall as this says and the picture crops to fit. */
  min-height: clamp(22rem, 48vh, 31rem);
}

/* --- The green field ----------------------------------------------------- */
.np-hero__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* The right padding carries the card's overlap as well as its own gutter,
     so the copy never runs under the picture that sits on top of it. */
  padding: clamp(2rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 6rem) clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 5rem);
  background:
    radial-gradient(120% 90% at 84% 12%, rgba(127, 227, 212, .2) 0%, rgba(127, 227, 212, 0) 62%),
    linear-gradient(152deg, #5aad38 0%, #4c9c2e 46%, #3d7f25 100%);
}

.np-hero__grain {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(38% 34% at 22% 28%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(30% 40% at 78% 76%, rgba(6, 33, 58, .16) 0%, rgba(6, 33, 58, 0) 72%);
  pointer-events: none;
}

.np-hero__leaf {
  position: absolute;
  left: -5%;
  bottom: -36%;
  z-index: -1;
  width: min(28vw, 20rem);
  color: rgba(255, 255, 255, .085);
  pointer-events: none;
}
.np-hero__leaf svg { width: 100%; height: auto; }

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

.np-hero__title {
  margin-top: clamp(.9rem, 2.5vh, 1.5rem);
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 1rem + 5.6vw, 4.6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: #fff;
}
/* The accent word is white too — a second colour on a green field is one
   colour too many. It carries the italic and nothing else. */
.np-hero__title em { font-style: italic; color: rgba(255, 255, 255, .93); }

.np-hero__tag {
  margin-top: clamp(.6rem, 1.6vh, 1rem);
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1rem, .9rem + .45vw, 1.28rem);
  color: rgba(255, 255, 255, .88);
}

/* --- The photograph ------------------------------------------------------ */
.np-hero__stage {
  position: relative;
  z-index: 1;
  display: flex;
  /* Pulled back over the green so the card overlaps the field it sits on.
     Negative margins are written as a positive clamp times -1 — a clamp with
     three negative values is legal but reads backwards. */
  margin-left: calc(clamp(1.25rem, 3vw, 3.25rem) * -1);
  /* THE THREE INSETS ARE ONE NUMBER: top, right and bottom off the same
     clamp, so the card floats by the same amount on every side it is not
     overlapping. */
  padding: clamp(.75rem, 1.6vw, 1.75rem);
  padding-left: 0;
}

.np-hero__frame {
  position: relative;
  flex: 1;
  margin: 0;
  overflow: hidden;
  border-radius: var(--sv-r-xl);
  background: linear-gradient(120deg, #dceaf8, #bcd8f2);
  box-shadow: 0 30px 70px rgba(11, 45, 82, .22);
}
/* ABSOLUTE, so the picture's own dimensions never drive the band's height —
   see the note on .np-hero__inner. */
.np-hero__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  will-change: transform;
}
/* A quarter-stop of depth in the corners, so the card has an edge against
   the page rather than dissolving into it. */
.np-hero__grade {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgba(6, 33, 58, 0) 46%, 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__inner     { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .np-hero__copy      { max-width: 26rem; }
  .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. */
  .np-hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .np-hero__copy  { max-width: none; margin-left: 0; }
  .np-hero__panel { padding: clamp(2.25rem, 7vw, 3.5rem) clamp(1.25rem, 5vw, 3rem); }
  .np-hero__leaf  { left: -14%; bottom: -42%; width: min(46vw, 18rem); }
  .np-hero__stage { margin-left: 0; padding: 0; }
  .np-hero__frame { aspect-ratio: 16 / 10; border-radius: var(--sv-r-lg) var(--sv-r-lg) 0 0; }

  .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; }
}