/* NJA polish v2, 11 Oct 2026. Load LAST (after nja-polish.css). */

/* V2-1. Header CTA "Free consultation": the label sat 7px above the box centre
   (flex default align-items:stretch + 22px span line box). Centre both axes on one
   line box; equal 20px side padding; the 12px cut corner is outside the content box. */
@media(min-width:1101px){.header-cta{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  height:48px;min-height:48px;padding:0 20px!important;gap:16px;line-height:1}
.header-cta>span{display:inline-flex;align-items:center;font-size:0;line-height:0}
.header-cta svg{display:block}}
/* The CTA is hidden at <=1100px by the live design (menu takes over); unchanged. */

/* V2-3. People band: real team portrait mosaic (NJA firm profile, p.24 studio
   cut-outs), one duotone grade (navy #1A3050 shadows -> ivory highlights), on the
   soft navy. Headline + CTA in their own column: no text over any face.
   Tiles are served at native 132x165 (no upscaled files). */
.people-transition.people-v2{background:#1A3050;min-height:0;padding:72px 0}
.people-transition.people-v2::before{display:none}
.people-v2>.wrap{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:64px;width:min(1184px,calc(100% - 96px))!important}
.people-v2 .pm-copy{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.people-v2 .pm-copy h2{margin:0}
.people-mosaic{display:grid;grid-template-columns:repeat(5,132px);grid-auto-rows:165px;gap:10px}
.people-mosaic img{display:block;width:132px;height:165px;object-fit:cover;box-shadow:inset 0 0 0 1px #ffffff14}
.pm-accent{display:grid;place-items:center;background:#BD9B54;clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.pm-accent img{width:64px;height:auto;box-shadow:none;filter:brightness(0) saturate(100%) invert(14%) sepia(30%) saturate(1500%) hue-rotate(190deg)}
.pm-accent--m{display:none}
@media(max-width:1180px) and (min-width:768px){.people-mosaic{grid-template-columns:repeat(4,110px);grid-auto-rows:138px}.people-mosaic img{width:110px;height:138px}.people-v2 .pm-accent--m{display:block;background:#ffffff0f;clip-path:none}}
@media(max-width:767px){
 .people-transition.people-v2{padding:40px 0 48px}
 .people-v2>.wrap{grid-template-columns:1fr;gap:32px;width:calc(100% - 40px)!important}
 .people-mosaic{order:-1;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:6px}
 .people-mosaic img,.pm-accent{width:100%;height:auto;aspect-ratio:4/5}
 .pm-accent img{width:48%;aspect-ratio:auto}
 .people-v2 .pm-accent--m{display:block;background:#ffffff0f;clip-path:none}
 .people-v2 .pm-copy{gap:24px}
}

/* V2-4. No repeated photo. The pen-and-document photo stays only in Hero 03 (its
   strongest use). Post-hero band: Unsplash 2AOIg7Qvu8w (advisor walking a client
   through a document), graded. Webinar top: NJA's own signing photo
   (nja-team-at-work.jpg), graded. See IMAGES.md. */
.support-introduction{background-image:url('assets/support-consultation-g.jpg')!important;background-position:62% 22%!important}
.renewal-image{background:linear-gradient(90deg,rgba(26,48,80,.08),rgba(26,48,80,.16) 80%,rgba(218,218,217,.30)),url('assets/webinar-agreement-g.jpg') 40% 50%/cover!important}
@media(max-width:767px){.support-introduction{background-position:88% 12%!important}.renewal-image{background-position:center,45% 50%!important}}

/* V2-5. Header logo legibility (msg: "too small and unreadable").
   Monogram 72x92 -> 90x115 desktop (54x70 -> 64x82 mobile); slogan art 200x80 ->
   250x100 desktop (150x60 -> 180x72 mobile). Header padding trimmed so the bar grows
   only ~16px on desktop and ~10px on mobile. Proportions, colours and gap unchanged. */
html body header .header-monogram{width:90px;height:115px}
html body header .slogan-art{width:250px;height:100px}
html body header{padding-top:10px;padding-bottom:10px}
@media(max-width:1100px) and (min-width:768px){html body header .slogan-art{width:220px;height:88px}html body header .header-monogram{width:80px;height:102px}}
@media(max-width:767px){html body header{padding-top:10px;padding-bottom:10px}
 html body header .header-monogram{width:64px;height:82px}
 html body header .slogan-art{width:180px;height:72px}}
@media(max-width:359px){html body header .header-monogram{width:52px;height:67px}html body header .slogan-art{width:146px;height:58px}}

/* V2-6. Booking page (book.html).
   a) Intro: the large white bilingual logo repeated the header and footer marks; replaced by
      NJA's own meeting-room photo (SharePoint, NJA BRAND SAMI/Photos/Office/DSC04864), graded.
   b) "Preferred dates or times" spans the full row (was half width beside an empty cell).
   c) Online card: dead space under the copy filled with a 3-item meta row that matches the
      office chooser's height in the next card, so both CTAs sit on one line with no void. */
.bk-intro-grid{align-items:center}
.bk-photo{margin:0;position:relative;aspect-ratio:4/3;max-width:560px;width:100%;justify-self:end;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%)}
.bk-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.bk-photo::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff1f;pointer-events:none}
.booking-fallback .form-grid label:has(input[name=availability]){grid-column:1/-1}
.bk-meta{list-style:none;margin:0 0 28px;padding:16px 0 0;border-top:1px solid #0E224422;display:flex;flex-wrap:wrap;gap:8px 10px}
.bk-meta li{font-size:14px;line-height:1;padding:11px 14px;background:#fff;border:1px solid #0E22441f;color:#1A3050}
@media(max-width:767px){.bk-photo{justify-self:stretch;max-width:none;aspect-ratio:16/10;margin-top:28px;clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
 .booking-fallback .form-grid label:has(input[name=availability]){grid-column:auto}}

/* V2-7. Webinar registration section (#webinar).
   a) CTA label wrapped onto two lines ("Register for the / webinar"): one line, natural width.
   b) "Add to calendar" hint was 11px gold-on-navy: 13px, underlined, ivory-gold, 44px tap row on mobile.
   c) Agenda numbers had variable width, so headings 01/02/03 started at different x: fixed 36px column.
   d) Speaker: Nasir's real brand-shoot portrait (IMG_8438, NJA OneDrive), graded, beside the name. */
.debt-webinar .webinar-layout a.cta,.debt-webinar a[data-action=webinar_registration]{white-space:nowrap;width:auto!important;max-width:none!important;padding-right:20px}
.debt-webinar .calendar-hint{font-size:13px!important;color:#D8BE85!important;text-decoration:underline;text-underline-offset:3px;margin-left:10px}
.webinar-agenda article{display:grid!important;grid-template-columns:36px 1fr!important;column-gap:12px!important}
.webinar-agenda article>span{width:auto!important;min-width:0!important}
.speaker-card{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center;margin-top:28px}
.speaker-card .speaker-line{margin:0!important}
.speaker-photo{display:block;width:96px;height:120px;object-fit:cover;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);box-shadow:inset 0 0 0 1px #ffffff1f}
@media(max-width:767px){.debt-webinar .calendar-hint{display:inline-block;padding:12px 0}.speaker-card{grid-template-columns:80px 1fr;gap:16px}.speaker-photo{width:80px;height:100px}}