/* =============================================================================
   PrintNAdvertisment — Design System
   Built from the brand logo: navy + cyan + blue. One stylesheet, no framework.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------ */
:root {
  /* Brand */
  --navy:          #062B5B;
  --navy-deep:     #031D3D;
  --navy-section:  #061B32;
  --cyan:          #12C6D5;
  --cyan-bright:   #19D3E0;
  --blue:          #147BEF;
  --yellow:        #F4C400;
  --white:         #FFFFFF;
  --bg-light:      #F5F9FC;

  /* Derived neutrals — all tuned against the navy so nothing looks "off-brand" */
  --ink:           #0C1F35;
  --ink-2:         #33475C;
  --ink-3:         #5C7085;
  --line:          #E1EAF2;
  --line-soft:     #EDF3F8;
  --navy-10:       rgba(6, 43, 91, .10);
  --navy-06:       rgba(6, 43, 91, .06);
  --cyan-12:       rgba(18, 198, 213, .12);
  --blue-12:       rgba(20, 123, 239, .12);

  /* Surfaces.
     These were gradients. Flat brand colour reads as a considered choice;
     gradients on every button, bar and panel read as decoration for its own
     sake. One near-imperceptible gradient remains on the hero for depth — at
     4% lightness it is felt, not seen. */
  --grad-navy:     linear-gradient(180deg, #073266 0%, #04244C 100%);
  --grad-cyan:     var(--blue);
  --grad-accent:   var(--cyan);

  /* Type — Inter throughout, self-hosted as one variable file covering 400–800.
     See assets/fonts/fonts.css. */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-display: "Outfit", var(--font);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Display scale sized like the fintech/SaaS references (Razorpay, Shopify):
     the hero headline is the biggest thing on the page by a clear margin, and
     section titles are large enough to carry a section on their own. */
  --fs-hero:  clamp(2.4rem, 1.4rem + 3.6vw, 4.1rem);
  --fs-h1:    clamp(2.05rem, 1.3rem + 2.7vw, 3.25rem);
  --fs-h2:    clamp(1.7rem,  1.2rem + 1.9vw, 2.55rem);
  --fs-h3:    clamp(1.15rem, 1.02rem + 0.5vw, 1.375rem);
  --fs-h4:    clamp(1.02rem, 0.97rem + 0.2vw, 1.125rem);
  --fs-body:  1rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;
  --fs-lead:  clamp(1.02rem, 0.98rem + 0.28vw, 1.1875rem);

  /* Spacing (4px base) */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px; --s-11: 80px; --s-12: 104px;

  --section-y: clamp(56px, 6vw, 104px);

  /* Radii — tightened. Very round corners on every surface is the single
     strongest "generated template" tell; 10–14px reads as considered. */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 24px;  --r-pill: 999px;

  /* Elevation — neutral and tight. Coloured glow shadows were making every
     button look like it was lit from inside. */
  /* Borderless cards rest on a soft, navy-tinted shadow instead of a 1px line —
     the single most visible difference between the old look and the references. */
  --sh-1: 0 1px 2px rgba(6, 43, 91, .06);
  --sh-2: 0 1px 2px rgba(6, 43, 91, .04), 0 10px 28px rgba(6, 43, 91, .07);
  --sh-3: 0 2px 6px rgba(6, 43, 91, .05), 0 24px 56px rgba(6, 43, 91, .13);
  --sh-glow: 0 2px 6px rgba(6, 43, 91, .14);
  --sh-glow-cyan: 0 2px 6px rgba(6, 43, 91, .12);

  --container: 1600px;
  --container-narrow: 880px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .28s;

  --header-h: 76px;
}

@media (max-width: 900px) { :root { --header-h: 64px; } }

/* ---------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.025em;
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1;
}
h1 { font-weight: 800; letter-spacing: -.035em; }
h2 { font-weight: 700; letter-spacing: -.03em; }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
h4 { font-size: var(--fs-h4); line-height: 1.35; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--navy); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25em; }
li { margin-bottom: var(--s-2); }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--navy); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-8) 0; }

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--cyan); color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Honeypot — off-screen, never announced, never focusable in practice */
.pna-hp {
  position: absolute !important; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------------------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------------------ */
/* The content area is exactly --container (1600px) wide; the side gutters are
   added on top of it rather than eating into it, so header, every section and
   the footer all line up on the same 1600px column. */
.container {
  --gutter: clamp(16px, 4vw, 32px);
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Kept as a class name so templates need no change, but it no longer narrows the
   section: every section is the full 1600px. Long running text is held to a
   readable line length by .prose instead. */
.container--narrow { max-width: calc(var(--container) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(36px, 4vw, 64px); }
.section--light { background: var(--bg-light); }
.section--dark  { background: var(--navy-section); color: rgba(255, 255, 255, .82); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark a { color: var(--cyan-bright); }
.section--dark a:hover { color: #fff; }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.stack > * + * { margin-top: var(--s-4); }
.flow > * + * { margin-top: var(--s-6); }

/* ---------------------------------------------------------------------------
   4. Section headings
   ------------------------------------------------------------------------ */
.sec-head { max-width: 760px; margin-bottom: var(--s-8); }
.sec-head--center { margin-inline: auto; text-align: center; }

/* Section label as a soft tinted pill — the small-caps-with-a-dash label was
   the older agency convention; the pill is what the reference sites use. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--blue-12);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: var(--s-4);
}
.sec-head--center .eyebrow { justify-content: center; }
.section--dark .eyebrow { color: var(--cyan-bright); background: rgba(25, 211, 224, .14); }

.sec-head p { font-size: var(--fs-lead); color: var(--ink-3); margin-top: var(--s-3); }
.section--dark .sec-head p { color: rgba(255, 255, 255, .78); }

.lead { font-size: var(--fs-lead); color: var(--ink-2); }

/* ---------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 14px 28px;
  min-height: 50px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);   /* pill buttons, as on every reference site */
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* No lift on hover — a 2px jump on every button is another generated-template
   tell. Colour shift alone is enough feedback. */
.btn:active { transform: translateY(1px); }
.btn .pna-icon { flex-shrink: 0; }

.btn--primary {
  background: var(--blue); color: #fff; box-shadow: var(--sh-1);
}
.btn--primary:hover { background: #0E68D2; color: #fff; }

/* WhatsApp keeps its brand green, but only as an outlined button unless it is
   the single primary action. Three saturated fills side by side was the reason
   the hero looked cheap. */
.btn--whatsapp {
  background: #fff; color: #0B7A3E; border-color: #BFE7CE;
}
.btn--whatsapp:hover { background: #F1FBF5; color: #096632; border-color: #25D366; }
.btn--whatsapp .pna-icon { color: #25D366; }

/* Solid green stays available for the floating button, where it stands alone. */
.btn--whatsapp-solid { background: #25D366; color: #06301A; border-color: #25D366; }
.btn--whatsapp-solid:hover { background: #1FBF5B; color: #06301A; }

.btn--call {
  background: var(--navy); color: #fff;
}
.btn--call:hover { background: var(--navy-deep); color: #fff; }

.btn--cyan {
  background: var(--cyan); color: var(--navy-deep); box-shadow: var(--sh-1);
}
.btn--cyan:hover { background: var(--cyan-bright); color: var(--navy-deep); }

.btn--outline {
  background: #fff; color: var(--navy); border-color: var(--line);
}
.btn--outline:hover { border-color: var(--navy); color: var(--navy); background: #fff; }

.btn--ghost-light {
  background: rgba(255,255,255,.10); color: #fff;
  border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px);
}
.btn--ghost-light:hover { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.5); }

.btn--sm { padding: 10px 18px; min-height: 42px; font-size: var(--fs-xs); }
.btn--lg { padding: 17px 34px; min-height: 58px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-row--center { justify-content: center; }

@media (max-width: 480px) {
  .btn-row .btn { flex: 1 1 100%; }
}

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 650; font-size: var(--fs-sm); color: var(--blue);
}
.link-arrow .pna-icon { transition: transform var(--dur) var(--ease); }
.link-arrow:hover .pna-icon { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   6. Icons
   ------------------------------------------------------------------------ */
.pna-icon {
  display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.pna-icon--fill { fill: currentColor; stroke: none; }

.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: var(--r-lg);
  background: var(--blue-12); color: var(--blue); flex-shrink: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-badge--navy { background: var(--navy); color: var(--cyan-bright); }
.icon-badge--lg { width: 56px; height: 56px; border-radius: var(--r-lg); }

/* ---------------------------------------------------------------------------
   7. Header
   ------------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(6,43,91,.07); }

/* Utility strip: quiet by design. It carries the address and contact details,
   which support the decision but should never compete with the navigation. */
.topbar {
  background: var(--navy-deep); color: rgba(255,255,255,.62);
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 34px;
}
.topbar__list { display: flex; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
.topbar__list li { margin: 0; display: flex; align-items: center; gap: 7px; }
.topbar a { color: rgba(255,255,255,.82); font-weight: 500; }
.topbar a:hover { color: #fff; }
.topbar .pna-icon { color: var(--cyan); opacity: .85; }
/* Below 1100px only the phone number is worth the vertical space. */
@media (max-width: 1100px) { .topbar__list:first-child { display: none; } }

@media (max-width: 900px) { .topbar { display: none; } }

.header__inner {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: var(--header-h);
}

.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 46px; width: auto; }
@media (max-width: 900px) { .logo img { height: 38px !important; } }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 1px; list-style: none; margin: 0; padding: 0; }
/* Deliberately NOT position:relative. A 1140px panel centred on its trigger
   runs off the left edge for the first menu item; the panel is positioned
   against the header instead so it always centres on the page. */
.nav__list > li { margin: 0; }

/* The four mega-menu triggers are <button> and the rest are <a>. Without this
   reset the buttons inherit the browser's border and background and the nav
   renders as four grey boxes beside five plain links. */
.nav__link {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; margin: 0; cursor: pointer;
  font: inherit; text-align: left;

  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 12px; height: 40px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  letter-spacing: -.01em; white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

/* Indicator is a rule that grows from the centre — no hover background box. */
.nav__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-expanded="true"],
.nav__link[aria-current="page"] { color: var(--navy); }

.nav__link:hover::after,
.nav__link[aria-expanded="true"]::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__caret { color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.nav__link:hover .nav__caret,
.nav__link[aria-expanded="true"] .nav__caret { color: var(--blue); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.header__cta { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }

@media (max-width: 1180px) { .nav, .header__cta .btn--outline { display: none; } }
@media (max-width: 1180px) { .header__inner { justify-content: space-between; } }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--navy); color: #fff; border: 0; cursor: pointer;
}
@media (max-width: 1180px) { .nav-toggle { display: inline-flex; } }

/* ---------------------------------------------------------------------------
   8. Mega menu
   ------------------------------------------------------------------------ */
/* Positioned against .site-header (which is sticky, so it is the containing
   block), not against the trigger — see the note on .nav__list > li. */
.mega {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(1140px, calc(100vw - 40px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 48px rgba(6,43,91,.13), 0 2px 8px rgba(6,43,91,.06);
  padding: var(--s-7) var(--s-7) 0;
  overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease-out),
              visibility .18s;
  z-index: 210;
}
/* Bridges the 1px gap so the pointer can travel from trigger to panel. */
.mega::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.nav__item.is-open .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega--wide { width: min(1180px, calc(100vw - 40px)); }

.mega__grid { display: grid; gap: var(--s-7); }
.mega__grid--services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega__grid--industries { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega__grid--areas { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Column headings: small caps, no rule under them. The whitespace separates
   the groups; a border under every heading made the panel look like a form. */
.mega__col-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.mega__col-title .pna-icon { color: var(--blue); width: 15px; height: 15px; }

.mega__links { list-style: none; margin: 0; padding: 0; }
.mega__links li { margin: 0; }
.mega__links a {
  position: relative;
  display: block; padding: 6px 10px; margin-left: -10px;
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  line-height: 1.4;
  transition: color .12s var(--ease), background-color .12s var(--ease);
}
.mega__links a:hover { background: var(--bg-light); color: var(--navy); }

/* The footer is a full-bleed tinted band, which closes the panel off properly
   instead of leaving the last link floating against the edge. */
.mega__footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  margin: var(--s-7) calc(var(--s-7) * -1) 0;
  padding: var(--s-4) var(--s-7);
  background: var(--bg-light);
  border-top: 1px solid var(--line-soft);
}
.mega__note { font-size: 13px; color: var(--ink-3); margin: 0; }

/* Promo panel: flat navy, no gradient. */
.mega__promo {
  grid-column: span 1;
  background: var(--navy); border-radius: var(--r-md);
  padding: var(--s-6); color: rgba(255,255,255,.74);
}
.mega__promo h4 { color: #fff; font-size: 1rem; margin-bottom: var(--s-2); }
.mega__promo p { font-size: 13px; margin-bottom: var(--s-4); line-height: 1.5; }

/* Photo variant — same scrim approach as .hero--photo / .cta-band--photo.
   Applied only once the file actually exists (checked in PHP). */
.mega__promo--photo {
  position: relative; background: var(--navy); overflow: hidden;
}
.mega__promo--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(160deg, rgba(4,28,60,.90) 0%, rgba(4,28,60,.72) 55%, rgba(4,28,60,.55) 100%),
    var(--promo-bg);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.mega__promo--photo > * { position: relative; z-index: 1; }

@media (max-width: 1280px) {
  .mega__grid--areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   9. Mobile menu
   ------------------------------------------------------------------------ */
.mobile-menu {
  position: fixed; inset: 0; z-index: 400;
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s var(--ease-out);
  visibility: hidden;
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }

.mobile-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) clamp(16px, 4vw, 32px);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.mobile-menu__body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-4) clamp(16px, 4vw, 32px) var(--s-8);
  -webkit-overflow-scrolling: touch;
}
.mobile-menu__foot {
  padding: var(--s-4) clamp(16px, 4vw, 32px);
  border-top: 1px solid var(--line); background: var(--bg-light);
  display: grid; gap: var(--s-2); grid-template-columns: 1fr 1fr;
  flex-shrink: 0;
}

.m-acc { border-bottom: 1px solid var(--line-soft); }
.m-acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; padding: 15px 0; background: none; border: 0; cursor: pointer;
  font-size: 1.02rem; font-weight: 680; color: var(--navy); text-align: left;
}
.m-acc__btn .pna-icon { color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.m-acc__btn[aria-expanded="true"] .pna-icon { transform: rotate(180deg); color: var(--blue); }
.m-acc__panel { display: none; padding-bottom: var(--s-4); }
.m-acc__panel.is-open { display: block; }
.m-acc__group + .m-acc__group { margin-top: var(--s-4); }
.m-acc__group-title {
  font-size: var(--fs-xs); font-weight: 750; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2);
}
.m-acc__links { list-style: none; margin: 0; padding: 0; }
.m-acc__links a {
  display: block; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 550; color: var(--ink-2);
}
.m-acc__links a:hover, .m-acc__links a:focus { background: var(--bg-light); color: var(--blue); }

.m-link {
  display: block; padding: 15px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 1.02rem; font-weight: 680; color: var(--navy);
}

.backdrop {
  position: fixed; inset: 0; z-index: 390;
  background: rgba(3, 29, 61, .55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
  backdrop-filter: blur(2px);
}
.backdrop.is-open { opacity: 1; visibility: visible; }

body.is-locked { overflow: hidden; }

/* ---------------------------------------------------------------------------
   10. Hero
   ------------------------------------------------------------------------ */
/* Light hero. The reference sites (Razorpay, Cashfree, PayU, Pine Labs, Woo,
   Shopify) all open on a white/near-white canvas with dark display type and
   one accent — not a dark band. The old navy hero with a darkened photo behind
   it read as heavy and dated next to them, so the whole hero family moves to
   light; dark is kept for exactly one contrast block per page further down. */
.hero {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FB 100%);
  color: var(--ink-2);
  overflow: hidden;
  isolation: isolate;
}
/* The fine engineering grid stays (it reads as print registration, which is
   what this business does) but as a faint navy on light. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(6,43,91,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,43,91,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(115deg, #000 10%, transparent 62%);
  -webkit-mask-image: linear-gradient(115deg, #000 10%, transparent 62%);
}
.hero::after { content: none; }

.hero__inner {
  display: grid; gap: clamp(32px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 88px);
}
.hero--split .hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
/* When the side column is the enquiry card it must not stretch with the 1600px
   container — a 700px-wide form reads as a page, not a card. Cap it and let
   the headline take the remaining width. */
.hero--split.hero--form .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(380px, 500px); }
.hero--form .hero__visual { width: 100%; max-width: 500px; justify-self: end; }
.hero--center .hero__inner { justify-items: center; text-align: center; max-width: 900px; margin-inline: auto; }

@media (max-width: 1000px) {
  .hero--split .hero__inner,
  .hero--split.hero--form .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero--form .hero__visual { max-width: none; justify-self: stretch; }
}

.hero h1 { color: var(--navy); font-size: var(--fs-hero); margin-bottom: var(--s-5); line-height: 1.08; }
.hero--compact h1 { font-size: var(--fs-h1); }
.hero__sub { font-size: var(--fs-lead); color: var(--ink-2); margin-bottom: var(--s-7); max-width: 58ch; }
.hero--center .hero__sub { margin-inline: auto; }

.hero__badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 7px 15px 7px 11px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  font-size: var(--fs-xs); font-weight: 650; color: var(--navy);
  margin-bottom: var(--s-5);
}
.hero__badge .pna-icon { color: var(--blue); }

.hero__points {
  list-style: none; padding: 0; margin: var(--s-7) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
}
.hero__points li {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  margin: 0;
}
.hero__points .pna-icon { color: var(--blue); }
.hero--center .hero__points { justify-content: center; }

/* Buttons inside the light hero: the cyan fill and the translucent "ghost"
   style were designed for the old navy band. On white, the primary action is
   the solid brand blue and the secondary is a plain outline. */
.hero .btn--cyan { background: var(--blue); color: #fff; box-shadow: var(--sh-2); }
.hero .btn--cyan:hover { background: #0E68D2; color: #fff; }
.hero .btn--ghost-light {
  background: #fff; color: var(--navy); border-color: var(--line); backdrop-filter: none;
}
.hero .btn--ghost-light:hover { background: #fff; color: var(--navy); border-color: var(--navy); }

/* Breadcrumbs are passed as dark=true by every template because the hero used
   to be navy; restyle them here rather than editing twenty templates. */
.hero .crumbs--on-dark { border-bottom-color: rgba(6,43,91,.08); }
.hero .crumbs--on-dark a { color: var(--ink-3); }
.hero .crumbs--on-dark a:hover { color: var(--blue); }
.hero .crumbs--on-dark [aria-current="page"] { color: var(--navy); }
.hero .crumbs--on-dark .pna-icon { color: #A9BACB; }

/* Hero visual collage */
.hero__visual { position: relative; }
.hero__figure {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-3); border: 0;
  background: var(--bg-light);
  aspect-ratio: 4 / 3;
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }

.hero__chip {
  position: absolute; display: flex; align-items: center; gap: var(--s-3);
  padding: 12px 16px; border-radius: var(--r-md);
  background: rgba(255,255,255,.96); box-shadow: var(--sh-3);
  color: var(--navy); font-weight: 700; font-size: var(--fs-xs);
  backdrop-filter: blur(10px);
}
.hero__chip .icon-badge { width: 36px; height: 36px; border-radius: 8px; }
.hero__chip small { display: block; font-weight: 550; color: var(--ink-3); font-size: 11px; }
.hero__chip--tl { top: 16px; left: -16px; }
.hero__chip--br { bottom: 20px; right: -16px; }

@media (max-width: 1000px) { .hero__chip--tl, .hero__chip--br { display: none; } }

/* Compact hero used by service / area / industry pages */
.hero--compact .hero__inner { padding-block: clamp(36px, 4.2vw, 62px); }

/* ---------------------------------------------------------------------------
   11. Hero enquiry card
   ------------------------------------------------------------------------ */
.hero-form {
  background: #fff; border-radius: var(--r-xl);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: var(--sh-3);
  border: 1px solid rgba(6,43,91,.06);
}
.hero-form__title { font-size: 1.22rem; margin-bottom: var(--s-1); }
.hero-form__sub { font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: var(--s-5); }

/* ---------------------------------------------------------------------------
   12. Breadcrumbs
   ------------------------------------------------------------------------ */
.crumbs { padding-block: var(--s-4); font-size: var(--fs-xs); }
.crumbs__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.crumbs__list li { margin: 0; display: flex; align-items: center; gap: 6px; }
.crumbs a { color: var(--ink-3); font-weight: 550; }
.crumbs a:hover { color: var(--blue); }
.crumbs [aria-current="page"] { color: var(--navy); font-weight: 650; }
.crumbs .pna-icon { color: #A9BACB; }

.crumbs--on-dark { border-bottom: 1px solid rgba(255,255,255,.12); }
.crumbs--on-dark a { color: rgba(255,255,255,.7); }
.crumbs--on-dark a:hover { color: #fff; }
.crumbs--on-dark [aria-current="page"] { color: var(--cyan-bright); }
.crumbs--on-dark .pna-icon { color: rgba(255,255,255,.4); }

/* ---------------------------------------------------------------------------
   13. Marquee
   ------------------------------------------------------------------------ */
.marquee {
  position: relative; overflow: hidden;
  background: var(--bg-light);
  border-block: 1px solid var(--line);
  padding-block: var(--s-5);
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg-light), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg-light), transparent); }

.marquee__track {
  display: flex; width: max-content;
  animation: marquee-scroll 64s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__group { display: flex; align-items: center; }

.marquee__item {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 9px 18px; margin-inline: 6px;
  border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 620; color: var(--navy);
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.marquee__item .pna-icon { color: var(--cyan); }
.marquee__item:hover {
  border-color: var(--cyan); box-shadow: var(--sh-2);
  transform: translateY(-2px); color: var(--navy);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------------
   14. Cards
   ------------------------------------------------------------------------ */
/* Borderless: the card is a white surface resting on a soft tinted shadow,
   which is how every reference site builds its feature cards. A 1px grey
   border is what made the old grids read as "form fields". */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: var(--s-7);
  box-shadow: var(--sh-2);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
}
.card:hover .icon-badge { background: var(--navy); color: var(--cyan-bright); }

.card h3 { font-size: 1.08rem; margin: var(--s-4) 0 var(--s-2); }
.card p { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--s-4); }
.card__foot { margin-top: auto; }

/* Stretched link keeps the whole card clickable without nesting anchors */
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.card--media { padding: 0; overflow: hidden; }
.card--media .card__body { padding: var(--s-6); display: flex; flex-direction: column; flex: 1; }
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-light); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }

.card__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(6,43,91,.88); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.card__tag--concept { background: rgba(244,196,0,.95); color: var(--navy); }

.card--list { padding: var(--s-5); }
.card--list h3 { margin-top: 0; font-size: 1rem; }

/* Compact link card used in dense grids */
.tile {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 15px 18px;
  background: #fff; border: 1px solid transparent; border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  font-size: var(--fs-sm); font-weight: 620; color: var(--navy);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tile:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-2px); color: var(--blue); background: #fff;
}
.tile .pna-icon { color: var(--blue); flex-shrink: 0; }
.tile__meta { display: block; font-size: 11px; font-weight: 550; color: var(--ink-3); }

.section--light .tile { background: #fff; }
/* On a white section a white tile has nothing to sit against, so it takes the
   tinted surface and lifts to white on hover. */
.section:not(.section--light):not(.section--dark) .tile { background: var(--bg-light); box-shadow: none; }
.section:not(.section--light):not(.section--dark) .tile:hover { background: #fff; box-shadow: var(--sh-2); }
.section--dark .tile {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff;
}
.section--dark .tile:hover { background: rgba(255,255,255,.12); border-color: var(--cyan); color: #fff; }
.section--dark .tile .pna-icon { color: var(--cyan-bright); }
.section--dark .tile__meta { color: rgba(255,255,255,.6); }

/* ---------------------------------------------------------------------------
   15. Feature list / benefits
   ------------------------------------------------------------------------ */
/* Each benefit is its own small card: a white surface on light sections, a
   frosted panel on the dark photo-backed one — which also solves legibility
   over a photograph, since the text never sits straight on the image. */
.feature {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6);
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.feature__body h3 { font-size: 1.05rem; margin: 0 0 6px; }
.feature__body p { font-size: var(--fs-sm); color: var(--ink-3); margin: 0; }
.section--dark .feature {
  background: rgba(255,255,255,.08); box-shadow: none;
  border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px);
}
.section--dark .feature .icon-badge { background: rgba(255,255,255,.12); color: var(--cyan-bright); }
.section--dark .feature__body p { color: rgba(255,255,255,.72); }

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.check-list li { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; font-size: var(--fs-sm); }
.check-list .pna-icon { color: var(--cyan); flex-shrink: 0; margin-top: 3px; }
.check-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .check-list--2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------
   16. Answer block (AEO) & prose
   ------------------------------------------------------------------------ */
.answer {
  border-left: 4px solid var(--blue);
  background: var(--bg-light);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-7);
  margin-bottom: var(--s-7);
}
.answer h2, .answer h3 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.answer p { font-size: var(--fs-lead); color: var(--ink-2); }
.answer p:last-child { margin-bottom: 0; }

.prose { max-width: 92ch; }
/* A prose block that IS a section container stays the full 1600px; its text
   children are held to a readable line length instead. */
.container.prose { max-width: calc(var(--container) + var(--gutter) * 2); }
.container.prose > * { max-width: 92ch; }
.prose h2 { margin-top: var(--s-9); }
.prose h3 { margin-top: var(--s-7); }
.prose > *:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: var(--s-2); }
.prose img { border-radius: var(--r-lg); margin-block: var(--s-6); }

.note {
  display: flex; gap: var(--s-3);
  padding: var(--s-5); border-radius: var(--r-md);
  background: var(--blue-12); border: 1px solid rgba(20,123,239,.22);
  font-size: var(--fs-sm);
}
.note .pna-icon { color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.note p { margin: 0; }
.note--warn { background: rgba(244,196,0,.12); border-color: rgba(244,196,0,.35); }
.note--warn .pna-icon { color: #B08D00; }

/* ---------------------------------------------------------------------------
   17. Spec table
   ------------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); }
.spec-table {
  min-width: 520px;
  background: #fff;
  border: 0; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-2);
  font-size: var(--fs-sm);
}
.spec-table th, .spec-table td { padding: 14px 20px; text-align: left; vertical-align: top; }
.spec-table thead th {
  background: var(--bg-light); color: var(--ink-3); font-weight: 700;
  font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
}
.spec-table tbody tr { border-top: 1px solid var(--line-soft); }
.spec-table tbody tr:first-child { border-top: 0; }
.spec-table th[scope="row"] { color: var(--navy); font-weight: 650; width: 34%; background: #FAFCFE; }

/* ---------------------------------------------------------------------------
   18. Process steps
   ------------------------------------------------------------------------ */
.steps { counter-reset: step; display: grid; gap: var(--s-6); }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .steps--4, .steps--3 { grid-template-columns: minmax(0, 1fr); } }

/* Each step is a card with a solid numbered disc, the way the reference
   "how it works" rows are built; outlined ghost numerals read as decoration. */
.step {
  position: relative; counter-increment: step;
  padding: var(--s-6);
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.step::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: var(--s-4);
  border-radius: 50%;
  background: var(--blue); color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700; line-height: 1;
}
.step h3 { font-size: 1.05rem; margin-bottom: var(--s-2); }
.step p { font-size: var(--fs-sm); color: var(--ink-3); margin: 0; }
.section--dark .step {
  background: rgba(255,255,255,.08); box-shadow: none;
  border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px);
}
.section--dark .step::before { background: var(--cyan); color: var(--navy-deep); }
.section--dark .step p { color: rgba(255,255,255,.72); }

/* ---------------------------------------------------------------------------
   19. Stats
   ------------------------------------------------------------------------ */
/* Ruled columns rather than four floating numbers — the rule groups them as one
   block of facts and stops the shorter labels looking orphaned. */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5) 0;
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
}
.stats .stat { padding-inline: var(--s-5); border-left: 1px solid var(--line); }
.stats .stat:first-child { padding-left: 0; border-left: 0; }

@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}

.stat__value {
  font-size: clamp(1.9rem, 1.3rem + 1.7vw, 2.5rem);
  font-weight: 800; letter-spacing: -.035em; color: var(--navy);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.section--dark .stat__value { color: #fff; }
.stat__value span { color: var(--blue); }
.stat__label {
  font-size: 13px; font-weight: 500; color: var(--ink-3);
  margin-top: 8px; line-height: 1.4; max-width: 22ch;
}
.section--dark .stat__label { color: rgba(255,255,255,.68); }

/* ---------------------------------------------------------------------------
   20. FAQ accordion
   ------------------------------------------------------------------------ */
.faq { display: grid; gap: var(--s-3); }
.faq__item {
  border: 1px solid transparent; border-radius: var(--r-lg);
  background: #fff; overflow: hidden; box-shadow: var(--sh-2);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq__item:has(.faq__btn[aria-expanded="true"]) { box-shadow: var(--sh-3); }

.faq__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; padding: 20px 22px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--navy);
}
.faq__btn:hover { color: var(--blue); }
/* The plus sits in a small ring and fills solid when the answer is open, with
   the plus turning into a cross. */
.faq__icon {
  flex-shrink: 0; box-sizing: content-box;
  width: 18px; height: 18px; padding: 7px;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--navy);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.faq__btn[aria-expanded="true"] .faq__icon {
  transform: rotate(45deg);
  background: var(--blue); border-color: var(--blue); color: #fff;
}

/* Two-column FAQ section: heading and help card stay in view on the left while
   the questions scroll on the right. */
.faq-layout {
  display: grid; gap: clamp(32px, 5vw, 80px); align-items: start;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}
.faq-layout__intro { position: sticky; top: calc(var(--header-h) + 24px); }
.faq-layout__intro h2 { margin-bottom: var(--s-7); max-width: 14ch; }
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-layout__intro { position: static; }
  .faq-layout__intro h2 { max-width: none; margin-bottom: var(--s-5); }
}

.faq-help {
  padding: var(--s-7);
  background: var(--navy); border-radius: var(--r-xl);
  color: rgba(255,255,255,.78);
}
.faq-help h3 { color: #fff; font-size: 1.45rem; margin: 0 0 var(--s-3); }
.faq-help p { font-size: var(--fs-sm); margin-bottom: var(--s-6); max-width: 34ch; }
.faq-help__actions { display: flex; align-items: center; gap: var(--s-2); }
.faq-help .btn--primary { background: var(--cyan); color: var(--navy-deep); box-shadow: none; }
.faq-help .btn--primary:hover { background: var(--cyan-bright); color: var(--navy-deep); }
.faq-help__wa {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: #25D366; color: #06301A;
  transition: transform var(--dur) var(--ease);
}
.faq-help__wa:hover { color: #06301A; transform: scale(1.06); }

.faq__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.faq__panel.is-open { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p {
  padding: 0 20px 20px; margin: 0;
  font-size: var(--fs-sm); color: var(--ink-2);
}

/* ---------------------------------------------------------------------------
   21. Forms
   ------------------------------------------------------------------------ */
.form { display: grid; gap: var(--s-4); }
.form__row { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .form__row, .form__row--3 { grid-template-columns: minmax(0, 1fr); } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: var(--fs-xs); font-weight: 650; color: var(--navy);
  display: flex; align-items: center; gap: 4px;
}
.field label .req { color: #D8442F; }
.field__hint { font-size: 11.5px; color: var(--ink-3); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  font-size: var(--fs-sm);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 116px; resize: vertical; line-height: 1.55; }

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C7085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.field input::placeholder, .field textarea::placeholder { color: #9DAFC1; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-12);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #D8442F; box-shadow: 0 0 0 3px rgba(216, 68, 47, .1);
}

.field__error {
  display: none;
  font-size: 11.5px; font-weight: 600; color: #C63A26;
}
.field__error.is-visible { display: flex; align-items: center; gap: 4px; }

.field--file input[type="file"] {
  padding: 10px 12px; min-height: 46px;
  background: var(--bg-light); border-style: dashed; cursor: pointer;
  font-size: var(--fs-xs);
}

.radio-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.radio-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
  cursor: pointer; background: #fff;
  transition: all var(--dur) var(--ease);
}
.radio-pill input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pill:has(input:checked) {
  border-color: var(--blue); background: var(--blue-12); color: var(--blue);
}
.radio-pill:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }

.consent {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: 11.5px; color: var(--ink-3); line-height: 1.5;
}
.consent input { width: 18px; height: 18px; min-height: 0; flex-shrink: 0; margin-top: 1px; accent-color: var(--blue); }

.form__status {
  display: none;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600;
  align-items: flex-start; gap: var(--s-3);
}
.form__status.is-visible { display: flex; }
.form__status--ok { background: rgba(18,198,213,.13); color: #06626B; border: 1px solid rgba(18,198,213,.4); }
.form__status--err { background: rgba(216,68,47,.09); color: #A8301E; border: 1px solid rgba(216,68,47,.3); }
.form__status .pna-icon { flex-shrink: 0; margin-top: 2px; }

.btn.is-loading { pointer-events: none; opacity: .78; }
.btn.is-loading .btn__label::after {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-left: 8px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  font-size: 11.5px; color: var(--ink-3);
}

/* ---------------------------------------------------------------------------
   22. CTA band
   ------------------------------------------------------------------------ */
/* The one deliberately saturated block on the page: a blue→navy sweep rather
   than flat navy, so the closing call to action reads as a highlight, not as
   more of the footer. */
.cta-band {
  position: relative;
  background: linear-gradient(135deg, #147BEF 0%, #0B4FB5 45%, #062B5B 100%);
  color: rgba(255,255,255,.84);
  overflow: hidden; isolation: isolate;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(100deg, #000, transparent 55%);
  -webkit-mask-image: linear-gradient(100deg, #000, transparent 55%);
}
.cta-band__inner {
  display: grid; gap: var(--s-7); align-items: center;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  padding-block: clamp(44px, 5vw, 76px);
}
@media (max-width: 900px) { .cta-band__inner { grid-template-columns: minmax(0, 1fr); } }

.cta-band h2 { color: #fff; margin-bottom: var(--s-3); }
.cta-band p { color: rgba(255,255,255,.80); margin-bottom: 0; max-width: 60ch; }
.cta-band__actions { display: flex; flex-direction: column; gap: var(--s-3); }
@media (max-width: 900px) { .cta-band__actions { flex-direction: row; flex-wrap: wrap; } }

.cta-band--compact .cta-band__inner { padding-block: clamp(32px, 3.6vw, 52px); }

/* Generic photo-backed section — usable on any .section (dark or light) via
   --section-bg. Applied only once the file is actually there (checked in PHP
   each time this is used), so a section keeps its flat background rather than
   showing an empty frame.
   Deliberately a near-uniform scrim, not the directional one hero/cta-band use
   — those have a known text-on-one-side layout, so the photo can breathe on
   the empty side. This backs arbitrary full-width grids (e.g. an 8-item
   feature list with no card background of its own), where content can land
   anywhere, so every part of the photo needs the same legibility floor.
   .cta-band--photo and .mega__promo--photo below are older, narrower variants
   of the same idea, kept rather than migrated — not worth the churn on working
   CSS for a purely internal naming difference. */
.section--photo { position: relative; background-color: var(--navy-deep); overflow: hidden; isolation: isolate; }
.section--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(4, 28, 60, .86), rgba(4, 28, 60, .86)), var(--section-bg);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

/* Photo variant — same scrim approach as .hero--photo. Applied only when the
   photograph actually exists (checked in PHP), so the band otherwise keeps its
   grid-pattern navy rather than showing an empty frame. */
.cta-band--photo { background-color: var(--navy-deep); }
.cta-band--photo::before {
  background-image:
    linear-gradient(100deg,
      rgba(4, 28, 60, .94) 0%,
      rgba(4, 28, 60, .82) 42%,
      rgba(4, 28, 60, .60) 100%),
    var(--cta-bg);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  mask-image: none; -webkit-mask-image: none;
}
@media (max-width: 760px) {
  .cta-band--photo::before {
    background-image:
      linear-gradient(180deg, rgba(4,28,60,.90) 0%, rgba(4,28,60,.95) 100%),
      var(--cta-bg);
  }
}

/* Inline mid-page CTA strip */
.cta-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-7);
  border-radius: var(--r-lg);
  background: var(--bg-light);
  border: 0;
}
.section--light .cta-strip { background: #fff; box-shadow: var(--sh-2); }
.cta-strip h3 { margin-bottom: 4px; font-size: 1.1rem; }
.cta-strip p { font-size: var(--fs-sm); color: var(--ink-3); margin: 0; }

/* ---------------------------------------------------------------------------
   23. Related links
   ------------------------------------------------------------------------ */
.rel-links { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.rel-links a {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--bg-light);
  font-size: var(--fs-sm); font-weight: 580; color: var(--ink-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rel-links a:hover { background: var(--blue-12); color: var(--blue); }
.rel-links .pna-icon { color: var(--cyan); flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   24. Floating actions
   ------------------------------------------------------------------------ */
.float-actions {
  position: fixed; right: 18px; bottom: 18px; z-index: 300;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
@media (max-width: 900px) { .float-actions { bottom: 76px; right: 14px; } }

.float-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 18px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700;
  box-shadow: var(--sh-3);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.float-btn:hover { transform: translateY(-3px) scale(1.02); }
.float-btn--wa { background: #25D366; color: #06301A; }
.float-btn--wa:hover { color: #06301A; }
.float-btn--top {
  width: 44px; height: 44px; padding: 0; justify-content: center;
  background: #fff; color: var(--navy); border: 1px solid var(--line);
  opacity: 0; visibility: hidden;
}
.float-btn--top.is-visible { opacity: 1; visibility: visible; }

@media (max-width: 900px) {
  .float-btn--wa span { display: none; }
  .float-btn--wa { width: 52px; height: 52px; padding: 0; justify-content: center; }
}

/* Sticky mobile action bar */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 290;
  display: none;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  gap: 8px;
  box-shadow: 0 -4px 20px rgba(6,43,91,.10);
}
@media (max-width: 900px) { .sticky-cta { display: grid; grid-template-columns: repeat(3, 1fr); } }

.sticky-cta a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 4px; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 700; color: var(--navy);
  min-height: 48px;
}
.sticky-cta a .pna-icon { color: var(--blue); }
.sticky-cta a.is-wa .pna-icon { color: #25D366; }
.sticky-cta a.is-primary { background: var(--blue); color: #fff; }
.sticky-cta a.is-primary .pna-icon { color: #fff; }

@media (max-width: 900px) { body { padding-bottom: 64px; } }

/* ---------------------------------------------------------------------------
   25. Modal
   ------------------------------------------------------------------------ */
.modal {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  padding: clamp(12px, 3vw, 28px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__overlay { position: absolute; inset: 0; background: rgba(3,29,61,.62); backdrop-filter: blur(3px); }

.modal__dialog {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  transform: translateY(16px) scale(.98);
  transition: transform var(--dur) var(--ease-out);
}
.modal.is-open .modal__dialog { transform: translateY(0) scale(1); }

.modal__head {
  position: relative;
  padding: var(--s-7) var(--s-7) var(--s-4);
  background: var(--navy);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.modal__head h2 { color: #fff; font-size: 1.32rem; margin-bottom: 6px; }
.modal__head p { color: rgba(255,255,255,.76); font-size: var(--fs-sm); margin: 0; }

.modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); color: #fff; border: 0; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.modal__close:hover { background: rgba(255,255,255,.28); }

.modal__body { padding: var(--s-7); }

/* ---------------------------------------------------------------------------
   26. Testimonials
   ------------------------------------------------------------------------ */
.quote-card {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-7); border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line);
}
.quote-card__mark { color: var(--cyan); }
.quote-card blockquote { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.7; }
.quote-card__who { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }
.quote-card__name { font-weight: 700; color: var(--navy); font-size: var(--fs-sm); }
.quote-card__meta { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------------------------------------------------------------------------
   27. Footer
   ------------------------------------------------------------------------ */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.66); font-size: var(--fs-sm); }

.footer__top {
  display: grid; gap: var(--s-8);
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  padding-block: clamp(48px, 5vw, 72px);
}
@media (max-width: 1100px) { .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .footer__top { grid-template-columns: minmax(0, 1fr); } }

.footer__brand { max-width: 340px; }
@media (max-width: 1100px) { .footer__brand { grid-column: 1 / -1; max-width: none; } }
.footer__logo img { height: 52px; width: auto; margin-bottom: var(--s-4); }
.footer__brand p { font-size: var(--fs-sm); line-height: 1.7; }

.footer__contact { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-3); }
.footer__contact li { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; }
.footer__contact .pna-icon { color: var(--cyan); flex-shrink: 0; margin-top: 3px; }
.footer__contact a { color: #fff; font-weight: 600; }
.footer__contact a:hover { color: var(--cyan-bright); }

.footer__col h3 {
  font-size: var(--fs-xs); font-weight: 750; letter-spacing: .09em;
  text-transform: uppercase; color: #fff; margin-bottom: var(--s-4);
}
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer__links li { margin: 0; }
.footer__links a { color: rgba(255,255,255,.66); font-size: var(--fs-sm); }
.footer__links a:hover { color: var(--cyan-bright); }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: var(--fs-xs);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.footer__legal li { margin: 0; }
.footer__legal a { color: rgba(255,255,255,.6); }
.footer__legal a:hover { color: #fff; }

.footer__socials { display: flex; gap: var(--s-2); }
.footer__socials a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff;
  transition: background var(--dur) var(--ease);
}
.footer__socials a:hover { background: var(--cyan); color: var(--navy); }

/* ---------------------------------------------------------------------------
   28. Utilities
   ------------------------------------------------------------------------ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mt-9 { margin-top: var(--s-9); }
.mt-10 { margin-top: var(--s-10); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); }
.w-full { width: 100%; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  background: var(--cyan-12); color: #0A7C87;
}
.badge--yellow { background: rgba(244,196,0,.16); color: #96790A; }
.badge--navy { background: var(--navy); color: #fff; }

.split {
  display: grid; gap: clamp(32px, 4vw, 64px); align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split--media-first .split__media { order: -1; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--media-first .split__media { order: 0; }
}
.split__media img { border-radius: var(--r-xl); box-shadow: var(--sh-2); width: 100%; }

.figure { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); }
.figure img { width: 100%; }
.figure figcaption {
  padding: var(--s-3) var(--s-4); font-size: var(--fs-xs); color: var(--ink-3);
  background: var(--bg-light);
}

/* ---------------------------------------------------------------------------
   29. Motion
   ------------------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .07s; }
[data-reveal-delay="2"] { transition-delay: .14s; }
[data-reveal-delay="3"] { transition-delay: .21s; }
[data-reveal-delay="4"] { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; transform: none; }
  .marquee { overflow-x: auto; }
}

/* ---------------------------------------------------------------------------
   30. Print
   ------------------------------------------------------------------------ */
@media print {
  .site-header, .site-footer, .float-actions, .sticky-cta, .cta-band,
  .modal, .backdrop, .mobile-menu, .marquee { display: none !important; }
  body { color: #000; background: #fff; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
  .section { padding-block: 16px; }
}

/* ---------------------------------------------------------------------------
   31. Content photography
   Real photographs render as <img>. Until a photo is supplied for a given page,
   the same call renders a deliberate brand panel instead of a broken image.
   ------------------------------------------------------------------------ */
/* Browsers derive the aspect ratio from the width/height attributes on their
   own, so the space is reserved and nothing shifts on load. object-fit lets a
   single sourced photograph serve both the 4:3 section slots and the 8:5 card
   slots without distorting. */
.pna-photo { width: 100%; height: auto; display: block; border-radius: var(--r-lg); }
img.pna-photo { object-fit: cover; }
.card__media img.pna-photo { aspect-ratio: 8 / 5; height: 100%; }

/* A photograph shown as its own rounded panel beside copy — the way the
   reference sites present imagery, rather than as a darkened backdrop. */
.photo-panel {
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-3); background: var(--bg-light);
  aspect-ratio: 4 / 3;
}
.photo-panel .pna-photo { border-radius: 0; height: 100%; object-fit: cover; box-shadow: none; }
.photo-panel .pna-photo--placeholder { height: 100%; border: 0; }

/* Light and quiet. A large saturated navy block where a photograph belongs
   pulls more attention than the photograph would have. */
.pna-photo--placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-3); padding: var(--s-7);
  background-color: var(--bg-light);
  background-image:
    linear-gradient(rgba(6,43,91,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,43,91,.045) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--line);
  box-shadow: none;
  text-align: center;
  overflow: hidden;
}
.pna-photo__icon {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line);
  color: var(--blue);
}
.pna-photo__label {
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  max-width: 32ch; line-height: 1.45;
}

/* Inside the hero figure the placeholder fills the rounded frame edge to edge. */
.hero__figure .pna-photo--placeholder { border-radius: 0; height: 100%; border: 0; }

/* ---------------------------------------------------------------------------
   32. Hero call link
   A phone number reads as more trustworthy shown as a number than hidden behind
   a "Call Now" button, and it removes a third competing fill from the hero.
   ------------------------------------------------------------------------ */
.hero__call {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 4px; min-height: 50px;
  font-size: 1.0625rem; font-weight: 700; color: var(--navy);
  letter-spacing: -.01em;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hero__call:hover { color: var(--blue); border-bottom-color: var(--blue); }
.hero__call .pna-icon { color: var(--blue); }
@media (max-width: 480px) { .hero__call { justify-content: center; width: 100%; } }

/* ---------------------------------------------------------------------------
   33. Thank-you confirmation dialog
   ------------------------------------------------------------------------ */
.modal--sm .modal__dialog { width: min(440px, 100%); }

/* This dialog has no dark header bar, so the close control needs dark-on-light. */
.modal--sm .modal__close {
  background: var(--navy-06); color: var(--ink-2);
}
.modal--sm .modal__close:hover { background: var(--navy-10); color: var(--navy); }

.thanks { padding: var(--s-8) var(--s-7) var(--s-6); text-align: center; }

.thanks__mark {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto var(--s-5);
  border-radius: 50%;
  background: #E7F7EE; color: #0B7A3E;
  border: 1px solid #C4EBD5;
}
/* Draw the tick on rather than fading it in — it reads as confirmation. */
.thanks__mark .pna-icon { stroke-width: 2.4; }
.modal.is-open .thanks__mark .pna-icon {
  stroke-dasharray: 32; stroke-dashoffset: 32;
  animation: thanks-tick .42s var(--ease-out) .12s forwards;
}
@keyframes thanks-tick { to { stroke-dashoffset: 0; } }

.thanks h2 { font-size: 1.4rem; margin-bottom: var(--s-3); }
.thanks__lead { color: var(--ink-2); margin-bottom: var(--s-5); }
.thanks__note {
  font-size: var(--fs-sm); color: var(--ink-3);
  padding-top: var(--s-5); margin-bottom: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.thanks__actions { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }

.thanks__dismiss {
  background: none; border: 0; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3);
  padding: var(--s-2);
}
.thanks__dismiss:hover { color: var(--navy); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .modal.is-open .thanks__mark .pna-icon { animation: none; stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------------------
   34. Intro split
   Text column carries the weight; the aside is a genuine sidebar rather than a
   second half-column, so the section does not end in a block of empty space.
   ------------------------------------------------------------------------ */
.intro-split {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .intro-split { grid-template-columns: minmax(0, 1fr); } }

/* The aside sits with the body copy, not level with the heading above it. */
.intro-split > aside { padding-top: clamp(0px, 5vw, 68px); }
@media (max-width: 900px) { .intro-split > aside { padding-top: 0; } }

/* ---------------------------------------------------------------------------
   35. Featured category card
   The primary service line gets a wide horizontal card so it does not read as
   one of seven equals — and so the remaining six fill two clean rows.
   ------------------------------------------------------------------------ */
.cat-feature {
  display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-6);
  padding: var(--s-8);
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cat-feature:hover { box-shadow: var(--sh-3); transform: translateY(-3px); color: inherit; }
.cat-feature:hover .cat-feature__go { color: var(--navy); }
.cat-feature:hover .cat-feature__go .pna-icon { transform: translateX(3px); }

.cat-feature__body h3 { margin-bottom: 6px; font-size: var(--fs-h3); }
.cat-feature__body p  { margin: 0; color: var(--ink-2); max-width: 68ch; }

.cat-feature__go {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--blue);
  white-space: nowrap;
}
.cat-feature__go .pna-icon { transition: transform var(--dur) var(--ease); }

@media (max-width: 760px) {
  .cat-feature { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); padding: var(--s-6); }
  .cat-feature__go { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   35b. Sector group (industries hub)
   One white panel per sector: heading row, then the tile grid, so fourteen
   groups read as fourteen blocks instead of one long undifferentiated list.
   ------------------------------------------------------------------------ */
.sector-group {
  padding: clamp(20px, 2.4vw, 32px);
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-2);
}
.sector-group + .sector-group { margin-top: var(--s-6); }
.sector-group__head {
  display: flex; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.sector-group__head h2 { margin: 0; font-size: var(--fs-h3); }
.sector-group__head h2 a { color: inherit; }
.sector-group__head h2 a:hover { color: var(--blue); }
.sector-group__head p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }
.sector-group .tile { background: var(--bg-light); box-shadow: none; }
.sector-group .tile:hover { background: #fff; box-shadow: var(--sh-2); }

/* ---------------------------------------------------------------------------
   36. Photo-led hero
   The pattern every service-business template uses: a photograph carrying the
   section, a navy scrim so the type stays legible at any crop, and the enquiry
   card sitting over it. Applied only when the photograph actually exists — the
   hero otherwise keeps its flat navy, rather than showing an empty frame.
   ------------------------------------------------------------------------ */
/* Full-bleed photograph with a dark fade from the left, so the white headline
   sits on a dark field while the right side of the photo stays vivid. When the
   hero carries the quote form, the photo stops short of the bottom of the hero
   and the white card hangs over that edge into the light strip below. */
.hero--photo {
  --hero-tail: clamp(96px, 9vw, 150px);
  background: #fff;
  color: rgba(255,255,255,.86);
}
.hero--photo::before {
  background-image:
    linear-gradient(90deg,
      rgba(3,22,48,.94) 0%,
      rgba(3,22,48,.86) 30%,
      rgba(3,22,48,.55) 52%,
      rgba(3,22,48,.12) 75%,
      rgba(3,22,48,0) 100%),
    linear-gradient(180deg, rgba(3,22,48,.45) 0%, rgba(3,22,48,0) 28%),
    var(--hero-bg);
  background-color: var(--navy-deep);
  background-size: cover, cover, cover;
  background-position: center, center, center right;
  background-repeat: no-repeat;
  mask-image: none; -webkit-mask-image: none;
  opacity: 1;
}

.hero--photo h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero__accent { color: var(--cyan-bright); display: block; }
.hero--photo .hero__sub { color: rgba(255,255,255,.86); }
.hero--photo .eyebrow { background: rgba(25,211,224,.16); color: var(--cyan-bright); }
.hero--photo .hero__badge {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22);
  color: #fff; box-shadow: none; backdrop-filter: blur(8px);
}
.hero--photo .hero__badge .pna-icon { color: var(--cyan-bright); }

/* Trust points: icon in a small glass tile beside the label. */
.hero--photo .hero__points { gap: var(--s-4) var(--s-6); }
.hero--photo .hero__points li { color: #fff; font-weight: 600; max-width: 200px; line-height: 1.3; }
.hero--photo .hero__points .pna-icon {
  box-sizing: content-box; padding: 8px; border-radius: 10px; flex-shrink: 0;
  background: rgba(25,211,224,.16); color: var(--cyan-bright);
}

/* Buttons on the dark field: cyan solid primary, glass secondary, white phone. */
.hero--photo .btn--cyan { background: var(--cyan); color: var(--navy-deep); box-shadow: 0 8px 24px rgba(18,198,213,.28); }
.hero--photo .btn--cyan:hover { background: var(--cyan-bright); color: var(--navy-deep); }
.hero--photo .btn--ghost-light {
  background: rgba(255,255,255,.10); color: #fff;
  border-color: rgba(255,255,255,.3); backdrop-filter: blur(6px);
}
.hero--photo .btn--ghost-light:hover { background: rgba(255,255,255,.18); color: #fff; border-color: #fff; }
.hero--photo .hero__call { color: #fff; }
.hero--photo .hero__call:hover { color: var(--cyan-bright); border-bottom-color: var(--cyan-bright); }
.hero--photo .hero__call .pna-icon { color: var(--cyan-bright); }

/* Breadcrumbs back to their on-dark colours. */
.hero--photo .crumbs--on-dark { border-bottom-color: rgba(255,255,255,.12); }
.hero--photo .crumbs--on-dark a { color: rgba(255,255,255,.72); }
.hero--photo .crumbs--on-dark a:hover { color: #fff; }
.hero--photo .crumbs--on-dark [aria-current="page"] { color: var(--cyan-bright); }
.hero--photo .crumbs--on-dark .pna-icon { color: rgba(255,255,255,.4); }

/* Photo + form: photo ends above the hero's bottom, card overlaps the edge. */
.hero--photo.hero--form { padding-bottom: var(--s-8); }
.hero--photo.hero--form::before { bottom: var(--hero-tail); }
.hero--photo.hero--form .hero__inner { align-items: start; padding-bottom: 0; }
.hero--photo.hero--form .hero__body { padding-bottom: calc(var(--hero-tail) + 40px); }
.hero--photo.hero--form .hero__visual { margin-top: clamp(16px, 5vw, 96px); }
.hero--photo.hero--form .hero-form { box-shadow: 0 30px 70px rgba(3,22,48,.28), 0 2px 8px rgba(3,22,48,.08); }

/* Stacked on narrow screens: the photo sits behind everything and the card
   simply follows the text on the dark field. */
@media (max-width: 1000px) {
  .hero--photo::before {
    background-image:
      linear-gradient(180deg, rgba(3,22,48,.80) 0%, rgba(3,22,48,.90) 100%),
      var(--hero-bg);
    background-size: cover, cover;
    background-position: center, center;
  }
  .hero--photo.hero--form { padding-bottom: 0; }
  .hero--photo.hero--form::before { bottom: 0; }
  .hero--photo.hero--form .hero__inner { padding-bottom: clamp(36px, 6vw, 56px); }
  .hero--photo.hero--form .hero__body { padding-bottom: 0; }
  .hero--photo.hero--form .hero__visual { margin-top: 0; }
}

/* ---------------------------------------------------------------------------
   37. Homepage layout fixes
   ------------------------------------------------------------------------ */
/* Figures as a 2x2 card beside the intro copy instead of a thin full-width
   row under it, so the right column is no longer one small note in empty space. */
.intro-stats {
  padding: var(--s-7);
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-2);
}
.intro-stats .stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-7) 0; border-top: 0; padding-top: 0;
}
.intro-stats .stats .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
.intro-stats .stats .stat:nth-child(even) { padding-left: var(--s-6); border-left: 1px solid var(--line); }

/* Fourteen sectors as two even rows of seven, not 6 + 6 + 2. */
.grid--sectors { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-4); }
.grid--sectors .tile { flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-5); min-height: 118px; }
.grid--sectors .tile .pna-icon { width: 24px; height: 24px; }
@media (max-width: 1280px) { .grid--sectors { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .grid--sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Product photo cards: four per row on desktop. */
@media (max-width: 1200px) { .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Testimonial invite as one horizontal band rather than a small card adrift
   in a full-height section. */
.feedback-card {
  display: grid; align-items: center; gap: var(--s-6);
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-inline: auto;
  padding: var(--s-7) var(--s-8);
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-2);
}
.feedback-card h3 { margin: 0 0 6px; }
.feedback-card p { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }
@media (max-width: 900px) {
  .feedback-card { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; padding: var(--s-7); }
}

/* Hero with photo + form: the trust points move down into the white strip
   below the photo, level with the bottom of the quote card, so that strip
   carries content instead of being a blank band. */
@media (min-width: 1001px) {
  .hero--photo.hero--form { --hero-tail: 128px; }
  .hero--photo.hero--form .hero__body { position: relative; align-self: stretch; }
  .hero--photo.hero--form .hero__points {
    position: absolute; left: 0; right: 0; bottom: 0;
    margin: 0; min-height: 88px; align-items: center;
    flex-wrap: nowrap; gap: var(--s-5);
  }
  .hero--photo.hero--form .hero__points li { color: var(--navy); }
  .hero--photo.hero--form .hero__points .pna-icon { background: var(--blue-12); color: var(--blue); }
}

/* ---------------------------------------------------------------------------
   38. Service-page layout fixes
   ------------------------------------------------------------------------ */
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid--5 { grid-template-columns: minmax(0, 1fr); } }

/* Benefit cards laid out horizontally (icon left, text right): half the height
   of the stacked version, so a list of four does not tower over its neighbour. */
.feature--row { flex-direction: row; align-items: flex-start; gap: var(--s-5); padding: var(--s-5) var(--s-6); }

/* List items as individual cards — used for use-case lists and the contact
   methods beside enquiry forms, so those columns have visual weight instead of
   a few thin lines floating in a tall empty column. */
.check-list--cards { gap: var(--s-3); }
.check-list--cards li {
  align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-light); border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: 1.45;
}
.section--light .check-list--cards li { background: #fff; box-shadow: var(--sh-1); }
.check-list--cards .pna-icon {
  box-sizing: content-box; padding: 9px; margin-top: 0;
  background: var(--blue-12); color: var(--blue); border-radius: 10px;
}
.check-list--cards .pna-icon--fill { color: #1DA851; background: rgba(37,211,102,.14); }

/* Enquiry sections: keep the form in view while the contact column is shorter. */
.split > div > .check-list--cards { max-width: 560px; }

/* Photo hero with form: centre the text vertically in the photographed area,
   rather than hugging the top with an empty dark block beneath it. */
@media (min-width: 1001px) {
  .hero--photo.hero--form .hero__body {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  }
}

/* ---------------------------------------------------------------------------
   40. Small-screen safety
   Nothing on a page may be wider than the phone. The recurring cause was a
   single-column grid written as `1fr`, which means minmax(auto, 1fr): a wide
   child (a specification table, a long word) then stretches the whole column
   past the screen. All single-column grids are now minmax(0, 1fr) above; the
   rules here handle the remaining content that cannot shrink on its own.
   ------------------------------------------------------------------------ */
.table-wrap, .prose, .answer, .note, .card, .feature, .tile { min-width: 0; }
h1, h2, h3, h4, p, li, td, th, a { overflow-wrap: break-word; }
.btn, .nav__link, .eyebrow { overflow-wrap: normal; }

@media (max-width: 640px) {
  /* The specification table wraps its words instead of forcing a 520px minimum. */
  .spec-table { min-width: 0; }
  .spec-table th, .spec-table td { padding: 11px 14px; }
  .spec-table th[scope="row"] { width: 38%; }

  /* Industries hub: heading row wraps and the "Sector overview" link drops under it. */
  .sector-group__head { flex-wrap: wrap; }
  .sector-group__head .link-arrow { margin-left: 0 !important; white-space: normal !important; flex-basis: 100%; }
}

/* ---------------------------------------------------------------------------
   41. Card sliders on phones
   Grids of cards (services, products, categories, industries, areas, feature
   and process cards) become a swipeable row on phones: one card nearly full
   width with the next one peeking in, instead of two cramped columns.
   Compact link tiles and blog article lists stay as normal grids. Desktop and
   tablet layouts are unchanged.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  /* A later rule had put .grid--4 back to two columns on phones. */
  .grid--4 { grid-template-columns: minmax(0, 1fr); }

  .grid:has(> .card:not(.blog-card)),
  .grid:has(> .feature:not(.feature--row)),
  .grid:has(> .quote-card),
  .steps {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Run edge to edge: cancel the container gutter, then pad the content back
       in so the first card lines up with the page text. Bottom padding keeps
       the card shadows from being clipped. */
    margin-inline: calc(var(--gutter) * -1);
    padding: 6px var(--gutter) 22px;
  }
  .grid:has(> .card:not(.blog-card))::-webkit-scrollbar,
  .grid:has(> .feature:not(.feature--row))::-webkit-scrollbar,
  .grid:has(> .quote-card)::-webkit-scrollbar,
  .steps::-webkit-scrollbar { display: none; }

  .grid:has(> .card:not(.blog-card)) > *,
  .grid:has(> .feature:not(.feature--row)) > *,
  .grid:has(> .quote-card) > *,
  .steps > * {
    flex: 0 0 82%;
    max-width: 340px;
    scroll-snap-align: start;
    /* Reveal-on-scroll would leave off-screen slides invisible until they are
       swiped into view, so slides are always shown. */
    opacity: 1 !important;
    transform: none !important;
  }
  .grid:has(> .card:not(.blog-card)) > *:hover { transform: none !important; }
}

/* Narrowest phones (320 to 380px): give the header a little more room. */
@media (max-width: 380px) {
  .header__cta { gap: 6px; }
  .header__cta .btn--sm { padding: 9px 12px; }
  .nav-toggle { width: 42px; height: 42px; }
  .hero h1 { font-size: clamp(1.9rem, 9vw, 2.4rem); }
}