/* Norwest 18 homepage takeover popup v8 (2026-11-12: + CC captions, see the end). v7 (2026-11-12: Read The Blog replaces Watch The Video). Was v3 (norwestdev1, ?takeover=n18). v3: watch mode = video with the control bar under it (never over the picture), emerald play/pause, no focus ring on open. v2: DM Serif first line, phone sizes = FINE phone frame. FINE Figma 2295:48 / 2295:76 / 2295:119.
   Sizes from the frames: panel 1020 x 644 desktop (720 tablet, 343 phone), padding 80px, gap 29px, logo 395 x 47
   (275 x 33 phone), title DM Serif 38px (34 phone) + Poppins 25px, video 384 x 214 (275 x 153 phone), X 40px in
   from the panel's top/right (phone 31/18). Line heights = the site's (DM Serif 1.15, Poppins 1.64), per the FINE
   handoff rule. X = the site menu's close X; play = the site's video play button (white circle, Deep Teal glyph). */
.nwtk { --nwtk-top: 95px; --teal: #07485B; --emerald: #009579; --ecru: #F3F3EE; position: fixed; inset: var(--nwtk-top) 0 0 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .35s ease; }
.nwtk[hidden] { display: none; }
.nwtk.is-open { opacity: 1; }
.nwtk__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); cursor: pointer; }
.nwtk__panel { position: relative; width: 1020px; max-width: 100%; min-height: 644px; max-height: 100%; overflow: auto; background: #E9E9E4 var(--nwtk-bg) center / cover no-repeat; color: #000; transform: translate3d(0, 14px, 0); transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1); overscroll-behavior: contain; scrollbar-width: none; }
.nwtk__panel::-webkit-scrollbar { display: none; }
.nwtk.is-open .nwtk__panel { transform: none; }
.nwtk__panel:focus { outline: none; }
.nwtk__body { display: flex; flex-direction: column; align-items: center; gap: 29px; padding: 80px 24px; text-align: center; }
.nwtk__mark { display: flex; align-items: flex-start; gap: 13px; margin: 0; height: 47px; }
.nwtk__wordmark { width: 325px; height: 47px; display: block; }
.nwtk__18 { width: 57px; height: 47px; display: block; }
.nwtk .nwtk__title { margin: 0; font: 400 38px/1.15 'DM Serif Display', Georgia, serif !important; color: #000; letter-spacing: 0; text-transform: none; }
.nwtk__t1, .nwtk__t2 { display: block; }
.nwtk .nwtk__title .nwtk__t1 { font-family: 'DM Serif Display', Georgia, serif !important; font-weight: 400; }
.nwtk .nwtk__t2 { margin-top: 8px; font: 400 25px/1.64 'Poppins', sans-serif !important; letter-spacing: .25px; }
.nwtk__media { position: relative; width: 384px; aspect-ratio: 384 / 214; background: #000; overflow: hidden; }
.nwtk__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.nwtk .nwtk__play { position: absolute; top: 50%; left: 50%; width: 62px; height: 62px; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--teal); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s ease, background .2s ease, opacity .25s ease; box-shadow: none; }
.nwtk .nwtk__play:hover, .nwtk .nwtk__play:focus-visible { transform: translate(-50%, -50%) scale(1.1); background: #fff; }
.nwtk .nwtk__play:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }
.nwtk__play-icon { width: 26px; height: 26px; margin-left: 3px; }
.nwtk .nwtk__watch { padding: 0; border: 0; background: none; font: 400 25px/1.64 'Poppins', sans-serif; letter-spacing: .25px; color: #000; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; text-transform: none; }
.nwtk .nwtk__watch:hover, .nwtk .nwtk__watch:focus-visible { color: var(--emerald); background: none; }
.nwtk .nwtk__watch:focus-visible { outline: 2px solid var(--emerald); outline-offset: 4px; }

/* X: the site menu's close icon (two 2px bars), drawn at FINE's 32px, 40px in from the corner */
.nwtk .nwtk__x { position: absolute; z-index: 3; top: 34px; right: 34px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; box-shadow: none; transition: color .2s ease, background-color .2s ease; }
.nwtk .nwtk__x:hover, .nwtk .nwtk__x:focus-visible { background: rgba(0, 0, 0, .06); color: #000; }
.nwtk .nwtk__x:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.nwtk__x-icon { position: relative; width: 32px; height: 32px; }
.nwtk__x-icon::before, .nwtk__x-icon::after { content: ""; position: absolute; top: 50%; left: -3px; right: -3px; height: 2px; margin-top: -1px; background: currentColor; border-radius: 2px; }
.nwtk__x-icon::before { transform: rotate(45deg); }
.nwtk__x-icon::after { transform: rotate(-45deg); }

/* WATCH mode: "plays video full size in modal" (FINE) = the video fills the panel width from the start, with sound,
   and the Norwest control bar sits UNDER the picture so it never covers it */
.nwtk__bar { display: none; }
.nwtk[data-state="watch"] .nwtk__panel { background: #000; overflow: hidden; min-height: 0; display: flex; flex-direction: column; }
.nwtk[data-state="watch"] .nwtk__body { padding: 0; gap: 0; display: flex; flex-direction: column; }
.nwtk[data-state="watch"] .nwtk__mark, .nwtk[data-state="watch"] .nwtk__title, .nwtk[data-state="watch"] .nwtk__watch { display: none; }
.nwtk[data-state="watch"] .nwtk__media { width: 100%; aspect-ratio: auto; display: flex; flex-direction: column; overflow: visible; background: #000; }
.nwtk[data-state="watch"] .nwtk__video { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: calc(100vh - var(--nwtk-top) - 48px - 56px); object-fit: contain; cursor: pointer; }
.nwtk[data-state="watch"] .nwtk .nwtk__play, .nwtk[data-state="watch"] .nwtk__play { top: calc(50% - 28px); opacity: 0; pointer-events: none; }
.nwtk[data-state="watch"].is-paused .nwtk__play { opacity: 1; pointer-events: auto; }
.nwtk[data-state="watch"] .nwtk__x { top: 14px; right: 14px; width: 40px; height: 40px; color: #fff; background: rgba(0, 0, 0, .45); }
.nwtk[data-state="watch"] .nwtk__x:hover, .nwtk[data-state="watch"] .nwtk__x:focus-visible { background: rgba(0, 0, 0, .7); color: #fff; }
.nwtk[data-state="watch"] .nwtk__x-icon { width: 20px; height: 20px; }

/* Norwest controls: Deep Teal bar under the video, Ecru thin-line icons, Emerald play button and progress */
.nwtk[data-state="watch"] .nwtk__bar { position: relative; display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 12px; background: var(--teal); color: var(--ecru); font: 400 13px/1 'Poppins', sans-serif; letter-spacing: .3px; }
.nwtk .nwtk-c { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ecru); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none; transition: background-color .2s ease, color .2s ease, transform .15s ease; }
.nwtk .nwtk-c:hover { background: rgba(243, 243, 238, .14); color: #fff; }
.nwtk .nwtk-c:active { transform: scale(.92); }
.nwtk .nwtk-c:focus-visible { outline: 2px solid var(--ecru); outline-offset: 1px; }
.nwtk .nwtk-c--toggle { background: var(--emerald); color: #fff; }
.nwtk .nwtk-c--toggle:hover { background: #0E9A80; color: #fff; transform: scale(1.06); }
.nwtk-i { display: block; width: 20px; height: 20px; }
.nwtk-c--toggle .nwtk-i { width: 18px; height: 18px; }
.nwtk-c--toggle .nwtk-i--play { display: none; margin-left: 2px; }
.nwtk.is-paused .nwtk-c--toggle .nwtk-i--play { display: block; }
.nwtk.is-paused .nwtk-c--toggle .nwtk-i--pause { display: none; }
.nwtk-mute { display: none; }
.nwtk.is-muted .nwtk-mute { display: block; }
.nwtk.is-muted .nwtk-wave { display: none; }
.nwtk__track { position: relative; flex: 1 1 auto; height: 24px; margin: 0 10px; cursor: pointer; touch-action: none; }
.nwtk__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(243, 243, 238, .28); }
.nwtk__fill { position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; width: var(--p, 0%); border-radius: 2px; background: var(--emerald); }
.nwtk__knob { position: absolute; top: 50%; left: var(--p, 0%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(0, 149, 121, .55); transform: scale(.85); transition: transform .15s ease; }
.nwtk__track:hover .nwtk__knob, .nwtk__track:focus-visible .nwtk__knob, .nwtk__track.is-drag .nwtk__knob { transform: scale(1.2); }
.nwtk__track:focus-visible { outline: 2px solid var(--ecru); outline-offset: 2px; border-radius: 3px; }
.nwtk__time { flex: 0 0 auto; min-width: 84px; text-align: center; font-variant-numeric: tabular-nums; opacity: .92; }
.nwtk__media:fullscreen { background: #000; justify-content: center; }
.nwtk__media:fullscreen .nwtk__video { max-height: calc(100vh - 56px); }
html.nwtk-lock, html.nwtk-lock body { overflow: hidden !important; }

/* short laptop screens: keep the whole panel on screen */
@media (min-width: 768px) and (max-height: 820px) {
	.nwtk__panel { min-height: 0; }
	.nwtk__body { padding-top: 48px; padding-bottom: 48px; gap: 20px; }
	.nwtk__media { width: 340px; }
}
@media (min-width: 768px) and (max-height: 680px) {
	.nwtk__body { padding-top: 32px; padding-bottom: 32px; gap: 14px; }
	.nwtk__media { width: 280px; }
	.nwtk .nwtk__title { font-size: 32px !important; }
	.nwtk .nwtk__t2, .nwtk .nwtk__watch { font-size: 21px !important; }
	.nwtk[data-state="watch"] .nwtk__panel { min-height: 420px; }
}

/* tablet (Figma 2295:76): panel 720 wide, 24px in from the sides */
@media (max-width: 1024px) {
	.nwtk { --nwtk-top: 85px; }
	.nwtk__panel { width: 720px; }
}

/* phone (Figma 2295:119): panel 343 wide, logo 275, title 34px, video 275 x 153, X 31px from the top / 18px from the right */
@media (max-width: 767px) {
	.nwtk { --nwtk-top: 65px; padding: 20px 16px; }
	.nwtk__panel { width: 343px; min-height: min(627px, 100%); }
	.nwtk__body { padding: 96px 20px 64px; gap: 29px; }
	.nwtk__mark { height: 33px; gap: 9px; }
	.nwtk__wordmark { width: 226px; height: 33px; }
	.nwtk__18 { width: 40px; height: 33px; }
	.nwtk .nwtk__title { font-size: 34px !important; }
	.nwtk .nwtk__title { max-width: 276px; }
	.nwtk .nwtk__t2 { font-size: 25px !important; }
	.nwtk__media { width: 275px; }
	.nwtk .nwtk__play { width: 45px; height: 45px; }
	.nwtk__play-icon { width: 20px; height: 20px; margin-left: 2px; }
	.nwtk .nwtk__watch { font-size: 25px; }
	.nwtk .nwtk__x { top: 25px; right: 12px; }
	.nwtk[data-state="watch"] .nwtk__bar { gap: 2px; height: 52px; padding: 0 8px; }
	.nwtk .nwtk-c { width: 34px; height: 34px; }
	.nwtk__time { display: none; }
	.nwtk[data-state="watch"] .nwtk__x { top: 8px; right: 8px; width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
	.nwtk, .nwtk__panel, .nwtk .nwtk__play, .nwtk .nwtk-c { transition: none !important; }
	.nwtk__panel { transform: none; }
}
@media (max-width: 767px) and (max-height: 700px) {
	.nwtk__body { padding-top: 72px; padding-bottom: 40px; gap: 20px; }
	.nwtk__panel { min-height: 0; }
}

/* v4 (2026-11-12): the video streams from YouTube behind our own controls. The YouTube frame sits exactly where our
   <video> sat, takes no clicks (so YouTube's own hover overlays never show; our hit layer + bar get every click), and
   fades in over FINE's still once it is actually playing. If YouTube can't load, .is-yt is never set and the popup
   uses our own <video> exactly as before. */
.nwtk__yt { display: none; position: absolute; inset: 0; overflow: hidden; background: #000 var(--nwtk-still) center / cover no-repeat; }
.nwtk__yt iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); border: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.nwtk.is-ytplaying .nwtk__yt iframe { opacity: 1; }
.nwtk__hit { display: none; position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.nwtk.is-yt .nwtk__yt, .nwtk.is-yt .nwtk__hit { display: block; }
.nwtk.is-yt .nwtk__video { display: none; }
.nwtk .nwtk__play { z-index: 2; }
/* watch mode: the YouTube frame takes the video's 16:9 slot above the control bar */
.nwtk.is-yt[data-state="watch"] .nwtk__yt { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - var(--nwtk-top) - 48px - 56px); }
.nwtk.is-yt[data-state="watch"] .nwtk__hit { bottom: 56px; }
@media (max-width: 767px) { .nwtk.is-yt[data-state="watch"] .nwtk__hit { bottom: 52px; } }
.nwtk__media:fullscreen .nwtk__yt { flex: 1 1 auto; aspect-ratio: auto; max-height: none; }

/* v5: YouTube draws its own title bar (top) and "More videos" / YouTube logo (bottom) on the player. Make the frame
   taller than our box: the 16:9 picture still fills the box exactly (same width), and those bars land in the extra
   height above and below, which the box crops off. */
.nwtk__yt iframe { height: calc(100% + 180px); }
@media (max-width: 767px) { .nwtk__yt iframe { height: calc(100% + 140px); } }

/* v6 (Adam 11-12 launch morning): "Read The Blog" under "Watch The Video". Same type as Watch, a touch smaller so the
   video stays the main action; sits 6px under it (the column's 29px gap is pulled back for this pair). Hidden while the
   video plays full size. */
.nwtk .nwtk__read { margin-top: -23px; padding: 0; font: 400 21px/1.64 'Poppins', sans-serif; letter-spacing: .25px; color: #000; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-transform: none; }
.nwtk .nwtk__read:hover, .nwtk .nwtk__read:focus-visible { color: var(--emerald); }
.nwtk .nwtk__read:focus-visible { outline: 2px solid var(--emerald); outline-offset: 4px; }
.nwtk[data-state="watch"] .nwtk__read { display: none; }
@media (min-width: 768px) and (max-height: 820px) { .nwtk .nwtk__read { margin-top: -14px; } }
@media (min-width: 768px) and (max-height: 680px) { .nwtk .nwtk__read { margin-top: -8px; font-size: 18px !important; } }
@media (max-width: 767px) { .nwtk .nwtk__read { margin-top: -23px; font-size: 20px; } }
@media (max-width: 767px) and (max-height: 700px) { .nwtk .nwtk__read { margin-top: -14px; } .nwtk__body { padding-top: 64px; } }

/* v7 (Adam 11-12 ~7:30am): "swap the watch video link with read the blog instead since clicking the video plays the
   video". One link, in Watch The Video's place and FINE's style (Poppins 25px, underlined). */
.nwtk .nwtk__read { margin-top: 0 !important; font-size: 25px !important; }
@media (min-width: 768px) and (max-height: 680px) { .nwtk .nwtk__read { font-size: 21px !important; } }

/* v8 (Adam 11-12 ~9:25am): CC button in the control bar (Emerald when on); the caption line over the bottom of the
   picture, white on a dark box, Poppins; same look as the blog player. Only while the video plays full size. */
.nwtk .nwtk-c--cc[aria-pressed="true"] { background: var(--emerald); color: #fff; }
.nwtk .nwtk__cc { display: none; position: absolute; left: 50%; bottom: calc(56px + 4.5%); z-index: 2; transform: translateX(-50%);
  max-width: 86%; padding: .35em .7em; background: rgba(20, 20, 20, .82); color: #fff; font: 500 clamp(14px, 1.4vw, 20px)/1.35 'Poppins', sans-serif;
  text-align: center; letter-spacing: .2px; pointer-events: none; }
.nwtk[data-state="watch"].is-cc .nwtk__cc.is-on { display: block; }
.nwtk__media:fullscreen .nwtk__cc { font-size: clamp(20px, 2.2vw, 34px); }
@media (max-width: 767px) { .nwtk .nwtk__cc { bottom: calc(52px + 4%); font-size: 13px; max-width: 92%; } }