/* ==========================================================================
   navigation.css
   Styles for the new content sections on the navigation pages
   (About, Products, Materials, Quality, Certificate, Blog, Contact).

   HOW THIS FILE WORKS
   -------------------
   1. Every rule is scoped to `.nav-page`, set on <body> of each navigation
      page, so nothing here can reach index.html or the product pages.

   2. Only NEW section styles live here - every selector uses its own `.nav-*`
      class. No common/shared CSS is redefined: header, footer, breadcrumb and
      the shared `.pp-*` classes all stay in main.css, untouched.

   3. Linked after main.css.

   4. Colours reuse the site tokens already defined in main.css:
      --pp-b1 #1a4499  --pp-b2 #2f6bd8  --pp-ink #0f1f3d
      --pp-body #3a4a63  --pp-line #e4eaf5  --pp-soft #f5f8fd

   CONTENTS
   --------
   1. Lead paragraph            .nav-lead
   2. History story panel       .nav-story
   3. Product forms             .nav-forms
   4. Material chips            .nav-mats
   5. Why choose infographic    .nav-why (hub + spokes)
   6. Industries                .nav-inds
   7. Reach + contact panel     .nav-reach / .nav-contact
   8. Body prose                .nav-prose
   9. Compliance chain          .nav-chain
  10. Test & inspection list    .nav-tests
  11. Certificate grid        .nav-certs (+ .cert-page drop-cap reset)
  12. Contact details + form  .nav-touch / .nav-fgrid
  13. Map embed               .nav-map
  13b. Contact directory      .nav-tc team cards (+ .nav-dbtn pills)
  14. 404 page                .nav-404 (+ .err-page)
  15. Responsive
  16. Thank-you page          .nav-thanks (+ .thanks-page)
   ========================================================================== */


/* 0. Section dividers
   --------------------------------------------------------------------------
   `.nav-section` sits alongside the shared `.pp-section` on each section, so
   the divider lives on its own class and main.css stays untouched.

   The rule is drawn by a pseudo-element floated up into the gap that
   `.pp-section`'s 58px bottom margin already creates, so spacing is unchanged -
   only the separator is added. `+` means the first section never gets one. */

.nav-page .nav-section + .nav-section {
   position: relative;
}

.nav-page .nav-section + .nav-section::before {
   content: "";
   position: absolute;
   top: -30px;
   inset-inline-start: 0;
   width: 100%;
   height: 1px;
   background: linear-gradient(90deg,
      transparent 0%,
      rgba(15, 31, 61, 0.13) 18%,
      rgba(15, 31, 61, 0.13) 82%,
      transparent 100%);
}

/* small diamond centred on the rule, echoing the .pp-hicon heading motif */
.nav-page .nav-section + .nav-section::after {
   content: "";
   position: absolute;
   top: -30px;
   inset-inline-start: 50%;
   width: 8px;
   height: 8px;
   background: var(--pp-b2);
   transform: translate(-50%, -50%) rotate(45deg);
   box-shadow: 0 0 0 5px #f7f7f7;
}

/* Adjacent margins collapse, so the gap is max(bottom, top):
      desktop  max(60, 50) = 60px  -> divider centred at -30px
      <=991px  max(48, 50) = 50px  -> divider centred at -25px          */
@media (max-width: 991px) {
   .nav-page .nav-section + .nav-section::before,
   .nav-page .nav-section + .nav-section::after {
      top: -25px;
   }
}


/* 1. Lead paragraph
   -------------------------------------------------------------------------- */

.nav-page .nav-lead {
   position: relative;
   overflow: hidden;
   padding: 38px 46px 38px 48px;
   background:
      radial-gradient(circle at 100% 0%, rgba(47, 107, 216, 0.1), transparent 44%),
      linear-gradient(140deg, var(--pp-soft) 0%, #ffffff 60%);
   border: 1px solid var(--pp-line);
   border-radius: 20px;
   box-shadow: 0 26px 58px -38px rgba(15, 31, 61, 0.55);
}

.nav-page .nav-lead::before {
   content: "";
   position: absolute;
   inset-inline-start: 0;
   top: 24px;
   bottom: 24px;
   width: 5px;
   border-radius: 0 5px 5px 0;
   background: linear-gradient(180deg, var(--pp-b1), var(--pp-b2));
}

/* soft diamond watermark, clipped by the card's overflow */
.nav-page .nav-lead::after {
   content: "";
   position: absolute;
   top: -52px;
   inset-inline-end: -52px;
   width: 180px;
   height: 180px;
   border-radius: 30px;
   transform: rotate(45deg);
   background: linear-gradient(140deg, rgba(26, 68, 153, 0.09), rgba(47, 107, 216, 0.02));
   pointer-events: none;
}

.nav-page .nav-lead p {
   position: relative;
   z-index: 1;
   margin: 0;
   font-size: 16.5px;
   line-height: 1.95;
   color: var(--pp-body);
}

/* editorial drop cap */
.nav-page .nav-lead p::first-letter {
   float: left;
   font-size: 56px;
   line-height: 0.84;
   font-weight: 900;
   color: var(--pp-b1);
   margin: 6px 14px 0 0;
}

/* opening line carries a little more weight than the body */
.nav-page .nav-lead p::first-line {
   font-weight: 600;
   color: var(--pp-ink);
}


/* 2. History - dark story panel with certification seals
   --------------------------------------------------------------------------
   Deliberately the one dark band in the content flow, so the page reads
   white lead -> dark story -> white cards instead of card after card. */

.nav-page .nav-story {
   position: relative;
   padding: 40px 42px;
   border-radius: 20px;
   overflow: hidden;
   background: linear-gradient(135deg, #061634 0%, #0b2b63 55%, #123f8f 100%);
   box-shadow: 0 34px 66px -38px rgba(6, 22, 52, 0.9);
}

/* soft light bloom, top-right */
.nav-page .nav-story::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.15), transparent 46%);
}

/* faint blueprint rules, bottom-left */
.nav-page .nav-story::after {
   content: "";
   position: absolute;
   inset-inline-start: -60px;
   bottom: -70px;
   width: 260px;
   height: 260px;
   pointer-events: none;
   opacity: 0.16;
   background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 13px);
   transform: rotate(-8deg);
}

.nav-page .nav-story__text {
   position: relative;
   z-index: 1;
   margin: 0;
   font-size: 16px;
   line-height: 1.9;
   color: rgba(255, 255, 255, 0.87);
}

.nav-page .nav-story__certs {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
   margin-top: 30px;
   padding-top: 28px;
   border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.nav-page .nav-story__cert {
   display: flex;
   align-items: center;
   gap: 13px;
   padding: 15px 18px;
   border-radius: 13px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #ffffff;
   font-size: 15.5px;
   font-weight: 800;
   line-height: 1.3;
   transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.nav-page .nav-story__cert:hover {
   transform: translateY(-3px);
   background: rgba(255, 255, 255, 0.14);
   border-color: rgba(255, 255, 255, 0.45);
}

.nav-page .nav-story__ico {
   flex-shrink: 0;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #0b2b63;
   background: #ffffff;
   box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.55);
}

.nav-page .nav-story__ico svg {
   width: 19px;
   height: 19px;
}


/* 3. Product forms
   -------------------------------------------------------------------------- */

.nav-page .nav-forms {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   margin-top: 24px;
}

.nav-page .nav-form {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 14px;
   padding: 24px 40% 24px 22px;   /* right padding clears the product photo */
   background: linear-gradient(155deg, #ffffff 0%, #eef3fb 100%);
   border: 1px solid #bac3d2;
   border-radius: 16px;
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Product photo fills the previously blank right side. The images are dark
   photographs rather than cut-out PNGs, so a gradient fade blends their left
   edge into the card instead of leaving a hard rectangle. */
.nav-page .nav-form__media {
   position: absolute;
   top: 0;
   inset-inline-end: 0;
   bottom: 0;
   width: 42%;
   z-index: 0;
   overflow: hidden;
}

/* The left edge is faded with a mask rather than a pale overlay. An overlay
   sat on top of the whole photo and washed it out; a mask fades the image to
   transparent so the card shows through, and the right side keeps full
   contrast. Only the first ~40% is feathered. */
.nav-page .nav-form__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   -webkit-mask-image: linear-gradient(90deg,
      transparent 0%, rgba(0, 0, 0, 0.45) 16%, rgba(0, 0, 0, 0.85) 30%, #000 42%);
   mask-image: linear-gradient(90deg, #00000073 0%, rgb(0 0 0) 16%, rgba(0, 0, 0, 0.85) 30%, #000 42%);
   transition: transform 0.45s ease;
}

.nav-page .nav-form:hover .nav-form__media img {
   transform: scale(1.07);
}

/* keep the icon and label above the photo */
.nav-page .nav-form__ico,
.nav-page .nav-form__name {
   position: relative;
   z-index: 1;
}

.nav-page .nav-form::after {
   content: "";
   position: absolute;
   inset-inline-start: 0;
   top: 0;
   width: 100%;
   height: 3px;
   z-index: 2;
   transform: scaleX(0);
   transform-origin: left;
   background: linear-gradient(90deg, var(--pp-b1), var(--pp-b2));
   transition: transform 0.35s ease;
}

.nav-page .nav-form:hover {
   transform: translateY(-4px);
   border-color: #c3d6f5;
   box-shadow: 0 26px 50px -30px rgba(15, 31, 61, 0.6);
}

.nav-page .nav-form:hover::after {
   transform: scaleX(1);
}

/* Brand-blue icon tile, coloured by default rather than a pale wash. */
.nav-page .nav-form__ico {
   width: 48px;
   height: 48px;
   border-radius: 13px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   background: linear-gradient(140deg, var(--pp-b1), var(--pp-b2));
   box-shadow: 0 12px 24px -12px rgba(26, 68, 153, 0.85);
   transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.nav-page .nav-form:hover .nav-form__ico {
   transform: translateY(-2px);
   background: linear-gradient(140deg, #0b2b63, var(--pp-b1));
   box-shadow: 0 16px 30px -12px rgba(11, 43, 99, 0.9);
}

.nav-page .nav-form__ico svg {
   width: 24px;
   height: 24px;
}

.nav-page .nav-form__name {
   font-size: 15.5px;
   font-weight: 800;
   color: var(--pp-ink);
   line-height: 1.35;
}


/* Intro line that introduces a grid inside a section. Its own class so the
   shared .pp-text stays untouched. */
.nav-page .nav-subline {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: #000000;
    font-weight: 700;
}

.nav-page .nav-forms + .nav-subline {
   margin-top: 32px;
   text-align: center;
}


/* 4. Material chips
   -------------------------------------------------------------------------- */

.nav-page .nav-mats {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 11px;
   margin-top: 22px;
}

/* Forces the 11 chips to break 6 on the first row, 5 on the second. A
   zero-height full-width flex item is used rather than a fixed grid so each
   chip keeps its natural pill width instead of being stretched to a column. */
.nav-page .nav-mats__break {
   flex-basis: 100%;
   height: 0;
   margin: 0;
   padding: 0;
   border: 0;
}

/* Solid brand-blue chips. The colour is supplied once as an "r,g,b" triplet in
   --mc and the fill, dot and shadow all derive from it, so recolouring a
   material is a one-line change. */
.nav-page .nav-mat {
   --mc: 26, 68, 153;
   display: inline-flex;
   align-items: center;
   padding: 11px 21px;
   background: #ffffff;
   border: 1px solid rgba(var(--mc), 0.45);
   border-radius: 999px;
   font-size: 14.5px;
   font-weight: 700;
   color: rgb(var(--mc));
   transition: transform 0.25s ease, border-color 0.25s ease,
      box-shadow 0.25s ease;
}

.nav-page .nav-mat:hover {
   transform: translateY(-2px);
   border-color: rgb(var(--mc));
   box-shadow: 0 14px 26px -18px rgba(var(--mc), 0.7);
}

/* All chips share the brand blue #1a4499 (--pp-b1), set via --mc on the base
   class above. Text on white measures 8.97:1 (WCAG AAA). To recolour every
   chip, change that single --mc line.

   Kept for reference - the per-material palette, if the colour-coded version
   is ever wanted again. Add these back and re-apply the matching
   `nav-mat--<name>` class to each chip in the markup; all values are WCAG AA
   for coloured text on white.
      stainless 43,95,143    duplex 15,107,99     inconel  26,68,153
      incoloy   91,63,168    monel  13,104,140    hastelloy 139,82,0
      nickel    47,107,47    cupro  150,75,48     titanium 74,85,104
      nimonic   163,48,107   a286   158,43,43                          */


/* 5. Why choose - hub & spokes infographic
   --------------------------------------------------------------------------
   Three items each side of a central brand hub. Hexagon number badges and
   angled panels echo the classic infographic look, in the site's own blues. */

.nav-page .nav-why {
   display: grid;
   grid-template-columns: 1fr minmax(190px, 230px) 1fr;
   align-items: center;
   column-gap: 34px;
   margin-top: 30px;
}

/* Equal rows: every spoke gets the same height whether its line wraps or not,
   so the two columns stay level and the connectors line up. */
.nav-page .nav-why__col {
   display: grid;
   grid-auto-rows: minmax(98px, 1fr);
   row-gap: 22px;
   align-content: center;
}

.nav-page .nav-why__item {
   position: relative;
   display: flex;
   align-items: stretch;
   gap: 4px;
   padding: 6px;
   background: linear-gradient(150deg, #ffffff 0%, #eef3fb 100%);
   border: 1px solid var(--pp-line);
   border-radius: 16px;
   box-shadow: 0 18px 40px -30px rgba(15, 31, 61, 0.6);
   transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ---- panel ---- */
.nav-page .nav-why__panel {
   flex: 1;
   display: flex;
   align-items: center;
   padding: 14px 20px;
   background: none;
   border: 0;
   box-shadow: none;
}

.nav-page .nav-why__col--l .nav-why__panel {
   text-align: right;
   justify-content: flex-end;
}

.nav-page .nav-why__col--r .nav-why__panel {
   text-align: left;
   justify-content: flex-start;
}

.nav-page .nav-why__text {
   font-size: 14.5px;
   font-weight: 600;
   line-height: 1.55;
   color: var(--pp-ink);
}

/* ---- hexagon number badge ---- */
/* Fixed width AND height, centred rather than stretched - otherwise the badge
   inherits the panel's height and a one-line spoke gets a squashed hexagon
   while a two-line spoke gets a tall one. drop-shadow is used instead of
   box-shadow because clip-path would crop a box-shadow away. */
.nav-page .nav-why__num {
   flex-shrink: 0;
   width: 75PX;
   height: 75PX;
   align-self: center;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 25px;
   font-weight: 900;
   line-height: 1;
   letter-spacing: 0.01em;
   color: #ffffff;
   background: linear-gradient(150deg, var(--pp-b1) 0%, var(--pp-b2) 100%);
   clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
   filter: drop-shadow(0 12px 18px rgba(26, 68, 153, 0.32));
   transition: transform 0.3s ease, filter 0.3s ease;
}


.nav-page .nav-why__item:hover {
   transform: translateY(-3px);
   border-color: #c3d6f5;
   box-shadow: 0 24px 46px -28px rgba(15, 31, 61, 0.65);
}

.nav-page .nav-why__item:hover .nav-why__num {
   transform: translateY(-3px);
   filter: drop-shadow(0 16px 22px rgba(26, 68, 153, 0.45));
}

/* ---- connector line + dot toward the hub ---- */
.nav-page .nav-why__item::after {
   content: "";
   position: absolute;
   top: 50%;
   width: 34px;
   height: 2px;
   background: linear-gradient(90deg, rgba(26, 68, 153, 0.45), rgba(26, 68, 153, 0.12));
   transform: translateY(-50%);
}

.nav-page .nav-why__col--l .nav-why__item::after { inset-inline-end: -34px; }
.nav-page .nav-why__col--r .nav-why__item::after {
   inset-inline-start: -34px;
   background: linear-gradient(90deg, rgba(26, 68, 153, 0.12), rgba(26, 68, 153, 0.45));
}

.nav-page .nav-why__item::before {
   content: "";
   position: absolute;
   top: 50%;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #ffffff;
   border: 2px solid var(--pp-b1);
   transform: translateY(-50%);
   z-index: 1;
}

.nav-page .nav-why__col--l .nav-why__item::before { inset-inline-end: -38px; }
.nav-page .nav-why__col--r .nav-why__item::before { inset-inline-start: -38px; }

/* ---- central hub ---- */
.nav-page .nav-why__hub {
   position: relative;
   aspect-ratio: 1;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(140deg, #061634 0%, #0b2b63 55%, #1a4499 100%);
   box-shadow: 0 34px 66px -34px rgba(6, 22, 52, 0.85);
}

.nav-page .nav-why__hubring {
   position: absolute;
   inset: -15px;
   border-radius: 50%;
   border: 1px dashed rgba(26, 68, 153, 0.35);
}

.nav-page .nav-why__hubinner {
   width: 74%;
   aspect-ratio: 1;
   border-radius: 50%;
   background: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 16px;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.nav-page .nav-why__hubinner img {
   width: 100%;
   height: auto;
   display: block;
}

/* 6. Industries
   -------------------------------------------------------------------------- */

.nav-page .nav-inds {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   margin-top: 24px;
}

.nav-page .nav-ind {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 20px 18px;
   background: linear-gradient(150deg, #f5f9ff, #ffffff);
   border: 1px solid #dbe6fa;
   border-radius: 14px;
   box-shadow: 0 14px 34px -26px rgba(15, 31, 61, 0.4);
   transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.nav-page .nav-ind:hover {
   transform: translateY(-3px);
   border-color: #b9d0f4;
   box-shadow: 0 24px 44px -26px rgba(15, 31, 61, 0.55);
}

.nav-page .nav-ind__ico {
   flex-shrink: 0;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   background: linear-gradient(135deg, #e34b4b 0%, #b01d1d 100%);
   box-shadow: 0 8px 18px -6px rgba(211, 47, 47, 0.5);
   transition: transform 0.3s ease;
}

.nav-page .nav-ind:hover .nav-ind__ico {
   transform: translateY(-2px);
}

.nav-page .nav-ind__ico svg {
   width: 21px;
   height: 21px;
}

.nav-page .nav-ind__name {
   font-size: 15px;
   font-weight: 700;
   color: var(--pp-ink);
   line-height: 1.35;
}


/* 7. Reach + contact panel
   -------------------------------------------------------------------------- */

.nav-page .nav-reach p {
   margin: 0;
   font-size: 15.5px;
   line-height: 1.85;
   color: var(--pp-body);
}

.nav-page .nav-contact {
   margin-top: 26px;
   padding: 30px 34px;
   border-radius: 18px;
   background: linear-gradient(135deg, #061634 0%, #0b2b63 52%, #123f8f 100%);
   box-shadow: 0 30px 60px -34px rgba(6, 22, 52, 0.85);
}

.nav-page .nav-contact p {
   margin: 0 0 20px;
   font-size: 16px;
   line-height: 1.8;
   color: rgba(255, 255, 255, 0.86);
}

/* Links inside the dark panel: the default link colour is unreadable on navy. */
.nav-page .nav-contact__inline {
   color: #ffffff;
   font-weight: 700;
   text-decoration: underline;
   text-underline-offset: 3px;
   text-decoration-color: rgba(255, 255, 255, 0.45);
   transition: text-decoration-color 0.3s ease;
}

.nav-page .nav-contact__inline:hover {
   color: #ffffff;
   text-decoration-color: #ffffff;
}

.nav-page .nav-contact__links {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
}

.nav-page .nav-contact__link {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 7px 18px 7px 8px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.24);
   color: #ffffff;
   font-size: 14px;
   font-weight: 700;
   line-height: 1;
   transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.nav-page .nav-contact__link:hover {
   transform: translateY(-3px);
   background: rgba(255, 255, 255, 0.17);
   border-color: rgba(255, 255, 255, 0.5);
   color: #ffffff;
}

/* Email is the primary action: solid brand red, same as the header's
   "Get a quote" button (#c92032). White text measures 5.62:1 (AA). */
.nav-page .nav-contact__link--mail {
   background: linear-gradient(135deg, #c92032 0%, #9e1420 100%);
   border-color: rgba(255, 255, 255, 0.3);
   box-shadow: 0 14px 30px -14px rgba(158, 20, 32, 0.9);
}

.nav-page .nav-contact__link--mail:hover {
   background: linear-gradient(135deg, #d81f26 0%, #a81d2b 100%);
   border-color: rgba(255, 255, 255, 0.55);
   box-shadow: 0 18px 36px -14px rgba(158, 20, 32, 0.95);
}

.nav-page .nav-contact__link--mail span {
   background: rgba(255, 255, 255, 0.22);
}

.nav-page .nav-contact__link span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.16);
}

.nav-page .nav-contact__link svg {
   width: 14px;
   height: 14px;
}


/* 8. Body prose
   -------------------------------------------------------------------------- */

.nav-page .nav-prose {
   margin: 0 0 16px;
   font-size: 15.5px;
   line-height: 1.85;
   color: var(--pp-body);
}

.nav-page .nav-prose:last-child {
   margin-bottom: 0;
}


/* 9. Compliance chain
   --------------------------------------------------------------------------
   The four steps flex to fill the container edge to edge; each circle keeps a
   fixed size (--nav-circle) and centres inside its step, so the leftover space
   lands in the gaps between them and the dotted connectors stretch to cover it.
   Every offset below derives from --nav-circle, so changing that one value
   rescales the whole row.

   Steps alternate treatment - 1 and 3 filled with the brand gradient, 2 and 4
   outlined - so the row has rhythm instead of four identical discs. */

.nav-page .nav-chain {
   --nav-circle: 230px;
   position: relative;
   display: flex;
   align-items: flex-start;
   gap: 0;
   margin: 44px 0 32px;
}

.nav-page .nav-chain__step {
   position: relative;
   flex: 1 1 0;
   min-width: 0;
}

.nav-page .nav-chain__step:nth-child(odd) {
   margin-top: 28px;
}

/* offset backing disc - on the step, not the circle, because a negative
   z-index child paints above its own parent's background */
.nav-page .nav-chain__step::before {
   content: "";
   position: absolute;
   top: 13px;
   inset-inline-start: calc(50% - (var(--nav-circle) / 2) + 12px);
   width: var(--nav-circle);
   max-width: 100%;
   aspect-ratio: 1;
   border-radius: 50%;
   background: linear-gradient(150deg, #e6ecf7 0%, #d5dfef 100%);
   z-index: 0;
   pointer-events: none;
   transition: transform 0.3s ease;
}

.nav-page .nav-chain__step:hover::before {
   transform: translate(3px, 4px);
}

.nav-page .nav-chain__circle {
   position: relative;
   z-index: 2;
   width: var(--nav-circle);
   max-width: 100%;
   margin: 0 auto;
   aspect-ratio: 1;
   border-radius: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   gap: 9px;
   padding: 14% 16%;
   transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.nav-page .nav-chain__step:hover .nav-chain__circle {
   transform: translateY(-7px);
}

.nav-page .nav-chain__ico {
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.35s ease;
}

.nav-page .nav-chain__step:hover .nav-chain__ico {
   transform: translateY(-2px) scale(1.06);
}

.nav-page .nav-chain__ico svg {
   width: 42px;
   height: 42px;
}

.nav-page .nav-chain__name {
   font-size: 14.5px;
   font-weight: 800;
   line-height: 1.25;
   letter-spacing: 0.03em;
   text-transform: uppercase;
}

.nav-page .nav-chain__for {
   font-size: 13px;
   font-weight: 500;
   line-height: 1.5;
}

/* --- filled variant: steps 1 and 3 --- */
.nav-page .nav-chain__step:nth-child(odd) .nav-chain__circle {
   background: linear-gradient(150deg, #0b2b63 0%, #1a4499 55%, #2f6bd8 100%);
   border: 1px solid rgba(255, 255, 255, 0.16);
   box-shadow: 0 30px 54px -26px rgba(11, 43, 99, 0.75),
      inset 0 0 0 7px rgba(255, 255, 255, 0.07);
}

.nav-page .nav-chain__step:nth-child(odd) .nav-chain__ico { color: #ffffff; }
.nav-page .nav-chain__step:nth-child(odd) .nav-chain__name { color: #ffffff; }
.nav-page .nav-chain__step:nth-child(odd) .nav-chain__for {
   color: rgba(255, 255, 255, 0.84);
}

.nav-page .nav-chain__step:nth-child(odd):hover .nav-chain__circle {
   box-shadow: 0 38px 62px -26px rgba(11, 43, 99, 0.8),
      inset 0 0 0 7px rgba(255, 255, 255, 0.12);
}

/* --- outlined variant: steps 2 and 4 --- */
.nav-page .nav-chain__step:nth-child(even) .nav-chain__circle {
   background: linear-gradient(150deg, #ffffff 0%, #f4f8ff 100%);
   border: 2px solid rgba(26, 68, 153, 0.3);
   box-shadow: 0 26px 48px -28px rgba(15, 31, 61, 0.5);
}

.nav-page .nav-chain__step:nth-child(even) .nav-chain__ico { color: var(--pp-b1); }
.nav-page .nav-chain__step:nth-child(even) .nav-chain__name { color: var(--pp-ink); }
.nav-page .nav-chain__step:nth-child(even) .nav-chain__for { color: var(--pp-body); }

.nav-page .nav-chain__step:nth-child(even):hover .nav-chain__circle {
   border-color: var(--pp-b2);
   box-shadow: 0 34px 56px -26px rgba(15, 31, 61, 0.55);
}

/* connectors - span the whole gap, overlapping 28px into each circle */
.nav-page .nav-chain__step:not(:last-child)::after {
   content: "";
   position: absolute;
   z-index: 1;
   inset-inline-start: calc(50% + (var(--nav-circle) / 2) - 28px);
   width: calc(100% - var(--nav-circle) + 56px);
   height: 70px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100% 100%;
   pointer-events: none;
}

.nav-page .nav-chain__step:nth-child(odd)::after {
   bottom: 4px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 70' preserveAspectRatio='none'%3E%3Cpath d='M8 8C34 62 116 62 142 8' fill='none' stroke='%231a4499' stroke-opacity='0.15' stroke-width='16' stroke-linecap='round'/%3E%3Cpath d='M8 8C34 62 116 62 142 8' fill='none' stroke='%231a4499' stroke-width='4' stroke-linecap='round' stroke-dasharray='0.1 10'/%3E%3Ccircle cx='75' cy='46' r='9' fill='%23ffffff' stroke='%231a4499' stroke-width='5'/%3E%3C/svg%3E");
}

.nav-page .nav-chain__step:nth-child(even)::after {
   top: -6px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 70' preserveAspectRatio='none'%3E%3Cpath d='M8 62C34 8 116 8 142 62' fill='none' stroke='%231a4499' stroke-opacity='0.15' stroke-width='16' stroke-linecap='round'/%3E%3Cpath d='M8 62C34 8 116 8 142 62' fill='none' stroke='%231a4499' stroke-width='4' stroke-linecap='round' stroke-dasharray='0.1 10'/%3E%3Ccircle cx='75' cy='24' r='9' fill='%23ffffff' stroke='%231a4499' stroke-width='5'/%3E%3C/svg%3E");
}


/* 10. Test & inspection list
   --------------------------------------------------------------------------
   Two columns of check cards. Grid rows equalise height automatically, and an
   odd final item stretches across both columns so the row never ends on a
   half-empty gap. */

.nav-page .nav-tests {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 14px;
   margin-top: 26px;
}

.nav-page .nav-test {
   position: relative;
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 18px 22px 18px 24px;
   background: linear-gradient(115deg, #ffffff 0%, #f7faff 100%);
   border: 1px solid rgba(26, 68, 153, 0.3);
   border-radius: 14px;
   overflow: hidden;
   transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

/* left accent rail, thickens on hover */
.nav-page .nav-test::before {
   content: "";
   position: absolute;
   inset-inline-start: 0;
   top: 0;
   bottom: 0;
   width: 4px;
   background: linear-gradient(180deg, var(--pp-b1), var(--pp-b2));
   transition: width 0.28s ease;
}

/* faint corner wash so the card is not a flat rectangle */
.nav-page .nav-test::after {
   content: "";
   position: absolute;
   inset-inline-end: -40px;
   top: -40px;
   width: 120px;
   height: 120px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(47, 107, 216, 0.09), transparent 68%);
   pointer-events: none;
}

.nav-page .nav-test:hover {
   transform: translateY(-3px);
   border-color: var(--pp-b2);
   box-shadow: 0 22px 40px -26px rgba(26, 68, 153, 0.55);
}

.nav-page .nav-test:hover::before {
   width: 7px;
}

/* An odd last item is centred on its own row rather than stretched: it still
   spans both columns, but keeps one column's width so it matches every other
   card. 50% - 7px is one column, given the 14px gap. */
.nav-page .nav-test:last-child:nth-child(odd) {
   grid-column: 1 / -1;
   width: calc(50% - 7px);
   margin-inline: auto;
}

.nav-page .nav-test__ico {
   flex-shrink: 0;
   width: 34px;
   height: 34px;
   border-radius: 11px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   background: linear-gradient(140deg, var(--pp-b1), var(--pp-b2));
   box-shadow: 0 10px 20px -10px rgba(26, 68, 153, 0.85);
   transition: transform 0.28s ease;
}

.nav-page .nav-test:hover .nav-test__ico {
   transform: scale(1.08) rotate(-4deg);
}

.nav-page .nav-test__ico svg {
   width: 16px;
   height: 16px;
}

.nav-page .nav-test__txt {
   position: relative;
   z-index: 1;
   font-size: 14.5px;
   font-weight: 600;
   line-height: 1.55;
   color: var(--pp-ink);
}


/* Certificate page: no drop cap on the lead paragraph. The editorial drop cap
   suits a long block of prose (About, Quality); here the lead is two short
   sentences and the oversized "O" dominates it. Scoped to .cert-page so the
   other pages keep theirs. */

.nav-page.cert-page .nav-lead p::first-letter {
   float: none;
   font-size: inherit;
   line-height: inherit;
   font-weight: inherit;
   color: inherit;
   margin: 0;
}


/* 11. Certificate grid
   --------------------------------------------------------------------------
   Each card is a single <a> wrapping the certificate preview, so the whole
   tile is one keyboard-reachable link that opens the PDF in a new tab.
   The previews are A4, but the frame is cropped to 1/1.05 from the top so the
   cards are not absurdly tall - the full page is one click away anyway.

   The track is 6 columns with each card spanning 2, which is what allows the
   final short row to be centred rather than left hanging. */

.nav-page .nav-certs {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   column-gap: 26px;
   row-gap: 40px;
   margin-top: 30px;
}

/* exactly 5 cards: the 4th starts half a column in, centring the last row.
   :nth-last-child(2) means this only applies when 5 is the real count. */
.nav-page .nav-cert:nth-child(4):nth-last-child(2) {
   grid-column: 2 / span 2;
}

.nav-page .nav-cert {
   position: relative;
   grid-column: span 2;
   display: flex;
   flex-direction: column;
   background: #ffffff;
   border: 1px solid rgba(26, 68, 153, 0.28);
   border-radius: 16px;
   overflow: hidden;
   text-decoration: none;
   transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.nav-page .nav-cert:hover,
.nav-page .nav-cert:focus-visible {
   transform: translateY(-5px);
   border-color: var(--pp-b2);
   box-shadow: 0 30px 54px -28px rgba(26, 68, 153, 0.6);
}

.nav-page .nav-cert:focus-visible {
   outline: 3px solid var(--pp-b2);
   outline-offset: 3px;
}

.nav-page .nav-cert__frame {
   position: relative;
   aspect-ratio: 1 / 1.05;
   overflow: hidden;
   background: var(--pp-soft);
   border-bottom: 1px solid var(--pp-line);
}

.nav-page .nav-cert__frame img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top center;
   display: block;
   transition: transform 0.5s ease;
}

.nav-page .nav-cert:hover .nav-cert__frame img {
   transform: scale(1.04);
}

/* wash + view affordance, revealed on hover */
.nav-page .nav-cert__frame::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(6, 22, 52, 0) 45%, rgba(6, 22, 52, 0.55) 100%);
   opacity: 0;
   transition: opacity 0.3s ease;
}

.nav-page .nav-cert:hover .nav-cert__frame::after {
   opacity: 1;
}

.nav-page .nav-cert__view {
   position: absolute;
   z-index: 1;
   inset-inline-start: 50%;
   bottom: 18px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 9px 18px;
   border-radius: 999px;
   background: #ffffff;
   color: var(--pp-b1);
   font-size: 13px;
   font-weight: 800;
   line-height: 1;
   white-space: nowrap;
   box-shadow: 0 14px 26px -14px rgba(6, 22, 52, 0.8);
   opacity: 0;
   transform: translate(-50%, 10px);
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-page .nav-cert:hover .nav-cert__view,
.nav-page .nav-cert:focus-visible .nav-cert__view {
   opacity: 1;
   transform: translate(-50%, 0);
}

.nav-page .nav-cert__view svg {
   width: 14px;
   height: 14px;
}

.nav-page .nav-cert__foot {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px 18px;
}

.nav-page .nav-cert__ico {
   flex-shrink: 0;
   width: 34px;
   height: 34px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   background: linear-gradient(140deg, var(--pp-b1), var(--pp-b2));
   box-shadow: 0 10px 20px -10px rgba(26, 68, 153, 0.85);
}

.nav-page .nav-cert__ico svg {
   width: 16px;
   height: 16px;
}

.nav-page .nav-cert__name {
   font-size: 15px;
   font-weight: 800;
   line-height: 1.3;
   color: var(--pp-ink);
}

.nav-page .nav-cert__meta {
   display: block;
   margin-top: 2px;
   font-size: 12.5px;
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--pp-b2);
}


/* 12. Contact page - details panel + form
   --------------------------------------------------------------------------
   Two columns: a dark details panel on the left (matching the story panel's
   treatment) and a white form card on the right. The form is markup and
   styling only - there is no handler wired to it yet. */

.nav-page .nav-touch {
   display: grid;
   grid-template-columns: 0.88fr 1.12fr;
   gap: 26px;
   margin-top: 30px;
   align-items: start;
}

/* ---- left: details panel ---- */
.nav-page .nav-touch__info {
   position: relative;
   overflow: hidden;
   height: 100%;
   padding: 38px 34px;
   border-radius: 20px;
   background: linear-gradient(140deg, #061634 0%, #0b2b63 55%, #123f8f 100%);
   box-shadow: 0 34px 66px -38px rgba(6, 22, 52, 0.9);
}

.nav-page .nav-touch__info::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.15), transparent 46%);
}

.nav-page .nav-touch__info::after {
   content: "";
   position: absolute;
   inset-inline-start: -60px;
   bottom: -70px;
   width: 240px;
   height: 240px;
   pointer-events: none;
   opacity: 0.16;
   background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 13px);
   transform: rotate(-8deg);
}

.nav-page .nav-touch__title {
   position: relative;
   z-index: 1;
   margin: 0 0 8px;
   font-size: 22px;
   font-weight: 800;
   line-height: 1.3;
   color: #ffffff;
}

.nav-page .nav-touch__sub {
   position: relative;
   z-index: 1;
   margin: 0 0 30px;
   font-size: 14.5px;
   line-height: 1.7;
   color: rgba(255, 255, 255, 0.78);
}

.nav-page .nav-cline {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: flex-start;
   gap: 16px;
}

.nav-page .nav-cline + .nav-cline {
   margin-top: 24px;
   padding-top: 24px;
   border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* let the text column shrink; without min-width:0 a flex item will not go
   narrower than its longest word, which is what pushed the email off-panel */
.nav-page .nav-cline > span:last-child {
   min-width: 0;
}

.nav-page .nav-cline__ico {
   flex-shrink: 0;
   width: 46px;
   height: 46px;
   border-radius: 13px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   background: linear-gradient(140deg, var(--pp-b1), var(--pp-b2));
   box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.7);
}

.nav-page .nav-cline__ico svg {
   width: 20px;
   height: 20px;
}

.nav-page .nav-cline__label {
   display: block;
   margin-bottom: 3px;
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: 0.09em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.58);
}

.nav-page .nav-cline__text {
   display: block;
   font-size: 15.5px;
   font-weight: 600;
   line-height: 1.6;
   color: #ffffff;
   overflow-wrap: anywhere;
}

.nav-page .nav-cline__text a {
   color: #ffffff;
   text-decoration: none;
   transition: color 0.25s ease;
}

.nav-page .nav-cline__text a:hover {
   color: #9fc2ff;
}

/* ---- right: form card ---- */
.nav-page .nav-touch__form {
   padding: 34px 32px;
   border-radius: 20px;
   background: #ffffff;
   border: 1px solid var(--pp-line);
   box-shadow: 0 26px 56px -38px rgba(15, 31, 61, 0.5);
}

.nav-page .nav-cform {
   margin: 0;
}

.nav-page .nav-fgrid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px;
}

.nav-page .nav-field {
   display: flex;
   flex-direction: column;
   gap: 7px;
}

.nav-page .nav-field--full {
   grid-column: 1 / -1;
}

.nav-page .nav-label {
   font-size: 13px;
   font-weight: 700;
   color: var(--pp-ink);
}

.nav-page .nav-label i {
   font-style: normal;
   color: #c92032;
}

.nav-page .nav-input,
.nav-page .nav-textarea {
   width: 100%;
   padding: 13px 16px;
   font-family: inherit;
   font-size: 14.5px;
   font-weight: 500;
   color: var(--pp-ink);
   background: #f7faff;
   border: 1px solid rgba(26, 68, 153, 0.22);
   border-radius: 12px;
   transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.nav-page .nav-input::placeholder,
.nav-page .nav-textarea::placeholder {
   color: #9aa8bf;
   font-weight: 400;
}

.nav-page .nav-input:focus,
.nav-page .nav-textarea:focus {
   outline: none;
   background: #ffffff;
   border-color: var(--pp-b2);
   box-shadow: 0 0 0 4px rgba(47, 107, 216, 0.14);
}

.nav-page .nav-textarea {
   min-height: 150px;
   resize: vertical;
}

.nav-page .nav-submit {
   display: inline-flex;
   align-items: center;
   gap: 11px;
   padding: 14px 30px;
   border: 0;
   border-radius: 999px;
   font-family: inherit;
   font-size: 15px;
   font-weight: 800;
   line-height: 1;
   color: #ffffff;
   cursor: pointer;
   background: linear-gradient(135deg, #c92032 0%, #9e1420 100%);
   box-shadow: 0 16px 32px -16px rgba(158, 20, 32, 0.9);
   transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.nav-page .nav-submit:hover {
   transform: translateY(-3px);
   background: linear-gradient(135deg, #d81f26 0%, #a81d2b 100%);
   box-shadow: 0 22px 38px -16px rgba(158, 20, 32, 0.95);
}

.nav-page .nav-submit:focus-visible {
   outline: 3px solid var(--pp-b2);
   outline-offset: 3px;
}

.nav-page .nav-submit svg {
   width: 16px;
   height: 16px;
}

.nav-page .nav-formnote {
   margin: 16px 0 0;
   font-size: 12.5px;
   line-height: 1.6;
   color: var(--pp-body);
}


/* 13. Map embed
   --------------------------------------------------------------------------
   The Google embed ships with fixed width/height attributes; the wrapper
   overrides them with an aspect-ratio box so the map scales with the column
   instead of overflowing. Ratio flattens on wide screens and squares up on
   phones, where a letterbox map is unusable. */

.nav-page .nav-map {
   position: relative;
   aspect-ratio: 16 / 6;
   overflow: hidden;
   border-radius: 20px;
   border: 3px solid rgba(26, 68, 153, 0.3);
   background: var(--pp-soft);
   box-shadow: 0 26px 56px -38px rgba(15, 31, 61, 0.5);
   transition: border-color 0.3s ease;
}

.nav-page .nav-map:hover {
   border-color: var(--pp-b2);
}

.nav-page .nav-map iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
}


/* 13b. Contact directory
   --------------------------------------------------------------------------
   Contact page only. Uniform team cards: navy band, initials avatar riding
   the band edge, contact lines, and a three-way Call / WhatsApp / Email
   action bar. Also the pill buttons under the details panel. Brand colours
   only; nothing here touches the shared panel or form rules above. */

/* ---- pill buttons on the dark details panel ---- */
.nav-page .nav-dbtn-row {
   position: relative;
   z-index: 1;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.nav-page .nav-touch__cta {
   margin-top: 30px;
   padding-top: 24px;
   border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-page .nav-dbtn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   min-height: 42px;
   padding: 9px 18px;
   border-radius: 999px;
   font-size: 14px;
   font-weight: 700;
   line-height: 1;
   color: #ffffff;
   text-decoration: none;
   border: 1px solid rgba(255, 255, 255, 0.35);
   background: rgba(255, 255, 255, 0.08);
   transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.nav-page .nav-dbtn svg,
.nav-page .nav-dbtn i {
   width: 16px;
   height: 16px;
   font-size: 16px;
   line-height: 1;
}

.nav-page .nav-dbtn:hover {
   background: rgba(255, 255, 255, 0.18);
   border-color: rgba(255, 255, 255, 0.7);
   color: #ffffff;
   transform: translateY(-2px);
}

.nav-page .nav-dbtn--solid {
   color: var(--pp-b1);
   background: #ffffff;
   border-color: #ffffff;
}

.nav-page .nav-dbtn--solid:hover {
   color: #c92032;
   background: #ffffff;
   border-color: #ffffff;
}

/* ---- team grid ---- */
.nav-page .nav-team__lead {
   /* max-width: 760px; */
   margin: -6px 0 30px;
   font-size: 16px;
   line-height: 1.75;
   color: var(--pp-body);
}

/* team cards: a navy corner that wipes diagonally across the whole card on
   hover, flipping the text to white as it passes. Flex rather than grid so a
   short last row stays centred. */
.nav-page .nav-tc {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 44px 26px;
   margin-top: 18px;
}

.nav-page .nav-tc__card {
   position: relative;
   isolation: isolate;
   flex: 0 1 calc(33.333% - 18px);
   min-width: 280px;
   display: flex;
   flex-direction: column;
   padding: 34px 26px 26px;
   border-radius: 20px;
   background: #ffffff;
   border: 1px solid var(--pp-line);
   box-shadow: 0 24px 48px -36px rgba(15, 31, 61, 0.5);
   /* the card hangs from the ring, so it turns about that point */
   transform-origin: 50% -14px;
   transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.nav-page .nav-tc__card:hover,
.nav-page .nav-tc__card:focus-within {
   border-color: transparent;
   box-shadow: 0 40px 64px -32px rgba(6, 22, 52, 0.62);
   animation: navTcSwing 1s ease-in-out;
}

@keyframes navTcSwing {
   0% {
      transform: rotate(0deg);
   }

   25% {
      transform: rotate(-1.6deg);
   }

   55% {
      transform: rotate(1deg);
   }

   80% {
      transform: rotate(-0.4deg);
   }

   100% {
      transform: rotate(0deg);
   }
}

/* the ring it hangs on, straddling the top edge */
.nav-page .nav-tc__hook {
   position: absolute;
   top: -15px;
   inset-inline-start: 50%;
   z-index: 3;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: 3px solid #b9c6da;
   background: transparent;
   transform: translateX(-50%);
   box-shadow: 0 2px 3px rgba(15, 31, 61, 0.28), inset 0 -1px 2px rgba(255, 255, 255, 0.85);
}

/* the punched hole the ring sits in */
.nav-page .nav-tc__hole {
   position: absolute;
   top: 8px;
   inset-inline-start: 50%;
   z-index: 2;
   width: 14px;
   height: 9px;
   border-radius: 50%;
   background: #ffffff;
   transform: translateX(-50%);
   box-shadow: inset 0 2px 3px rgba(6, 22, 52, 0.45);
}

/* the wipe: a corner triangle at rest, the whole card on hover. It carries
   its own radius because the card no longer clips (the ring hangs out). */
.nav-page .nav-tc__wipe {
   position: absolute;
   inset: 0;
   z-index: -1;
   border-radius: 20px;
   background: linear-gradient(140deg, #061634 0%, #0b2b63 55%, #123f8f 100%);
   clip-path: polygon(0 0, 100% 0, 100% 26%, 0 0);
   transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav-page .nav-tc__card--lead .nav-tc__wipe {
   background: linear-gradient(140deg, #6d0f1b 0%, #a81a2b 55%, #c92032 100%);
}

.nav-page .nav-tc__card:hover .nav-tc__wipe,
.nav-page .nav-tc__card:focus-within .nav-tc__wipe {
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* the running number, ghosted into the paper */
.nav-page .nav-tc__no {
   position: absolute;
   inset-inline-end: 18px;
   bottom: 6px;
   font-size: 74px;
   font-weight: 900;
   line-height: 1;
   letter-spacing: -0.05em;
   pointer-events: none;
   user-select: none;
   color: rgba(15, 31, 61, 0.055);
   transition: color 0.5s ease;
}

.nav-page .nav-tc__card:hover .nav-tc__no,
.nav-page .nav-tc__card:focus-within .nav-tc__no {
   color: rgba(255, 255, 255, 0.1);
}

/* initials sit on the corner triangle from the start */
.nav-page .nav-tc__ini {
   position: absolute;
   top: 16px;
   inset-inline-end: 20px;
   font-size: 14px;
   font-weight: 800;
   letter-spacing: 0.1em;
   color: rgba(255, 255, 255, 0.92);
}

.nav-page .nav-tc__top {
   position: relative;
   margin-bottom: 20px;
   padding-bottom: 18px;
   border-bottom: 1px dashed var(--pp-line);
   transition: border-color 0.5s ease;
}

.nav-page .nav-tc__card:hover .nav-tc__top,
.nav-page .nav-tc__card:focus-within .nav-tc__top {
   border-bottom-color: rgba(255, 255, 255, 0.25);
}

.nav-page .nav-tc__name {
   margin: 0 0 6px;
   padding-inline-end: 44px;
   font-size: 20px;
   font-weight: 800;
   line-height: 1.25;
   color: var(--pp-ink);
   transition: color 0.45s ease 0.06s;
}

.nav-page .nav-tc__role {
   margin: 0;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--pp-b2);
   transition: color 0.45s ease 0.06s;
}

.nav-page .nav-tc__card:hover .nav-tc__name,
.nav-page .nav-tc__card:focus-within .nav-tc__name {
   color: #ffffff;
}

.nav-page .nav-tc__card:hover .nav-tc__role,
.nav-page .nav-tc__card:focus-within .nav-tc__role {
   color: rgba(255, 255, 255, 0.68);
}

.nav-page .nav-tc__lines {
   position: relative;
   flex: 1 1 auto;
   list-style: none;
   margin: 0 0 22px;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.nav-page .nav-tc__lines li {
   display: flex;
   align-items: flex-start;
   gap: 11px;
   min-width: 0;
}

.nav-page .nav-tc__lines svg {
   flex-shrink: 0;
   width: 16px;
   height: 16px;
   margin-top: 2px;
   color: var(--pp-b2);
   transition: color 0.45s ease 0.06s;
}

.nav-page .nav-tc__lines a,
.nav-page .nav-tc__lines span {
   min-width: 0;
   font-size: 14.5px;
   font-weight: 600;
   line-height: 1.5;
   color: var(--pp-body);
   text-decoration: none;
   overflow-wrap: anywhere;
   transition: color 0.45s ease 0.06s;
}

.nav-page .nav-tc__card:hover .nav-tc__lines svg,
.nav-page .nav-tc__card:focus-within .nav-tc__lines svg {
   color: #8fb8ff;
}

.nav-page .nav-tc__card:hover .nav-tc__lines a,
.nav-page .nav-tc__card:hover .nav-tc__lines span,
.nav-page .nav-tc__card:focus-within .nav-tc__lines a,
.nav-page .nav-tc__card:focus-within .nav-tc__lines span {
   color: rgba(255, 255, 255, 0.88);
}

.nav-page .nav-tc__lines a:hover {
   text-decoration: underline;
   text-underline-offset: 3px;
}

.nav-page .nav-tc__acts {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
}

.nav-page .nav-tc__btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 11px 18px;
   border-radius: 999px;
   font-size: 12.5px;
   font-weight: 700;
   line-height: 1;
   white-space: nowrap;
   text-decoration: none;
   border: 1px solid transparent;
   transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.22s ease;
}

.nav-page .nav-tc__btn svg {
   width: 15px;
   height: 15px;
}

.nav-page .nav-tc__btn i {
   font-size: 15px;
   line-height: 1;
}

.nav-page .nav-tc__btn--call {
   color: #ffffff;
   background: linear-gradient(135deg, var(--pp-b2), var(--pp-b1));
   box-shadow: 0 16px 26px -18px rgba(26, 68, 153, 0.95);
}

/* once the card goes navy the blue button would vanish into it, so it
   flips to white */
.nav-page .nav-tc__card:hover .nav-tc__btn--call,
.nav-page .nav-tc__card:focus-within .nav-tc__btn--call {
   color: #0b2b63;
   background: #ffffff;
   box-shadow: 0 16px 26px -18px rgba(0, 0, 0, 0.6);
}

.nav-page .nav-tc__card--lead:hover .nav-tc__btn--call,
.nav-page .nav-tc__card--lead:focus-within .nav-tc__btn--call {
   color: #a81a2b;
}

.nav-page .nav-tc__btn--wa {
   color: #ffffff;
   background: #1f9d55;
   box-shadow: 0 16px 26px -18px rgba(31, 157, 85, 0.95);
}

.nav-page .nav-tc__btn:hover {
   transform: translateY(-2px);
}

.nav-page .nav-tc__btn--wa:hover {
   color: #ffffff;
   background: #178144;
}

.nav-page .nav-tc__btn:focus-visible {
   outline: 2px solid #ffffff;
   outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

   .nav-page .nav-tc__card,
   .nav-page .nav-tc__wipe,
   .nav-page .nav-tc__btn {
      transition-duration: 0.01ms;
   }

   .nav-page .nav-tc__card:hover,
   .nav-page .nav-tc__card:focus-within {
      animation: none;
   }

   .nav-page .nav-tc__btn:hover {
      transform: none;
   }
}

@media (max-width: 1199px) {
   .nav-page .nav-tc {
      gap: 20px;
   }

   .nav-page .nav-tc__card {
      flex-basis: calc(33.333% - 14px);
      padding: 26px 22px 22px;
   }

   .nav-page .nav-tc__name {
      font-size: 18.5px;
   }
}

@media (max-width: 991px) {
   .nav-page .nav-tc__card {
      flex-basis: calc(50% - 10px);
   }
}

@media (max-width: 575px) {
   .nav-page .nav-team__lead {
      font-size: 15px;
   }

   .nav-page .nav-tc {
      gap: 16px;
   }

   .nav-page .nav-tc__card {
      flex-basis: 100%;
      min-width: 0;
      padding: 24px 20px 20px;
   }

   .nav-page .nav-tc__no {
      font-size: 62px;
   }

   .nav-page .nav-tc__btn {
      flex: 1 1 auto;
   }

   .nav-page .nav-dbtn {
      flex: 1 1 auto;
      justify-content: center;
   }
}


/* 14. 404 page
   --------------------------------------------------------------------------
   Scoped to .err-page. The hero drops to a single column here because there
   is no stats panel to sit beside the title on an error page. */

.nav-page.err-page .pp-hero__grid {
   grid-template-columns: 1fr;
}

.nav-page .nav-404 {
   position: relative;
   overflow: hidden;
   padding: 54px 40px 48px;
   text-align: center;
   border-radius: 22px;
   background:
      radial-gradient(circle at 50% 0%, rgba(47, 107, 216, 0.11), transparent 58%),
      linear-gradient(150deg, #ffffff 0%, var(--pp-soft) 100%);
   border: 1px solid var(--pp-line);
   box-shadow: 0 30px 62px -40px rgba(15, 31, 61, 0.55);
}

/* faint blueprint rules behind the numeral */
.nav-page .nav-404::before {
   content: "";
   position: absolute;
   inset-inline-start: 50%;
   top: -40px;
   width: 340px;
   height: 340px;
   transform: translateX(-50%) rotate(-8deg);
   opacity: 0.5;
   pointer-events: none;
   background: repeating-linear-gradient(135deg, rgba(26, 68, 153, 0.09) 0 1px, transparent 1px 15px);
}

.nav-page .nav-404__code {
   position: relative;
   z-index: 1;
   display: block;
   font-size: clamp(84px, 15vw, 156px);
   font-weight: 900;
   line-height: 0.92;
   letter-spacing: -0.03em;
   background: linear-gradient(150deg, #0b2b63 0%, #1a4499 50%, #2f6bd8 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.nav-page .nav-404__title {
   position: relative;
   z-index: 1;
   margin: 12px 0 0;
   font-size: 28px;
   font-weight: 800;
   line-height: 1.25;
   color: var(--pp-ink);
}

.nav-page .nav-404__text {
   position: relative;
   z-index: 1;
   max-width: 560px;
   margin: 14px auto 0;
   font-size: 15.5px;
   line-height: 1.8;
   color: var(--pp-body);
}

.nav-page .nav-404__actions {
   position: relative;
   z-index: 1;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 14px;
   margin-top: 30px;
}

.nav-page .nav-404__btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 28px;
   border-radius: 999px;
   font-size: 15px;
   font-weight: 800;
   line-height: 1;
   text-decoration: none;
   transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease,
      border-color 0.28s ease, color 0.28s ease;
}

.nav-page .nav-404__btn svg {
   width: 16px;
   height: 16px;
}

.nav-page .nav-404__btn--primary {
   color: #ffffff;
   background: linear-gradient(135deg, var(--pp-b1) 0%, var(--pp-b2) 100%);
   border: 1px solid transparent;
   box-shadow: 0 16px 32px -16px rgba(26, 68, 153, 0.9);
}

.nav-page .nav-404__btn--primary:hover {
   transform: translateY(-3px);
   color: #ffffff;
   box-shadow: 0 22px 38px -16px rgba(26, 68, 153, 0.95);
}

.nav-page .nav-404__btn--ghost {
   color: var(--pp-b1);
   background: #ffffff;
   border: 1px solid rgba(26, 68, 153, 0.35);
}

.nav-page .nav-404__btn--ghost:hover {
   transform: translateY(-3px);
   color: var(--pp-b1);
   border-color: var(--pp-b2);
   box-shadow: 0 18px 34px -20px rgba(15, 31, 61, 0.6);
}

.nav-page .nav-404__btn:focus-visible {
   outline: 3px solid var(--pp-b2);
   outline-offset: 3px;
}


/* 15. Responsive
   --------------------------------------------------------------------------
   Tiers: 1199 laptop | 991 tablet | 767 phone | 479 small phone
   -------------------------------------------------------------------------- */

/* Laptops 1200-1399px: the container is 1140px here, which still makes three
   A4-ish cards fairly large. Cap the grid and shorten the frame so the row
   reads as a set of thumbnails rather than full-height documents. */
@media (min-width: 1200px) and (max-width: 1399px) {
   .nav-page .nav-certs {
      max-width: 960px;
      margin-inline: auto;
      column-gap: 20px;
      row-gap: 32px;
   }

   .nav-page .nav-cert__frame {
      aspect-ratio: 1 / 0.95;
   }

   .nav-page .nav-cert__foot {
      padding: 13px 15px;
      gap: 10px;
   }

   .nav-page .nav-cert__ico {
      width: 30px;
      height: 30px;
      border-radius: 9px;
   }

   .nav-page .nav-cert__ico svg { width: 14px; height: 14px; }
   .nav-page .nav-cert__name { font-size: 14px; }
   .nav-page .nav-cert__meta { font-size: 11.5px; }
}


@media (max-width: 1199px) {
   .nav-page .nav-lead {
      padding: 32px 36px 32px 40px;
   }

   .nav-page .nav-forms,
   .nav-page .nav-inds {
      grid-template-columns: repeat(3, 1fr);
   }

   .nav-page .nav-certs { column-gap: 20px; row-gap: 32px; }

   /* laptops still fit two columns comfortably - just tighten them */
   .nav-page .nav-touch { gap: 20px; }
   .nav-page .nav-touch__info { padding: 32px 26px; }
   .nav-page .nav-touch__form { padding: 30px 26px; }

   /* one variable rescales the whole row */
   .nav-page .nav-chain { --nav-circle: 196px; }
   .nav-page .nav-chain__ico svg { width: 36px; height: 36px; }
   .nav-page .nav-chain__name { font-size: 13px; }
   .nav-page .nav-chain__for { font-size: 12px; }
   /* Keep the hub and spokes side by side on laptops - just scale them down.
      Stacking this early would make the section needlessly tall. */
   .nav-page .nav-why {
      grid-template-columns: 1fr minmax(150px, 178px) 1fr;
      column-gap: 22px;
   }

   .nav-page .nav-why__num {
      width: 76px;
      height: 82px;
      font-size: 21px;
   }

   .nav-page .nav-why__panel { padding: 12px 16px; }
   .nav-page .nav-why__text { font-size: 14px; }

   .nav-page .nav-why__item::after { width: 22px; }
   .nav-page .nav-why__col--l .nav-why__item::after { inset-inline-end: -22px; }
   .nav-page .nav-why__col--r .nav-why__item::after { inset-inline-start: -22px; }
   .nav-page .nav-why__col--l .nav-why__item::before { inset-inline-end: -26px; }
   .nav-page .nav-why__col--r .nav-why__item::before { inset-inline-start: -26px; }
}

@media (max-width: 991px) {
   /* Two across, not three: at this width a 3-column product card leaves only
      ~135px for its label once the photo takes its 42%. */
   .nav-page .nav-forms,
   .nav-page .nav-inds {
      grid-template-columns: repeat(2, 1fr);
   }

   /* two cards per row: 4 tracks, each card spanning 2 */
   .nav-page .nav-certs {
      grid-template-columns: repeat(4, 1fr);
   }

   /* below 992 the two panels stack */
   .nav-page .nav-touch {
      grid-template-columns: 1fr;
      gap: 22px;
   }

   .nav-page .nav-map { aspect-ratio: 16 / 9; }

   .nav-page .nav-cert:nth-child(4):nth-last-child(2) {
      grid-column: span 2;
   }

   /* a lone final card is centred rather than left-aligned */
   .nav-page .nav-cert:last-child:nth-child(odd) {
      grid-column: 2 / span 2;
   }

   /* Chain becomes a 2x2 grid: the arcs and the stagger only read on a single
      row, so both are switched off rather than left dangling. */
   .nav-page .nav-chain {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      justify-items: center;
      gap: 26px 18px;
   }

   .nav-page .nav-chain__step {
      flex: none;
      width: 100%;
      max-width: 240px;
   }

   .nav-page .nav-chain__step:nth-child(odd) { margin-top: 0; }
   .nav-page .nav-chain__step::before { display: none; }
   .nav-page .nav-chain__step:not(:last-child)::after { display: none; }
   .nav-page .nav-chain__name { font-size: 14px; }
   .nav-page .nav-chain__for { font-size: 12.5px; }

   .nav-page .nav-story {
      padding: 32px 30px;
   }

   .nav-page .nav-story__certs {
      grid-template-columns: repeat(2, 1fr);
   }

   .nav-page .nav-why {
      grid-template-columns: 1fr;
      row-gap: 26px;
   }

   /* hub moves above the list; spokes become a plain stack */
   .nav-page .nav-why__hub {
      order: -1;
      width: 190px;
      margin: 0 auto;
   }

   .nav-page .nav-why__item::before,
   .nav-page .nav-why__item::after {
      display: none;
   }

   /* Once stacked, both sides read the same way: badge left, panel right.
      Without this the left column stays mirrored and right-aligned in a
      single column, which looks like a mistake. */
   .nav-page .nav-why__col--l .nav-why__item {
      flex-direction: row-reverse;
   }

   .nav-page .nav-why__col--l .nav-why__panel,
   .nav-page .nav-why__col--r .nav-why__panel {
      text-align: start;
      justify-content: flex-start;
   }

   .nav-page .nav-why__num {
      width: 82px;
      height: 88px;
      font-size: 22px;
   }
}

@media (max-width: 767px) {
   .nav-page .nav-lead {
      padding: 26px 22px 26px 26px;
   }

   .nav-page .nav-lead p {
      font-size: 15.5px;
      line-height: 1.85;
   }

   .nav-page .nav-lead p::first-letter {
      font-size: 46px;
      margin: 5px 11px 0 0;
   }

   .nav-page .nav-lead::after {
      width: 130px;
      height: 130px;
      top: -40px;
      inset-inline-end: -40px;
   }

   /* Chips already wrap to 1-2 per row here, so the forced 6/5 break would
      only add a stray gap. Let them flow instead. */
   .nav-page .nav-mats__break {
      display: none;
   }

   .nav-page .nav-story {
      padding: 26px 22px;
   }

   .nav-page .nav-story__text {
      font-size: 15.5px;
      line-height: 1.8;
   }

   .nav-page .nav-story__certs {
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 24px;
      padding-top: 22px;
   }

   .nav-page .nav-why__num {
      width: 68px;
      height: 74px;
      font-size: 20px;
   }

   .nav-page .nav-why__col {
      grid-auto-rows: minmax(82px, 1fr);
      row-gap: 16px;
   }

   .nav-page .nav-why__hub { width: 160px; }

   .nav-page .nav-tests {
      grid-template-columns: 1fr;
   }

   /* one column: the centred last card goes back to full width */
   .nav-page .nav-test:last-child:nth-child(odd) {
      width: auto;
   }

   /* footer is tight on a phone; the certificate name matters more than the
      PDF glyph, and the whole card is already a link */
   .nav-page .nav-cert__ico {
      display: none;
   }

   .nav-page .nav-fgrid {
      grid-template-columns: 1fr;
      gap: 15px;
   }

   /* a letterbox map is unreadable on a phone */
   .nav-page .nav-map {
      aspect-ratio: 4 / 3.4;
      border-width: 2px;
      border-radius: 16px;
   }

   .nav-page .nav-404 { padding: 38px 20px 34px; }
   .nav-page .nav-404__title { font-size: 23px; }
   .nav-page .nav-404__text { font-size: 15px; }
   .nav-page .nav-404__btn { width: 100%; justify-content: center; }
   .nav-page .nav-404__actions { gap: 11px; }

   .nav-page .nav-touch__info { padding: 26px 20px; }
   .nav-page .nav-touch__form { padding: 24px 20px; }
   .nav-page .nav-cline { gap: 13px; }
   .nav-page .nav-cline__ico { width: 40px; height: 40px; border-radius: 11px; }
   .nav-page .nav-cline__ico svg { width: 18px; height: 18px; }
   .nav-page .nav-cline__text { font-size: 14.5px; }
   .nav-page .nav-submit { width: 100%; justify-content: center; }

   .nav-page .nav-contact {
      padding: 24px 22px;
   }

   .nav-page .nav-contact__links {
      flex-direction: column;
      align-items: stretch;
   }

   .nav-page .nav-contact__link {
      justify-content: flex-start;
   }
}

@media (max-width: 479px) {
   .nav-page .nav-forms,
   .nav-page .nav-inds,
   .nav-page .nav-chain {
      grid-template-columns: 1fr;
   }

   /* one per row on a phone. The frame is short enough now that a single card
      fits comfortably; capped and centred so it never spans the full width of
      a large phone. The span/offset rules from the wider tiers are reset,
      otherwise a 2-track span would overflow a 1-track grid. */
   .nav-page .nav-certs {
      grid-template-columns: 1fr;
      gap: 22px;
      max-width: 320px;
      margin-inline: auto;
   }

   .nav-page .nav-cert,
   .nav-page .nav-cert:nth-child(4):nth-last-child(2),
   .nav-page .nav-cert:last-child:nth-child(odd) {
      grid-column: auto;
   }

   /* one card per row leaves room for the icon again, so undo the 767px hide */
   .nav-page .nav-cert__ico {
      display: flex;
      width: 30px;
      height: 30px;
      border-radius: 9px;
   }

   .nav-page .nav-cert__ico svg { width: 14px; height: 14px; }

   .nav-page .nav-cert__foot { padding: 13px 14px; gap: 10px; }
   .nav-page .nav-cert__name { font-size: 13.5px; }
   .nav-page .nav-cert__meta { font-size: 11px; }

   /* full-width card: give the label more room and shrink the photo */
   .nav-page .nav-form {
      padding: 20px 34% 20px 18px;
   }

   .nav-page .nav-form__media { width: 36%; }
   .nav-page .nav-form__ico { width: 42px; height: 42px; }

   .nav-page .nav-lead {
      padding: 22px 18px 22px 22px;
   }

   .nav-page .nav-lead p { font-size: 15px; }

   .nav-page .nav-lead p::first-letter {
      font-size: 40px;
      margin: 4px 9px 0 0;
   }

   .nav-page .nav-mat {
      font-size: 13.5px;
      padding: 9px 16px;
   }

   .nav-page .nav-story__cert {
      font-size: 14.5px;
      padding: 13px 14px;
   }

   .nav-page .nav-story__ico { width: 34px; height: 34px; }

   .nav-page .nav-why__hub { width: 140px; }

   .nav-page .nav-why__num {
      width: 60px;
      height: 66px;
      font-size: 18px;
   }

   .nav-page .nav-why__panel { padding: 12px 14px; }

   .nav-page .nav-contact { padding: 20px 16px; }

   .nav-page .nav-contact__link { font-size: 13.5px; }
}

/* ---------------------------------------------------------------------------
   16. Thank-you page          .nav-thanks (reuses the .nav-404 card)
   --------------------------------------------------------------------------- */

.nav-page .nav-thanks__mark {
   position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 84px;
   height: 84px;
   margin-bottom: 6px;
   border-radius: 50%;
   color: #ffffff;
   background: linear-gradient(150deg, #17a06a 0%, #0f7f53 100%);
   box-shadow: 0 18px 34px -16px rgba(15, 127, 83, 0.85);
}

.nav-page .nav-thanks__mark svg {
   width: 40px;
   height: 40px;
}

.nav-page .nav-thanks__urgent {
   position: relative;
   z-index: 1;
   margin: 16px auto 0;
   font-size: 15px;
   line-height: 1.7;
   color: var(--pp-body);
}

.nav-page .nav-thanks__urgent a {
   font-weight: 700;
   color: var(--pp-b2);
   text-decoration: none;
   border-bottom: 1px solid rgba(47, 107, 216, 0.4);
}

.nav-page .nav-thanks__urgent a:hover {
   color: #c92032;
   border-bottom-color: rgba(201, 32, 50, 0.45);
}

@media (max-width: 575px) {
   .nav-page .nav-thanks__mark {
      width: 68px;
      height: 68px;
   }

   .nav-page .nav-thanks__mark svg {
      width: 32px;
      height: 32px;
   }

   .nav-page .nav-thanks__urgent {
      font-size: 14px;
   }
}