/* ===========================================================================
   Navya 10 kg connection page
   ===========================================================================
   The parts of the design particular to the new connection page, loaded only
   by new-connection.php. Every rule is scoped under .navya so nothing here can
   reach another page. The Navya wordmark belongs to this page alone - the site
   header carries the distributor's name and the HP mark, as on every page.

   The fonts and colour tokens are the site's own now - the whole site took on
   this design - so this file only holds what is particular to the page.
   ========================================================================= */


.navya {
  --nv-navy: #1C3A8C;
  --nv-red: #CF2E2E;
  --nv-yellow: #F5C242;
  --nv-bg: #F7F7F8;
  --nv-border: #E6E8EF;
  --nv-field: #CDD3E0;
  --nv-ink: #14213D;
  --nv-ink-2: #3A4358;
  --nv-muted: #5A6275;

  font-family: Barlow, 'Segoe UI', system-ui, sans-serif;
  color: var(--nv-ink);
  background: var(--nv-bg);
}
.navya h1, .navya h2, .navya h3 { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; color: var(--nv-ink); }
.navya a { color: var(--nv-navy); }
.navya a:hover { color: var(--nv-red); }
.navya .wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.navya .req { color: var(--nv-red); }

/* ---------- Navya wordmark (this page only) ---------- */
.nv-navya-logo { display: block; height: 64px; width: auto; margin-bottom: 1.2rem; }

/* ---------- Hero ---------- */
/* The stripes deliberately run off the stage; clip them at the page edge so
   they never widen the page on a phone. clip rather than hidden, so it does
   not become a scroll container or cut the form's shadow top and bottom. */
.nv-hero { padding: 2.6rem 0 3rem; overflow-x: clip; }
.nv-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 3.2rem; align-items: start; }
.nv-hero .wrap > * { min-width: 0; }
.nv-kicker {
  display: block; font-weight: 700; font-size: .8rem; letter-spacing: .22em;
  color: var(--nv-red); text-transform: uppercase; margin-bottom: 1rem;
}
.nv-tags { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 1rem; }
.nv-tag {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; color: #fff;
  font-size: clamp(3.2rem, 7.5vw, 6.2rem); line-height: 1; padding: .16em .3em .08em;
}
.nv-tag-b { background: var(--nv-navy); border-radius: 10px 10px 0 10px; box-shadow: 0 10px 24px rgba(20,33,61,.18); }
.nv-tag-a {
  background: var(--nv-red); border-radius: 0 10px 10px 10px;
  margin-left: .45em; margin-top: -.05em; box-shadow: 0 10px 24px rgba(207,46,46,.25);
}
.nv-nowopen {
  display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 1.3rem; letter-spacing: .26em; color: var(--nv-navy); margin-bottom: 1.8rem;
}

.nv-product { display: flex; gap: 2.2rem; align-items: flex-end; }
/* Pedestal, the two diagonal stripes and the cylinder stack here, so the
   stripes can run behind the product and off the side of the stage. */
.nv-stage { position: relative; width: 300px; height: 540px; flex: 0 0 auto; }
.nv-stripe { position: absolute; left: -120px; width: 540px; height: 54px; transform: rotate(-26deg); }
.nv-stripe-r { top: 250px; background: var(--nv-red); }
.nv-stripe-n { top: 318px; background: var(--nv-navy); }
.nv-pedestal {
  position: absolute; left: 0; bottom: 0; width: 300px; height: 68px;
  border-radius: 50%; background: #fff; box-shadow: 0 14px 30px rgba(20,33,61,.22);
}
.nv-stage img {
  position: absolute; left: 34px; bottom: 30px; width: 232px; height: auto; display: block;
  filter: drop-shadow(0 18px 24px rgba(20,33,61,.28));
}
.nv-aside { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.1rem; flex: 1 1 auto; padding-bottom: .8rem; }
.nv-stats { display: flex; gap: 1rem; }
.nv-stat { flex: 1 1 0; background: #fff; border: 1px solid var(--nv-border); border-radius: 14px; padding: 1rem 1.1rem; }
.nv-stat span { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .12em; color: var(--nv-muted); }
.nv-stat b {
  display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 2.2rem; line-height: 1; color: var(--nv-navy); margin-top: .2rem;
}

.nv-available { background: var(--nv-navy); border-radius: 16px; padding: 1.4rem; box-shadow: 0 16px 32px rgba(20,33,61,.22); color: #fff; }
.nv-available-top { display: flex; align-items: center; gap: 1rem; }
.nv-cart {
  width: 58px; height: 58px; border-radius: 50%; background: var(--nv-red);
  border: 3px solid #fff; display: grid; place-items: center; flex: 0 0 auto;
}
.nv-cart svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nv-available-top div { display: flex; flex-direction: column; }
.nv-available-top em { font-style: normal; font-weight: 600; font-size: 1.02rem; }
.nv-available-top strong {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.85rem;
  line-height: 1; letter-spacing: .02em; color: var(--nv-yellow);
}
.nv-rule { height: 2px; background: var(--nv-red); margin: 1rem 0; }
.nv-available p { margin: 0; font-size: .95rem; line-height: 1.5; color: #E4E9F7; }

/* ---------- Why Navya ---------- */
.nv-why { background: #fff; border-block: 1px solid var(--nv-border); padding: 3rem 0; }
.nv-h2 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1; letter-spacing: .02em; margin: 0 0 2rem;
}
.nv-h2 em { font-style: normal; color: var(--nv-red); }
.nv-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.nv-feats li {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .8rem; padding: 0 1.1rem; border-right: 2px dotted #B9C1D6;
}
.nv-feats li:last-child { border-right: 0; }
.nv-feat-ico { width: 78px; height: 78px; border-radius: 50%; background: var(--nv-navy); display: grid; place-items: center; }
.nv-feat-ico svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nv-feats b { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.22rem; line-height: 1.05; color: var(--nv-navy); }
.nv-feats span { font-size: .9rem; line-height: 1.45; color: var(--nv-ink-2); }

/* ---------- How it works + visit office ---------- */
.nv-how { padding: 3.2rem 0; }
.nv-how .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 3rem; align-items: start; }
.nv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.nv-steps li { background: #fff; border: 1px solid var(--nv-border); border-radius: 16px; padding: 1.3rem; }
.nv-steps i {
  width: 42px; height: 42px; border-radius: 50%; background: var(--nv-red); color: #fff;
  font-family: 'Barlow Condensed', sans-serif; font-style: normal; font-weight: 800;
  font-size: 1.35rem; display: grid; place-items: center; margin-bottom: .7rem;
}
.nv-steps b { display: block; font-weight: 700; font-size: 1.05rem; margin-bottom: .3rem; }
.nv-steps span { font-size: .92rem; line-height: 1.45; color: var(--nv-ink-2); }

.nv-office { background: var(--nv-navy); border-radius: 20px; padding: 1.8rem; color: #fff; }
.nv-office h2 { color: #fff; font-size: 1.75rem; line-height: 1.05; letter-spacing: .02em; margin: 0; }
.nv-office-row { display: flex; gap: .85rem; align-items: flex-start; font-size: .96rem; line-height: 1.45; margin-bottom: .9rem; }
.nv-office-row svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: var(--nv-yellow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nv-office-row a { color: #fff; font-weight: 600; }
/* Red on this navy is about 2:1; the yellow highlight is 6.2:1. */
.navya .nv-office-row a:hover { color: var(--nv-yellow); }
.nv-office strong { color: var(--nv-yellow); }
.nv-code { font-size: .8rem; color: #C3CCE6; margin: 0; }

/* ---------- Form ---------- */
.nv-form { background: #fff; border: 1px solid var(--nv-border); border-radius: 20px; box-shadow: 0 24px 56px rgba(20,33,61,.14); overflow: hidden; }
.nv-form-head { background: var(--nv-navy); padding: 1.5rem 1.8rem; border-bottom: 6px solid var(--nv-red); }
.nv-form-head h2 { margin: 0; color: #fff; font-size: 1.85rem; line-height: 1.05; letter-spacing: .02em; }
.nv-form-head p { margin: .3rem 0 0; font-size: .93rem; color: #D5DCF0; }
.nv-form-body { padding: 1.6rem 1.8rem 1.8rem; display: flex; flex-direction: column; gap: 1.1rem; }

.nv-fld { display: flex; flex-direction: column; gap: .35rem; }
.nv-lbl { font-size: .88rem; font-weight: 600; color: var(--nv-ink); }
.nv-lbl .opt { font-weight: 400; color: var(--nv-muted); }
.nv-inp {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 .9rem;
  border: 1.5px solid var(--nv-field); border-radius: 10px;
  font: 400 1rem Barlow, system-ui, sans-serif; color: var(--nv-ink); background: #fff;
}
.nv-inp:focus { outline: none; border-color: var(--nv-navy); box-shadow: 0 0 0 3px rgba(28,58,140,.18); }
textarea.nv-inp { min-height: 88px; padding: .7rem .9rem; resize: vertical; }
.nv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.nv-tel { display: flex; gap: .5rem; }
.nv-tel .pre {
  min-height: 48px; padding: 0 .75rem; border: 1.5px solid var(--nv-field); border-radius: 10px;
  display: flex; align-items: center; font-weight: 600; color: var(--nv-muted); background: var(--nv-bg);
}
.navya .field-err { margin: .25rem 0 0; color: var(--nv-red); font-size: .85rem; font-weight: 600; }
.navya [aria-invalid="true"] { border-color: var(--nv-red); background: #FFFAFA; }

.nv-set { margin: 0; padding: 0; border: 0; }
.nv-set legend { padding: 0; margin-bottom: .55rem; font-size: .88rem; font-weight: 600; color: var(--nv-ink); }
.nv-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.nv-opt {
  min-height: 48px; box-sizing: border-box; border: 1.5px solid var(--nv-field); border-radius: 10px;
  padding: 0 .7rem; display: flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .9rem; cursor: pointer;
}
.nv-opt input { accent-color: var(--nv-navy); width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
/* :has gives the checked state without any JavaScript; browsers without it
   still show the radio itself, so the control never becomes ambiguous. */
.nv-opt:has(input:checked) { border: 2px solid var(--nv-navy); background: #EEF2FB; }
.nv-chips { display: flex; gap: .6rem; flex-wrap: wrap; }
.nv-chip {
  min-height: 44px; box-sizing: border-box; padding: 0 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--nv-field); display: flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .9rem; cursor: pointer;
}
.nv-chip input { accent-color: var(--nv-navy); margin: 0; }
.nv-chip:has(input:checked) { background: var(--nv-navy); border-color: var(--nv-navy); color: #fff; }
.nv-chip:has(input:checked) input { accent-color: var(--nv-yellow); }

.nv-docs { border: 1px solid var(--nv-border); border-radius: 14px; padding: 1.1rem 1.2rem; margin: 0; }
.nv-docs legend {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.12rem;
  letter-spacing: .04em; color: var(--nv-navy); padding: 0 .4rem;
}
.nv-docs .nv-fld { margin-bottom: .9rem; }
.nv-docs .nv-fld:last-of-type { margin-bottom: 0; }
.nv-docs .nv-hint { margin: 0 0 .9rem; font-size: .85rem; color: var(--nv-muted); }
.nv-file {
  box-sizing: border-box; width: 100%; padding: .6rem; font-size: .88rem; cursor: pointer;
  border: 1.5px dashed var(--nv-field); border-radius: 10px; background: var(--nv-bg); color: var(--nv-ink);
}
.nv-file::file-selector-button {
  font: inherit; font-weight: 700; cursor: pointer; margin-right: .7rem;
  padding: .4rem .85rem; border-radius: 8px;
  border: 1px solid var(--nv-navy); background: #fff; color: var(--nv-navy);
}
.nv-consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; line-height: 1.45; color: var(--nv-ink-2); }
.nv-consent input { accent-color: var(--nv-navy); width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; }

.nv-submit {
  min-height: 58px; border: 0; border-radius: 12px; background: var(--nv-red); color: #fff;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.4rem; letter-spacing: .08em;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .7rem;
  box-shadow: 0 10px 20px rgba(207,46,46,.28);
}
.nv-submit:hover { background: #B32626; }
/* The mobile jump button is an <a>, and .navya a / .site a paint links navy -
   navy on this red is 2.0:1. Pinned white, including on hover. */
.navya a.nv-submit, .navya a.nv-submit:hover { color: #fff; }
.nv-submit svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.nv-privacy { display: flex; gap: .6rem; align-items: center; font-size: .85rem; color: var(--nv-muted); margin: 0; }
.nv-privacy svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: var(--nv-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.nv-alert-err { background: #FDECEC; border: 1px solid #F0A9AC; border-radius: 10px; padding: .9rem 1.1rem; color: #8E1418; }
.nv-alert-err ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.nv-alert-err a { color: #8E1418; }

.nv-jump { display: none; }

/* Keyboard focus, in this page's own colours. */
.navya :focus-visible { outline: 3px solid var(--nv-navy); outline-offset: 2px; border-radius: 6px; }
.nv-available :focus-visible, .nv-office :focus-visible, .nv-form-head :focus-visible { outline-color: #fff; }

@media (max-width: 1040px) {
  .nv-hero .wrap, .nv-how .wrap { grid-template-columns: 1fr; gap: 2rem; }
  .nv-feats { grid-template-columns: repeat(3, 1fr); gap: 1.8rem 0; }
  .nv-feats li:nth-child(3) { border-right: 0; }
}
@media (max-width: 760px) {
  .navya .wrap { width: min(1180px, 100% - 2rem); }
  .nv-product { flex-direction: column; align-items: center; gap: 1.4rem; }
  .nv-stage { width: 240px; height: 430px; }
  .nv-stage img { left: 26px; bottom: 24px; width: 188px; }
  .nv-pedestal { width: 240px; height: 54px; }
  /* The stripes bleed past the stage on both sides by the same amount. At the
     desktop width that is 120px either side; keep it proportional here rather
     than letting them run off only to the right. */
  .nv-stripe { left: -60px; width: 360px; height: 42px; top: 200px; }
  .nv-stripe-n { top: 252px; }
  .nv-aside { width: 100%; }
  .nv-steps { grid-template-columns: 1fr; }
  .nv-jump { display: flex; }
  .nv-nowopen { letter-spacing: .16em; font-size: 1.02rem; }
}
@media (max-width: 560px) {
  .nv-feats { grid-template-columns: repeat(2, 1fr); }
  .nv-feats li { border-right: 0; }
  .nv-two, .nv-opts { grid-template-columns: 1fr; }
  .nv-form-body { padding: 1.2rem 1.1rem 1.4rem; }
  .nv-form-head { padding: 1.2rem 1.1rem; }
}

/* ---------- Request received ---------- */
.nv-done { padding: 3rem 0 4rem; }
.nv-done .wrap { max-width: 620px; }
.nv-done-card { background: #fff; border: 1px solid var(--nv-border); border-radius: 20px; padding: 2.2rem 2rem; text-align: center; }
.nv-tick {
  width: 82px; height: 82px; border-radius: 50%; background: var(--nv-navy);
  border: 5px solid var(--nv-red); display: grid; place-items: center; margin: 0 auto 1.1rem;
}
.nv-tick svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nv-done h1 { margin: 0 0 .6rem; font-size: clamp(2rem, 6vw, 2.5rem); line-height: 1; color: var(--nv-navy); }
.nv-done h1 em { font-style: normal; color: var(--nv-red); }
.nv-done-card > p { font-size: 1.02rem; line-height: 1.5; color: var(--nv-ink-2); margin: 0 0 1.2rem; }
.nv-refbox {
  display: inline-flex; flex-direction: column; gap: .15rem; align-items: center;
  border: 1.5px dashed #B9C1D6; border-radius: 12px; padding: .7rem 1.4rem; margin-bottom: 1.4rem;
}
.nv-refbox span { font-size: .68rem; font-weight: 600; letter-spacing: .14em; color: var(--nv-muted); }
.nv-refbox b { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.7rem; letter-spacing: .1em; color: var(--nv-ink); }
.nv-ready { border: 1px solid var(--nv-border); border-radius: 16px; padding: 1.1rem 1.2rem; text-align: left; }
.nv-ready b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.12rem; letter-spacing: .04em; margin-bottom: .7rem; }
.nv-ready ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.nv-ready li { display: flex; gap: .6rem; align-items: center; font-size: .96rem; }
.nv-ready svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--nv-red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nv-done-actions { display: grid; gap: .6rem; margin-top: 1.4rem; }
.nv-done-actions a { min-height: 52px; border-radius: 12px; font-weight: 700; font-size: 1rem; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.nv-done-actions .nv-call { background: var(--nv-navy); color: #fff; }
.nv-done-actions .nv-back { border: 1.5px solid var(--nv-navy); color: var(--nv-navy); }