/* 716 Spotlight - the homepage look for the older pages (Rich, 2026-10-14).
   Loaded LAST on about, stories (blog, business-stories, each story) and advertise, after
   styles.css and each page's own <style>, and scoped to body.look so no other page changes.
   Same menu bar, type, hero ground and footer as the homepage and the calendar. Copy and
   layout are the pages' own; this only restyles them. */

/* ---- type and ground ---- */
body.look{background:#F5F7FA;color:#0B1426;font-family:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif}
.look *{font-family:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif!important}
.look h1,.look h2,.look h3{text-wrap:balance}
.look a:focus-visible,.look button:focus-visible,.look input:focus-visible,.look select:focus-visible{outline:3px solid #2A4A8A;outline-offset:3px}
.look .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- menu bar: the homepage's, verbatim ---- */
.look header.top{position:static;background:#000814;border-bottom:1px solid #0F1E40;z-index:auto}
.look .top .wrap{max-width:1240px;margin:0 auto;padding:14px clamp(16px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 32px}
.look .top .brand{display:flex;align-items:center;text-decoration:none;padding:6px 0}
.look .top .mainnav{display:flex;align-items:center;gap:4px 28px;font-size:15px;font-weight:600}
.look .top .mainnav a{color:#E8ECF4;text-decoration:none;padding:12px 0;white-space:nowrap;border-radius:0;background:none;font-size:15px;font-weight:600}
.look .top .mainnav a:hover{color:#F5D33B;background:none}
.look .top .mainnav a[aria-current="page"]{color:#F5D33B}
.look .top .mainnav a.biz{color:#F5D33B;padding:10px 18px;border:1.5px solid #F5D33B;border-radius:999px}
.look .top .mainnav a.biz[aria-current="page"]{color:#001030;background:#F5D33B}
.look .menu-btn{display:none}
@media (max-width:760px){
  .look .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer}
  .look .menu-btn span{display:block;width:24px;height:2px;margin:0 auto;border-radius:2px;background:#fff}
  .look .top .mainnav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 10px}
  .look .top .mainnav.open{display:flex}
  .look .top .mainnav a{padding:13px 4px;border-top:1px solid #0F1E40;font-size:16px}
  .look .top .mainnav a.biz{margin-top:10px;text-align:center;border:1.5px solid #F5D33B;border-radius:999px}
}
/* the old drawer and the phone tab bar give way to the menu above */
.look .mobile-nav,.look .mobile-nav-overlay,.look .bottom-nav,.look .mobile-menu-toggle{display:none!important}
@media (max-width:768px){body.look{padding-bottom:0}}

/* ---- heroes: the homepage ground (navy, gold glow from below), no gold rule ---- */
.look .page-hero,.look .blog-hero,.look .post-hero,.look .adv-hero{
  background:radial-gradient(ellipse 60% 100% at 50% 100%,rgba(245,211,59,.20),rgba(245,211,59,0) 72%),linear-gradient(180deg,#000814 0%,#001030 58%,#0B2556 100%);
  border-bottom:0;color:#fff}
.look .page-hero,.look .blog-hero{padding:clamp(48px,7vw,88px) clamp(16px,4vw,48px) clamp(44px,6vw,76px)}
.look .page-hero h1,.look .blog-hero h1,.look .post-hero h1,.look .adv-hero h1{font-weight:900;letter-spacing:-.035em;line-height:1.08;color:#fff}
.look .page-hero h1,.look .blog-hero h1{font-size:clamp(34px,5.2vw,64px);max-width:20ch;margin-left:auto;margin-right:auto}
.look .page-hero h1 span,.look .blog-hero h1 span,.look .adv-hero h1 em{color:#F5D33B}
.look .page-hero p,.look .blog-hero p{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:#C9D1E2;max-width:56ch;margin-top:14px}
.look .post-hero{padding:clamp(40px,6vw,72px) clamp(16px,4vw,48px) clamp(56px,7vw,88px)}
.look .post-hero h1{font-size:clamp(30px,4.2vw,50px)}
.look .post-back-link{color:#C9D1E2;font-weight:600}
.look .post-back-link:hover{color:#F5D33B}
.look .post-meta{color:#9FAAC2;font-size:15px}
.look .adv-hero h1{font-size:clamp(32px,5vw,60px)}

/* ---- cards: white, flat, one hairline - the homepage's .box, not a floating shadow ---- */
.look .about-facts,.look .about-story,.look .post-content,.look .featured-card,.look .story-card,
.look .comment-item,.look .no-comments,.look .comment-form-wrapper{
  background:#fff;border:1px solid #E1E5EE;border-radius:12px;box-shadow:none}
.look .story-card:hover,.look .featured-card:hover{transform:none;box-shadow:0 10px 30px rgba(0,16,48,.10);border-color:#C9D1E2}
.look .about-facts h2,.look .about-story h2,.look .featured-body h2,.look .story-card h3,.look .post-content h2,.look .post-content h3{color:#001030;font-weight:800;letter-spacing:-.02em}
.look .about-facts dt{color:#001030}
.look .about-facts dd a,.look .about-story a,.look .post-content a,.look .bs-intro a{color:#001030;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.look .about-story p,.look .post-content p,.look .post-content li{color:#26324D}
.look .about-story h2{border-top-color:#F5D33B}
.look .about-pullquote{border-left-color:#F5D33B;background:#FFF8D6}

/* ---- the stories list on the light ground ---- */
.look .filter-bar{background:#fff;border-bottom:1px solid #E1E5EE}
.look .filter-tab{color:#4A5672}
.look .filter-tab:hover{color:#001030}
.look .filter-tab.active{color:#001030;border-bottom-color:#F5D33B}
.look .filter-tab .tab-count{background:#E7EBF2;color:#33405C}
.look .filter-tab.active .tab-count{background:#F5D33B;color:#001030}
.look .featured-wrap,.look .stories-section{background:transparent}
.look .featured-label{color:#4A5672}
.look .featured-read,.look .story-card-read{color:#001030}
.look .story-card-cat,.look .story-card-date,.look .featured-date{color:#5A6680}
.look .story-card-excerpt,.look .featured-excerpt{color:#33405C}
.look .tag-latest{background:#F5D33B}
.look .bs-intro{background:transparent}
.look .bs-intro p{color:#26324D}

/* ---- a story page ---- */
.look .post-wrap{background:transparent}
.look .post-content{box-shadow:none}
.look .comments-section h2{color:#001030}
.look .post-newsletter-cta{border-color:#D5DBE6;background:#fff}
.look .post-newsletter-cta h3{color:#001030}
.look .post-newsletter-cta p{color:#4A5672}
.look .post-newsletter-cta form input{background:#fff;border-color:#C9D1E2;color:#0B1426}
.look .post-newsletter-cta form input::placeholder{color:#7A859C}
.look .post-newsletter-cta .footer-newsletter-status{color:#001030}
.look .post-newsletter-cta .footer-newsletter-status.success{color:#1C7C3E}
.look .post-newsletter-cta .footer-newsletter-status.error{color:#B42318}

/* ---- navy bands stay navy (the homepage has them too); gold matches the homepage ---- */
.look .cta-section,.look .newsletter-section{background:#001030}
.look .about-what-we-do{background:#001030}
.look .cta-section h2,.look .newsletter-section h2,.look .about-what-we-do h2{font-weight:800;letter-spacing:-.025em}
.look .cta-button,.look .btn-show-more{border-radius:8px;font-weight:700}
.look .cta-button{background:#F5D33B;color:#001030}
.look .cta-button:hover{background:#FFE066;transform:none}

/* ---- the postcard page: its own sections, homepage type ---- */
.look .adv-h2{font-weight:800;letter-spacing:-.025em;color:#001030}
.look .adv-h2 em{color:#001030;background:linear-gradient(transparent 62%,#F5D33B 62%)}
.look .adv-eyebrow{font-weight:700;letter-spacing:.14em;color:#8A6D00}
.look .adv-eyebrow.on-dark{color:#F5D33B}
.look .adv-hero-label{color:#F5D33B;font-weight:700;letter-spacing:.14em}

/* ---- footer: light, like the homepage's ---- */
.look footer#sharedFooter{background:#fff;color:#4A5672;border-top:1px solid #E1E5EE}
.look .footer-newsletter{border-bottom-color:#E1E5EE}
.look .footer-newsletter h4,.look .footer-section h4{color:#001030;font-weight:800}
.look .footer-newsletter-form input{background:#F5F7FA;border-color:#C9D1E2;color:#0B1426}
.look .footer-newsletter-form input::placeholder{color:#7A859C}
.look .footer-newsletter-form button{background:#F5D33B}
.look .footer-newsletter-form button:hover{background:#FFE066}
.look .footer-newsletter-status.success{color:#1C7C3E}
.look .footer-newsletter-status.error{color:#B42318}
.look .footer-section a,.look .footer-contact a{color:#33405C}
.look .footer-section a:hover,.look .footer-contact a:hover,.look .footer-bottom a:hover{color:#001030;text-decoration:underline}
.look .footer-contact span{color:#4A5672}
.look .footer-social a{background:#E7EBF2;color:#001030}
.look .footer-social a:hover{background:#F5D33B}
.look .footer-bottom{border-top-color:#E1E5EE;color:#5A6680}
.look .footer-bottom a{color:#4A5672}
.look .logo-716{color:#001030}
.look .back-to-top{background:#001030;color:#fff}

/* story page: cover and story box share one 740px column; full-bleed box on phones */
.look .post-cover{max-width:calc(740px + 3rem);padding:0 1.5rem}
.look .post-cover img{box-shadow:0 10px 30px rgba(0,16,48,.18)}
.look .post-content h2,.look .post-content h3{line-height:1.25}
.look .post-content>:first-child{margin-top:0}
@media (max-width:640px){.look .post-wrap{padding-left:0;padding-right:0}.look .post-content{border-left:0;border-right:0;border-radius:0}}

/* ---- added 2026-10-14 for contact, directory, coverage, websites ---- */
/* pages whose own CSS styles a bare <header> (coverage): keep the homepage bar intact */
.look header.top{padding:0;display:block;gap:0;color:inherit}
/* Where We Mail: menu bar, a slim title strip, then the map fills the rest of the window */
.look .cov-title{background:radial-gradient(ellipse 60% 140% at 50% 100%,rgba(245,211,59,.16),rgba(245,211,59,0) 72%),linear-gradient(180deg,#001030 0%,#0B2556 100%);color:#fff;padding:14px clamp(16px,4vw,48px);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px}
.look .cov-title h1{margin:0;font-size:clamp(20px,2vw,26px);font-weight:900;letter-spacing:-.025em}
.look .cov-title h1 span{color:#F5D33B}
.look .cov-title .cov-strap{margin:0;color:#C9D1E2;opacity:1}
@media (min-width:769px){
  body.look.cov{height:100vh;display:flex;flex-direction:column;overflow:hidden}
  .look.cov .cov-wrap{flex:1;height:auto;min-height:0}
}
.look .cov-btn{background:#001030;color:#F5D33B;border-radius:8px}
/* Websites: the homepage hero ground and heading weight; the page's own layout otherwise */
body.look.web{--accent:#F5D33B}
.look.web .hero{background:radial-gradient(ellipse 60% 100% at 50% 100%,rgba(245,211,59,.20),rgba(245,211,59,0) 72%),linear-gradient(180deg,#000814 0%,#001030 58%,#0B2556 100%);border-bottom:0}
.look.web .hero::before{display:none}
.look.web .hero-headline,.look.web .final-headline,.look.web .section-headline{font-weight:900;letter-spacing:-.035em}
/* Contact: the form sits on the light page like every other box */
.look .featured-section{background:transparent}
.look .form-card{border:1px solid #E1E5EE;border-radius:12px;box-shadow:none}
/* Where We Mail on phones: the map's flex:1 collapsed it to zero height under the route list
   (live since before 2026-10-14). Give it its own height. */
@media (max-width:768px){.look.cov #covMap{flex:none;height:65vh;min-height:360px}}
/* Websites: demo cards in centred rows, so one card (or two) sits in the middle, not in the
   left column of a 3-column grid (Rich, 2026-10-14). Same widths as the old 1/2/3 columns. */
.look.web .demos-grid{display:flex;flex-wrap:wrap;justify-content:center}
.look.web .demos-grid>*{flex:0 0 100%}
@media (min-width:640px){.look.web .demos-grid>.demo-card{flex-basis:calc((100% - 20px)/2)}}
@media (min-width:960px){.look.web .demos-grid>.demo-card{flex-basis:calc((100% - 40px)/3)}}
/* Phones: the logo bar stays at the top while the page scrolls, as on the homepage (Rich, 2026-10-14) */
@media (max-width:760px){
  body.look header.top{position:sticky;top:0;z-index:60;box-shadow:0 2px 14px rgba(0,8,20,.45)}
  .look .top .mainnav.open{max-height:calc(100vh - 96px);overflow-y:auto}
  .look [id]{scroll-margin-top:96px}
}