/* Press, About, Contact, News in the Nilu27 CI. Same tokens and type scale as /rnd/ (site.css). Generated pages: site_overrides/pages.py */
:root{--x-bg:#f7f5f6;--x-wh:#fff;--x-lg:#d7d5d6;--x-mg:#d1d1d1;--x-dg:#373737;--x-bk:#121212;--x-red:#ff1f20;--x-g:#5e5e5e;
  --x-pad:40px;--x-gap:16px;--x-sec:clamp(88px,13vh,160px);
  --x-h1:clamp(40px,5.2vw,84px);--x-h2:clamp(30px,3.2vw,48px);--x-h3:clamp(17px,1.35vw,22px);--x-lead:clamp(17px,1.35vw,21px);--x-body:16px;--x-small:13px;--x-label:13px}
@media(max-width:820px){:root{--x-pad:20px;--x-gap:10px}}
@media(max-width:600px){:root{--x-body:15px}}
body.n27x-page{background:var(--x-bg)}
.brand{text-transform:none!important}

/* ---- shared module ---- */
.n27x{color:#000;font-family:"ForzaBook",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.n27x *{box-sizing:border-box}
.n27x a{color:inherit;text-decoration:none}
/* the live stylesheet sets a font on every element; children of headings and labels follow their parent */
.n27x h1 *,.n27x h2 *,.n27x h3 *,.n27x .lbl *,.n27x .x-t *,.n27x dd *,.n27x dt *{font-family:inherit!important;letter-spacing:inherit}
.n27x img,.n27x video{display:block;max-width:100%}
.n27x .w{max-width:1440px;margin:0 auto;padding:0 var(--x-pad)}
.n27x .g{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));column-gap:var(--x-gap)}
.n27x h1,.n27x h2,.n27x h3{font-family:"ForzaBold",Arial,sans-serif;font-weight:400;color:var(--x-bk);margin:0}
.n27x h1{font-size:var(--x-h1);line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
.n27x h2{font-size:var(--x-h2);line-height:.9;letter-spacing:-.025em}
.n27x h3{font-size:var(--x-h3);line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
.n27x p{font-size:var(--x-body);line-height:1.35;letter-spacing:-.01em;margin:0}
.n27x p+p{margin-top:16px}
.n27x .lbl{font-family:"ForzaMedium",Arial,sans-serif!important;font-size:var(--x-label);line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;margin:0 0 18px}
.n27x .g5{color:var(--x-g)}
.n27x .g6{color:var(--x-g)}
.n27x figure{margin:0;position:relative;overflow:hidden;background:#e9e7e8}
.n27x figure img{width:100%;height:100%;object-fit:cover}
.n27x .r43{aspect-ratio:4/3}.n27x .r45{aspect-ratio:4/5}
.n27x .x-more a,.n27x .x-back a{font-family:"ForzaMedium",Arial,sans-serif;font-size:var(--x-label);text-transform:uppercase;letter-spacing:-.01em;box-shadow:inset 0 -1px 0 currentColor;transition:color .2s}
.n27x .x-more a:hover,.n27x .x-back a:hover,.n27x h2 a:hover{color:var(--x-red)}
.n27x .x-btn{display:inline-block;padding:14px 26px;border:1px solid currentColor;font-family:"ForzaMedium",Arial,sans-serif;font-size:var(--x-label);text-transform:uppercase;transition:all .2s}
.n27x .x-btn:hover{background:var(--x-red);border-color:var(--x-red);color:#fff}

/* page top: label + title left, lead right, same rhythm as /rnd/ */
.n27x .x-top{padding:clamp(170px,22vh,240px) 0 var(--x-sec)}
.n27x .x-top .g{align-items:end}
.n27x .x-h{grid-column:1/8}
.n27x .x-lead{grid-column:11/21;font-size:var(--x-lead)!important;line-height:1.25!important;letter-spacing:-.02em!important}
.n27x .x-big{grid-column:7/21;font-family:"ForzaMedium",Arial,sans-serif!important;font-size:clamp(20px,1.9vw,28px)!important;line-height:1.2!important;letter-spacing:-.02em!important;text-transform:uppercase}
.n27x .x-sec{padding:var(--x-sec) 0;border-top:1px solid var(--x-lg)}
.n27x .x-sec .g{align-items:start}
.n27x .x-sec .x-h{grid-column:1/6}
.n27x .x-sec .x-h h2{margin-top:0}
.n27x .x-two{grid-column:7/21;display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--x-gap)*2 + 3%);row-gap:16px}
.n27x .x-two p+p{margin-top:0}
.n27x .x-top .x-big{align-self:start}
.x-about-pg .n27x .x-top .g{align-items:start}

/* ---- Press list ---- */
.n27x .x-list{padding:0 0 var(--x-sec)}
.n27x .x-row{padding:40px 0;border-top:1px solid var(--x-lg);align-items:start}
.n27x .x-row:last-child{border-bottom:1px solid var(--x-lg)}
.n27x .x-row .x-fig{grid-column:1/9}
.n27x .x-row .x-fig img{transition:transform 1.2s cubic-bezier(.16,.84,.24,1)}
.n27x .x-row .x-fig:hover img{transform:scale(1.03)}
.n27x .x-row .x-txt{grid-column:11/21;display:flex;flex-direction:column;min-height:100%}
.n27x .x-row h2{margin-bottom:24px}
.n27x .x-row .x-sub{color:var(--x-dg);max-width:640px}
.n27x .x-row .x-more{margin-top:auto;padding-top:32px}

/* media band */
.n27x .x-media{background:var(--x-bk);color:#fff;padding:var(--x-sec) 0}
.n27x .x-media h2{color:#fff;margin-bottom:24px}
.n27x .x-media .g6{color:rgba(255,255,255,.6)}
.n27x .x-media .x-mh{grid-column:1/8}
.n27x .x-media .x-kit{margin-top:28px}
.n27x .x-media .x-assets{grid-column:9/15;list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.3)}
.n27x .x-media .x-assets li{border-bottom:1px solid rgba(255,255,255,.14)}
.n27x .x-media .x-assets a{display:block;padding:18px 28px 18px 0;position:relative;transition:color .2s}
.n27x .x-media .x-assets a::after{content:'\2197';position:absolute;right:0;top:18px;font-family:"ForzaMedium",Arial,sans-serif}
.n27x .x-media .x-assets a:hover{color:var(--x-red)}
.n27x .x-media .x-assets .lbl{display:block;margin:0 0 8px;color:rgba(255,255,255,.55)}
.n27x .x-media .x-mt{display:block;font-family:"ForzaBold",Arial,sans-serif;font-size:var(--x-h3);line-height:1.05;letter-spacing:-.02em}
.n27x .x-media .x-cts{grid-column:16/21}
.n27x .x-ct+.x-ct{margin-top:32px}
.n27x .x-ct .lbl{color:var(--x-g)}
.n27x .x-media .x-ct .lbl{color:rgba(255,255,255,.55)}
.n27x .x-ct a{box-shadow:inset 0 -1px 0 currentColor}
.n27x .x-ct a:hover{color:var(--x-red)}

/* ---- Release page ---- */
.n27x .x-art{padding:clamp(170px,22vh,240px) 0 var(--x-sec)}
.n27x .x-art .g{row-gap:0}
.n27x .x-meta{grid-column:1/5;grid-row:1/3}
.n27x .x-meta .lbl{margin-bottom:8px}
.n27x .x-meta .x-back{margin-top:28px}
.n27x .x-col{grid-column:7/19}
.n27x .x-t{font-size:clamp(32px,3.6vw,56px)!important;line-height:.92!important;letter-spacing:-.03em!important;text-transform:none!important}
.n27x .x-art .x-sub{font-size:var(--x-lead)!important;line-height:1.25!important;letter-spacing:-.02em!important;color:var(--x-dg);margin-top:28px}
.n27x .x-wide{grid-column:1/21;margin:clamp(56px,8vh,96px) 0}
.n27x .x-hero{aspect-ratio:16/9;background:#000}
.n27x .x-hero video,.n27x .x-hero img{width:100%;height:100%;object-fit:cover}
.n27x .x-credit{font-size:12px!important;color:var(--x-g);margin-top:10px!important;text-align:right}
.n27x .x-body p{font-size:var(--x-body);line-height:1.45;color:#000}
.n27x .x-body h3{margin:56px 0 20px}
.n27x .x-dateline{font-family:"ForzaMedium",Arial,sans-serif!important;font-size:var(--x-label)!important;text-transform:uppercase;color:var(--x-g);margin-bottom:24px!important}
.n27x .x-dl{margin:28px 0 0;border-top:1px solid #000}
.n27x .x-dl>div{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--x-lg)}
.n27x .x-dl dt{font-family:"ForzaMedium",Arial,sans-serif;font-size:var(--x-label);text-transform:uppercase;color:var(--x-g)}
.n27x .x-dl dd{margin:0;font-family:"ForzaBold",Arial,sans-serif;font-size:16px;letter-spacing:-.01em}
.n27x .x-note{margin-top:56px;padding:28px 0 0;border-top:1px solid var(--x-lg)}
.n27x .x-note a{color:var(--x-red);box-shadow:inset 0 -1px 0 currentColor}
.n27x .x-note .g6{font-size:14px;margin-top:8px}
.n27x .x-art .x-cts{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-top:28px;border-top:1px solid var(--x-lg)}
.n27x .x-art .x-ct+.x-ct{margin-top:0}
.n27x .x-art .x-ct p{font-size:var(--x-body)}
.n27x .x-about{margin-top:40px;padding-top:28px;border-top:1px solid var(--x-lg)}
.n27x .x-about p:not(.lbl){font-size:var(--x-body);color:var(--x-dg)}
.n27x .x-other{margin-top:72px;padding-top:28px;border-top:1px solid #000}
.n27x .x-other .x-more a{font-family:"ForzaBold",Arial,sans-serif;font-size:var(--x-h3);text-transform:none;line-height:1.1;box-shadow:none}

/* ---- About ---- */
.n27x .x-name .x-team{grid-column:1/11}
.n27x .x-name .x-team img{height:auto}
.n27x .x-nametxt{grid-column:12/21;display:flex;flex-direction:column;gap:56px}
.n27x .x-nametxt h3{margin-bottom:20px}
.n27x .x-people{grid-column:7/21;display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--x-gap)*2 + 3%);row-gap:56px}
.n27x .x-person figure{margin-bottom:28px;background:#121212}
.n27x .x-person figure img{filter:grayscale(1)}
.n27x .x-person h3{margin-bottom:8px}
.n27x .x-person .lbl{margin-bottom:22px}
.n27x .x-bio p{color:#000}
.n27x .x-noimg .x-person{padding-top:24px;border-top:1px solid #000}
.n27x .x-lahr a{box-shadow:inset 0 -1px 0 currentColor}
.n27x .x-lahr a:hover{color:var(--x-red)}

/* ---- responsive ---- */
@media(max-width:1023px){
  .n27x .x-h,.n27x .x-sec .x-h{grid-column:1/-1;margin-bottom:28px}
  .n27x .x-lead,.n27x .x-big,.n27x .x-two,.n27x .x-people{grid-column:1/-1}
  .n27x .x-row .x-fig{grid-column:1/10}.n27x .x-row .x-txt{grid-column:11/21}
  .n27x .x-media .x-mh{grid-column:1/-1;margin-bottom:40px}.n27x .x-media .x-assets{grid-column:1/12}.n27x .x-media .x-cts{grid-column:14/21}
  .n27x .x-meta{grid-column:1/-1;grid-row:auto;display:flex;gap:20px;align-items:baseline;margin-bottom:32px}.n27x .x-meta .x-back{margin:0 0 0 auto}
  .n27x .x-col{grid-column:1/-1}
  .n27x .x-name .x-team,.n27x .x-nametxt{grid-column:1/-1}.n27x .x-nametxt{margin-top:48px}
}
@media(max-width:767px){
  .n27x .x-top{padding:130px 0 72px}.n27x .x-art{padding:130px 0 80px}
  .n27x .x-two,.n27x .x-people,.n27x .x-art .x-cts{grid-template-columns:1fr}
  .n27x .x-row .x-fig,.n27x .x-row .x-txt{grid-column:1/-1}.n27x .x-row .x-txt{margin-top:24px}
  .n27x .x-media .x-assets,.n27x .x-media .x-cts{grid-column:1/-1}.n27x .x-media .x-cts{margin-top:48px}
  .n27x .x-body p{font-size:16px}
  .n27x .x-dl>div{grid-template-columns:120px 1fr;gap:12px}
  .n27x .x-meta{flex-wrap:wrap}
}

/* ===== CI pass on the live Contact and News markup ===== */
.x-contact .title_section h2,.x-news .section_news .title_container h2,.x-news .section_news .title_container h1{font-family:"ForzaBold",Arial,sans-serif!important;color:var(--x-bk)!important;letter-spacing:-.03em!important;line-height:.86!important}
.x-contact .title_section h2{font-size:var(--x-h1)!important;text-transform:uppercase}
.x-contact .form{background:transparent!important;border-color:var(--x-lg)!important}
.x-contact .form>div{background:var(--x-wh)!important;border-color:var(--x-lg)!important}
.x-contact .form .title span{font-family:"ForzaMedium",Arial,sans-serif!important;color:var(--x-red)!important}
.x-contact .form .title p{font-family:"ForzaMedium",Arial,sans-serif!important;color:var(--x-bk)!important;letter-spacing:-.01em}
.x-contact .form .info p{color:#000!important;letter-spacing:-.01em!important;font-family:"ForzaBook",Arial,sans-serif!important;font-size:16px!important;line-height:1.35!important;text-transform:none!important}
.x-contact .form a.brand,.x-contact .info a{color:var(--x-red)!important;text-transform:none!important;text-decoration:none!important}
.x-contact input,.x-contact textarea{border-color:var(--x-lg)!important;border-radius:0!important;background:transparent!important;color:#000!important}
.x-contact input:focus,.x-contact textarea:focus{border-color:#000!important;outline:none}
.x-contact label{font-family:"ForzaMedium",Arial,sans-serif!important;color:var(--x-g)!important;font-size:13px!important}
.x-contact .contact_btn,.x-contact .position,.x-contact .pressKitLink{display:inline-block;padding:12px 22px!important;border:1px solid #000!important;border-radius:0!important;background:transparent!important;color:#000!important;font-family:"ForzaMedium",Arial,sans-serif!important;font-size:var(--x-label)!important;text-transform:uppercase;letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:all .2s}
.x-contact .contact_btn:hover,.x-contact .pressKitLink:hover{background:var(--x-red)!important;border-color:var(--x-red)!important;color:#fff!important}
.x-contact .position{border-color:var(--x-lg)!important;color:var(--x-g)!important;cursor:default}
.x-contact .contact_btn,.x-contact .position,.x-contact .pressKitLink{width:auto!important;height:auto!important;white-space:nowrap;line-height:1.1!important}
.x-contact .error-message{color:var(--x-red)!important}

.x-news .section_news .title_container *{color:var(--x-bk)!important}
.x-news .section_news .title_container>*:first-child{color:var(--x-g)!important}
.x-news .news_container h4,.x-news .news_container h4 a{font-family:"ForzaBold",Arial,sans-serif!important;color:var(--x-bk)!important;letter-spacing:-.02em!important;text-decoration:none}
.x-news .news_container h4 a:hover{color:var(--x-red)!important}
.x-news .title_and_date_box p{font-family:"ForzaMedium",Arial,sans-serif!important;color:var(--x-g)!important}
.x-news .news_text_box p{color:var(--x-dg)!important}
.x-news .read_more_box a{font-family:"ForzaMedium",Arial,sans-serif;color:#000;text-decoration:none}
.x-news .read_more_box a:hover{color:var(--x-red)}
.x-news .div_line,.x-news .news_container{border-color:var(--x-lg)!important}
.x-news .div_line{background:var(--x-lg)!important}

/* news story pages: same type as release pages */
.x-story .section_story{padding:clamp(170px,22vh,240px) 0 var(--x-sec)}
.x-story .section_story h1{font-size:clamp(32px,3.6vw,56px)!important;line-height:.92!important;letter-spacing:-.03em!important;text-transform:none!important;color:var(--x-bk)}
.x-story .section_story .story_date{font-family:"ForzaMedium",Arial,sans-serif!important;text-transform:uppercase;font-size:var(--x-label)!important}
.x-story .section_story .story_back a{font-family:"ForzaMedium",Arial,sans-serif;color:#000;box-shadow:inset 0 -1px 0 currentColor}
.x-story .section_story .story_back a:hover{color:var(--x-red)}
@media(max-width:767px){.x-story .section_story{padding:130px 0 80px}}
/* Contact: two boxes now that careers is gone */
@media(min-width:768px){
  .x-contact .form_section .form{display:flex!important;width:100%!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box}
  .x-contact .form_section .form>.press{display:flex!important;flex-direction:column!important}
  .x-contact .form_section .form>.press form{margin-top:auto!important}
  .x-contact .form_section .form>.contact{flex:1 1 0;width:auto!important}
  .x-contact .form_section .form>.press{flex:0 0 36%;width:auto!important}
  .x-contact .form_section .press .info{width:auto!important;max-width:340px}
  .x-contact .form_section .contact form,.x-contact .form_section .contact .info{width:100%!important}
  .x-contact .first_input_block{display:flex!important;gap:16px;width:100%!important}
  .x-contact .first_input_block .input_container{flex:1 1 0;width:auto!important}
}

/* 13 Oct: Message is a real multi-line field. Label sits above it, starts at four lines, grows with the text (contact.js). */
html body .x-contact .form_section .contact form .messin,html body .form_section .contact form .messin{display:block;width:100%!important;height:auto;min-height:7.5em;padding:10px 0 12px 0!important;line-height:1.45!important;resize:none;overflow:hidden;box-sizing:border-box}
html body .form_section .contact form label.mess{position:static!important;display:block;margin:6px 0 2px 0}
/* phones: 16 px in every field so iOS does not zoom the page on tap */
@media(max-width:767px){html body .form_section .contact form input,html body .form_section .contact form textarea{font-size:16px!important}}

/* 13 Oct: one button style site-wide. Bottom-left corner chamfered at 45 degrees with the diagonal edge drawn in, same as /rnd/ (.btn) */
:root{--ch:11px}
html .x-contact .contact_btn,html .x-contact .pressKitLink,html .n27x .x-btn{position:relative!important;border-radius:0!important;clip-path:polygon(0 0,100% 0,100% 100%,var(--ch) 100%,0 calc(100% - var(--ch)))}
html .x-contact .contact_btn::after,html .x-contact .pressKitLink::after,html .n27x .x-btn::after{content:'';position:absolute;left:-1px;top:calc(100% + 1px - var(--ch));width:calc(var(--ch) * 1.4142);height:2px;margin-top:-1px;background:currentColor;transform-origin:0 50%;transform:rotate(45deg);pointer-events:none}
html .x-contact .contact_btn:hover::after,html .x-contact .pressKitLink:hover::after,html .n27x .x-btn:hover::after{background:var(--x-red)}

/* 22 Oct: page header blurbs sit on the right margin on desktop, so they hold the same edge on every page */
@media(min-width:1024px){html body .n27x .x-top .x-lead{text-align:right}}

/* 22 Oct go-live: family photo from the 2576px original, square, uncropped, one file set for every width */
.n27x .x-name .x-team img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}