/* NTV International — static site stylesheet
   Plain CSS, no build step, no external dependencies. */

:root {
  --ink: #333333;
  --muted: #666b73;
  --line: #e3e5e8;
  --bg: #fff;
  --bg-soft: #f4f5f6;
  --dark: #111315;
  --accent: #1667b7;
  --accent-light: #8cc8f5;
  --header-h: 72px;
  --wrap: 1170px;
  --font: "Open Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  --heading: "Roboto Slab", "Hiragino Kaku Gothic ProN", "Hiragino Sans", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.85;
  color: var(--ink); background: var(--bg);
  overflow-wrap: anywhere; word-break: normal; line-break: strict;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); }
a:hover { text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--heading); line-height: 1.4; margin: 1.6em 0 .6em; font-weight: 700; color: #222; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.4em; margin: 0 0 1.1em; }
pre { white-space: pre-wrap; font-family: inherit; background: var(--bg-soft); padding: .8em 1em; border-radius: 6px; margin: 0 0 1.1em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; top: 0; background: #fff; color: #000; padding: 8px 12px; z-index: 1000; }
.skip:focus { left: 8px; top: 8px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #1667b7; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; border-radius: 2px;
}
.site-header a:focus-visible, .site-header button:focus-visible, .site-footer a:focus-visible, .hero a:focus-visible, .hero button:focus-visible {
  outline-color: #8cc8f5; box-shadow: 0 0 0 5px #111315;
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  background: rgba(17, 19, 21, .94);
}
/* home: the menu bar starts at the bottom of the first screen, as on the original site,
   and sticks to the top once the visitor scrolls past the video (JS sets the position) */
.home .site-header { position: absolute; top: calc(100vh - var(--header-h)); background: #000; }
.home .site-header.is-fixed { position: fixed; top: 0; background: rgba(17, 19, 21, .94); }
@media (max-width: 960px) {
  .home .site-header { position: fixed; top: 0; background: rgba(17, 19, 21, .94); }
}
.header-in { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 1280px; }
.brand { display: block; line-height: 0; }
.brand img { height: 46px; width: auto; }
#nav { margin-left: auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav-list > li { position: relative; }
.nav-list a, .sub-toggle {
  display: block; font: 400 14px/1 var(--font); letter-spacing: 1.4px; text-transform: uppercase;
  color: #b5b3b3; text-decoration: none; padding: 26px 14px; background: none; border: 0; cursor: pointer;
}
.nav-list a:hover, .sub-toggle:hover, .has-sub:focus-within > .sub-toggle, .nav-list a[aria-current="page"] { color: #fff; }
.sub-toggle::after { content: ""; display: inline-block; margin-left: 7px; width: 5px; height: 5px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); }
.sub { list-style: none; margin: 0; padding: 6px 0; position: absolute; left: 0; top: 100%; min-width: 300px;
  background: rgba(17, 19, 21, .97); display: none; border-top: 2px solid var(--accent); }
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.open > .sub { display: block; }
.sub a { text-transform: none; letter-spacing: .02em; font-weight: 500; font-size: 13.5px; line-height: 1.5; padding: 10px 18px; }
.sub a:hover { background: rgba(255, 255, 255, .08); }
.menu-btn { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-btn span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: .2s; }

/* -------------------------------------------------------------------- hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 480px; background: #000; overflow: hidden; }
.hero-video { position: absolute; inset: 0; overflow: hidden; }
.hero-video iframe {
  position: absolute; top: 50%; left: 50%; border: 0; pointer-events: none;
  width: max(100vw, 177.78vh); height: max(56.25vw, 100vh); transform: translate(-50%, -50%) scale(1.2);
}
.hero-img { position: absolute; inset: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.scroll-hint { position: absolute; left: 50%; bottom: 24px; width: 28px; height: 44px; margin-left: -14px;
  border: 2px solid rgba(255,255,255,.8); border-radius: 16px; }
.scroll-hint span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px;
  background: #fff; animation: hint 1.6s infinite; }
@keyframes hint { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* -------------------------------------------------------------- inner pages */
.inner { padding-top: var(--header-h); }
.content { padding-top: 28px; padding-bottom: 72px; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.page-title { font-family: var(--heading); font-size: 28px; font-weight: 700; color: #444; line-height: 1.25; margin: 0 0 .9em; }
.post-meta { color: var(--muted); font-size: 14px; margin: -.4em 0 1.6em; }
.entry h2 { font-size: 24px; margin-top: 1.6em; }
.entry h3 { font-size: 20px; }
.entry .spacer { max-height: 40px; }
.entry img { border-radius: 2px; }
.entry img.alignleft { float: left; margin: 0 1.4em 1em 0; }
.entry img.alignright { float: right; margin: 0 0 1em 1.4em; }
.entry img.aligncenter { display: block; margin: 1em auto; }
.entry::after { content: ""; display: block; clear: both; }
.menuRibbon_ntv { font-family: var(--heading); font-weight: 700; color: #222; margin: 1.8em 0 .8em; padding: 2px 8px 2px 7px; background: #eee; border-left: 10px solid #ccc; font-size: 20px; line-height: 1.4; }
.embed { position: relative; aspect-ratio: 16 / 9; max-width: 840px; margin: 0 0 1.2em; background: #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.entry iframe { max-width: 100%; border: 0; }
.entry .vc-row { margin: 0 0 1em; }
.entry .vc-row:has(> .vc-col) { display: flex; flex-wrap: wrap; gap: 24px; }
.entry .vc-col-6 { flex: 1 1 340px; }
.entry .vc-col-4 { flex: 1 1 240px; }
.entry .vc-col-3 { flex: 1 1 180px; }
.entry .vc-col-8 { flex: 2 1 400px; }
.entry .vc-col-12 { flex: 1 1 100%; }

/* tables (project lists) */
.table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: 15px; line-height: 1.6; }
.table th, .table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { background: var(--bg-soft); font-weight: 700; width: auto !important; }
.table tr:hover td { background: #fafbfc; }
.table-wrap { overflow-x: auto; }
.entry table { display: block; overflow-x: auto; }
.entry table.table { display: table; }

/* genre jump buttons */
ul.ntvlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.ntvlist li { float: none !important; margin: 0 !important; padding: 0 !important; }
.buttonntv { display: inline-block; padding: 6px 14px; background: var(--dark); color: #fff !important; border-radius: 4px;
  font-size: 14px !important; line-height: 1.5 !important; text-decoration: none; }
.buttonntv:hover { background: var(--accent); }

/* work-in-usa: pixel-placed US map */
/* state labels sit on dark and light map fills: give each one a light backing so the text stays readable */
.entry figure.hidden-xs { margin: 0 0 1.6em; }
.entry div[style*="us_map"] p a { color: #2a6496; font-weight: 700; text-decoration: none; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; }
.entry div[style*="us_map"] p a:hover { text-decoration: underline; }
.entry div[style*="us_map"] { max-width: none; transform-origin: top left; margin: 0; }
.map-scroll { overflow-x: auto; margin: 0 0 1.6em; }

.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.post-list time { color: var(--muted); font-size: 14px; }
.post-list h2 { font-size: 1.25rem; margin: .2em 0 .4em; }
.post-list p { color: var(--muted); margin: 0; font-size: 14px; }
.btn { display: inline-block; background: var(--dark); color: #fff; padding: 10px 22px; border-radius: 4px; text-decoration: none; }
.btn:hover { background: var(--accent); }
.notfound { text-align: center; padding-top: 80px; }

/* -------------------------------------------------------------- home page */
.home-main { padding: 0; }
.home-main .spacer { display: none; }
.home-main section, .home-main > div { scroll-margin-top: var(--header-h); }
.home-main h2 { text-align: center; font-size: 24px; letter-spacing: 0; color: #000; margin: 0 0 1em; }

/* every home section is a full-width band */
.home-main > .vc-row { margin: 0; padding: 56px 20px; }
#about + .vc-row { padding: 56px 20px 0; }                       /* ABOUT heading */
#about + .vc-row + .vc-row { padding: 28px 0 64px; display: flex; flex-wrap: wrap; align-items: center; }   /* ABOUT logo + text */
.home-main > .vc-row:has(> .vc-row) { padding: 0; }              /* WHAT WE DO: the panels run edge to edge */
.home-main > .vc-row:has(> .vc-row) > h2 { padding: 56px 20px 32px; margin: 0; }

/* ABOUT: logo (60% of its half) on the left, text on the right */
#about + .vc-row + .vc-row > .vc-col { flex: 0 0 50%; max-width: 50%; padding: 0 30px; }
#about + .vc-row + .vc-row > .vc-col img { display: block; margin: 0 auto; width: 60%; max-width: 480px; height: auto; }
#about + .vc-row + .vc-row > .vc-col:last-child > * { max-width: 560px; }
.ntvic-about { max-width: none !important; width: auto !important; }

/* WHAT WE DO: two panels per row, equal height, photo filling each panel (as on the original site) */
.home-main > .vc-row > .vc-row { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0; padding: 0; }
.home-main > .vc-row > .vc-row > .vc-col { flex: 0 0 50%; max-width: 50%; display: flex; }
.home-main .tile {
  flex: 1; position: relative; isolation: isolate; color: #fff; text-align: left;
  padding: 44px 40px; background-size: cover; background-position: center;
}
.home-main .tile::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); z-index: -1; }
.home-main .tile h3 { text-align: center; font-size: 20px; line-height: 1.4; color: #fff; margin: 0 0 1.4em; }
.home-main .tile h3 a { border-bottom: 1px solid rgba(255, 255, 255, .5); }
.home-main .tile h3 span { font-size: .8em; }
.home-main .tile a { color: #fff !important; text-decoration: none; }
.home-main .tile a:hover { text-decoration: underline; }
.home-main .tile p { font-size: 14px; line-height: 26px; margin: 0 0 1em; }
.home-main .tile p b { font-weight: 700; }

/* WORK: client logos, plain (no boxes) */
#company-logos { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px; width: min(70%, 843px); margin: 0 auto 8px; }
#company-logos .logo-imgs { width: 89px; height: 51px; padding: 0; border: 0; background: transparent; }
#company-logos .logo-imgs:empty { display: none; }
#company-logos img { display: block; width: 88px; height: 51px; object-fit: contain; }
.home-main p[style*="margin-bottom: -40px"] { margin-bottom: 10px !important; }

/* the US map link under "state list" is an image inside a link: centre it as a block */
.home-main img.aligncenter { display: block; margin: 0 auto; }

/* category chips */
.home-main div[style*="max-width: 1115px"] ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0; margin: 1em 0 2em; }
.home-main div[style*="max-width: 1115px"] li a { display: block; text-align: center; text-decoration: none; padding: 10px 18px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); line-height: 1.5; }
.home-main div[style*="max-width: 1115px"] li a:hover { border-color: var(--accent); background: var(--bg-soft); }
.home-main div[style*="max-width: 1115px"] small { color: #5a5a5a !important; }

/* CONTACT: light veil over the photo, dark text, two columns for the addresses */
.home-main > .vc-row:last-of-type { padding: 0; }
.home-main #contact { position: relative; isolation: isolate; height: auto !important; min-height: 460px; padding: 72px 20px; background-position: center !important; color: #222; }
.home-main #contact::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .9); z-index: -1; }
.home-main #contact section { height: auto !important; max-width: 900px; margin: 0 auto; opacity: 1 !important; }
.home-main #contact h2 span { color: #000 !important; }
.home-main #contact article p { text-align: center !important; margin-top: 0 !important; margin-bottom: 1em !important; }
.home-main #contact a { color: #1667b7; }
.home-main #contact article:nth-of-type(2) { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 56px; }
.home-main #contact article:nth-of-type(2) > div { flex: 1 1 340px; max-width: 420px; }
.home-main #contact article:nth-of-type(2) > p { flex: 0 0 100%; }
.home-main #contact article:nth-of-type(2) > div:empty { display: none; }

/* hero: pause control for the background video (WCAG 2.2.2); sits above the menu bar */
.hero-pause { position: absolute; right: 20px; bottom: calc(var(--header-h) + 16px); z-index: 3; background: rgba(0, 0, 0, .65); color: #fff;
  border: 1px solid #fff; border-radius: 3px; padding: 7px 14px; font: 600 13px/1 var(--font); cursor: pointer; }
.hero-pause:hover { background: rgba(0, 0, 0, .85); }

/* ------------------------------------------------------------------ footer */
.site-footer { background: #1a1c1f; color: #999; font-size: 14px; margin-top: 0; }
.site-footer a { color: #d8dbde; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-top: 44px; padding-bottom: 36px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin: 0 0 .7em; line-height: 1.5; }
.footer-contact h3 { margin: 0 0 .8em; font-size: 1rem; color: #fff; }
.footer-contact p { margin: 0 0 .8em; line-height: 1.6; }
.copyright { background: #0f1113; font-size: 13px; }
.copyright .wrap { color: #a3a3a3; }
.copyright a { color: #c4c4c4; }
.copyright .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 16px; padding-bottom: 16px; }

/* ------------------------------------------------------------ cookie notice */
#cookie-notice { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: rgba(0, 0, 0, .88); color: #fff; font-size: 12.5px; line-height: 1.6; padding: 14px 0; }
#cookie-notice[hidden] { display: none; }
#cookie-notice .wrap { display: flex; gap: 16px 24px; align-items: center; flex-wrap: wrap; max-width: 1280px; }
#cookie-notice p { margin: 0; flex: 1 1 520px; }
#cookie-notice a { color: #4be85b; }
#cookie-accept { background: #fff; color: #000; border: 0; padding: 9px 18px; border-radius: 3px; font: 600 13px var(--font); cursor: pointer; }

/* utilities carried over from the old theme */
@media (max-width: 767px) { .hide-mobile, .hidden-xs { display: none !important; } }
@media (min-width: 768px) { .hide-desktop { display: none !important; } }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 960px) {
  :root { --header-h: 60px; }
  .brand img { height: 40px; }
  .menu-btn { display: block; }
  #nav { position: fixed; inset: var(--header-h) 0 0 0; background: #111315; overflow-y: auto; padding: 8px 20px 40px;
    transform: translateX(100%); visibility: hidden; transition: transform .25s, visibility .25s; }
  .menu-open #nav { transform: none; visibility: visible; }
  .menu-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-open .menu-btn span:nth-child(2) { opacity: 0; }
  .menu-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a, .sub-toggle { padding: 16px 4px; font-size: 14px; text-align: left; width: 100%; border-bottom: 1px solid rgba(255,255,255,.1); }
  .sub-toggle::after { float: right; margin-top: 4px; }
  .sub { position: static; display: none; min-width: 0; border: 0; background: transparent; padding: 0 0 6px 12px; }
  .has-sub:hover > .sub, .has-sub:focus-within > .sub { display: none; }
  .has-sub.open > .sub { display: block; }
  .sub a { border-bottom: 0; padding: 11px 4px; color: #bfc3c8; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body { font-size: 15.5px; }
  .footer-cols { grid-template-columns: 1fr; }
  #company-logos .logo-imgs { width: 44%; }
  .entry img.alignleft, .entry img.alignright { float: none; display: block; margin: 1em auto; }
  .hero { height: auto; min-height: 0; aspect-ratio: 16 / 10; margin-top: var(--header-h); }
  .scroll-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint span { animation: none; }
}
@media print {
  .site-header, #cookie-notice, .hero, .site-footer { display: none; }
  .inner { padding-top: 0; }
}

@media (max-width: 760px) {
  #about + .vc-row + .vc-row > .vc-col, .home-main > .vc-row > .vc-row > .vc-col { flex-basis: 100%; max-width: 100%; }
  #about + .vc-row + .vc-row > .vc-col { padding: 0 20px 24px; }
  #about + .vc-row + .vc-row > .vc-col img { width: 70%; }
  .home-main .tile { padding: 32px 22px; }
  .home-main > .vc-row { padding-left: 16px; padding-right: 16px; }
  .home-main > .vc-row:has(> .vc-row), .home-main > .vc-row:last-of-type { padding-left: 0; padding-right: 0; }
}
@media (max-width: 760px) {
  .home-main div[style*="width: 70%"] { width: 100% !important; }
  #company-logos { width: 100%; justify-content: center; }
}