/* CSS Document */

/*-----------------------------------------------------------------*/
/*--- Font Face Including ---*/
/*-----------------------------------------------------------------*/
/*------------------------------------------------------*/
/*--- Font Family :: [Foco] :: Regular ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Foco';
  src: url('../fonts/Foco-Regular.eot');
  src: url('../fonts/Foco-Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Foco-Regular.woff2') format('woff2'),
       url('../fonts/Foco-Regular.woff') format('woff'),
       url('../fonts/Foco-Regular.ttf') format('truetype'),
       url('../fonts/Foco-Regular.svg#foco-regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Foco] :: Bold ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Foco';
  src: url('../fonts/Foco-Bold.eot');
  src: url('../fonts/Foco-Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Foco-Bold.woff2') format('woff2'),
       url('../fonts/Foco-Bold.woff') format('woff'),
       url('../fonts/Foco-Bold.ttf') format('truetype'),
       url('../fonts/Foco-Bold.svg#foco-bold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Helvetica] :: Regular ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/helvetica.eot');
  src: url('../fonts/helvetica.eot?#iefix') format('embedded-opentype'),
       url('../fonts/helvetica.woff2') format('woff2'),
       url('../fonts/helvetica.woff') format('woff'),
       url('../fonts/helvetica.ttf') format('truetype'),
       url('../fonts/helvetica.svg#helveticaregular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Helvetica] :: Bold ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/helvetica-bold.eot');
  src: url('../fonts/helvetica-bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/helvetica-bold.woff2') format('woff2'),
       url('../fonts/helvetica-bold.woff') format('woff'),
       url('../fonts/helvetica-bold.ttf') format('truetype'),
       url('../fonts/helvetica-bold.svg#helveticabold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Montserrat] :: Regular ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-regular.eot');
  src: url('../fonts/montserrat-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/montserrat-regular.woff2') format('woff2'),
       url('../fonts/montserrat-regular.woff') format('woff'),
       url('../fonts/montserrat-regular.ttf') format('truetype'),
       url('../fonts/montserrat-regular.svg#montserrat-regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Montserrat] :: Italic ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-italic.eot');
  src: url('../fonts/montserrat-italic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/montserrat-italic.woff2') format('woff2'),
       url('../fonts/montserrat-italic.woff') format('woff'),
       url('../fonts/montserrat-italic.ttf') format('truetype'),
       url('../fonts/montserrat-italic.svg#montserrat-italic') format('svg');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Montserrat] :: Medium ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-medium.eot');
  src: url('../fonts/montserrat-medium.eot?#iefix') format('embedded-opentype'),
       url('../fonts/montserrat-medium.woff2') format('woff2'),
       url('../fonts/montserrat-medium.woff') format('woff'),
       url('../fonts/montserrat-medium.ttf') format('truetype'),
       url('../fonts/montserrat-medium.svg#montserrat-medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Montserrat] :: Medium Italic ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-medium-italic.eot');
  src: url('../fonts/montserrat-medium-italic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/montserrat-medium-italic.woff2') format('woff2'),
       url('../fonts/montserrat-medium-italic.woff') format('woff'),
       url('../fonts/montserrat-medium-italic.ttf') format('truetype'),
       url('../fonts/montserrat-medium-italic.svg#montserrat-medium-italic') format('svg');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Montserrat] :: Semibold ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-semibold.eot');
  src: url('../fonts/montserrat-semibold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/montserrat-semibold.woff2') format('woff2'),
       url('../fonts/montserrat-semibold.woff') format('woff'),
       url('../fonts/montserrat-semibold.ttf') format('truetype'),
       url('../fonts/montserrat-semibold.svg#montserrat-semibold') format('svg');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Montserrat] :: Semibold Italic ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-semibold-italic.eot');
  src: url('../fonts/montserrat-semibold-italic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/montserrat-semibold-italic.woff2') format('woff2'),
       url('../fonts/montserrat-semibold-italic.woff') format('woff'),
       url('../fonts/montserrat-semibold-italic.ttf') format('truetype'),
       url('../fonts/montserrat-semibold-italic.svg#montserrat-semibold-italic') format('svg');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/*------------------------------------------------------*/
/*--- Font Family :: [Montserrat] :: Bold ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-bold.eot');
  src: url('../fonts/montserrat-bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/montserrat-bold.woff2') format('woff2'),
       url('../fonts/montserrat-bold.woff') format('woff'),
       url('../fonts/montserrat-bold.ttf') format('truetype'),
       url('../fonts/montserrat-bold.svg#montserrat-bold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Montserrat] :: Bold Italic ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-bold-italic.eot');
  src: url('../fonts/montserrat-bold-italic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/montserrat-bold-italic.woff2') format('woff2'),
       url('../fonts/montserrat-bold-italic.woff') format('woff'),
       url('../fonts/montserrat-bold-italic.ttf') format('truetype'),
       url('../fonts/montserrat-bold-italic.svg#montserrat-bold-italic') format('svg');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/*------------------------------------------------------*/
/*--- Font Family :: [Cooper BT] :: Light ---*/
/*------------------------------------------------------*/
@font-face {
  font-family: 'Cooper BT';
  src: url('../fonts/cooper-bt-light.eot');
  src: url('../fonts/cooper-bt-light.eot?#iefix') format('embedded-opentype'),
       url('../fonts/cooper-bt-light.woff2') format('woff2'),
       url('../fonts/cooper-bt-light.woff') format('woff'),
       url('../fonts/cooper-bt-light.ttf') format('truetype'),
       url('../fonts/cooper-bt-light.svg#cooper-bt-light') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/*-----------------------------------------------------------------*/
/*--- Custom Reset Styles ---*/
/*-----------------------------------------------------------------*/
body, html { margin: 0; padding: 0; outline: none; min-width: 320px; }
p, img { margin: 0; padding: 0; }
/*h1, h2, h3, h4 ,h5, h6 { font-weight: normal; padding: 0; margin: 0; }*/
button, a { outline: none; -webkit-outline: none; -moz-outline: none; }
a img { border: 0; display: block; outline: none; -webkit-outline: none; -moz-outline: none; }
a, button { transition: all 0.3s ease; }
a { color: #000; text-decoration: none; }
a:hover, a:focus { outline: none; }
button { border: 0; box-shadow: none; line-height: normal; outline: none; text-shadow: none; }
/*-----------------------------------------------------------------*/
/*--- Canvas Styles ---*/
/*-----------------------------------------------------------------*/
html { font-size: 10px; }
/* body { font: 1.5rem / 1.8 'Foco', 'Montserrat', Helvetica, Arial, sans-serif; color: #4d4d4d; background: #fff; } */
body { color: #4d4d4d; background: #fff; }
.lazy { opacity: 0; }
.lazy.loaded { opacity: 1; }
/*-----------------------------------------------------------------*/
/*--- Wysiwyg Styles ---*/
/*-----------------------------------------------------------------*/
.wysiwyg strong { font-weight: 600; }
.wysiwyg em { font-style: italic; }

.wysiwyg-quote { margin: 16px 0; padding: 14px 20px; border-left: 4px solid #ffd200; font-size: 1.08em; font-style: italic; color: #0f1e64; line-height: 1.6; }
.wysiwyg-quote cite { display: block; margin-top: 8px; font-size: 0.88em; font-style: normal; font-weight: 600; color: #555; }

.wysiwyg p { padding: 13px 0; }

.wysiwyg p:first-child { padding-top: 0; }
.wysiwyg p:last-child { padding-bottom: 0; }

.wysiwyg a { color: #0f1e64; text-decoration: underline; }
.wysiwyg a:hover { color: #000; text-decoration: none; }
.timeline__content__item__subtitle a { color: #0f1e64; text-decoration: underline; }
.timeline__content__item__subtitle a:hover { color: #000; text-decoration: none; }

.wysiwyg ul { list-style: none; padding-left: 0; margin: 10px 0; }
.wysiwyg ul li { position: relative; padding: 5px 0 5px 1.6em; }
.wysiwyg ul li::before { content: ""; position: absolute; left: 0; top: calc(5px + 0.42em); width: 9px; height: 9px; border-radius: 50%; background: #ffd200; }
.wysiwyg ol { list-style: decimal; padding-left: 1.6em; margin: 10px 0; }
.wysiwyg ol li { padding: 4px 0; }
.wysiwyg ol ul { padding-left: 1.4em; }
.wysiwyg ol ul li { padding-left: 1.6em; }
.wysiwyg ol ul li::before { top: calc(5px + 0.62em); }
/*-----------------------------------------------------------------*/
/*--- Header Styles ---*/
/*-----------------------------------------------------------------*/
.header { background: rgba(30,22,36, 0.38); backdrop-filter: blur(10px); color: #fff; position: fixed; left: 0; top: 0; width: 100%; transition: all 0.2s linear; z-index: 10001; }
.header.scrolled { background: #ededed; }
.header__container { display: flex; max-width: 1200px; justify-content: space-between; align-items: center; height: 48px; padding: 0 10px; }

.header__logo { padding: 0 10px 0 0; }
.header__logo__img { display: block; height: auto; width: 100%; max-width: 180px; }

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

.header__client-logo { display: flex; align-items: center; }
.header__client-logo__link { color: inherit; display: block; padding: 0 0 0 10px; }
.header__client-logo__text { font-family: Helvetica; font-size: 11px; line-height: 13px; text-align: right; }
.header__client-logo__image { display: block; height: auto; width: 100%; max-width: 120px; }

.header__about { position: relative; margin: 0 0 0 18px; min-width: 20px; }
.header__about__text { font-family: Helvetica; font-size: 12px; line-height: 20px; color: #fff; display: block; padding: 0 0 0 28px; }
.header__about__icon { position: absolute; top: 50%; height: 20px; width: 20px; transform: translateY(-50%); left: 0; background: no-repeat url(../images/icons/questionmark.svg) center / contain; }
/*-----------------------------------------------------------------*/
/*--- Hero Section Styles ---*/
/*-----------------------------------------------------------------*/
.hero-section { color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; background: #0f1e64; min-height: 100vh; padding: 100px 0; position: relative; z-index: 1; }
.hero-section__container { width: 100%; }
.hero-section__title { font-family: 'fococc', "Cooper BT"; font-size: 6.5rem; line-height: 1.0769; font-weight: 700; max-width: 850px; margin: 0 auto 20px; }
.hero-section__subtitle, .hero-section__description { max-width: 500px; margin: 0 auto; font-size: 18px; }
.hero-section__subtitle { margin-bottom: 16px; }
.hero-section__description { margin-bottom: 25px; }
.hero-section__btn { font-family: 'fococc', arial, sans-serif; font-size: 18px; line-height: 1.6875; color: #0f1e64; font-weight: normal; background: #ffd200; text-decoration: none; border-radius: 6px; padding: 8px 16px; display: inline-block; }
.hero-section__btn:hover { background: #ededed; color: #0f1e64; text-decoration: none; }
/*-----------------------------------------------------------------*/
/*--- Progress Circle ---*/
/*-----------------------------------------------------------------*/
.progress-circle { position: fixed; bottom: 32px; right: 32px; z-index: 9999; width: 56px; height: 56px; cursor: pointer; text-decoration: none; }
.progress-circle__svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.progress-circle__track { fill: none; stroke: rgba(255,255,255,0.3); stroke-width: 3; }
.progress-circle__fill { fill: none; stroke: #ffd200; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 138; stroke-dashoffset: 138; transition: stroke-dashoffset 0.1s linear; }
.progress-circle__icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #0f1e64; border-radius: 50%; border: 2px solid #ffd200; }
.progress-circle__icon svg { width: 16px; height: 16px; fill: #ffd200; }
/*-----------------------------------------------------------------*/
/*--- Time line Styles ---*/
/*-----------------------------------------------------------------*/
/* Override theme's overflow:hidden on #wrapper.
   Cascade order is deliberate:
   1. overflow:visible overrides the theme's overflow:hidden on both axes so
      position:sticky can still use the viewport as its scroll container.
      This is the safe fallback for browsers that don't support overflow:clip.
   2. overflow-x:clip then adds horizontal clipping (Chrome 90+, Firefox 81+,
      Safari 15.4+) without creating a scroll container (clip ≠ hidden). On
      unsupported browsers the clip declaration is ignored and overflow:visible
      from line 1 remains, keeping sticky intact. */
#wrapper { overflow: visible; overflow-x: clip; }

/* padding-top offsets the nav's natural flow position by the fixed-header
   stack height. Without this, position:sticky with top:122px would pull the
   nav 122px down from 0px when the section first enters the viewport,
   making it visually overlap with .timeline__intro. With the padding, the
   nav's natural entry point already matches the sticky threshold, so there
   is no displacement. The padding area sits behind the fixed headers (within
   the first 122px of the viewport) so no empty gap is visible to the user. */
.section-timeline { position: relative; z-index: 1000; padding-top: var(--ccnsw-tt-top-bar, 0px); }
/* Shift the yellow vertical line down by the same amount so it still starts
   at the same visual position relative to the nav's bottom edge. */
.section-timeline::before { content: ""; position: absolute; background: #ffd200; top: calc(var(--ccnsw-tt-top-bar, 0px) + 85px); bottom: 25px; left: 50%; width: 1px; z-index: 3; }

/* position:sticky keeps the nav in the DOM flow (no JS transforms or DOM moves needed).
   top is driven by --ccnsw-tt-top-bar, set by JS to the height of any fixed bars above.
   opacity:0 hides the raw unstyled list on initial page load; JS adds .timeline--ready
   once initTimelineScroll() has run so the nav fades in styled. */
.timeline { background: #ededed; padding: 15px 0 28px; max-width: inherit; margin: 0 auto; position: sticky; top: var(--ccnsw-tt-top-bar, 0px); z-index: 1001; opacity: 0; transition: opacity 0.2s ease; }
.timeline.timeline--ready { opacity: 1; }
/* ::before extends the grey background to full viewport width.
   100vw + centering replaces the old left:-9999px trick, which required overflow:hidden to contain. */
.timeline::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; bottom: 0; background: inherit; transition: background-color 0.3s ease-in-out; }

.timeline__scroller { position: relative; display: flex; width: 100%; cursor: grab; user-select: none; touch-action: pan-y; }
.timeline__scroller--dragging { cursor: grabbing; }

.timeline__scroller__marker { position: absolute; bottom: -11px; width: 26px; height: 26px; transition: left 0.3s ease-in-out; transform: translateX(-50%); border: 1px solid #ffd200; border-radius: 50%; }

.timeline__scroller__slide { text-align: center; position: relative; }
.timeline__scroller__slide:nth-child(2)::before { left: 50%; }
.timeline__scroller__slide:last-child::before { right: 50%; }
.timeline__scroller__slide::before { content: ""; position: absolute; bottom: 1px; left: 0; right: 0; background: #0f1e64; height: 1px; }

.timeline__scroller__slide__link { font-size: 13px; line-height: 27px; font-weight: 600; color: #0f1e64; text-transform: uppercase; display: block; position: relative; white-space: nowrap; min-width: 155px; padding-bottom: 15px; }
.timeline__scroller__slide__link::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #0f1e64; bottom: -3px; left: 50%; transform: translateX(-50%); position: absolute; transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out, bottom 0.3s ease-in-out; }
.timeline__scroller__slide__link--active::before { background-color: #ffd200; width: 16px; height: 16px; bottom: -6px; }

.timeline__intro { padding: 40px 0; }
.timeline__intro__text { max-width: 370px; }
.timeline__intro__text--left { font-family: 'fococc', "Cooper BT"; font-size: 2.1rem; line-height: 1.4286; font-weight: 700; }
.timeline__intro__text--right { margin-left: auto; font-size: 18px; }

.timeline__content__item { position: relative; padding: 20px 0; scroll-margin-top: var(--ccnsw-tt-scroll-margin, 90px); min-height: 437px; }
.timeline__year-img-col { position: relative; }
.timeline__year-img { position: absolute; top: 117px; display: flex; max-height: 300px; max-width: 100%; }
.timeline__year-img img { max-height: 300px; width: auto; max-width: 100%; object-fit: contain; }
.timeline__year-img--left { right: 0; padding-right: 15px; justify-content: flex-end; max-width: 100%; }
.timeline__year-img--right { left: 0; padding-left: 15px; justify-content: flex-start; max-width: 100%; }

/* Tablet/desktop: constrain preview text + expanded subsection text to its
   half of the row so it never slides under the absolutely-positioned hero
   image when the title wraps. */
@media (min-width: 768px) {
  .timeline__content__item__preview > [class*="col-"] {
    max-width: 50%;
    flex: 0 0 50%;
  }
  /* Subsection columns: text (wysiwyg) always LEFT at 60%, media always RIGHT at 40% */
  .timeline__content__item__subsection > [class*="col-"]:not(:only-child):has(.wysiwyg) {
    order: 1;
    flex: 0 0 60%;
    max-width: 60%;
  }
  .timeline__content__item__subsection > [class*="col-"]:not(:only-child):not(:has(.wysiwyg)) {
    order: 2;
    flex: 0 0 40%;
    max-width: 40%;
  }
}
.timeline__content__item__dot { display: block; position: absolute; left: 100%; margin: 20px 0 0; transform: translateX(-50%); background: #ffd200; border-radius: 100%; width: 13px; height: 13px; z-index: 5; }
.timeline__content__item__dot::before,
.timeline__content__item__dot::after { content: ""; position: absolute; top: 50%; left: 50%;  width: 24px; height: 24px; margin: 0 auto; transform: translate(-50%, -50%); border: 1px solid #ffd200; border-radius: 50%; transition: inherit; opacity: 0; }
.timeline__content__item__dot::before,
.timeline__content__item__dot::after { animation: pulse 1.5s linear infinite; }
.timeline__content__item__dot::before { animation-delay: 0.75s; }
.timeline__content__item__line { margin: 26px 0 0; display: block; position: absolute; left: 20px; right: 0; border-bottom: 1px solid #ffd200; }
.timeline__content__item__line::before { content: ""; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 0; height: 9px; width: 9px; border-radius: 100%; background: #ffd200; }

.timeline__content .container-xl { position: relative; padding-bottom: 80px; }
.timeline__content .container-xl > .timeline__content__item__dot { left: 50%; bottom: 20px; }

.timeline__content__item__media { position: relative; }
.timeline__content__item__img { display: block; max-width: 100%; }
.timeline__content__item__img--rounded { border-radius: 0; box-shadow: none; }
.timeline__content__item__play { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(../images/icons/icon-play.png) no-repeat center / 120px; }
.timeline__content__item__play:hover { background-image: url(../images/icons/icon-play-hover.png); }

.timeline__content__item__content { max-width: 370px; }
.timeline__content__item__topline { font-weight: 700; color: #ffd200; text-transform: uppercase; padding: 0 0 10px; }

/* Multi-subsection layout (for content-rich years like 2006) */
.timeline__content__item__subsections { padding-top: 20px; }
.timeline__content__item__subsection { padding: 30px 0; }
.timeline__content__item__subsection:last-child { padding-bottom: 0; }
.timeline__content__item__subsection .timeline__content__item__subtitle { margin-bottom: 10px; margin-top: 10px; }
/* Text col fills its 60% column naturally */
.timeline__content__item__subsection .wysiwyg { max-width: none; }
/* No-media subsections: expand the lone column to full row width */
.timeline__content__item__subsection--no-media > .col-md-6,
.col-md-6.timeline__content__item__subsection--no-media { flex: 0 0 100%; max-width: 100%; }
.timeline__content__item__subsection--no-media .wysiwyg { max-width: 100%; }

/* Masonry image grid for subsections with multiple images */
.timeline__content__item__video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-top: 24px; width: 100%; }
.timeline__content__item__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.timeline__content__item__img-grid { columns: 2; column-gap: 20px; }
.timeline__content__item__img-grid--stacked { columns: 1; }
.timeline__content__item__img-grid--3col { columns: 3; column-gap: 12px; }
.timeline__content__item__img-grid--3col .timeline__content__item__img { margin-bottom: 12px; }
.timeline__content__item__img-grid .timeline__content__item__img { width: 100%; height: auto; display: block; break-inside: avoid; margin-bottom: 20px; cursor: pointer; }
.timeline__content__item__media img { cursor: pointer; }
.timeline__content__item__img-grid .timeline__content__item__img:last-child { margin-bottom: 0; }

/* Focus slider — active slide large & sharp, adjacent slides smaller & blurred */
.fan-slider { position: relative; overflow: hidden; }
.fan-slider__track { position: relative; }
.fan-slider__item { display: none; height: 240px; overflow: hidden; }
.fan-slider--2016 .fan-slider__item { height: 330px; }
.fan-slider__item img { width: 100%; /*height: 100%;*/ display: block; object-fit: cover; object-position: center top; cursor: pointer; }
.fan-slider__item--active { display: block; }
.fan-slider__controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 14px; }
.fan-slider__btn { background: #ffd200; color: #0f1e64; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.2s; }
.fan-slider__btn:hover { background: #e6bd00; }
.fan-slider__count { font-family: 'fococc', "Cooper BT"; font-size: 1.4rem; color: #0f1e64; min-width: 40px; text-align: center; }

@media screen and (max-width: 767px) {
  .timeline__content__item__subsection { padding: 20px 0; }
  .timeline__content__item__subsection .wysiwyg { max-width: 100%; }
  .timeline__content__item__img-grid--3col { columns: 2; }
}
.timeline__content__item__title { font-family: 'fococc', "Cooper BT"; font-size: 4.5rem; line-height: 1.0444; color: #0f1e64; font-weight: 700; padding: 0 0 20px; margin: 0 0 30px; }
.timeline__content__item__subtitle { font-family: 'fococc', "Cooper BT"; font-size: 2.7rem; line-height: 1.4; color: #0f1e64; font-weight: normal; margin: 0 0 13px; }

#timeline1 .timeline__content__item__media { max-width: 424px; }
#timeline2 .timeline__content__item__media { max-width: 420px; }
#timeline3 .timeline__content__item__media { max-width: 442px; }
#timeline4 .timeline__content__item__media { max-width: 472px; }
#timeline5 .timeline__content__item__media { max-width: 426px; }
#timeline6 .timeline__content__item__media { max-width: 438px; }
#timeline7 .timeline__content__item__media { max-width: 430px; }

#timeline1 .timeline__content__item__play { background-position: left 24% bottom 14%; }
#timeline2 .timeline__content__item__play { background-position: left 50% bottom 17%; }
#timeline3 .timeline__content__item__play { background-position: left 35% bottom 14%; }
#timeline4 .timeline__content__item__play { background-position: left 40% bottom 12%; }
#timeline5 .timeline__content__item__play { background-position: left 26% bottom 10%; }

@keyframes pulse {
  0%   { width: 12px; height: 12px; opacity: 0; }
  20%  { opacity: 1; }
  100% { width: 56px; height: 56px; opacity: 0; }
}

/*-----------------------------------------------------------------*/
/*--- Video Popup Styles ---*/
/*-----------------------------------------------------------------*/
.video-popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(30, 22, 36, 0.75); z-index: 100000; display: none; }
.video-popup__inner { position: fixed; top: 50%; left: 0; right: 0; width: 100%; max-width: 1120px; margin: 50px auto 0; transform: translateY(-50%); padding: 40px 40px 0 15px; }
.video-popup video { display: block; width: 100%; height: auto; }
.video-popup-close {z-index: 1; position: absolute; top: -28px; right: 42px; height: 58px; width: 58px; background: url(../images/icons/icon-close.svg) no-repeat center / contain; }
/*-----------------------------------------------------------------*/
/*--- CTA Section Styles ---*/
/*-----------------------------------------------------------------*/
.section-cta { padding: 30px 0 100px; text-align: center; }
.section-cta__title { font-family: 'fococc', "Cooper BT"; font-size: 4.1rem; line-height: 1.0927; color: #0f1e64; font-weight: 700; max-width: 570px; margin: 0 auto 20px; }
.section-cta__title::after { content: ""; display: block; height: 1px; width: 54px; background: #000; margin: 36px auto 0; }
.section-cta__text { font-weight: 500; max-width: 460px; margin: 0 auto 30px; }
.section-cta__btn { font-weight: 600; text-transform: uppercase; display: inline-block; vertical-align: top; padding: 17px 45px; border: 1px solid #000; }
.section-cta__btn:hover { background-color: #ffd200; border-color: #ffd200; color: #fff; }
.section-cta__client-logo { padding: 86px 0 0; }
.section-cta__client-logo__link { color: inherit; display: inline-block; padding: 20px 0 0; }
.section-cta__client-logo__text { font-size: 1.4rem; line-height: 1.5; font-weight: 600; text-transform: uppercase; }
.section-cta__client-logo__image { display: block; height: auto; width: 100%; max-width: 160px; }
/*-----------------------------------------------------------------*/
/*--- Footer Styles ---*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/
/*--- Footer Copyright Styles ---*/
/*-----------------------------------------------------------------*/
.footer { font-family: Helvetica; font-size: 1rem; line-height: 2; color: #fff; background: #000; padding: 10px 0; }
.footer__container { max-width: 1200px; display: flex; justify-content: space-between; flex-wrap: wrap; }
.footer a { color: inherit; }
.footer a:hover { text-decoration: underline; }
.footer__copyright, .footer__menu { padding: 5px 0; }
.footer__copyright { padding-right: 10px; }
.footer__menu { display: flex; justify-content: flex-end; align-items: center; padding: 0; margin: 0; list-style: none; }
.footer__menu__item:not(:last-child) .footer__menu__link::after { content: '|'; margin: 0 6px; }
/*-----------------------------------------------------------------*/
/*--- Media Queries Styles ---*/
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/
/*---------- Styles for Desktop -----------*/
/*-----------------------------------------------------------------*/
@media screen and (min-width: 992px) {
  .tablet, .mobile { display: none !important; }
}

@media screen and (min-width: 768px) {
  .order-md-last .timeline__content__item__dot { left: 0; }
  .order-md-last .timeline__content__item__line { left: 0; right: 20px; }
  .order-md-last .timeline__content__item__line::before { left: 100%; }
}
/*-----------------------------------------------------------------*/
/*---------- Styles for Tablet -----------*/
/*-----------------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 991px) {
  .desktop, .mobile { display: none !important; }
}

@media screen and (max-width: 991px) {
  /*-----------------------------------------------------------------*/
  .hero-section__title { font-size: 5.85rem; line-height: 1.094; }
  /*-----------------------------------------------------------------*/
  .timeline__intro .container-xl, .timeline__content .container-xl { max-width: 740px; }
  .timeline__intro__text--left { font-size: 1.8rem; line-height: 1.5556; max-width: 300px; }
  .timeline__intro__text--right { max-width: 280px; }
  .timeline__content__item__title { font-size: 3.8rem; line-height: 1.2368; }
  .timeline__content__item__content { max-width: 284px; }
  .timeline__content__item__line { left: 0; }

  #timeline1 .timeline__content__item__media { max-width: 290px; }
  #timeline2 .timeline__content__item__media { max-width: 305px; }
  #timeline3 .timeline__content__item__media { max-width: 272px; }
  #timeline4 .timeline__content__item__media { max-width: 308px; }
  #timeline5 .timeline__content__item__media { max-width: 292px; }
  #timeline6 .timeline__content__item__media { max-width: 292px; }
  #timeline7 .timeline__content__item__media { max-width: 267px; }

  #timeline1 .timeline__content__item__play { background-position: left 60% bottom 1%; }
  #timeline2 .timeline__content__item__play { background-position: left 47% bottom 9%; }
  #timeline3 .timeline__content__item__play { background-position: left 35% bottom 10%; }
  #timeline4 .timeline__content__item__play { background-position: left 51% bottom 6%; }
  #timeline5 .timeline__content__item__play { background-position: left 29% bottom 10%; }
  /*-----------------------------------------------------------------*/
  .section-cta__title { font-size: 3.5rem; line-height: 1.28; max-width: 450px; }
  .section-cta__title::after { margin-top: 25px; }
  .section-cta__client-logo { padding-top: 70px; }
  .section-cta { padding-bottom: 80px; }
}
/*-----------------------------------------------------------------*/
/*---------- Styles for Mobile -----------*/
/*-----------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .desktop, .tablet { display: none !important; }

  .header__container { height: 50px; padding: 0 10px; }

  .header__logo__img { max-width: 117px; }

  .header__about { position: absolute; top: calc(100% + 10px); right: 2px; margin: 0; }
  .header__about__text { font-size: 0; }
  /*-----------------------------------------------------------------*/
  .hero-section__title { font-size: 3.7rem; line-height: 1.1622; max-width: 380px; margin-bottom: 12px; }
  .hero-section__subtitle { font-weight: 500; line-height: 1.5333; max-width: 280px; margin-bottom: 66px; }
  .hero-section__description { max-width: 340px; margin-bottom: 100px; }
  .hero-section__btn { display: block; max-width: 240px; margin: 0 auto; }
  /*-----------------------------------------------------------------*/
  /* overflow:hidden removed — it created a scroll container on iOS Safari
     which made position:sticky on .timeline misbehave (correct during active
     touch scroll, wrong at rest). Horizontal overflow is now clipped at
     #wrapper level via overflow-x:clip which does not create a scroll
     container and therefore does not interfere with position:sticky. */
  /* Keep the horizontal padding but carry the dynamic top padding from the
     base rule so the nav entry position is correct on mobile too. */
  .section-timeline { padding: var(--ccnsw-tt-top-bar, 0px) 20px 0; overflow: visible; }
  .section-timeline::before { left: auto; right: 40px; bottom: -100px; }

  .timeline__intro { padding: 60px 30px 25px 0; }
  .timeline__intro__text--left { margin-bottom: 26px; }
  .timeline__intro__text--right { margin-left: 0; }

  .timeline__content { padding: 0 30px 0 0; }
  .timeline__content__item { padding: 25px 0; min-height: 0; }
  .timeline__content__item__media { margin-bottom: 30px; }
  .timeline__content .container-xl > .timeline__content__item__dot { left: auto; bottom: -100px; }
  .timeline__content__item__dot { left: auto; right: -23px; }
  .timeline__content__item__line { right: -8px; }
  /*-----------------------------------------------------------------*/
  .section-cta__title { font-size: 3.8rem; line-height: 1.2368; max-width: 440px; padding: 0 40px; }
  .section-cta__text { max-width: 400px; }
  /*-----------------------------------------------------------------*/
  .video-popup-close { top: -12px; }
  /*-----------------------------------------------------------------*/
  /* --- Years with hero images: mobile layout --- */
  .timeline__year-img-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .timeline__year-img-row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }
  /* Preview row below image years gets breathing room */
  .timeline__year-img-row + .timeline__content__item__preview {
    margin-top: 20px;
  }
  /* Image col: right side, with 20px breathing room below image before divider */
  .timeline__year-img-col {
    flex: 0 0 38%;
    max-width: 38%;
    order: 2;
    padding-bottom: 20px;
  }
  /* Date col (right-side years: img col comes first in DOM → sibling selector) */
  /* align-items: flex-end pushes the year heading to the bottom so it sits */
  /* next to the divider line rather than at the top of the image. */
  .timeline__year-img-col ~ [class*="col-"] {
    flex: 0 0 58%;
    max-width: 58%;
    order: 1;
    display: flex;
    align-items: flex-end;
  }
  /* Date col (left-side years: naturally first in DOM) */
  .timeline__year-img-row > [class*="col-"]:not(.timeline__year-img-col) {
    flex: 0 0 58%;
    max-width: 58%;
    display: flex;
    align-items: flex-end;
  }
  /* Remove the h2's default 30px bottom margin so it sits flush with the */
  /* divider line at the col's bottom edge. */
  .timeline__year-img-row .timeline__content__item__title {
    margin-bottom: 0;
    padding-bottom: 10px;
  }
  /* Mobile: image flows naturally inside its 38% col, no absolute positioning */
  .timeline__year-img,
  .timeline__year-img--left,
  .timeline__year-img--right {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    max-height: none;
    padding: 0;
  }
  .timeline__year-img img {
    max-height: 180px;
  }
  /*
   * Dot & line: the date col is 58% wide, but the vertical bar is at the
   * right edge of the full container.  Extend right by the 42% gap:
   *   42% container / 58% col = 72.4% of col width, plus the original offset.
   */
  .timeline__year-img-row .timeline__content__item__dot {
    right: calc(-72.4% - 23px) !important;
    left:  auto !important;
    top:   auto !important;
    bottom: -6px !important;  /* vertically centred on the 1px line */
    margin: 0 !important;
  }
  .timeline__year-img-row .timeline__content__item__line {
    right:  calc(-72.4% - 8px) !important;
    bottom: 0 !important;    /* pin to base of date col, below the image */
    top:    auto !important;
    margin: 0 !important;
  }
}

@media screen and (max-width: 360px) {
  .section-timeline { padding: 0; }
  .timeline__content__item__dot { right: -3px; }
  .timeline__content__item__line { right: 8px; }
}

/* Blockquote */
.timeline__blockquote:before {content:"";font-size:1.5rem}
.timeline__blockquote { margin: 16px 0; padding: 16px 20px; border-left: 4px solid #ffd200; background: #f9f8f3; font-style: italic; color: #0f1e64; font-size: 1.5rem;}
.timeline__blockquote cite { display: block; margin-top: 10px; font-style: normal; font-weight: 700; font-size: 1.4rem; }

/* Read-more button */
.timeline__read-more { display: inline-block; margin-top: 20px; font-family: 'fococc', arial, sans-serif; font-size: 16px; font-weight: 700; color: #0f1e64; background: none; border: 2px solid #0f1e64; border-radius: 6px; padding: 8px 20px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.timeline__read-more:hover { background: #0f1e64; color: #fff; }

/* Timeline drawer overlay */
.timeline-overlay { position: fixed; inset: 0; z-index: 10000; pointer-events: none; }
.timeline-overlay.is-open { pointer-events: all; }
.timeline-overlay__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 0.3s ease; }
.timeline-overlay.is-open .timeline-overlay__backdrop { opacity: 1; }
/* top: var(--ccnsw-tt-top-bar) keeps the drawer below the WP admin bar + sticky
   theme header. The variable is set by JS (applyTopBar) and updated on first scroll
   once the theme JS has fixed the header in place. Falls back to 0px before JS runs. */
.timeline-overlay__drawer { position: absolute; top: var(--ccnsw-tt-top-bar, 0px); right: 0; bottom: 0; width: 62%; max-width: 900px; background: #fff; overflow-y: auto; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); padding: 72px 48px 48px; box-shadow: -4px 0 32px rgba(0,0,0,0.15); }
.timeline-overlay.is-open .timeline-overlay__drawer { transform: translateX(0); }
.timeline-overlay__close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 2.8rem; line-height: 1; cursor: pointer; color: #0f1e64; padding: 4px 8px; }
.timeline-overlay__close:hover { color: #555; }
.timeline-overlay__body .timeline__content__item__subsection { padding: 28px 0; border-bottom: 1px solid #ededed; }
.timeline-overlay__body .timeline__content__item__subsection:first-child { padding-top: 0; }
.timeline-overlay__body .timeline__content__item__subsection:last-child { border-bottom: none; }
.timeline-overlay__body .timeline__content__item__subtitle { font-size: 2rem; }
.timeline-overlay__body .fan-slider { margin-bottom: 0; }
body.overlay-open { overflow: hidden; }
@media screen and (max-width: 991px) { .timeline-overlay__drawer { width: 82%; padding: 60px 32px 32px; } }
@media screen and (max-width: 767px) {
  .timeline-overlay__drawer { width: 100%; padding: 50px 20px 24px; }
}

/* Image lightbox overlay */
.img-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; cursor: pointer; }
.img-overlay--visible { opacity: 1; visibility: visible; }
.img-overlay__img { max-width: 90%; max-height: 90vh; object-fit: contain; border-radius: 4px; }
.img-overlay__close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: #ffd200; color: #0f1e64; border: none; border-radius: 50%; font-size: 2rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 100000; transition: background 0.2s; }
.img-overlay__close:hover { background: #e6bd00; }
.img-overlay__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,210,0,0.9); color: #0f1e64; border: none; width: 48px; height: 48px; border-radius: 50%; font-size: 2.6rem; line-height: 1; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 100001; transition: background 0.2s; }
.img-overlay__nav:hover { background: #ffd200; }
.img-overlay__nav--prev { left: 20px; }
.img-overlay__nav--next { right: 20px; }
.img-overlay--has-nav .img-overlay__nav { display: flex; }