/* SWAGGER editorial overrides
   Keep the JB editorial structure; only content, imagery and shoot-specific styling change. */

/* Core SWAGGER dark tone for the opening deck/navigation. */
.bg-red,
.red-bg,
.site-content-section .nav-list,
.let-us-know a,
.close-btn:hover,
.menu-btn:hover {
    background: #191621 !important;
}

/* Opening cover title.
   Match the JB reference: Anton is the final cover-title font. */
.home-section .logo .cover-title-link {
    text-decoration: none;
    color: inherit;
}

.home-section .logo .cover-title {
    font-family: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-transform: none !important;
    max-width: 100% !important;
    letter-spacing: -1px !important;
    line-height: .92 !important;
    color: #ffffff !important;
    text-shadow: none !important;
}


.home-section .logo .cover-title em {
    font-style: normal !important;
}
/* Opening deck is roman Noto Serif, not italic. */
#section-2,
#section-2 .red-bg {
    background: #191621 !important;
}

#section-2 .centered-hero-text {
    font-family: "Noto Serif", serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: #fff !important;
}

@media only screen and (min-width: 981px) {
    .home-section {
        background-position: center center !important;
    }

    .home-section .logo {
        width: 50% !important;
        max-width: 760px !important;
        padding: 46px 34px !important;
    }

    .home-section .logo .cover-title {
        font-size: clamp(50px, 5.6vw, 96px) !important;
        line-height: .9 !important;
        letter-spacing: -1.4px !important;
        max-width: 660px !important;
    }

    .home-section .logo small,
    .home-section .section-footer {
        color: #ffffff !important;
        text-shadow: none !important;
    }

    /* Full-width portrait gets the large cinematic slots. */
    #section-18.creative-companies {
        background-position: center center !important;
        background-size: cover !important;
    }

    /* Inline support images stay unique, but read larger than thumbnails. */
    .cast-photo-break,
    .big-photo-break {
        width: 65vw;
        max-width: 1100px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin: 48px 0 42px;
    }

    .cast-photo-break img,
    .big-photo-break img {
        width: 100%;
        height: auto;
        max-width: none;
        display: block;
    }
}

/* Mobile uses the dedicated portrait assets, as in the JB template. */
@media only screen and (min-width: 320px) and (max-width: 980px) {
    .home-section .logo {
        width: calc(100% - 26px) !important;
        padding: 22px 13px !important;
    }

    .home-section .logo .cover-title {
        font-size: clamp(34px, 10.5vw, 58px) !important;
        line-height: .92 !important;
        letter-spacing: -1.1px !important;
        max-width: 100% !important;
    }

    .show-mobile .img-fluid,
    img.show-mobile.img-fluid {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center top;
    }

    #section-2 .centered-hero-text {
        font-style: normal !important;
    }

    .cast-photo-break,
    .big-photo-break {
        margin: 34px 0 30px;
    }
}

/* Three large pull quotes; the same wording remains in the body copy. */
.swag-pullquote {
    margin: 36px 0 42px;
}

.swag-pullquote .hero-text {
    margin-bottom: 0 !important;
}

/* Use the supplied magazine cover once as its own editorial break. */
.matt-cover-section {
    margin: 0;
}

/* SWAGGER cover uses the same closing magazine-cover treatment as the JB reference. */
.annual-digest-newspaper {
    background: #19161d !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

/* REV6: show the supplied long editorial title at the start of the story on mobile. */
.swag-mobile-article-title {
    font-family: "Noto Serif", serif;
    font-weight: 700;
    font-style: normal;
    color: #191621;
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin: 42px 0 30px;
}


/* Final dark editorial dek panel: use the JB Copeland proportions exactly. */
#section-2 .swag-long-title {
    font-family: "Noto Serif", serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 30px !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 25% !important;
    padding-right: 25% !important;
    text-align: center !important;
    color: #fff !important;
}
#section-2 .swag-long-title em {
    font-style: italic !important;
}
@media only screen and (max-width: 980px) {
    #section-2 .swag-long-title {
        padding-left: 20px !important;
        padding-right: 20px !important;
        font-size: clamp(22px, 6vw, 32px) !important;
        line-height: 1.3 !important;
    }
}




/* FINAL-7: keep pull quotes fully in normal flow so they cannot overlap body copy while scrolling. */
.swag-pullquote {
    display: block !important;
    position: static !important;
    width: 100% !important;
    clear: both !important;
    overflow: visible !important;
    margin: 52px 0 !important;
    padding: 0 !important;
}
.swag-pullquote .hero-text {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 30px 0 !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

/* Extra portrait key art used once as a mid-story visual break. */
.inline-vertical-poster {
    width: min(430px, 78vw) !important;
    max-width: 100% !important;
    position: relative !important;
    left: auto !important;
    margin: 52px auto 56px !important;
}
.inline-vertical-poster img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
}

@media only screen and (max-width: 980px) {
    .swag-pullquote {
        margin: 34px 0 !important;
    }
    .swag-pullquote .hero-text {
        padding: 22px 0 !important;
    }
    .inline-vertical-poster {
        width: min(92vw, 520px) !important;
        margin: 36px auto 40px !important;
    }
}


/* Matthew Lillard cover: typography only.
   Anton is SWAGGER's reference headline font. When remote Google Fonts is
   unavailable, synthesize a high-weight condensed alternative rather than
   falling back to the thin Helvetica-style face. No layout, spacing, colors,
   photography or credits are touched. */
#section-1.home-section .logo .cover-title {
    font-family: "Anton", "Noto Sans", Impact, "Arial Narrow", "Arial Black", sans-serif !important;
    font-weight: 900 !important;
    font-stretch: condensed !important;
    font-synthesis: weight !important;
}

/* Matthew cover title hierarchy: resize type only; same template layout, fonts and image. */
#section-1.home-section .logo .cover-title .cover-kicker,
#section-1.home-section .logo .cover-title .cover-name {
    display: block;
    font-family: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    white-space: nowrap;
    line-height: 0.92;
}
@media only screen and (min-width: 981px) {
    #section-1.home-section .logo .cover-title .cover-kicker {
        font-size: clamp(38px, 3.6vw, 56px) !important;
        letter-spacing: -0.8px !important;
    }
    #section-1.home-section .logo .cover-title .cover-name {
        font-size: clamp(72px, 7.35vw, 112px) !important;
        letter-spacing: -1.4px !important;
    }
}
@media only screen and (max-width: 980px) {
    #section-1.home-section .logo .cover-title .cover-kicker {
        font-size: clamp(20px, 6vw, 36px) !important;
        letter-spacing: -0.5px !important;
    }
    #section-1.home-section .logo .cover-title .cover-name {
        font-size: clamp(36px, 10.5vw, 64px) !important;
        letter-spacing: -1px !important;
    }
}


/* MATTHEW LILLARD — PHOTO-SAFE EDITORIAL CORRECTIONS
   Original portrait images: intrinsic 3:4. Never stretch them to 16:9.
   Palette derived from Storm Santos shoot and the supplied SWAGGER cover:
   charcoal green, muted olive, ivory and warm burgundy. */
:root { --matt-charcoal: #111915; --matt-olive: #283b2e; --matt-moss: #526048; --matt-ivory: #eeeae1; --matt-rose: #8f2634; }
body { background: var(--matt-charcoal); }
#section-2, #section-2 .red-bg,
.bg-red, .red-bg, .site-content-section .nav-list { background: var(--matt-charcoal) !important; }
#section-3 { background: var(--matt-charcoal) !important; }
#section-3 .bg-light-grey { background: var(--matt-ivory) !important; }
#section-3 .list-information label { color: #344a37 !important; }
#section-3 .list-information p,
#section-3 .list-information li { color: #191f1b !important; }
#section-3 .sidebar { background: var(--matt-charcoal) !important; }
#section-3 .sidebar .content h3,
#section-3 .sidebar .content p,
#section-3 .sidebar .content small { color:#f2f0e9 !important; }
#section-3 .sidebar .copyright-text { color:#c9d0c9 !important; }
#section-3 .sidebar .content h3 { border-color:#536452 !important; }
#section-8 { background: #eae8e4 !important; height: auto !important; min-height: 0 !important; }
#section-8 .matt-photo-spread {
 display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
 gap: 12px; padding: 28px max(24px,calc((100vw - 1350px)/2));
 max-width: 1600px; margin: 0 auto; align-items: center;
}
#section-8 .matt-portrait-frame { margin:0; min-width:0; overflow:hidden; display:flex; justify-content:center; align-items:center; }
#section-8 .matt-portrait-frame img {
 width: auto !important; max-width:100% !important; max-height: min(85vh,960px) !important;
 height: auto !important; object-fit:contain !important; display:block;
}
#section-18 {
 background: var(--matt-charcoal) !important; background-image: none !important;
 height:auto !important; min-height:0 !important; display:flex !important;
 align-items:center; justify-content:center; padding: 48px 20px;
}
#section-18 .matt-photo-break {
 display:block; width:min(65vw,630px) !important; max-width:calc(100vw - 48px) !important;
 height:auto !important; max-height:none !important; object-fit:contain !important;
}
#section-10, #section-11 { background: var(--matt-ivory) !important; }
#section-10 .section-logo span, #section-10 h1.swag-mobile-article-title { color: #1e3025 !important; }
#section-10 p.answer, #section-11 p.answer { color: #1b211d; }
#section-10 .feature-img,
#section-11 .feature-img { max-width:100% !important; margin:42px auto !important; }
#section-10 .cast-photo-break,
#section-11 .big-photo-break,
#section-11 .inline-vertical-poster {
 width:min(100%,600px) !important; left:auto !important;
 transform:none !important; position:relative !important;
}
#section-10 .feature-img img,
#section-11 .feature-img img {
 width:100% !important; max-width:100% !important; height:auto !important;
 object-fit:contain !important; display:block !important;
}
#section-10 .swag-pullquote .hero-text,
#section-11 .swag-pullquote .hero-text { color: var(--matt-olive) !important; }
#section-20 {
 background: var(--matt-charcoal) !important; min-height:0 !important;
 display:flex !important; justify-content:center; align-items:center;
 padding:65px 25px !important; height:auto !important;
}
#section-20 .matt-cover-frame { margin:0 auto; display:flex; align-items:center; justify-content:center; }
#section-20 .matt-cover-frame img {
 display:block !important; width:auto !important; height:auto !important;
 max-width:min(92vw,570px) !important; max-height: min(88vh,840px) !important;
 object-fit:contain !important;
}
#section-33.annual-digest-newspaper {
 background:#111a14 url(../images/annual-digest-newspaper-bg.jpg) no-repeat center center !important;
 background-size:cover !important;
}
#section-33 .content .link { color: #e2d0a5 !important; border-color: #bda876 !important; }
#section-38 { background: #eae8e2 !important; }
#section-38 hr.red { background:#8f2634 !important; border-color:#8f2634 !important; }
#section-38 .thankyou .content h2 { color:#27392b !important; }
@media only screen and (max-width:980px) {
 #section-8 .matt-photo-spread { display:grid; grid-template-columns:1fr; padding:16px; gap:16px; }
 #section-8 .matt-portrait-frame img { width:100% !important; max-height:none !important; }
 #section-18 { padding:20px 12px !important; }
 #section-18 .matt-photo-break { width:calc(100vw - 24px) !important; max-width:calc(100vw - 24px) !important; max-height:none !important; }
 #section-10 .feature-img, #section-11 .feature-img { width:100% !important; }
 #section-20 { padding:35px 16px !important; }
 #section-20 .matt-cover-frame img { max-width:100% !important; max-height:none !important; }
}

/* 2026-10-22 / Approved template preservation and five visual corrections only. */
/* White credits: original SWAGGER / John Cena two-column style, including type and spacing. */
#section-3.two-shage-bg { background:#ffffff !important; color:#1d1d1d !important; }
#section-3 .sidebar { background:#ffffff !important; color:#1d1d1d !important; }
#section-3 .bg-light-grey { background:#f7fafd !important; }
#section-3 .sidebar .content h3, #section-3 .sidebar .content p,
#section-3 .sidebar .content small { color:#23252a !important; }
#section-3 .sidebar .content h3 { border-color:#23252a !important; }
#section-3 .sidebar .copyright-text { color:#6c757d !important; }
#section-3 .list-information label { color:#222 !important; }
#section-3 .list-information li, #section-3 .list-information li p { color:#23252a !important; }
/* One original-aspect editorial portrait per panel. No new grids or double-photo montage. */
#section-8, #section-18, #section-20 {
  display:flex !important; align-items:center !important; justify-content:center !important;
  height:auto !important; min-height:0 !important;
  padding:40px 24px !important; overflow:hidden;
}
#section-8 { background:#ece9e4 !important; }
#section-18.creative-companies { background:#273d2e !important; background-image:none !important; }
#section-20.matt-photo-single { background:#1c241e !important; }
#section-8 .swag-editorial-image, #section-18 .swag-editorial-image,
#section-20 .swag-editorial-image { margin:0 auto !important; padding:0 !important; width:auto !important; max-width:100% !important; text-align:center; }
#section-8 .swag-editorial-image img, #section-18 .swag-editorial-image img,
#section-20 .swag-editorial-image img {
  width:auto !important; height:auto !important;
  max-width:min(100%, 940px) !important; max-height:88vh !important;
  object-fit:contain !important; display:block !important; margin:0 auto !important;
}
/* Closing slide can never repeat the cover as a full-section background. */
#section-33.annual-digest-newspaper {
  background:#1b2921 !important; background-image:none !important;
}
/* Official cover only once: within footer, image uses its original aspect ratio. */
#section-38 #section-39 { height:auto !important; min-height:0 !important; background:none !important; padding:16px 0 26px !important; }
#section-38 #section-39 img.swag-final-cover {
  display:block !important; width:auto !important; height:auto !important;
  max-width:min(100%, 400px) !important; max-height:540px !important;
  object-fit:contain !important; margin:0 !important;
}
#section-38 .thankyou .content-block { margin-top:0 !important; }
@media (max-width:980px) {
 #section-8,#section-18,#section-20 {padding:20px 12px !important;}
 #section-8 .swag-editorial-image img,#section-18 .swag-editorial-image img,#section-20 .swag-editorial-image img {
   max-width:calc(100vw - 24px) !important; max-height:80vh !important;
 }
 #section-38 #section-39 img.swag-final-cover { max-width:min(88vw,380px) !important; max-height:none !important; margin:0 auto !important; }
}


/* WIDE IMAGE SECTIONS — match SWAGGER's native full-width photographic panels.
   Dedicated 16:9 source crop on desktops, original portrait on mobile. */
#section-8.swag-wide-photo-panel,
#section-18.swag-wide-photo-panel,
#section-20.swag-wide-photo-panel {
  display:block !important; width:100% !important; max-width:none !important;
  min-height:0 !important; height:auto !important;
  margin:0 !important; padding:0 !important; overflow:hidden !important;
  background:transparent !important; background-image:none !important;
}
.swag-wide-photo-panel .swag-wide-figure,
.swag-wide-photo-panel .swag-wide-figure picture {
  display:block !important; width:100% !important; height:auto !important;
  margin:0 !important; padding:0 !important;
}
.swag-wide-photo-panel .swag-wide-figure img {
  display:block !important; width:100% !important; max-width:none !important;
  height:auto !important; max-height:none !important; margin:0 !important;
  object-fit:initial !important;
}
/* SWAGGER closing panel — preserves original caption/CTA and magazine look. */
#section-33.swag-closing-cover {
  display:block !important; background:#19161d !important; background-image:none !important;
  min-height:100vh !important; height:auto !important; overflow:hidden !important;
  color:#f6f3ef !important;
}
#section-33.swag-closing-cover > .section,
#section-33.swag-closing-cover .container-fluid {min-height:100vh !important; height:auto !important;}
#section-33.swag-closing-cover .row {
  display:flex !important; align-items:center !important; min-height:100vh !important;
}
#section-33.swag-closing-cover .box-content {
  display:block !important; height:auto !important; width:100% !important;
}
#section-33.swag-closing-cover .box-content .content {
  display:block !important; height:auto !important; max-width:440px;
  color:#f7f3ef !important;
}
#section-33.swag-closing-cover .swag-magazine-column {
  display:flex !important; align-items:center; justify-content:center;
  min-height:100vh; padding:38px 4% 38px 0;
}
#section-33.swag-closing-cover .swag-angled-magazine {
  display:block; width:auto; height:auto; max-height:79vh;
  max-width:min(100%, 610px); object-fit:contain;
  transform:perspective(1800px) rotateY(-7deg) rotateZ(4deg);
  transform-origin:center;
  box-shadow:17px 22px 22px rgba(0,0,0,.45);
}
#section-33.swag-closing-cover .box-content .content .link {
  color:#c84b54 !important; border-color:#c84b54 !important;
}
#section-33.swag-closing-cover .box-content .content .link:hover {
  background:#c84b54 !important; color:#fff !important;
}
@media(max-width:980px) {
  #section-33.swag-closing-cover > .section,
  #section-33.swag-closing-cover .container-fluid {min-height:0 !important;}
  #section-33.swag-closing-cover .row {
    display:flex !important; flex-direction:column !important;
    min-height:0 !important; padding:58px 14px 52px !important;
  }
  #section-33.swag-closing-cover .swag-closing-copy,
  #section-33.swag-closing-cover .swag-magazine-column {
    display:block !important; width:100% !important; flex:0 0 100% !important;
    max-width:100% !important; margin:0 !important; padding:0 !important;
  }
  #section-33.swag-closing-cover .box-content .content {max-width:100% !important;}
  #section-33.swag-closing-cover .swag-magazine-column {
    display:flex !important; justify-content:center !important; align-items:center !important;
    min-height:0 !important; padding:54px 8px 14px !important;
  }
  #section-33.swag-closing-cover .swag-angled-magazine {
    width:auto; height:auto; max-height:65vh !important; max-width:82vw !important;
    transform:perspective(1200px) rotateY(-5deg) rotateZ(4deg);
  }
}


/* FINAL EDITORIAL FINISH — 2026-10-22.
   Preserve photo layout, closing cover, and original branded typography.
   Reading sections in SWAGGER white, not shoot-colour ivory. */
#section-10,
#section-11 {
    background-color: #fff !important;
    background-image: none !important;
}
/* The 1st paragraph was inheriting sans serif outside .questions-section.
   Match SWAGGER's editorial copy family on both story panels. */
#section-10 p.answer,
#section-11 p.answer,
#section-11 .questions-section p.answer {
    font-family: "Noto Serif", Georgia, "Times New Roman", serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    margin: 0 0 1.75em !important;
    color: #232323 !important;
}
/* Make room between photo and article heading/copy without changing grid. */
#section-10 > .container-fluid {
    padding-top: 76px !important;
    padding-bottom: 56px !important;
}
#section-10 .section-logo {
    padding-top: 2px !important;
}
#section-10 .section-logo span {
    font-family: "Noto Serif", Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    line-height: 1.14 !important;
}
#section-10 .section-logo small {
    font-family: Roboto, Arial, sans-serif !important;
}
#section-11 > .container-fluid {
    padding-top: 50px !important;
    padding-bottom: 80px !important;
}
@media (max-width: 980px) {
    #section-10 > .container-fluid { padding-top: 36px !important; padding-bottom: 34px !important; }
    #section-11 > .container-fluid { padding-top: 24px !important; padding-bottom: 50px !important; }
    #section-10 p.answer, #section-11 p.answer, #section-11 .questions-section p.answer {
        font-size: 15px !important;
        line-height: 1.75 !important;
    }
    #section-10 h1.swag-mobile-article-title { margin-top: 0 !important; margin-bottom: 30px !important; }
}

/* The base template hides generic .show-mobile elements in story panels.
   Keep the actual story title legible on mobile rather than dropping straight
   into paragraph one after a photo. Desktop keeps its fixed left headline. */
@media (max-width: 980px) {
  #section-10 h1.swag-mobile-article-title.show-mobile {
    display: block !important;
    color: #1e3025 !important;
    font-family: "Noto Serif", Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    font-size: clamp(25px, 7vw, 33px) !important;
    line-height: 1.2 !important;
    letter-spacing: -.35px !important;
    margin: 0 0 30px !important;
  }
}